Ott 310 adaptive regpage (#114)

src/features/Combobox/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import {
   Combobox,
   ComboboxInput,
@@ -8,12 +10,32 @@ import {
   ComboboxPopover,
 } from '@reach/combobox'
 
-import { wrapperStyles, inputStyles } from 'features/Common/Input/styled'
+import {
+  wrapperStyles,
+  inputStyles,
+  Label,
+} from 'features/Common/Input/styled'
 import { customScrollbar, customStylesMixin } from 'features/Common'
 
 export const ComboboxStyled = styled(Combobox)`
   ${wrapperStyles}
   position: relative;
+
+  @media${devices.laptop} {
+    margin-top: 12px;
+
+    ${Label} {
+      display: block;
+      
+      span {
+        display: none;
+      }
+    }
+  }
+
+  @media${devices.tablet} {
+    margin-top: -8px;
+  }
 `
 
 export const ComboboxInputStyled = styled(ComboboxInput)`
@@ -23,6 +45,28 @@ export const ComboboxInputStyled = styled(ComboboxInput)`
   ::placeholder {
     opacity: 0;
   }
+
+  @media${devices.laptop} {
+
+    margin-left: -105px;
+    padding-right: 4px;
+    ::placeholder {
+      opacity: 1;
+      width: 90%;
+      font-style: normal;
+      font-weight: normal;
+      white-space: nowrap;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: -0.01em;
+      text-align: center;
+    }
+  }
+
+  @media${devices.mobile} {
+    text-align: center;
+    font-size: 14px;
+  }
 `
 
 export const ComboboxPopoverStyled = styled(ComboboxPopover)`
@@ -43,6 +87,11 @@ export const ComboboxListStyled = styled(ComboboxList)`
 
  ${customScrollbar}
  ${customStylesMixin}
+
+ @media${devices.laptop} {
+   left: -33px;
+   min-width: calc(100% + 58px);
+ }
 `
 
 export const ComboboxOptionStyled = styled(ComboboxOption)`

src/features/Login/styled.tsx

@@ -21,13 +21,19 @@ export const CenterBlock = styled.div`
   }
 `
 
-export const Form = styled.form`
+export const Form = styled.form<{forRegPage?: boolean}>`
   width: 544px;
   margin: 80px 0 140px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
 
+  @media${devices.laptop} {
+    margin: ${({ forRegPage }) => (forRegPage ? '75px 0 140px 0' : '80px 0 140px 0')};
+  }
+  
+  
+
   @media${devices.mobile} {
     width: auto;
     margin: 50px 0 140px 0;

src/features/Register/components/RegistrationStep/index.tsx

@@ -32,7 +32,7 @@ const Registration = () => {
   } = useRegistrationForm()
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit} forRegPage>
       <BlockTitle>
         <T9n t='step_title_registration' />
       </BlockTitle>

src/features/Register/components/RegistrationSuccessful/styled.tsx

@@ -1,13 +1,27 @@
 import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { solidButtonStyles } from 'features/Common'
+import { BlockTitle } from 'features/Login/styled'
 
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 80px;
+
+  @media${devices.tablet} {
+
+    ${BlockTitle} {
+      text-align: center;
+    }
+  }
+  
+  @media${devices.mobile} {
+    margin-top: 20px;
+  }
 `
 
 export const GreenTick = styled.div`
@@ -17,6 +31,10 @@ export const GreenTick = styled.div`
   background-image: url(/images/greenTick.svg);
   background-position-y: -98px;
   background-position-x: center;
+
+  @media${devices.mobile} {
+   margin: 30px 0 100px 0 ;
+  }
 `
 
 export const ButtonLink = styled(Link)`

src/features/Register/index.tsx

@@ -4,7 +4,7 @@ import { Route } from 'react-router'
 import { PAGES } from 'config'
 
 import { Logo } from 'features/Logo'
-import { CenterBlock } from 'features/Login/styled'
+import { CustomCenterBlock } from './styled'
 
 import { RegistrationStep } from './components/RegistrationStep'
 import { CardStep } from './components/CardStep'
@@ -12,7 +12,7 @@ import { SubscriptionStep } from './components/SubscriptionsStep'
 import { RegistrationSuccessful } from './components/RegistrationSuccessful'
 
 export const Register = () => (
-  <CenterBlock>
+  <CustomCenterBlock>
     <Logo />
     <Route exact path={`${PAGES.register}`}>
       <RegistrationStep />
@@ -26,5 +26,5 @@ export const Register = () => (
     <Route exact path={`${PAGES.register}/successful`}>
       <RegistrationSuccessful />
     </Route>
-  </CenterBlock>
+  </CustomCenterBlock>
 )

src/features/Register/styled.tsx

@@ -1,5 +1,20 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
+import {
+  InputWrapper,
+  InputStyled,
+  Column,
+  Error,
+} from 'features/Common/Input/styled'
+
+import {
+  CenterBlock,
+  ButtonsBlock,
+  BlockTitle,
+} from 'features/Login/styled'
+
 export const Card = styled.div`
   width: 546px;
   height: 340px;
@@ -22,3 +37,54 @@ export const Row = styled.div`
     margin-left: 16px;
   }
 `
+export const CustomCenterBlock = styled(CenterBlock)`
+
+  @media${devices.laptop} {
+    margin-top: 53px;
+
+    ${InputWrapper} {
+      margin-top: 12px;
+    }
+    ${InputStyled}::placeholder {
+      text-align: center;
+    }
+
+    ${Column} {
+      position: relative;
+    }
+
+    ${ButtonsBlock} {
+      margin-top: 63px;
+    }
+
+    ${Error} {
+      position: absolute;
+      top: 50%;
+      right: -85%;
+      transform: translateY(-50%);
+      width: 328px;
+
+      @media${devices.tablet} {
+        position: static;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  @media${devices.tablet} {
+
+    ${InputWrapper} {
+      margin-top: -8px;
+    }  
+  }
+
+  @media${devices.mobile} {
+    ${InputStyled} {
+      text-align: center;
+    }
+
+    ${BlockTitle} {
+      margin-bottom: 38px;
+    }
+  }
+`