Ott 1337 layout personal data (#456)

* refactor(#1337): refactoring layout of personal data in user account for tablet and laptop

* refactor(#1337): refactoring some styles

* refactor(#1337): refactoring css

src/features/Common/Input/styled.tsx

@@ -43,7 +43,7 @@ export const LabelTitle = styled.p<TitleProps>`
   font-style: normal;
   font-weight: normal;
   white-space: nowrap;
-  font-size: 16px;
+  font-size: 0.8rem;
   line-height: 24px;
   letter-spacing: -0.01em;
   padding-top: 2px;
@@ -58,6 +58,8 @@ export const LabelTitle = styled.p<TitleProps>`
   }
 
   @media ${devices.tablet} {
+    font-size: 1.6rem;
+    width: 9rem;
     ${({ isUserAccountPage }) => (isUserAccountPage
     ? css`
       display: none;
@@ -81,12 +83,12 @@ type InputProps = {
 const inputStyles = css<InputProps>`
   flex-grow: 1;
   font-weight: 600;
-  font-size: 20px;
+  font-size: 0.9rem;
-  line-height: 24px;
+  line-height: 1.1rem;
   width: ${({ inputWidth }) => (inputWidth ? `${inputWidth}px` : '')};
   background-color: transparent;
   border: transparent;
-  margin-left: 24px;
+  margin-left: 1.1rem;
   color: ${({ theme: { colors } }) => colors.text100};
 
   &[type='password'] {
@@ -111,6 +113,10 @@ const inputStyles = css<InputProps>`
       font-size: 12px;
     `
     : ''};
+  
+  @media ${devices.tablet} {
+    font-size: 1.8rem;
+  }
 `
 
 export const InputStyled = styled.input<InputProps>`
@@ -136,7 +142,7 @@ export const Column = styled.div<ColumnProps>`
   @media ${devices.laptop} {
      ${({ isUserAccountPage }) => (!isUserAccountPage
     ? css`
-      max-width: 415px;
+      width: 100%;
     `
     : '')}
   }
@@ -146,7 +152,8 @@ export const Column = styled.div<ColumnProps>`
     ? css`
       max-width: 415px;
     `
-    : '')}
+    : css`
+      width: 100%;`)}
   }
 
   @media ${devices.mobile} {

src/features/Common/NewInput/styled.tsx

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components/macro'
 
+import { devices } from 'config'
 import { isMobileDevice } from 'config/userAgent'
 
 export const Wrapper = styled.div`
@@ -24,14 +25,18 @@ export const Label = styled.label`
   height: 100%;
   color: rgba(255, 255, 255, 0.5);
   font-weight: normal;
-  font-size: 16px;
+  font-size: 0.8rem;
-  line-height: 20px;
+  line-height: 0.9rem;
   letter-spacing: -0.01em;
   ${isMobileDevice
     ? css`
       font-size: 12px;
     `
     : ''};
+  
+  @media ${devices.tablet} {
+    font-size: 1.6rem;
+  }
 `
 
 const resetStyles = css`

src/features/Common/PasswordInput/index.tsx

@@ -2,6 +2,7 @@ import type { ComponentProps } from 'react'
 
 import styled, { css } from 'styled-components/macro'
 
+import { devices } from 'config'
 import { isMobileDevice } from 'config/userAgent'
 
 import { useToggle } from 'hooks'
@@ -26,6 +27,11 @@ const VisibilityButton = styled(BaseButton)`
       transform: translateY(-50%);
     `
     : ''};
+  @media ${devices.tablet} {
+    width: 2.2rem;
+    height: 1.5rem;
+    margin-right: 1.7rem;
+  }
 `
 
 type Props = ComponentProps<typeof NewInput>

src/features/MatchSwitches/styled.tsx

@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
+import { devices } from 'config'
+
 import { T9n } from 'features/T9n'
 
 export const Switch = styled.div`
@@ -61,8 +63,12 @@ export const Icon = styled.div<IconProps>`
       width: 51px;
       height: 31px;
     `
-    : ''};
+    : ''}
-`
+    
+  @media ${devices.tablet} {
+      width: 2.7rem;
+      height: 1.5rem;
+    }`
 
 export const Wrapper = styled.div`
   margin-right: 2.45rem;

src/features/UserAccount/components/Header/index.tsx

@@ -16,9 +16,9 @@ const HeaderStyled = styled.header`
   margin-bottom: 45px;
   height: 50px;
   padding-top: 8px;
-
+  
   @media ${devices.tablet} {
-    margin-bottom: 20px;
+    margin-bottom: 0;
   }
 
   ${isMobileDevice

src/features/UserAccount/components/LogoutButton/index.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
+import { devices } from 'config'
 
 import { useAuthStore } from 'features/AuthStore'
 import { T9n } from 'features/T9n'
@@ -10,15 +11,12 @@ const Button = styled.button`
   background-color: transparent;
   padding: 0;
   cursor: pointer;
-
+  margin-top: 3.0rem;
-  position: absolute;
-  left: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   font-weight: 500;
-  font-size: 25px;
+  font-size: 1.2rem;
-  line-height: 68px;
+  line-height: 3.2rem;
   color: #FFFFFF;
   ${isMobileDevice
     ? css`
@@ -27,6 +25,11 @@ const Button = styled.button`
      height: 25px;
     `
     : ''};
+  
+  @media ${devices.tablet} {
+    font-size: 2.8rem;
+    position: static;
+  }
 `
 
 const ExitIcon = styled.span`

src/features/UserAccount/components/PersonalInfoForm/styled.tsx

@@ -16,8 +16,8 @@ export const Form = styled.div`
   }
 
   ${InputWrapper} {
-    height: 50px;
+    height: 2.4rem;
-    margin-top: 10px;
+    margin-top: 0.5rem;
     ${isMobileDevice
     ? css`
       height: 40px;
@@ -25,11 +25,17 @@ export const Form = styled.div`
       padding-left: 0;
     `
     : ''};
+    
+    @media ${devices.tablet} {
+      height: 4.6rem;
+      margin-top: 1rem;
+    }
   }
 
   @media ${devices.tablet} {
-    min-width: auto;
+    width: 100%;
   }
+  
   ${isMobileDevice
     ? css`
       width: 100%;
@@ -41,32 +47,40 @@ export const ButtonWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: start;
-  margin-top: 40px;
+  margin-top: 1.9rem;
-
-  @media ${devices.tablet} {
-    align-self: center;
-  }
 `
 
 export const SectionTitle = styled.span`
   display: inline-block;
-  margin-top: 20px;
+  margin-top: 0.9rem;
   margin-bottom: 4px;
   font-weight: 600;
-  font-size: 12px;
+  font-size: 0.6rem;
-  line-height: 18px;
+  line-height: 0.9rem;
   text-transform: uppercase;
   color: ${({ theme }) => theme.colors.text50};
+  
+  @media ${devices.tablet} {
+    margin-top: 2rem;
+    font-size: 1.4rem;
+    line-height: 1.7rem;
+  }
 `
 
 export const PasswordInput = styled(PasswordInputBase)`
-  height: 50px;
+  height: 2.4rem;
-  margin-bottom: 10px;
+  margin-bottom: 0.5rem;
-  padding-left: 24px;
+  padding-left: 1.1rem;
 
   ${InputStyled} {
     padding: 0;
     padding-left: 24px;
+    
+    @media ${devices.tablet} {
+      font-size: 1.8rem;
+      font-weight: 600;
+    }
+    
   }
   ${isMobileDevice
     ? css`
@@ -74,4 +88,9 @@ export const PasswordInput = styled(PasswordInputBase)`
       padding-left: 10px;
     `
     : ''};
+  
+  @media ${devices.tablet} {
+    height: 4.6rem;
+    margin-bottom: 1rem;
+  }
 `

src/features/UserAccount/components/ScoreSwitch/index.tsx

@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
+import { devices } from 'config'
+
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import {
   Switch,
@@ -13,21 +15,29 @@ type TWrapper = {
 }
 
 const Wrapper = styled.div<TWrapper>`
-  margin-top: 90px;
+  margin-top: 4.3rem;
   display: ${({ isHidden }) => (isHidden ? 'none' : 'block')};
   ${isMobileDevice
     ? css`
       margin-top: 0;
     `
-    : ''};
+    : ''}
+  
+  @media ${devices.tablet} {
+   margin-top: 2rem;
+  }
 `
 
 const Title = styled(TitleBase)`
-  margin-right: 28px;
+  margin-right: 1.3rem;
   font-weight: normal;
-  font-size: 25px;
+  font-size: 1.2rem;
   text-transform: none;
   align-self: flex-start;
+  
+  @media ${devices.tablet} {
+    font-size: 2.6rem;
+  }
 `
 
 type Props = {

src/features/UserAccount/styled.tsx

@@ -9,8 +9,8 @@ import { ButtonSolid, ButtonOutline } from 'features/Common/Button'
 
 export const SolidButton = styled(ButtonSolid)`
   width: auto;
-  height: 50px;
+  height: 2.4rem;
-  padding: 0 20px;
+  padding: 0 0.94rem;
   color: white;
   font-weight: bold;
   background-color: #294fc4;
@@ -19,6 +19,13 @@ export const SolidButton = styled(ButtonSolid)`
   border-radius: 5px;
   display: flex;
   align-items: center;
+  
+  @media ${devices.tablet} {
+    height: 5rem;
+    font-size: 2.0rem;
+    width: 100%;
+    justify-content: center;
+  }
 
   @media ${devices.mobile} {
     width: 100%;
@@ -73,7 +80,7 @@ export const Icon = styled.span<IconProps>`
 export const ContentWrapper = styled.div`
   width: 100%;
   display: flex;
-  padding-left: 70px;
+  padding-left: 3.3rem;
 
   @media ${devices.tablet} {
     padding-top: 0;
@@ -119,6 +126,10 @@ export const Body = styled.div`
 export const Aside = styled.aside`
   position: relative;
   height: 100%;
+
+  @media ${devices.tablet} {
+    height: auto;
+  }
   ${isMobileDevice
     ? css`
       height: auto;
@@ -127,17 +138,17 @@ export const Aside = styled.aside`
 `
 
 export const Navigations = styled.nav`
-  width: 424px;
+  width: 20rem;
-  height: 622px;
+  height: 29.3rem;
   display: flex;
   flex-direction: column;
   border-right: 1px solid rgba(255, 255, 255, 0.4);
-
+  
   @media ${devices.tablet} {
     height: auto;
     width: 100%;
     border: none;
-    margin-bottom: 20px;
+    margin-bottom: 0;
   }
 
   @media ${devices.mobile} {
@@ -155,8 +166,8 @@ export const StyledLink = styled(NavLink).attrs(
   }),
 )<StyledLinkProps>`
   font-weight: bold;
-  font-size: 25px;
+  font-size: 1.2rem;
-  line-height: 68px;
+  line-height: 3.2rem;
   color: rgba(255, 255, 255, 0.4);
 
   ${({ disabled }) => (disabled
@@ -167,9 +178,10 @@ export const StyledLink = styled(NavLink).attrs(
     : css`
       color: rgba(255, 255, 255, 0.4);
     `)}
-
+  
   @media ${devices.tablet} {
-    line-height: 48px;
+    font-size: 2.8rem;  
+    line-height: 5.3rem;
   }
 
   @media ${devices.mobile} {