Preprod (#486)

* style(#1284): seach responsive styles added (#480)

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

* refactor(ott-1548): change tabs size and lexics (#477)

* style(hidescore): hide scrore icon mobile size fix (#481)

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

* style(#mobilefix): fixed broken mobile styles (#482)

* fix(ott-1597): fix mobile styles (#483)

Co-authored-by: boyvanov <boyvanov.sergey@gmail.com>

* feat(ott-1613): landing page adaptive (#484)

* Ott 1603 configurations for diff clients (#485)

* fix(ott-1498): add facr staging

* fix(ott-1498): fix proc and make

* feat(ott-1498): changed client_id to facr-ott-web

* chore(ott-1498): changed directory from facrtv to facr

* fix(ott-1498): rm facrtv version key from get matches requests

* fix(ott-1498): returned version key for get matches requests

* feat(ott-1498): added hash to well-known certificate oidc

* fix(ott-1552): add czech lang

* fix(ott-1498): fixes for facr

* fix(1603): removed old paged

* fix(1603): client configurations

* fix(1603): request params

* fix(1603): styles

* fix(1603): added default client language

Co-authored-by: blazecolour <936x936@gmail.com>
Co-authored-by: quitesocial <quitesocial@yandex.ru>

Co-authored-by: Farber Denis <42491613+Bombamuerta@users.noreply.github.com>
Co-authored-by: Farber Denis <denis.farber@instatsport.com>
Co-authored-by: Aleksey Miroshnichenko <alexnofoget@mail.ru>
Co-authored-by: boyvanov <50294488+boyvanov@users.noreply.github.com>
Co-authored-by: boyvanov <boyvanov.sergey@gmail.com>
Co-authored-by: PolyakovaM <55061222+PolyakovaM@users.noreply.github.com>
Co-authored-by: blazecolour <936x936@gmail.com>
Co-authored-by: quitesocial <quitesocial@yandex.ru>

Makefile

@@ -16,6 +16,12 @@ preproduction-build: clean
 production-build: clean
 	REACT_APP_ENV=production REACT_APP_STRIPE_PK=pk_live_ANI76cBhSo69DZUxPmyRVIZW npm run build
 
+facr-build: clean
+	REACT_APP_ENV=staging REACT_APP_CLIENT=facr npm run build
+
+facr-production-build: clean
+	REACT_APP_ENV=production REACT_APP_CLIENT=facr npm run build
+
 .PHONY: build
 
 prod: production-build
@@ -24,6 +30,9 @@ prod: production-build
 preprod: preproduction-build
 	rsync -zavP build/ -e 'ssh -p 666' ott-test@test.instat.tv:/usr/local/www/ott-test/wwwroot/
 
+facr-prod: facr-production-build
+	rsync -zavP build/ -e 'ssh -p 666' ott@instat.tv:/usr/local/www/ott/facr-wwwroot/
+
 stage: build
 	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/
 
@@ -42,6 +51,9 @@ d-stage: build
 e-stage: build
 	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/e-wwwroot/
 
+facr-stage: facr-build
+	rsync -zavP build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/facrtv-wwwroot/
+
 test:
 	npm test
 

src/config/clients/facr.tsx

@@ -0,0 +1,28 @@
+import type { ClientConfig } from './types'
+import { PROCEDURES } from '../procedures'
+
+const randomHash = () => (
+  (Math.random() ** Math.random()) * 9999999999999999
+)
+
+const params = { _p_version: 'facrtv' }
+
+export const facr: ClientConfig = {
+  auth: {
+    clientId: 'facr-ott-web',
+    metaDataUrlParams: `?hash=${randomHash()}`,
+  },
+  defaultLanguage: 'cs',
+  requests: {
+    [PROCEDURES.get_matches]: params,
+    [PROCEDURES.get_team_matches]: params,
+    [PROCEDURES.get_player_matches]: params,
+    [PROCEDURES.get_tournament_matches]: params,
+  },
+  styles: {
+    background: '',
+    logo: 'facr-logo.svg',
+    logoHeight: 3.35,
+    logoWidth: 2.45,
+  },
+}

src/config/clients/index.tsx

@@ -0,0 +1,13 @@
+import type { ClientConfig } from './types'
+
+import { instat } from './instat'
+import { facr } from './facr'
+
+const currentClient = process.env.REACT_APP_CLIENT || 'instat'
+
+const clients = {
+  facr,
+  instat,
+}
+
+export const client: ClientConfig = clients[currentClient]

src/config/clients/instat.tsx

@@ -0,0 +1,13 @@
+import type { ClientConfig } from './types'
+
+export const instat: ClientConfig = {
+  auth: {
+    clientId: 'ott-web',
+  },
+  styles: {
+    background: 'background-image: url(/images/Checker.png);',
+    logo: 'logo.svg',
+    logoHeight: 1.465,
+    logoWidth: 6.37,
+  },
+}

src/config/clients/types.tsx

@@ -0,0 +1,19 @@
+import type { Languages } from 'config/languages'
+
+type ProcedureName = string
+type RequestParameters = any
+
+export type ClientConfig = {
+  auth: {
+    clientId: string,
+    metaDataUrlParams?: string,
+  },
+  defaultLanguage?: Languages,
+  requests?: Record<ProcedureName, RequestParameters>,
+  styles: {
+    background?: string,
+    logo: string,
+    logoHeight?: number,
+    logoWidth?: number,
+  },
+}

src/config/index.tsx

@@ -8,3 +8,4 @@ export * from './history'
 export * from './devices'
 export * from './currencies'
 export * from './dashes'
+export * from './tabsGroup'

src/config/languages.tsx

@@ -9,6 +9,11 @@ export const langsList = [
     locale: 'en',
     title: 'English',
   },
+  {
+    className: 'cz',
+    locale: 'cs',
+    title: 'Čeština',
+  },
 ] as const
 
 export type Languages = typeof langsList[number]['locale']

src/config/lexics/indexLexics.tsx

@@ -3,7 +3,9 @@ import { proceduresLexics } from './procedures'
 import { publicLexics } from './public'
 
 const matchPopupLexics = {
+  actions: 588,
   apply: 13491,
+  commentators: 15424,
   episode_duration: 13410,
   events: 1020,
   from_end_match: 15396,
@@ -83,6 +85,7 @@ export const indexLexics = {
   kg: 652,
   kickoff_in: 13027,
   live: 13024,
+  loading: 3527,
   logout: 4306,
   match_status_finished: 12985,
   match_status_live: 12984,

src/config/pages.tsx

@@ -1,9 +1,7 @@
 export const PAGES = {
   home: '/',
-  login: '/login',
   match: '/matches',
   player: '/players',
-  register: '/register',
   team: '/teams',
   tournament: '/tournaments',
   useraccount: '/useraccount',

src/config/tabsGroup.tsx

@@ -0,0 +1 @@
+export const MATCH_SIDE_PLAYLIST_WIDTH = [80, 85, 123]

src/config/userAgent.tsx

@@ -3,5 +3,3 @@ import { includes } from 'lodash'
 export const isIphone = includes(window.navigator.userAgent, 'iPhone')
 
 export const isMobileDevice = includes(window.navigator.userAgent, 'Android') || isIphone
-// удалю когда закончу с адаптивом.
-// || includes(window.navigator.userAgent, 'Linux')

src/features/AuthStore/helpers.tsx

@@ -1,15 +1,17 @@
 import type { UserManagerSettings } from 'oidc-client'
 import { WebStorageStateStore } from 'oidc-client'
 
+import { client } from 'config/clients'
+
 export const AUTH_PROVIDER_URL = 'https://auth.instat.tv'
 
 export const getClientSettings = (): UserManagerSettings => ({
   authority: AUTH_PROVIDER_URL,
   automaticSilentRenew: true,
-  client_id: 'ott-web',
+  client_id: client.auth.clientId,
   filterProtocolClaims: false,
   loadUserInfo: false,
-  metadataUrl: `${AUTH_PROVIDER_URL}/.well-known/openid-configuration`,
+  metadataUrl: `${AUTH_PROVIDER_URL}/.well-known/openid-configuration${client.auth.metaDataUrlParams || ''}`,
   redirect_uri: `${window.origin}/redirect`,
   response_mode: 'query',
   response_type: 'id_token token',

src/features/Background/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { client } from 'config/clients'
+
 const Container = styled.div`
   width: 100%;
   min-height: 100vh;
@@ -12,7 +14,7 @@ const Container = styled.div`
 `
 
 export const ImageBackground = styled(Container)`
-  background-image: url(/images/Checker.png);
+  ${client.styles.background}
   background-size: 12px;
 `
 

src/features/Common/Input/styled.tsx

@@ -49,6 +49,7 @@ export const LabelTitle = styled.p<TitleProps>`
   padding-top: 2px;
   color: ${({ theme: { colors } }) => colors.secondary};
   width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
+  min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
 
   @media ${devices.laptop} {
     ${({ isUserAccountPage }) => (!isUserAccountPage
@@ -68,10 +69,12 @@ export const LabelTitle = styled.p<TitleProps>`
   }
   ${isMobileDevice
     ? css`
-      display: block;
+      @media (max-width: 650px){
-      padding-left: 10px;
+        display: block;
-      font-size: 12px;
+        padding-left: 10px;
-      min-width: 76px;
+        font-size: 12px;
+        width: auto;
+      }
     `
     : ''};
 `

src/features/Common/Tabs/index.tsx

@@ -6,6 +6,7 @@ type TabProps = {
   disabled?: boolean,
   selected?: boolean,
   upperCase?: boolean,
+  width?: number,
 }
 
 export const Tab = styled.button.attrs(({ selected }: TabProps) => ({
@@ -51,6 +52,16 @@ export const Tab = styled.button.attrs(({ selected }: TabProps) => ({
        `
   )}
 
+  ${({ width }) => (
+    !isMobileDevice
+      ? css`
+        @media (orientation: landscape){
+          width: ${width}px !important;
+        }
+      `
+      : ''
+  )}
+
   :not(:last-child) {
     border-right: 1px solid #FFFFFF;
   }

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

@@ -19,7 +19,7 @@ export const Header = () => (
     <Position left={1.7}>
       <HeaderGroup marginTop={0.19}>
         <Link to={PAGES.home}>
-          <HeaderLogo width={52} />
+          <HeaderLogo />
         </Link>
         <Search />
       </HeaderGroup>

src/features/ItemsList/styled.tsx

@@ -15,6 +15,16 @@ export const Item = styled.li`
   :focus {
     background-color: #999;
   }
+
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        &:not(:last-child) {
+          margin-bottom: 10px;
+        }
+      }
+    `
+    : ''};
 `
 
 export const StyledLink = styled(ProfileLink)`

src/features/JoinMatchPage/styled.tsx

@@ -69,7 +69,7 @@ export const SportImgWrapper = styled.div<Props>`
   background-position: center;
   background-size: contain;
   width: 512px;
-  height: 641px;
+  height: 80%;
   margin-right: 5%;
   ${isMobileDevice
     ? css`
@@ -103,7 +103,7 @@ export const DateInfoWrapper = styled.div`
   ${isMobileDevice
     ? css`
       justify-content: space-between;
-      font-size: 14px;
+      font-size: 2.3rem;
     `
     : ''};
 `
@@ -153,17 +153,17 @@ export const TeamsNameWrapper = styled.div`
   ${isMobileDevice
     ? css`
       margin: 10px 0;
-      font-size: 16px;
+      font-size: 2.4rem;
     `
     : ''};
 `
 
 export const MainInfoTitle = styled.div`
   font-weight: 600;
-  font-size: 46px;
+  font-size: 2rem;
   ${isMobileDevice
     ? css`
-      font-size: 32px;
+      font-size: 3.8rem;
       margin-bottom: 15px;
     `
     : ''};
@@ -190,9 +190,8 @@ export const MainInfoText = styled.div`
   line-height: 150%;
   ${isMobileDevice
     ? css`
-      font-size: 15px;
+      font-size: 2.2rem;
       margin: 15px 0 25px;
-      width: 85%;
     `
     : ''};
 `
@@ -245,7 +244,7 @@ export const SportImgMobileDevice = styled(SportImgWrapper)`
   ${isMobileDevice
     ? css`
       display: block;
-      height: 53%;
+      height: 42%;
       width: 100%;
       margin-right: 0;
       @media screen and (orientation: landscape){    

src/features/LexicsStore/hooks/useLang.tsx

@@ -3,11 +3,12 @@ import { useCallback } from 'react'
 import { useLocalStore } from 'hooks'
 
 import type { Languages } from 'config/languages'
+import { client } from 'config/clients'
 
 import { isSupportedLang } from '../helpers/isSupportedLang'
 
 const LANG_KEY = 'lang'
-const DEFAULT_LANG = 'en'
+const DEFAULT_LANG = client.defaultLanguage || 'en'
 
 export const useLang = () => {
   const [lang, setLang] = useLocalStore<Languages>({

src/features/Logo/index.tsx

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
-import { isMobileDevice } from '../../config/userAgent'
+
+import { isMobileDevice } from 'config/userAgent'
+import { client } from 'config/clients'
 
 type Props = {
   height?: number,
@@ -8,11 +10,11 @@ type Props = {
 
 export const Logo = styled.div<Props>`
   display: block;
-  width: ${({ width = 11.04 }) => width}rem;
+  width: ${client.styles.logoWidth}rem;
-  height: ${({ height = 2.55 }) => height}rem;
+  height: ${client.styles.logoHeight}rem;
   background-size: contain;
   background-repeat: no-repeat;
-  background-image: url(/images/logo.svg);
+  background-image: url(/images/${client.styles.logo});
   ${isMobileDevice
     ? css`
       width: 144px;

src/features/MatchPage/components/LiveMatchSidePlaylists/index.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components/macro'
 
-import { devices } from 'config'
+import { devices, MATCH_SIDE_PLAYLIST_WIDTH } from 'config'
 
 import { T9n } from 'features/T9n'
 import { Tab, TabsGroup } from 'features/Common'
@@ -27,14 +27,14 @@ export const LiveMatchSidePlaylists = () => (
   <Wrapper>
     <Container>
       <TabsGroup buttons={3}>
-        <Tab selected>
+        <Tab width={MATCH_SIDE_PLAYLIST_WIDTH[0]} selected>
           <T9n t='watch' />
         </Tab>
-        <Tab>
+        <Tab width={MATCH_SIDE_PLAYLIST_WIDTH[1]}>
-          <T9n t='events' />
+          <T9n t='actions' />
         </Tab>
-        <Tab>
+        <Tab width={MATCH_SIDE_PLAYLIST_WIDTH[2]}>
-          <T9n t='languages' />
+          <T9n t='commentators' />
         </Tab>
       </TabsGroup>
     </Container>

src/features/MatchSidePlaylists/components/TabEvents/styled.tsx

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
+import { isMobileDevice } from 'config/userAgent'
+
 import { ProfileLogo } from 'features/ProfileLogo'
 
 import { Tabs as TabsBase, Tab as TabBase } from '../PlayersPlaylists/styled'
@@ -62,6 +64,16 @@ export const Avatar = styled(ProfileLogo)<AvatarProps>`
         transform: translateY(-50%);
       `
   )}
+
+  ${({ isHomeTeam }) => (
+    isMobileDevice
+      ? css`
+          @media (max-width: 750px) and (orientation: portrait){
+            ${isHomeTeam ? 'left: 20px;' : 'right: 20px;'}
+          }
+        `
+      : ''
+  )}
 `
 
 export const EventInfo = styled.div`
@@ -140,4 +152,14 @@ export const Button = styled(ButtonBase)<ButtonProps>`
       ? css`padding-left: 60px;`
       : css`padding: 0 40px 0 60px;`
   )}
+
+  ${({ isHomeTeam }) => (
+    isMobileDevice
+      ? css`
+        @media (max-width: 750px) and (orientation: portrait){
+          ${isHomeTeam ? 'padding-left: 90px;' : 'padding: 0 60px 0 90px;'}
+        }
+      `
+      : ''
+  )}
 `

src/features/MatchSidePlaylists/index.tsx

@@ -1,6 +1,7 @@
 import type { Events, MatchInfo } from 'requests'
 
 import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
+import { MATCH_SIDE_PLAYLIST_WIDTH } from 'config'
 import { Tab, TabsGroup } from 'features/Common'
 import { T9n } from 'features/T9n'
 
@@ -47,23 +48,26 @@ export const MatchSidePlaylists = ({
       <TabsWrapper>
         <TabsGroup buttons={3}>
           <Tab
+            width={MATCH_SIDE_PLAYLIST_WIDTH[0]}
             selected={selectedTab === Tabs.WATCH}
             onClick={() => onTabClick(Tabs.WATCH)}
           >
             <T9n t='watch' />
           </Tab>
           <Tab
+            width={MATCH_SIDE_PLAYLIST_WIDTH[1]}
             selected={selectedTab === Tabs.EVENTS}
             onClick={() => onTabClick(Tabs.EVENTS)}
           >
-            <T9n t='events' />
+            <T9n t='actions' />
           </Tab>
           <Tab
             disabled
+            width={MATCH_SIDE_PLAYLIST_WIDTH[2]}
             selected={selectedTab === Tabs.LANGUAGES}
             onClick={() => onTabClick(Tabs.LANGUAGES)}
           >
-            <T9n t='languages' />
+            <T9n t='commentators' />
           </Tab>
         </TabsGroup>
       </TabsWrapper>

src/features/MatchSwitches/styled.tsx

@@ -58,17 +58,21 @@ export const Icon = styled.div<IconProps>`
         background-image: url(/images/${iconName}-off.svg);
       `
   )};
+  
+  @media ${devices.tablet} {
+      width: 2.7rem;
+      height: 1.5rem;
+  }
+  
     ${isMobileDevice
     ? css`
-      width: 51px;
+      @media (max-width: 650px){
-      height: 31px;
+        width: 51px;
+        height: 31px;
+      }
     `
     : ''}
-    
+    `
-  @media ${devices.tablet} {
-      width: 2.7rem;
-      height: 1.5rem;
-    }`
 
 export const Wrapper = styled.div`
   margin-right: 2.45rem;

src/features/Matches/index.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react'
 
+import { T9n } from 'features/T9n'
 import { InfiniteScroll } from 'features/InfiniteScroll'
 
 import type { Props } from './hooks'
@@ -49,7 +50,7 @@ export const Matches = (props: Props) => {
         as='grid'
         matches={broadcast}
       />
-      {isFetching && <Loading>Loading...</Loading>}
+      {isFetching && <Loading><T9n t='loading' />...</Loading>}
     </InfiniteScroll>
   )
 }

src/features/ProfileCard/components/StarIcon/index.tsx

@@ -4,6 +4,11 @@ const Svg = styled.svg`
   margin-right: 0.472rem;
   width: 0.95rem;
   height: 0.95rem;
+
+  @media (max-width: 650px){
+    width: 11px;
+    height: 11px;
+  }
 `
 
 type StarProps = {

src/features/ProfileCard/styled.tsx

@@ -1,6 +1,7 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { ProfileTypes } from 'config'
+import { isMobileDevice } from 'config/userAgent'
 
 import { ProfileLogo } from 'features/ProfileLogo'
 import { ProfileLink } from 'features/ProfileLink'
@@ -12,6 +13,17 @@ export const Wrapper = styled.div`
   height: 100%;
   position: absolute;
   left: 40.3%;
+
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        left: 50%;
+        transform: translateX(-50%);
+        height: auto;
+        bottom: 0;
+      }
+    `
+    : ''};
 `
 
 export const ProfileName = styled.h1`
@@ -21,6 +33,17 @@ export const ProfileName = styled.h1`
   letter-spacing: 0.2px;
   color: #fff;
   margin-bottom: 0.12rem;
+
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        font-size: 14px;
+        line-height: 19px;
+        white-space: nowrap;
+        margin-bottom: 0;
+      }
+    `
+    : ''};
 `
 
 export const Logo = styled(ProfileLogo)`
@@ -33,6 +56,15 @@ export const Logo = styled(ProfileLogo)`
   padding: ${({ profileType }) => (
     profileType === ProfileTypes.PLAYERS ? '0' : '0.19rem 0 0.75rem 0'
   )};
+
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        width: 81px;
+        height: 81px;
+      }
+    `
+    : ''};
 `
 
 export const Details = styled.div`
@@ -66,12 +98,31 @@ export const FavoriteButton = styled.button<FavoriteButtonProps>`
       ? 'opacity: 1'
       : 'opacity: 0.5'
   )};
+
+${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        width: 100px;
+        height: 22px;
+        font-size: 10px;
+        border-radius: 7px;
+        border: 0.7px solid #fff;
+      }
+    `
+    : ''};
 `
 
 export const InfoItems = styled.div`
   display: flex;
   align-items: center;
   margin-bottom: 1.04rem;
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        margin-bottom: 5px;
+      }
+    `
+    : ''};
 `
 
 export const InfoFlag = styled.img`
@@ -80,12 +131,31 @@ export const InfoFlag = styled.img`
   margin-right: 0.3rem;
   object-fit: contain;
   object-position: center;
+
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        width: 12px;
+        height: 8px;
+      }
+    `
+    : ''};
 `
 
 export const InfoName = styled(Name)`
   font-size: 0.9rem;
   line-height: 1.18rem;
   color: rgba(255, 255, 255, 0.7);
+
+  ${isMobileDevice
+    ? css`
+      @media (max-width: 650px),(orientation: landscape){
+        font-size: 10px;
+        line-height: 19px;
+        white-space: nowrap;
+      }
+    `
+    : ''};
 `
 
 export const StyledLink = styled(ProfileLink)`

src/features/ProfileHeader/index.tsx

@@ -36,7 +36,7 @@ export const ProfileHeader = ({
         <Position left={1.7}>
           <HeaderGroup marginTop={0.19}>
             <Link to={PAGES.home}>
-              <HeaderLogo width={52} />
+              <HeaderLogo />
             </Link>
             <Search />
           </HeaderGroup>

src/features/ProfileHeader/styled.tsx

@@ -45,16 +45,13 @@ export const HeaderGroup = styled.div<Props>`
   ${isMobileDevice
     ? css`
       position: relative;
-      min-width: 50px;
       justify-content: flex-end;
     `
     : ''};
 `
 
 export const HeaderLogo = styled(Logo)`
-  width: 6.37rem;
+  margin-top: 4px;
-  height: 1.465rem;
-  margin-top: 3px;
   ${isMobileDevice
     ? css`
       width: 85px;
@@ -63,10 +60,11 @@ export const HeaderLogo = styled(Logo)`
       top: 5px;
       transform: translateX(-50%);
       position: absolute;
-      
+
       @media screen and (orientation: landscape){
         width: 97px;
         height: 23px;
+        margin-top: 0;
       }
     `
     : ''}

src/features/Search/styled.tsx

@@ -19,7 +19,6 @@ export const Wrapper = styled.div`
       max-width: 100%;
       z-index: 11;
       margin-left: 0;
-      left: -40px;
     `
     : ''};
 
@@ -38,8 +37,9 @@ export const LoaderWrapper = styled.div`
   justify-content: center;
   ${isMobileDevice
     ? css`
-      max-width: 50vw;
+      max-width: 95vw;
-      left: 100%;
+      left: 0;
+      border-radius: 4px;
       @media screen and (orientation: landscape){
         max-width: 368px;
       }
@@ -62,8 +62,8 @@ const expandedStyles = css`
       max-width: 100%;
       border-radius: 4px;
       padding: 0 5px;
-      width: 50vw;
+      width: 95vw;
-      left: 100%;
+      left: 0;
       @media screen and (orientation: landscape){
         max-width: 368px;
       }
@@ -179,13 +179,13 @@ export const Results = styled.div`
   z-index: 2;
   ${isMobileDevice
     ? css`
-      top: 32px;
+      top: 33px;
-      left: 100%;
+      left: 0;
       padding: 20px;
-      width: 90vw;
+      width: 95vw;
       @media screen and (orientation: landscape){
         max-width: 368px;
-        left: 100%;
+        left: 0;
       }
     `
     : ''};
@@ -209,7 +209,7 @@ export const ClearButton = styled.button`
     ? css`
       width: 20px;
       margin-right: 5px;
-      right: -100%;
+      right: 0;
     `
     : ''};
 `

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

@@ -65,6 +65,7 @@ export const CustomRadio = styled(Radio)`
     ${Label} {
       font-size: 14px;
       line-height: 24px;
+      white-space: nowrap;
     }
   }
 `

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

@@ -13,10 +13,8 @@ const HeaderStyled = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 45px;
+  margin-bottom: 65px;
-  height: 50px;
+
-  padding-top: 8px;
-  
   @media ${devices.tablet} {
     margin-bottom: 0;
   }
@@ -38,7 +36,7 @@ export const Header = () => (
   <HeaderStyled>
     <HeaderGroup>
       <Link to={PAGES.home}>
-        <Logo width={6.6} />
+        <Logo />
       </Link>
     </HeaderGroup>
   </HeaderStyled>

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

@@ -18,18 +18,22 @@ export const Form = styled.div`
   ${InputWrapper} {
     height: 2.4rem;
     margin-top: 0.5rem;
-    ${isMobileDevice
+
-    ? css`
-      height: 40px;
-      margin-top: 8px;
-      padding-left: 0;
-    `
-    : ''};
     
     @media ${devices.tablet} {
       height: 4.6rem;
       margin-top: 1rem;
     }
+
+    ${isMobileDevice
+    ? css`
+      @media (max-width: 650px){
+        height: 40px;
+        margin-top: 8px;
+        padding-left: 0;
+      }
+    `
+    : ''};
   }
 
   @media ${devices.tablet} {
@@ -70,6 +74,12 @@ export const SectionTitle = styled.span`
     font-size: 1.4rem;
     line-height: 1.7rem;
   }
+
+  @media ${devices.mobile}{
+    font-size: 10px;
+    margin-bottom: 5px;
+  }
+
 `
 
 export const PasswordInput = styled(PasswordInputBase)`
@@ -87,17 +97,20 @@ export const PasswordInput = styled(PasswordInputBase)`
     }
     
   }
+  @media ${devices.tablet} {
+    height: 4.6rem;
+    margin-bottom: 1rem;
+  }
   ${isMobileDevice
     ? css`
-      height: 40px;
+      @media (max-width: 650px){
-      padding-left: 10px;
+        height: 40px;
+        padding-left: 10px;
+      }
     `
     : ''};
   
-  @media ${devices.tablet} {
+
-    height: 4.6rem;
-    margin-bottom: 1rem;
-  }
 `
 
 export const PrivacyPolicyLink = styled.a`

src/features/UserAccount/styled.tsx

@@ -19,7 +19,7 @@ export const SolidButton = styled(ButtonSolid)`
   border-radius: 5px;
   display: flex;
   align-items: center;
-  
+
   @media ${devices.tablet} {
     height: 5rem;
     font-size: 2.0rem;
@@ -29,10 +29,12 @@ export const SolidButton = styled(ButtonSolid)`
 
   ${isMobileDevice
     ? css`
-      height: 35px;
+      @media (max-width: 650px){
-      display: flex;
+        height: 35px;
-      justify-content: center;
+        display: flex;
-      width: 100%;
+        justify-content: center;
+        width: 100%;
+      }
       @media (orientation: landscape){
         width: auto;
       }
@@ -105,7 +107,7 @@ export const UserAccountWrapper = styled.div`
   height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: 30px 30px 60px 35px;
+  padding: 32px 30px 60px 36px;
   ${isMobileDevice
     ? css`
      padding: 15px 15px 0;
@@ -156,7 +158,7 @@ export const Navigations = styled.nav`
   display: flex;
   flex-direction: column;
   border-right: 1px solid rgba(255, 255, 255, 0.4);
-  
+
   @media ${devices.tablet} {
     height: auto;
     width: 100%;
@@ -175,7 +177,7 @@ export const Navigations = styled.nav`
         height: 100%;
       }
     `
-    : ''};  
+    : ''};
 `
 
 type StyledLinkProps = {
@@ -200,9 +202,9 @@ export const StyledLink = styled(NavLink).attrs(
     : css`
       color: rgba(255, 255, 255, 0.4);
     `)}
-  
+
   @media ${devices.tablet} {
-    font-size: 2.8rem;  
+    font-size: 2.8rem;
     line-height: 5.3rem;
   }
 

src/react-app-env.d.ts

@@ -3,6 +3,7 @@
 
 declare namespace NodeJS {
   export interface ProcessEnv {
+    REACT_APP_CLIENT: 'instat' | 'facr',
     REACT_APP_ENV: 'production' | 'preproduction' | 'staging',
   }
 }

src/requests/getMatches/getHomeMatches.tsx

@@ -1,6 +1,8 @@
 import { PROCEDURES, SportTypes } from 'config'
 
-import { MatchStatuses } from 'features/HeaderFilters'
+import { client } from 'config/clients'
+
+import type { MatchStatuses } from 'features/HeaderFilters'
 
 import type { MatchesBySection } from './types'
 import { requestMatches } from './request'
@@ -37,6 +39,7 @@ export const getHomeMatches = async ({
         _p_stream_status: matchStatus,
         _p_sub_only: availableMatchesOnly,
         _p_tournament_id: tournamentId,
+        ...client.requests?.[proc],
       },
       proc,
     },

src/requests/getMatches/getPlayerMatches.tsx

@@ -1,5 +1,7 @@
 import { PROCEDURES, SportTypes } from 'config'
 
+import { client } from 'config/clients'
+
 import { addSportType } from 'features/Matches/helpers/addSportType'
 
 import type { MatchesBySection } from './types'
@@ -31,6 +33,7 @@ export const getPlayerMatches = async ({
         _p_player_id: playerId,
         _p_sport: sportType,
         _p_sub_only: availableMatchesOnly,
+        ...client.requests?.[proc],
       },
       proc,
     },

src/requests/getMatches/getTeamMatches.tsx

@@ -1,5 +1,7 @@
 import { PROCEDURES, SportTypes } from 'config'
 
+import { client } from 'config/clients'
+
 import { addSportType } from 'features/Matches/helpers/addSportType'
 
 import type { MatchesBySection } from './types'
@@ -31,6 +33,7 @@ export const getTeamMatches = async ({
         _p_sport: sportType,
         _p_sub_only: availableMatchesOnly,
         _p_team_id: teamId,
+        ...client.requests?.[proc],
       },
       proc,
     },

src/requests/getMatches/getTournamentMatches.tsx

@@ -1,5 +1,7 @@
 import { PROCEDURES, SportTypes } from 'config'
 
+import { client } from 'config/clients'
+
 import { addSportType } from 'features/Matches/helpers/addSportType'
 
 import type { MatchesBySection } from './types'
@@ -31,6 +33,7 @@ export const getTournamentMatches = async ({
         _p_sport: sportType,
         _p_sub_only: availableMatchesOnly,
         _p_tournament_id: tournamentId,
+        ...client.requests?.[proc],
       },
       proc,
     },