🪟 🎨 Design fixes of the authentication page #16328
Conversation
github-actions
bot
added
area/platform
| flex-direction: column; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| display: none; |
There was a problem hiding this comment.
ℹ️ By default now hide the right side on small screens.
| .container { | ||
| flex-direction: row; | ||
| height: 100%; |
There was a problem hiding this comment.
ℹ️ Moving those out of the media query was large part of the fix to get rid of the squishing behavior.
| .container { | ||
| flex-direction: row; | ||
| height: 100%; | ||
| @media (min-width: 992px) { |
There was a problem hiding this comment.
ℹ️ I removed the height requirement, so make sure we're only using width, since I believe we still want to build responsive breakpoints on those width purely.
There was a problem hiding this comment.
Do we want to set some breakpoints in _variables?
There was a problem hiding this comment.
Yes I do think we want so, but not as part of this PR. We should properly define and work with Nico on our responsive breakpoints, so this should be part of a separate PR with component. https://github.com/airbytehq/airbyte/issues/16357
| @@ -45,6 +45,7 @@ | |||
| .github { | |||
| background: #333; | |||
| color: colors.$white; | |||
| border: none; | |||
There was a problem hiding this comment.
ℹ️ Get rid of the border of the OAuth buttons being dependent on CSS rule ordering.
| display: flex; | ||
| flex: 1 0 auto; |
There was a problem hiding this comment.
ℹ️ This is the other part of making sure the primary area of the left side in the auth forms is actually scaling to all the place it can have, now using flexbox instead of some height calculation (that wasn't accurate).
| @@ -7,12 +8,12 @@ | |||
|
|
|||
| .link { | |||
| text-decoration: none; | |||
| margin-top: variables.$spacing-2xl; | |||
There was a problem hiding this comment.
ℹ️ Add a bit more spacing above the GitHub button, and use the variable for it.
|
|
||
| .links { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-end; | ||
| margin-bottom: variables.$spacing-xl; |
There was a problem hiding this comment.
ℹ️ Give the top button (switch between login/signup) some padding to the bottom so the main content doesn't squish into it too much.
What
Fixes several design issues on the authentication page:
(1) The border of the google oauth button was gone (due to stylelint reordering the rules). Made sure this is no longer depending on rule ordering.
(2) Make the sign up page not being squished together when the screen height is small.
Previous behavior:
New behavior: (scrollable left side)
(3) Hide the right side (in sync with Natalie), if the screen gets to small instead of pushing it below it. Since when the iframe is enabled for the right side, we have no good idea what a proper height for that should be for the content to render nicely.