-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🪟 🎨 Redesign Sign-in/up pages (#14103)
* convert styled components in Auth component to scss * move GitBlock to separate component to the left side * fix color variables * replace styled component FormTitle with scss modules * create new PersonQuoteCover component * update styles for LogIn button * update login title * remove Airbyte logo from auth page * update related components after changes in FormTitle component * increase size of "forgot password" text * add cart.com company logo * add all necessary elements and styles * polished css for PersonQuoteCover component * completed PersonQuoteCover component and moved to separate folder * move FormTitle to separate folder * move GitBlock to separate folder * add tests for PersonQuoteCover component * update Header component: - remove "Back" button - replace styled components with css * leave comment for News component * update GitBlock component: - extend to support props - add tests * update GitBlock css classes order * update SpecialBlock component * update SignupPage with optional props * set full width for Sign Up button * replace News with PersonQuoteCover component * Update airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/index.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * move testimonials photo and logo to separate folder * update tests * Fixes after comments to PR: - fixed not grayed image in Firefox - update test snapshots * remove alt text on company logo * remove all conditionally rendered text (preparation for LaunchDarkly) * update tests * simplify implementation of title style * Update quote company logo testid * Move emoji from css to en file in signup specialblock component * Update accept email invite heading and button to match styles Add status message to signup page Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Co-authored-by: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
- Loading branch information
1 parent
92b2d9c
commit 428e482
Showing
37 changed files
with
837 additions
and
273 deletions.
There are no files selected for viewing
44 changes: 44 additions & 0 deletions
44
airbyte-webapp/public/images/testimonials/cartdotcom-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
airbyte-webapp/src/packages/cloud/views/auth/Auth.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
@use "../../../../scss/colors"; | ||
|
||
.container { | ||
width: 100%; | ||
background: colors.$white; | ||
display: grid; | ||
height: 100%; | ||
grid-template-columns: minmax(max-content, 50%) minmax(500px, 50%); | ||
} | ||
|
||
.leftSide { | ||
flex: 1 0 0; | ||
padding: 20px 36px 39px 46px; | ||
height: 100%; | ||
} | ||
|
||
.rightSide { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
.logInBtn { | ||
width: 90px; | ||
height: 44px; | ||
font-weight: 600 !important; // FIXME: solve style order issue | ||
font-size: 16px !important; // FIXME: solve style order issue | ||
line-height: 19px; | ||
} | ||
|
||
.forgotPassword { | ||
font-size: 12px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
@use "../../../../../scss/colors"; | ||
|
||
.title { | ||
font-weight: 700; | ||
font-size: 32px; | ||
line-height: 39px; | ||
width: 250px; | ||
color: colors.$dark-blue-900; | ||
} | ||
|
||
.highlight { | ||
color: colors.$blue-400; | ||
} |
23 changes: 18 additions & 5 deletions
23
airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
@use "../../../../../../scss/colors"; | ||
@use "../../../../../../scss/variables"; | ||
|
||
.signUpButton { | ||
width: 100% !important; | ||
font-weight: 600 !important; | ||
font-size: 16px !important; | ||
line-height: 19px !important; | ||
height: 44px !important; | ||
} | ||
|
||
.statusMessage { | ||
margin-top: variables.$spacing-md; | ||
color: colors.$red; | ||
} |
Oops, something went wrong.