Ott 309 responsive login (#111)

src/features/Combobox/index.tsx

@@ -5,6 +5,7 @@ import map from 'lodash/map'
 import '@reach/combobox/styles.css'
 
 import { T9n } from 'features/T9n'
+import { useLexicsStore } from 'features/LexicsStore'
 import {
   Label,
   Column,
@@ -33,7 +34,6 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     labelWidth,
     openOnFocus,
     pattern,
-    placeholder,
     readOnly,
     required,
     title,
@@ -48,6 +48,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     popoverRef,
     query,
   } = useCombobox(props)
+  const { translate } = useLexicsStore()
 
   return (
     <Column>
@@ -77,7 +78,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
           onChange={onQueryChange}
           onBlur={onInputBlur}
           onKeyDown={onKeyDown}
-          placeholder={placeholder}
+          placeholder={translate(labelLexic || '')}
           readOnly={readOnly}
         />
         {!isEmpty(options) && (

src/features/Combobox/styled.tsx

@@ -19,6 +19,10 @@ export const ComboboxStyled = styled(Combobox)`
 export const ComboboxInputStyled = styled(ComboboxInput)`
   ${inputStyles}
   padding-right: 24px;
+
+  ::placeholder {
+    opacity: 0;
+  }
 `
 
 export const ComboboxPopoverStyled = styled(ComboboxPopover)`

src/features/Common/Button/styled.tsx

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 const baseButtonStyles = css`
   width: 272px;
   height: 48px;
@@ -32,6 +34,11 @@ export const solidButtonStyles = css`
   cursor: pointer;
   border-color: transparent;
   background: ${({ theme: { colors } }) => colors.primary};
+
+  @media${devices.mobile} {
+    width: 335px;
+    height: 40px;
+  }
 `
 
 export const ButtonSolid = styled.button`

src/features/Common/Input/index.tsx

@@ -2,6 +2,7 @@ import type { ChangeEvent, FocusEvent } from 'react'
 import React from 'react'
 
 import { T9n } from 'features/T9n'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import {
   WrapperProps,
@@ -49,38 +50,42 @@ export const Input = ({
   type,
   value,
   wrapperWidth,
-}: Props) => (
+}: Props) => {
-  <Column>
+  const { translate } = useLexicsStore()
-    <InputWrapper
+  return (
-      wrapperWidth={wrapperWidth}
+    <Column>
-      paddingX={paddingX}
+      <InputWrapper
-      error={error}
+        wrapperWidth={wrapperWidth}
-    >
+        paddingX={paddingX}
-      <Label
+        error={error}
-        htmlFor={id}
-        labelWidth={labelWidth}
       >
-        {
+        <Label
-          labelLexic
+          htmlFor={id}
-            ? <T9n t={labelLexic} />
+          labelWidth={labelWidth}
-            : label
+        >
-        }
+          {
-      </Label>
+            labelLexic
-      <InputStyled
+              ? <T9n t={labelLexic} />
-        id={id}
+              : label
-        type={type}
+          }
-        required={required}
+        </Label>
-        value={value}
+        <InputStyled
-        defaultValue={defaultValue}
+          id={id}
-        onChange={onChange}
+          type={type}
-        onBlur={onBlur}
+          required={required}
-        onFocus={onFocus}
+          value={value}
-        maxLength={maxLength}
+          defaultValue={defaultValue}
-        inputWidth={inputWidth}
+          onChange={onChange}
-        pattern={pattern}
+          onBlur={onBlur}
-        title={title}
+          onFocus={onFocus}
-      />
+          maxLength={maxLength}
-    </InputWrapper>
+          inputWidth={inputWidth}
-    <Error t={error || ''} />
+          pattern={pattern}
-  </Column>
+          title={title}
-)
+          placeholder={translate(labelLexic || '')}
+        />
+      </InputWrapper>
+      <Error t={error || ''} />
+    </Column>
+  )
+}

src/features/Common/Input/styled.tsx

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components/macro'
 import isNil from 'lodash/isNil'
 
 import { T9n } from 'features/T9n'
+import { devices } from 'config/devices'
 
 export type WrapperProps = {
   error?: string | null,
@@ -27,11 +28,6 @@ export const wrapperStyles = css<WrapperProps>`
   border-width: 1px;
 `
 
-export const InputWrapper = styled.div<WrapperProps>`
-  ${wrapperStyles}
-  }
-`
-
 type LabelProps = {
   labelWidth?: number,
 }
@@ -46,6 +42,10 @@ export const Label = styled.label<LabelProps>`
   padding-top: 2px;
   color: ${({ theme: { colors } }) => colors.secondary};
   width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
+
+ @media${devices.laptop} {
+    display: none;
+  }
 `
 
 type InputProps = {
@@ -80,16 +80,69 @@ export const inputStyles = css<InputProps>`
     caret-color: ${({ theme: { colors } }) => colors.text};
     -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text};
   }
+
+  @media${devices.laptop} {
+    margin-left: 5px;
+    width: 100%;
+    font-size: 20px;
+  }
+
 `
 
 export const InputStyled = styled.input<InputProps>`
   ${inputStyles}
+  ::placeholder {
+    opacity: 0;
+  }
+
+  @media${devices.laptop} {
+    ::placeholder {
+      opacity: 1;
+      font-style: normal;
+      font-weight: normal;
+      white-space: nowrap;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: -0.01em;
+      margin-right: -10px;
+    }
+  }
+
+  @media${devices.mobile} {
+    font-size: 14px;
+
+    ::placeholder {
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+`
+
+export const InputWrapper = styled.div<WrapperProps>`
+  ${wrapperStyles}
+  
+
+  @media${devices.mobile} {
+    height: 40px;
+    margin-top: 0;
+    position: relative;
+  }
+
 `
 
 export const Column = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
+
+  @media${devices.laptop} {
+    max-width: 415px;
+  }
+
+  @media${devices.mobile} {
+    width: 335px;
+    position: relative;
+  }
 `
 
 type ErrorProps = {
@@ -111,4 +164,8 @@ export const Error = styled(T9n)<ErrorProps>`
       ? `margin-bottom: ${marginBottom}px`
       : ''
   )}
+
+  @media${devices.mobile} {
+    margin-top: 0;
+  }
 `

src/features/HeaderMobile/index.tsx

@@ -32,7 +32,7 @@ export const HeaderMobile = () => {
             <HeaderMobileWrapper>
               <HeaderMobileTop>
                 <ToggleScore />
-                <Logo />
+                <Logo width={52} height={12} />
                 <HeaderIconsWrapper>
                   <IconFavWrapper />
                   <Search />

src/features/Login/styled.tsx

@@ -1,6 +1,8 @@
 import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { outlineButtonStyles } from 'features/Common'
 
 export const CenterBlock = styled.div`
@@ -9,6 +11,14 @@ export const CenterBlock = styled.div`
   align-items: center;
   justify-content: flex-start;
   margin-top: 140px;
+
+  @media${devices.laptop} {
+    margin-top: 177px;
+  }
+
+  @media${devices.mobile} {
+    margin-top: 150px;
+  }
 `
 
 export const Form = styled.form`
@@ -17,6 +27,11 @@ export const Form = styled.form`
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  @media${devices.mobile} {
+    width: auto;
+    margin: 50px 0 140px 0;
+  }
 `
 
 export const BlockTitle = styled.span`
@@ -28,6 +43,16 @@ export const BlockTitle = styled.span`
   color: ${({ theme: { colors } }) => colors.text};
   margin-bottom: 20px;
   transition: color 0.3s ease-in-out;
+
+  @media${devices.laptop} {
+    max-height: 24px;
+    margin-bottom: 23px;
+  }
+
+  @media${devices.mobile} {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
 `
 
 export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>`
@@ -37,6 +62,15 @@ export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>`
   margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '60px')};
   margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')};
   position: relative;
+
+  @media${devices.laptop} {
+    margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '32px')};
+  }
+
+  @media${devices.mobile} {
+    position: absolute;
+    bottom: 10px;
+  }
 `
 
 export const RegisterButton = styled(Link)`
@@ -45,4 +79,10 @@ export const RegisterButton = styled(Link)`
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @media${devices.mobile} {
+    width: 335px;
+    height: 40px;
+    margin-top: 10px;
+  }
 `

src/features/Logo/index.tsx

@@ -16,11 +16,10 @@ export const Logo = styled.div<TLogo>`
   background-image: url(/images/logo.svg);
 
   @media${devices.tablet} {
-    width: ${({ width = 55 }) => width}px;
+    width: ${({ width }) => width}px;
-    height: ${({ height = 41 }) => height}px;
+    height: ${({ height }) => height}px;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 24px;
   }
 `

src/features/Search/styled.tsx

@@ -6,6 +6,7 @@ import {
   InputWrapper,
   InputStyled,
   Label,
+  Column,
 } from 'features/Common/Input/styled'
 
 export const Wrapper = styled.div`
@@ -67,6 +68,10 @@ export const Form = styled.form<{isMatch: boolean}>`
   }
 
   ${Label} {
+
+    @media${devices.laptop} {
+      display: block;
+    }
     ::before {
       content: '';
       display: block;
@@ -101,6 +106,13 @@ export const Form = styled.form<{isMatch: boolean}>`
     }
   }
 
+  @media${devices.mobile} {
+    ${Column} {
+      width: auto;
+      max-width: 335px;
+    }
+  }
+
 `
 
 export const Results = styled.div`