Login:Src:Components: change styles for layouts

packages/login/src/components/Confirm.styled.ts

@@ -29,28 +29,20 @@
 import styled from "styled-components";
 import { mobile, tablet } from "@docspace/shared/utils";
 
-export const StyledPage = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 960px;
-  box-sizing: border-box;
-
-  user-select: none;
+export const StyledBody = styled.div`
+  margin: 56px auto;
 
   @media ${tablet} {
     padding: 0 16px;
   }
 
   @media ${mobile} {
-    width: 100%;
+    margin: 0 auto;
+    min-height: 100%;
+    max-width: 100%;
+    width: calc(100% - 24px);
     padding-block: 32px 0;
     padding-inline: 16px 8px;
-
-    .language-combo-box {
-      display: none;
-    }
   }
 
   .subtitle {
@@ -59,7 +51,6 @@ export const StyledPage = styled.div`
 
   .password-form {
     width: 100%;
-    margin-bottom: 8px;
   }
 
   .language-combo-box {
@@ -72,44 +63,6 @@ export const StyledPage = styled.div`
     display: flex;
     justify-content: center;
   }
-`;
-
-export const StyledBody = styled.div`
-  min-height: 100vh;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-
-  .content-center {
-    min-height: calc(100vh - 112px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 56px auto;
-
-    @media ${mobile} {
-      justify-content: start;
-      margin: 0 auto;
-      min-height: 100%;
-    }
-  }
-
-  .content-top {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 88px auto;
-
-    @media ${mobile} {
-      margin: 0 auto;
-    }
-  }
-
-  @media ${mobile} {
-    width: 100%;
-    margin: 0 auto;
-    min-height: 100%;
-  }
 
   .logo-wrapper {
     display: flex;
@@ -140,12 +93,28 @@ export const StyledBody = styled.div`
     align-items: center;
     justify-content: center;
     padding-bottom: 40px;
+    width: 100%;
+    height: 44px;
 
     @media ${mobile} {
       display: none;
     }
   }
 
+  button {
+    margin-top: 8px;
+  }
+
+  .subtitle + button {
+    margin-top: 0;
+  }
+
+  .subtitle + div {
+    button {
+      margin-top: 0;
+    }
+  }
+
   .password-field-wrapper {
     min-width: 100%;
   }
@@ -174,10 +143,6 @@ export const StyledBody = styled.div`
   .app-code-text {
     margin-bottom: 8px;
   }
-
-  .app-code-continue-btn {
-    margin-top: 8px;
-  }
 `;
 
 export const ButtonsWrapper = styled.div`

packages/login/src/components/Layout.styled.ts

@@ -29,9 +29,9 @@
 import styled from "styled-components";
 
 import { Base } from "@docspace/shared/themes";
-import { mobile, tablet } from "@docspace/shared/utils/device";
+import { mobile, tablet } from "@docspace/shared/utils";
 
-export const FormWrapper = styled.div<{ bgPattern: string }>`
+export const ContentWrapper = styled.div<{ bgPattern: string }>`
   width: 100%;
   height: 100dvh;
 
@@ -70,11 +70,12 @@ export const FormWrapper = styled.div<{ bgPattern: string }>`
       min-width: 100%;
     }
 
-    .invitation-text {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+    p {
       text-align: center;
+
+      @media ${mobile} {
+        margin-top: 32px;
+      }
     }
   }
 
@@ -92,15 +93,38 @@ export const FormWrapper = styled.div<{ bgPattern: string }>`
     margin-bottom: 32px;
   }
 
+  .sign-in-subtitle {
+    margin-bottom: 32px;
+    text-align: center;
+
+    @media ${mobile} {
+      margin-bottom: 24px;
+    }
+  }
+
   .invitation-info-container {
-    margin-bottom: 16px;
+    margin-bottom: 32px;
+
+    @media ${mobile} {
+      margin-bottom: 24px;
+    }
+
+    p {
+      text-align: center;
+    }
+
     .sign-in-container {
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
 
-      margin-bottom: 16px;
+      margin-bottom: 32px;
+
+      @media ${mobile} {
+        margin-bottom: 24px;
+      }
+
       .back-title {
         position: absolute;
         text-overflow: ellipsis;
@@ -129,22 +153,22 @@ export const FormWrapper = styled.div<{ bgPattern: string }>`
   }
 `;
 
-FormWrapper.defaultProps = { theme: Base };
+ContentWrapper.defaultProps = { theme: Base };
 
-export const ContentWrapper = styled.div`
-  flex: 1 0 auto;
-  flex-direction: column;
+export const StyledPage = styled.div`
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  height: 100%;
+  max-width: 960px;
+  box-sizing: border-box;
+  min-height: 100vh;
+
+  user-select: none;
 
   @media ${mobile} {
     justify-content: start;
+    min-height: 100%;
   }
 `;
-
-ContentWrapper.defaultProps = { theme: Base };