Ott 1734 preferences mobile (#517)

* style(#1734): preferences popup responsive styles added

* style(#1734): style tweaks

* style(#1734): min fix

Co-authored-by: Farber Denis <denis.farber@instatsport.com>

src/features/PreferencesPopup/components/Search/index.tsx

@@ -1,4 +1,6 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
 
 import { ClearButton } from 'features/Search/styled'
 import { usePreferencesStore } from 'features/PreferencesPopup/store'
@@ -52,6 +54,18 @@ const Input = styled.input`
   ::placeholder {
     color: rgba(255, 255, 255, 0.5);
   }
+
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        font-size: 10px;
+      }
+
+      @media (orientation: landscape){
+        font-size: 12px;
+      }
+    `
+    : ''};
 `
 
 export const Search = () => {

src/features/PreferencesPopup/components/SportList/styled.tsx

@@ -1,6 +1,7 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { devices } from 'config'
+import { isMobileDevice } from 'config/userAgent'
 
 import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox'
 import { Label } from 'features/Common/Checkbox/styled'
@@ -14,6 +15,14 @@ export const Wrapper = styled.div`
   @media ${devices.tablet} {
     min-width: 13rem;
   }
+
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        min-width: 35%;
+      }
+    `
+    : ''};
 `
 
 export const List = styled.ul`
@@ -32,6 +41,13 @@ export const Checkbox = styled(BaseCheckbox)`
     font-weight: normal;
     font-size: 0.66rem;
     line-height: 1rem;
+    ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        font-size: 12px;
+      }
+    `
+    : ''};
   }
   ${CheckboxSvg} {
     margin-right: 12px;

src/features/PreferencesPopup/components/TournamentInfo/index.tsx

@@ -1,4 +1,6 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
 
 import type { Tournament } from 'requests/getSportTournaments'
 
@@ -18,13 +20,27 @@ const Wrapper = styled.div`
   justify-content: center;
 `
 
+const StyledName = styled(Name)`
+ ${isMobileDevice
+    ? css`
+     @media (max-width: 650px){
+      font-size: 10px;
+     }
+
+     @media (orientation: landscape){
+      font-size: 12px;
+     }
+   `
+    : ''}
+`
+
 type Props = {
   tournament: Tournament,
 }
 
 export const TournamentInfo = ({ tournament }: Props) => (
   <Wrapper>
-    <Name nameObj={tournament} />
+    <StyledName nameObj={tournament} />
     <ItemInfo>
       <SportIcon sport={tournament.sport} />
       <Flag src={`https://instatscout.com/images/flags/48/${tournament.country.id}.png`} />

src/features/PreferencesPopup/components/TournamentListItem/index.tsx

@@ -6,6 +6,8 @@ import floor from 'lodash/floor'
 
 import type { Tournament, Tournaments } from 'requests'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { TournamentInfo } from '../TournamentInfo'
 import { Checkbox } from '../../styled'
 
@@ -38,6 +40,7 @@ export type ItemData = {
 export const TournamentListItem = ({
   data,
   index,
+  style,
 }: ListChildComponentProps<ItemData>) => {
   const {
     isTournamentSelected,
@@ -48,7 +51,7 @@ export const TournamentListItem = ({
   if (!tournament) return null
 
   return (
-    <Item style={getTwoColumnListStyles(index)}>
+    <Item style={isMobileDevice ? style : getTwoColumnListStyles(index)}>
       <Checkbox
         checked={isTournamentSelected(tournament)}
         label={<TournamentInfo tournament={tournament} />}

src/features/PreferencesPopup/components/TournamentsBlock/index.tsx

@@ -1,4 +1,6 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
 
 import { T9n } from 'features/T9n'
 
@@ -14,12 +16,26 @@ const Wrapper = styled.div`
   align-items: flex-start;
   padding-left: 14px;
   flex-grow: 1;
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        padding-left: 0;
+      }
+    `
+    : ''};
 `
 
 const CheckboxWrapper = styled.div`
   margin: 20px 0 22px 2px;
   margin-top: 20px;
   margin-bottom: 22px;
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        margin: 15px 0 10px;
+      }
+    `
+    : ''};
 `
 
 export const TournamentsBlock = () => {

src/features/PreferencesPopup/components/TournamentsList/index.tsx

@@ -2,10 +2,12 @@ import { memo } from 'react'
 import type { ListItemKeySelector } from 'react-window'
 import { FixedSizeList } from 'react-window'
 
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import size from 'lodash/size'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { customScrollbar } from 'features/Common'
 
 import type { ItemData } from '../TournamentListItem'
@@ -31,7 +33,7 @@ const List = memo((props: Props) => {
       innerElementType='ul'
       width='100%'
       height={432}
-      itemSize={24}
+      itemSize={isMobileDevice ? 36 : 24}
       itemCount={size(tournaments)}
       itemKey={getItemKey}
       itemData={props}
@@ -55,6 +57,18 @@ export const TournamentsList = styled(List)`
     height: 20rem !important;
   }
 
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        height: 30rem !important;
+      }
+
+      @media (orientation: landscape){
+        height: 10rem !important;
+      }
+    `
+    : ''};
+
   ${customScrollbar}
 
   ::-webkit-scrollbar {

src/features/PreferencesPopup/styled.tsx

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { ModalWindow } from 'features/Modal/styled'
 import { Modal as BaseModal } from 'features/Modal'
 import { Header as BaseHeader } from 'features/PopupComponents'
@@ -25,6 +27,21 @@ export const Modal = styled(BaseModal)`
       width: 70rem;
       height: auto;
     }
+
+
+    ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        width: 95vw;
+        height: auto;
+        top: -7vh;
+      }
+
+      @media (orientation: landscape){
+        min-width: 95vw;
+      }
+    `
+    : ''};
   }
 `
 
@@ -44,6 +61,13 @@ export const Header = styled(BaseHeader)`
   height: auto;
   padding-top: 40px;
   justify-content: center;
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        padding-top: 33px;
+      }
+    `
+    : ''};
 `
 
 export const HeaderTitle = styled.span`
@@ -51,6 +75,18 @@ export const HeaderTitle = styled.span`
   font-size: 1.13rem;
   line-height: 1.13rem;
   color: #FFFFFF;
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      @media (orientation: landscape) {
+        font-size: 20px;
+      }
+    `
+    : ''};
 `
 
 export const BlockTitle = styled.span`
@@ -59,11 +95,37 @@ export const BlockTitle = styled.span`
   line-height: 0.85rem;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.5);
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        font-size: 8px;
+        line-height: 15px;
+      }
+
+      @media (orientation: landscape){
+        font-size: 10px;
+        line-height: 16px;
+      }
+
+    `
+    : ''};
 `
 
 export const Body = styled.div`
   padding: 25px 40px 0 42px;
   display: flex;
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        padding: 13px 25px 0;
+        flex-direction: column;
+      }
+
+      @media (orientation: landscape){
+        padding: 22px 23px 0 29px;
+      }
+    `
+    : ''};
 `
 
 export const Footer = styled.div`
@@ -71,6 +133,13 @@ export const Footer = styled.div`
   display: flex;
   justify-content: center;
   padding: 1.89rem;
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        padding: 20px 25px 20px;
+      }
+    `
+    : ''};
 `
 
 export const Checkbox = styled(BaseCheckbox)`
@@ -79,6 +148,14 @@ export const Checkbox = styled(BaseCheckbox)`
     font-size: 0.66rem;
     line-height: 0.94rem;
     letter-spacing: 0.1px;
+    ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        font-size: 12px;
+        line-height: 18px;
+      }
+    `
+    : ''};
   }
   ${CheckboxSvg} {
     align-self: auto;
@@ -91,6 +168,19 @@ export const Checkbox = styled(BaseCheckbox)`
 export const ApplyButton = styled(ButtonSolid)`
   width: 270px;
   border-radius: 5px;
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        width: 100%;
+        min-height: 42px;
+      }
+      
+      @media (orientation: landscape){
+        width: 290px;
+        min-height: 42px;
+      }
+    `
+    : ''};
 `
 
 export const Loader = styled(ArrowLoader)`