Fix sign in views(RWD) (#675)

* fix responsivness in sigin join views

* update media queries for CreateMemberView

* cleaning

* reduce and simplify margins

* increase margins in sign-in main

src/views/studio/CreateMemberView/CreateMemberView.style.ts

@@ -25,14 +25,18 @@ export const Wrapper = styled(StudioContainer)`
   flex-direction: column;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 64px;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 150px;
+  margin-top: 64px;
+  padding-bottom: 100px;
   ${media.medium} {
+    margin-top: 40px;
     align-items: unset;
     flex-direction: row;
   }
+  ${media.xxlarge} {
+    margin-top: 64px;
+  }
 `
 export const Form = styled.form`
   position: relative;
@@ -49,12 +53,13 @@ export const StyledTextField = styled(TextField)`
 `
 
 export const StyledAvatar = styled(Avatar)`
-  margin-bottom: ${sizes(4)};
+  margin-bottom: ${sizes(6)};
+  width: 104px;
 `
 
 export const StyledButton = styled(Button)`
   display: block;
-  margin-top: 30px;
+  margin-top: 20px;
   ${media.medium} {
     margin-left: auto;
   }

src/views/studio/SignInJoinView/SignInMainView/SignInMainView.style.ts

@@ -10,11 +10,18 @@ export const StyledContainer = styled(StudioContainer)`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-bottom: 150px;
+  padding-bottom: 100px;
   ${media.medium} {
     flex-direction: row;
     justify-content: space-between;
   }
+  ${media.xlarge} {
+    max-width: 1700px;
+    left: 150px;
+  }
+  ${media.xxlarge} {
+    margin-top: 128px;
+  }
 `
 
 export const LogoContainer = styled.div`
@@ -30,11 +37,7 @@ export const LogoContainer = styled.div`
 `
 
 export const Header = styled.header`
-  margin-top: 60px;
   max-width: 550px;
-  ${media.large} {
-    max-width: 600px;
-  }
 `
 
 export const StyledHero = styled(Text)`
@@ -45,8 +48,16 @@ export const StyledSignInIllustrationSVG = styled(SignInIllustrationSVG)`
   margin-top: 60px;
   align-self: center;
   width: 100%;
+  ${media.medium} {
+    position: relative;
+    left: -50px;
+    margin-top: 0px;
+  }
   ${media.large} {
-    width: unset;
+    max-width: 1000px;
+  }
+  ${media.xxlarge} {
+    max-width: unset;
   }
 `
 

src/views/studio/SignInJoinView/SignInProcessView/SignInProcessView.style.ts

@@ -6,24 +6,29 @@ import { Button, Text } from '@/shared/components'
 
 export const StyledStudioContainer = styled(StudioContainer)`
   display: flex;
-  flex-wrap: wrap;
   margin-top: 64px;
   justify-content: space-between;
   flex-direction: column;
-  align-content: center;
-  ${media.large} {
-    align-content: unset;
+  align-items: center;
+  ${media.medium} {
+    align-items: unset;
     flex-direction: row;
+    justify-content: center;
   }
   ${media.xlarge} {
+    margin-top: 40px;
     flex-direction: column;
-    align-content: center;
+    align-items: center;
+    left: 200px;
+  }
+  ${media.xxlarge} {
+    margin-top: 64px;
   }
 `
 
 export const HeroContainer = styled.div`
-  max-width: 400px;
-  margin-bottom: 60px;
+  max-width: 440px;
+  margin-bottom: 40px;
 `
 
 export const SubTitle = styled(Text)`
@@ -32,32 +37,44 @@ export const SubTitle = styled(Text)`
 
 export const ListContainer = styled.div`
   max-width: 440px;
-  padding-bottom: 150px;
+  padding-bottom: 100px;
+  ${media.medium} {
+    margin-left: 60px;
+  }
+  ${media.xlarge} {
+    margin-left: 0;
+  }
 `
 
 export const StyledCoinsIllustrations = styled(CoinsIllustration)`
   z-index: -2;
   display: none;
-  ${media.medium} {
+  ${media.small} {
+    display: block;
+
     position: relative;
     left: -100px;
-
-    display: block;
-    width: 600px;
-    margin-top: -200px;
+    bottom: 100px;
+    width: 450px;
   }
-  ${media.large} {
+  ${media.medium} {
     position: fixed;
-    bottom: -250px;
-
-    margin-top: unset;
-    width: 780px;
+    left: 0;
+    bottom: -200px;
   }
-  ${media.xxlarge} {
-    bottom: 0;
-
+  ${media.large} {
+    bottom: -150px;
+    width: 600px;
+  }
+  ${media.xlarge} {
+    bottom: -100px;
     width: 900px;
   }
+  ${media.xxlarge} {
+    top: 150px;
+    bottom: unset;
+    width: 1200px;
+  }
 `
 
 export const OrderedList = styled.ol`
@@ -103,12 +120,12 @@ export const UnOrderedList = styled.ul`
 export const UnOrderedItem = styled(Text)``
 
 export const StyledButton = styled(Button)`
-  margin-top: 64px;
   position: fixed;
   bottom: 20px;
   left: var(--global-horizontal-padding);
   width: calc(100% - var(--global-horizontal-padding) * 2);
   ${media.small} {
+    margin-top: 40px;
     position: unset;
     width: unset;
   }