Ott 311 main adaptive user acc page (#210)

* style(#311): main branch for 311 task

* Ott 311 my acc adaptive (#208)

* style(#311): adaptive laptop version for useraccount page done

* style(#311): tablet version part 1

* Ott 311 part 2 (#209)

* style(#311): mobile version of useraccount page done

* style(#311): fixed combobox input styles

* style(#311): input icon style fix

* style(#311): minor fixes after PR comments

public/images/plusIcon-gray.svg

@@ -0,0 +1,17 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="10" y="-0.00012207" width="2" height="20" fill="#494949"/>
+<rect x="1" y="8.99988" width="20" height="2" fill="#494949"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="-0.00012207" width="22" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

src/features/App/AuthenticatedApp.tsx

@@ -3,6 +3,7 @@ import {
   Route,
   Redirect,
   Switch,
+  useRouteMatch,
 } from 'react-router-dom'
 
 import { indexLexics } from 'config/lexics/indexLexics'
@@ -35,11 +36,12 @@ import { FormStore } from 'features/FormStore'
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
   const isMobile = useMediaQuery({ query: devices.tablet })
+  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false
 
   return (
     <ScoreStore>
       {
-        isMobile
+        isMobile || isUserAccountPage
           ? null
           : (
             <Fragment>

src/features/Combobox/index.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
+import { useRouteMatch } from 'react-router-dom'
 
 import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
 
+import { useLexicsStore } from 'features/LexicsStore'
+
+import { PAGES } from 'config'
 import { T9n } from 'features/T9n'
 import { OutsideClick } from 'features/OutsideClick'
 import {
@@ -50,14 +54,16 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     query,
     toggle,
   } = useCombobox(props)
+  const { translate } = useLexicsStore()
+  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false
 
   return (
-    <Column>
+    <Column isUserAccountPage={isUserAccountPage}>
       <InputWrapper
         error={error}
       >
         <Label>
-          <LabelTitle labelWidth={labelWidth}>
+          <LabelTitle labelWidth={labelWidth} isUserAccountPage={isUserAccountPage}>
             {labelLexic ? <T9n t={labelLexic} /> : label}
           </LabelTitle>
           <InputStyled
@@ -71,6 +77,8 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
             disabled={disabled}
             onChange={onQueryChange}
             onKeyDown={onKeyDown}
+            placeholder={translate(labelLexic || '')}
+            isUserAccountPage={isUserAccountPage}
           />
         </Label>
         {withArrow && (

src/features/Combobox/styled.tsx

@@ -17,8 +17,9 @@ export const PopOver = styled.ul`
   overflow: auto;
   z-index: 2;
   background: rgb(102, 102, 102);
- ${customScrollbar};
- ${customStylesMixin};
+
+  ${customScrollbar};
+  ${customStylesMixin};
 `
 
 export const ListOption = styled.li<{isHighlighted?: boolean}>`

src/features/Common/Input/index.tsx

@@ -1,8 +1,10 @@
 import type { ChangeEvent, FocusEvent } from 'react'
 import React from 'react'
+import { useRouteMatch } from 'react-router-dom'
 
 import { T9n } from 'features/T9n'
 import { useLexicsStore } from 'features/LexicsStore'
+import { PAGES } from 'config'
 
 import {
   WrapperProps,
@@ -56,16 +58,17 @@ export const Input = ({
   wrapperWidth,
 }: Props) => {
   const { translate } = useLexicsStore()
+  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false
 
   return (
-    <Column>
+    <Column isUserAccountPage={isUserAccountPage}>
       <InputWrapper
         wrapperWidth={wrapperWidth}
         paddingX={paddingX}
         error={error}
       >
         <Label>
-          <LabelTitle labelWidth={labelWidth}>
+          <LabelTitle labelWidth={labelWidth} isUserAccountPage={isUserAccountPage}>
             {labelLexic ? <T9n t={labelLexic} /> : label}
           </LabelTitle>
           <InputStyled
@@ -82,6 +85,7 @@ export const Input = ({
             pattern={pattern}
             title={title}
             placeholder={translate(labelLexic || '')}
+            isUserAccountPage={isUserAccountPage}
           />
         </Label>
         {editIcon && <Icon image='edit-icon' />}

src/features/Common/Input/styled.tsx

@@ -29,6 +29,7 @@ export const wrapperStyles = css<WrapperProps>`
 `
 
 type TitleProps = {
+  isUserAccountPage?: boolean,
   labelWidth?: number,
 }
 
@@ -48,12 +49,25 @@ export const LabelTitle = styled.p<TitleProps>`
   width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
   
   @media ${devices.laptop} {
-    display: none;
+    ${({ isUserAccountPage }) => (!isUserAccountPage
+    ? css`
+      display: none;
+    `
+    : '')}
+  }
+
+  @media ${devices.tablet} {
+    ${({ isUserAccountPage }) => (isUserAccountPage
+    ? css`
+      display: none;
+    `
+    : '')}
   }
 `
 
 type InputProps = {
   inputWidth?: number,
+  isUserAccountPage?: boolean,
 }
 
 export const inputStyles = css<InputProps>`
@@ -86,7 +100,6 @@ export const inputStyles = css<InputProps>`
   }
 
   @media ${devices.laptop} {
-    margin-left: 5px;
     width: 100%;
     font-size: 20px;
   }
@@ -101,7 +114,6 @@ export const InputStyled = styled.input<InputProps>`
 
   @media ${devices.laptop} {
     ::placeholder {
-      opacity: 1;
       font-style: normal;
       font-weight: normal;
       white-space: nowrap;
@@ -110,10 +122,31 @@ export const InputStyled = styled.input<InputProps>`
       letter-spacing: -0.01em;
       margin-right: -10px;
     }
+
+
+    ${({ isUserAccountPage }) => (!isUserAccountPage
+    ? css`
+      ::placeholder {
+        opacity: 1;
+      }
+    `
+    : '')}
+    
+  }
+
+  @media ${devices.tablet} {
+     ${({ isUserAccountPage }) => (isUserAccountPage
+    ? css`
+      ::placeholder {
+        opacity: 1;
+      }
+    `
+    : '')}
   }
 
   @media ${devices.mobile} {
     font-size: 14px;
+    margin-left: 0;
 
     ::placeholder {
       font-size: 14px;
@@ -133,14 +166,30 @@ export const InputWrapper = styled.div<WrapperProps>`
   }
 
 `
+type ColumnProps = {
+  isUserAccountPage?: boolean,
+}
 
-export const Column = styled.div`
+export const Column = styled.div<ColumnProps>`
   width: 100%;
   display: flex;
   flex-direction: column;
 
   @media ${devices.laptop} {
-    max-width: 415px;
+     ${({ isUserAccountPage }) => (!isUserAccountPage
+    ? css`
+      max-width: 415px;
+    `
+    : '')}
+  }
+
+  @media ${devices.tablet} {
+    ${({ isUserAccountPage }) => (isUserAccountPage
+    ? css`
+      max-width: 415px;
+    `
+    : '')}
+
   }
 
   @media ${devices.mobile} {
@@ -176,6 +225,9 @@ export const Error = styled(T9n)<ErrorProps>`
 `
 
 export const Icon = styled.div<{ image: string }>`
+  position: absolute;
+  right: 22px;
+  top: 50%;
   width: 15px;
   height: 25px;
   background-image: url(/images/${({ image }) => `${image}.svg`});

src/features/Common/Radio/index.tsx

@@ -1,4 +1,7 @@
 import React, { InputHTMLAttributes } from 'react'
+import { useRouteMatch } from 'react-router-dom'
+
+import { PAGES } from 'config'
 
 import {
   Wrapper,
@@ -21,17 +24,22 @@ export const Radio = ({
   label = '',
   name,
   onClick,
-}: Props) => (
-  <Wrapper>
-    <Input
-      id={id}
-      type='radio'
-      name={name}
-      checked={checked}
-      onClick={onClick}
-    />
-    <Label htmlFor={id}>
-      {label}
-    </Label>
-  </Wrapper>
-)
+}: Props) => {
+  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false
+
+  return (
+    <Wrapper isUserAccountPage={isUserAccountPage}>
+      <Input
+        id={id}
+        type='radio'
+        name={name}
+        checked={checked}
+        onClick={onClick}
+        isUserAccountPage={isUserAccountPage}
+      />
+      <Label htmlFor={id}>
+        {label}
+      </Label>
+    </Wrapper>
+  )
+}

src/features/Common/Radio/styled.tsx

@@ -1,18 +1,25 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { devices } from 'config/devices'
 
-export const Wrapper = styled.div`
+type WrapperProps = {
+  isUserAccountPage?: boolean,
+}
+
+export const Wrapper = styled.div<WrapperProps>`
 
   @media ${devices.tablet} {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 163px;
-    height: 100px;
-    border-radius: 10px;
+    ${({ isUserAccountPage }) => (!isUserAccountPage
+    ? css`
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 163px;
+      height: 100px;
+      border-radius: 10px;
+    `
+    : '')}
   }
-
 `
 
 export const Label = styled.label`
@@ -22,8 +29,11 @@ export const Label = styled.label`
   font-size: 18px;
   line-height: 21px;
 `
+type InputProps = {
+  isUserAccountPage?: boolean,
+}
 
-export const Input = styled.input`
+export const Input = styled.input<InputProps>`
   position: absolute;
   z-index: -1;
   opacity: 0;
@@ -51,16 +61,21 @@ export const Input = styled.input`
   }
 
   @media ${devices.tablet} {
-    &+${Label}::before {
-      width: 163px;
-      height: 100px;
-      border-radius: 10px;
-      margin-right: 0;
-      background-image: none;
-    }
+    ${({ isUserAccountPage }) => (!isUserAccountPage
+    ? css`
+      &+${Label}::before {
+        width: 163px;
+        height: 100px;
+        border-radius: 10px;
+        margin-right: 0;
+        background-image: none;
+      }
 
-    &:checked+${Label}::before {
-      background-image: none;
-    }
+      &:checked+${Label}::before {
+        background-image: none;
+      }
+    `
+    : '')}
   }
+
 `

src/features/Modal/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { CloseButton } from 'features/Common/CloseButton'
 
 export const ModalContainer = styled.div`
@@ -21,6 +23,13 @@ export const ModalWindow = styled.div`
   padding: 15px;
   box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.7);
   border-radius: 10px;
+  
+  @media ${devices.mobile} {
+    height: 100vh;
+    width: 100vw;
+    border-radius: 0;
+  }
+  
 `
 
 export const ModalCloseButton = styled(CloseButton)`

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

@@ -21,6 +21,10 @@ export const PriceAmount = styled.span`
   @media ${devices.tablet} {
     font-size: 36px;
   }
+
+  @media ${devices.mobile} {
+    margin-left: 8px;
+  }
 `
 
 export const PriceDetails = styled.span`

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

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { Label } from 'features/Common/Radio/styled'
 import { PriceAmount, PriceDetails } from 'features/Register/components/Price/styled'
 
@@ -21,6 +23,34 @@ export const CardNumberWrapper = styled.div`
       margin-left: 22px;
     }
   }
+
+  @media ${devices.tablet} {
+    max-width: 415px;
+
+    ${Label} {
+      font-size: 16px; 
+      
+      &::before {
+        margin-left: 12px;
+        margin-right: 12px;
+      }
+    }
+  }
+
+  @media ${devices.mobile} {
+    max-width: 335px;
+    margin: 10px 0;
+
+    ${Label} {
+      font-size: 14px;
+      line-height: 24px;
+
+       &::before {
+        margin-left: 6px;
+        margin-right: 6px;
+      }
+    }
+  }
 `
 
 export const TextWrapper = styled.p`
@@ -40,6 +70,10 @@ export const TextWrapper = styled.p`
 
 export const CardNumberTextWrapper = styled(TextWrapper)`
   margin-right: 24px;
+
+  @media ${devices.mobile} {
+    margin-right: 5px;
+  }
 `
 
 export type Props = {
@@ -59,8 +93,18 @@ export const priceWrapperStyles = css<Props>`
     font-size: 12px;
     line-height: 12px;
   }
+
+  @media ${devices.mobile} {
+    ${PriceAmount} {
+      font-size: 17px;
+    }
+    ${PriceDetails} {
+      font-size: 10px;
+    }
+  }
 `
 
 export const PriceWrapper = styled.div`
   ${priceWrapperStyles}
+
 `

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

@@ -1,11 +1,18 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { BlockTitle } from 'features/Login/styled'
 
 export const PageTitleWrapper = styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: flex-end;
+
+  @media ${devices.tablet} {
+    flex-direction: column;
+    align-items: center;
+  }
 `
 
 export const TitleTextWrapper = styled.div`
@@ -15,4 +22,9 @@ export const TitleTextWrapper = styled.div`
     margin-bottom: 0;
     line-height: 28px;
   }
+
+  @media ${devices.tablet} {
+    margin-left: 0;
+    margin-top: 20px;
+  }
 `

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

@@ -1,9 +1,15 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const PlusIconWrapper = styled.span`
   width: 20px;
   height: 20px;
   margin-right: 22px;
   margin-left: 10px;
   background: url('/images/plusIcon.svg') no-repeat;
+
+  @media ${devices.laptop} {
+    background: url('/images/plusIcon-gray.svg') no-repeat;
+  }
 `

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

@@ -1,10 +1,16 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { BlockTitle } from 'features/Login/styled'
 import { T9n } from 'features/T9n'
 
 export const UserAccountBlockTitle = styled(BlockTitle)`
   align-self: flex-start;
+
+  @media ${devices.tablet} {
+    align-self: center;
+  }
 `
 
 export const SubscriptionTitle = styled(T9n)`

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

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { customScrollbar, customStylesMixin } from 'features/Common'
 import { T9n } from 'features/T9n'
 
@@ -11,12 +13,20 @@ export const AddSubscriptionModal = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
+
+ @media ${devices.mobile} {
+   width: 100%;
+ }
 `
 
 export const ModalTitle = styled(T9n)`
   display: block;
   font-size: 24px;
   font-weight: normal;
+
+  @media ${devices.mobile} {
+    font-size: 18px;
+  }
 `
 
 export const Line = styled.hr`
@@ -34,6 +44,10 @@ export const SaveButton = styled(OutlinedButton)`
   font-weight: normal;
   margin-left: auto;
   margin-top: auto;
+
+  @media ${devices.mobile} {
+    margin-right: auto;
+  }
 `
 
 export const SubscriptionsWrapper = styled.div`
@@ -43,4 +57,8 @@ export const SubscriptionsWrapper = styled.div`
   overflow: auto;
   ${customScrollbar};
   ${customStylesMixin};
+
+  @media ${devices.tablet} {
+    background-color: transparent;
+  }
 `

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

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { PriceWrapper, TextWrapper } from '../CardNumber/styled'
 
 export const TextNoBorderWrapper = styled.div`
@@ -15,8 +17,24 @@ export const TextNoBorderWrapper = styled.div`
   ${PriceWrapper} {
     margin-right: 0;
   }
+
+  @media ${devices.laptop} {
+    margin-top: 38px;
+  }
+
+  @media ${devices.tablet} {
+    max-width: 415px;
+  }
+
+  @media ${devices.mobile} {
+    max-width: 335px;
+  }
 `
 
 export const TextNoBorderTextWrapper = styled(TextWrapper)`
   font-size: 20px;
+
+  @media ${devices.tablet} {
+    font-size: 14px;
+  }
 `

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

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { outlineButtonStyles } from 'features/Common/Button'
 
 import { TextWrapper } from '../CardNumber/styled'
@@ -19,9 +21,31 @@ export const UserAccountButtonWrapper = styled.div`
   &:hover {
     cursor: pointer;
   }
+
+  @media ${devices.laptop} {
+    background-color: transparent;
+    width: 100%;
+    color: #494949;
+    border-color: #494949;
+  }
+
+  @media ${devices.tablet} {
+    max-width: 415px;
+    align-self: center;
+  }
+
+  @media ${devices.mobile} {
+    max-width: 335px;
+    align-self: center;
+    margin-top: 10px;
+  }
 `
 
 export const PlusIconTextWrapper = styled(TextWrapper)`
   font-size: 20px;
   color: white;
+
+  @media ${devices.laptop} {
+    color: #494949;
+  }
 `

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

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { Label as CheckboxLabel } from 'features/Common/Checkbox/styled'
 import { Label as RadioLabel } from 'features/Common/Radio/styled'
 
@@ -63,6 +65,14 @@ export const UserAccountSubscriptionWrapper = styled.div`
     border-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '1px solid #000' : '')};
     border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? 'none' : '')};
   }
+
+  @media ${devices.tablet} {
+    max-width: 415px;
+  }
+
+  @media ${devices.mobile} {
+    max-width: 355px;
+  }
 `
 
 export const CheckboxWrapper = styled.div`

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

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 type Props = {
   visa?: boolean,
 }
@@ -9,6 +11,10 @@ export const CardLogoStyles = css<Props>`
   height: ${({ visa }) => `${visa ? 12 : 19}px`};
   margin-right: 82px;
   background: ${({ visa }) => `url(/images/${visa ? 'visaLogo.png' : 'masterLogo.png'}) no-repeat`};
+
+  @media ${devices.tablet} {
+    margin-right: 5px;
+  }
 `
 
 export const VisaLogoWrapper = styled.span<Props>`

src/features/UserAccount/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { Form, BlockTitle } from 'features/Login/styled'
 import { outlineButtonStyles } from 'features/Common/Button'
 import { customScrollbar, customStylesMixin } from 'features/Common'
@@ -17,16 +19,43 @@ export const OutlinedButton = styled.button`
   &:hover {
     cursor: pointer;
   }
+
+  @media ${devices.laptop} {
+    background-color: transparent;
+    color: #0033CC;
+  }
+
+  @media ${devices.mobile} {
+    width: 100%;
+  }
 `
 
 export const UserAccountBlockTitle = styled(BlockTitle)`
   align-self: flex-start;
+
+  @media ${devices.tablet} {
+    align-self: center;
+  }
 `
 
 export const UserAccountFormWrapper = styled.div`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+
+  @media ${devices.desktop} {
+    flex-direction: column;
+
+  }
+
+  @media ${devices.laptop} {
+    flex-wrap: nowrap;
+    padding-left: 188px;
+  }
+
+  @media ${devices.tablet} {
+    padding-left: 0;
+  }
 `
 
 export const ButtonWrapper = styled.div`
@@ -34,14 +63,42 @@ export const ButtonWrapper = styled.div`
   align-self: flex-start;
   flex-direction: column;
   align-items: center;
+
+  @media ${devices.tablet} {
+    align-self: center;
+  }
+
+  @media ${devices.mobile} {
+   width: 335px;
+  }
 `
 
 export const UserAccountWrapper = styled.div`
-  width: 1776px;
   margin-top: 140px;
+
+  @media ${devices.desktop} {
+    margin-top: 63px;
+    padding-left: 46px;
+  }
+
+   @media ${devices.tablet} {
+    padding-left: 0;
+  }
 `
 
-export const UserAccountComponentWrapper = styled.div``
+export const UserAccountComponentWrapper = styled.div`
+
+  @media ${devices.laptop} {
+    justify-self: flex-start;
+    width: 100%;
+  }
+
+  @media ${devices.tablet} {
+    justify-self: center;
+    width: auto;
+  }
+  
+`
 
 export const FormWrapper = styled.div`
   margin-right: 48px;
@@ -53,6 +110,33 @@ export const FormWrapper = styled.div`
   &:last-child {
     margin-right: 0;
   }
+
+  @media ${devices.desktop} {
+    margin-right: 0;
+    margin-top: 97px;
+
+    ${Form} {
+      margin: 0;
+    }
+
+    &:nth-child(2) {
+      margin-top: 47px; 
+    }
+    &:last-child {
+      margin-bottom: 100px; 
+    }
+      
+  }
+
+  @media ${devices.tablet} {
+    ${Form}{
+      width: auto;
+    }
+  }
+
+  @media ${devices.mobile} {
+    margin-top: 57px;
+  }
 `
 
 export const AddSubscriptionModal = styled.div`