Design fixes of the authentication page (#16328)

airbytehq · Sep 6, 2022 · e593adc · e593adc
1 parent 5001474
commit e593adc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/Auth.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/Auth.module.scss
@@ -2,21 +2,22 @@
 
 .container {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
+  height: 100%;
   background: colors.$white;
 }
 
 .leftSide {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
   width: 100%;
   padding: 20px 36px 39px 46px;
 }
 
 .rightSide {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
+  display: none;
 }
 
 .rightSideFrame {
@@ -26,10 +27,12 @@
   overflow: hidden;
 }
 
-@media (min-width: 992px) and (min-height: 720px) {
-  .container {
-    flex-direction: row;
-    height: 100%;
+@media (min-width: 992px) {
+  .rightSide {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
   }
 
   .leftSide,

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss
@@ -45,6 +45,7 @@
 .github {
   background: #333;
   color: colors.$white;
+  border: none;
 }
 
 .google,
@@ -59,7 +60,6 @@
   padding: vars.$spacing-md;
   gap: vars.$spacing-md;
   border-radius: vars.$border-radius-sm;
-  border: none;
   transition: all vars.$transition;
   cursor: pointer;
 

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/FormContent.tsx b/airbyte-webapp/src/packages/cloud/views/auth/components/FormContent.tsx
@@ -8,8 +8,8 @@ import { Header } from "./Header";
 
 const MainBlock = styled.div`
   width: 100%;
-  height: calc(100% - 100px);
   display: flex;
+  flex: 1 0 auto;
   align-items: center;
   justify-content: center;
 `;

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/GitBlock/GitBlock.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/components/GitBlock/GitBlock.module.scss
@@ -1,4 +1,5 @@
 @use "../../../../../../scss/colors";
+@use "../../../../../../scss/variables";
 
 .container {
   display: flex;
@@ -7,12 +8,12 @@
 
   .link {
     text-decoration: none;
+    margin-top: variables.$spacing-2xl;
 
     .content {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-top: 17px;
 
       .icon {
         margin-right: 10px;

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/Header/Header.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/components/Header/Header.module.scss
@@ -1,10 +1,12 @@
 @use "../../../../../../scss/colors";
+@use "../../../../../../scss/variables";
 
 .links {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  margin-bottom: variables.$spacing-xl;
 
   .formLink {
     font-size: 11px;