fix(#2362): fixed lff client

src/components/PoweredByInstatIcon/index.tsx

@@ -0,0 +1,5 @@
+import { Icon } from 'features/Icon'
+
+export const PoweredByInstatIcon = () => (
+  <Icon refIcon='PoweredByInstat' />
+)

src/config/clients/facr.tsx

@@ -46,7 +46,16 @@ export const facr: ClientConfig = {
     matchLogoHeight: 2.6,
     matchLogoTopMargin: 0.9,
     matchLogoWidth: 3.4,
+    mobileHeaderLogo: css`
+      width: 48px;
+      height: 37px;
+    `,
+    userAccountLogo: css`
+      width: 6.22rem;
+      height: 4.76rem;
+    `,
   },
   termsLink: '/terms-and-conditions?client_id=facr-ott-web',
   title: 'FACR.TV - The home of Czech football streaming',
+  userAccountLinksDisabled: true,
 }

src/config/clients/instat.tsx

@@ -1,3 +1,4 @@
+import { css } from 'styled-components/macro'
 import {
   ClientConfig,
   ClientIds,
@@ -23,6 +24,18 @@ export const instat: ClientConfig = {
     logoWidth: 6.37,
     matchLogoHeight: 1.465,
     matchLogoWidth: 6.37,
+    mobileHeaderLogo: css`
+      width: 84px;
+      height: 20px;
+      @media screen and (orientation: landscape){
+        width: 92px;
+        height: 22px;
+      }
+    `,
+    userAccountLogo: css`
+      width: 6.37rem;
+      height: 1.465rem;
+    `,
   },
   termsLink: '/terms-and-conditions',
   title: 'InStat TV - The Home of Sports Streaming',

src/config/clients/lff.tsx

@@ -1,3 +1,4 @@
+import { css } from 'styled-components/macro'
 import {
   ClientConfig,
   ClientIds,
@@ -16,6 +17,9 @@ export const lff: ClientConfig = {
   showSearch: true,
   styles: {
     background: 'background-image: url(/images/Checker.png);',
+    homePageHeader: css`
+      background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000;
+    `,
     logo: 'lff_auth_logo.svg',
     logoHeight: 6,
     logoLeft: 1.2,
@@ -23,6 +27,16 @@ export const lff: ClientConfig = {
     logoWidth: 6,
     matchLogoHeight: 2.5,
     matchLogoWidth: 2.5,
+    mobileHeaderLogo: css`
+      width: 42px;
+      height: 42px;
+    `,
+    userAccountLogo: css`
+      width: 80px;
+      height: 80px;
+    `,
   },
+  termsLink: '/terms-and-conditions?client_id=lff-ott-web',
   title: 'InStat TV - The Home of Sports Streaming',
+  userAccountLinksDisabled: true,
 }

src/config/clients/types.tsx

@@ -41,7 +41,10 @@ export type ClientConfig = {
     matchLogoHeight?: number,
     matchLogoTopMargin?: number,
     matchLogoWidth?: number,
+    mobileHeaderLogo?: StyledCss,
+    userAccountLogo?: StyledCss,
   },
   termsLink: string,
   title: string,
+  userAccountLinksDisabled?: boolean,
 }

src/features/AddCardForm/styled.tsx

@@ -47,8 +47,8 @@ export const Input = styled.input`
   :-webkit-autofill:focus,
   :-webkit-autofill:active {
     box-shadow: 0 0 0 30px #3f3f3f inset;
-    caret-color: ${({ theme: { colors } }) => colors.text100};
-    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text100};
+    caret-color: ${({ theme: { colors } }) => colors.white};
+    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.white};
   }
   ${isMobileDevice
     ? css`
@@ -79,7 +79,7 @@ export const SectionTitle = styled.span`
   font-size: 12px;
   line-height: 18px;
   text-transform: uppercase;
-  color: ${({ theme }) => theme.colors.text50};
+  color: ${({ theme }) => theme.colors.white50};
   margin-bottom: 8px;
   ${isMobileDevice
     ? css`

src/features/ArrowLoader/index.tsx

@@ -5,11 +5,13 @@ import { Arrows } from './Icon'
 export const ArrowLoader = ({
   backgroundColor,
   className,
+  color,
   disabled,
   width,
 }: ArrowLoaderProps) => (
   <Wrapper
     className={className}
+    color={color}
     width={width}
     backgroundColor={backgroundColor}
     disabled={disabled}

src/features/ArrowLoader/styled.tsx

@@ -1,14 +1,16 @@
-import styled from 'styled-components/macro'
-
-import { client } from 'features/AuthServiceApp/config/clients'
+import styled, { css } from 'styled-components/macro'
 
 import { ArrowLoaderProps } from './types'
 
 export const Wrapper = styled.div<ArrowLoaderProps>`
-  ${client.styles.loader}
   border-color: transparent;
   width: ${({ width = 'auto' }) => width};
-  height: 2.4rem;
+  ${({ color, theme: { colors } }) => (
+    css`
+      color: ${color || colors.loader};
+    `
+  )}
+  height: 100%;
   border-radius: 5px;
   display: flex;
   align-items: center;

src/features/ArrowLoader/types.tsx

@@ -1,6 +1,7 @@
 export type ArrowLoaderProps = {
   backgroundColor?: string,
   className?: string,
+  color?: string,
   disabled?: boolean,
   width?:string,
 }

src/features/AuthServiceApp/components/App/index.tsx

@@ -22,6 +22,10 @@ const ChangePassword = lazy(() => import('../ChangePassword'))
 const Main = styled.main`
   width: 100%;
   overflow-y: auto;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
   
   ${isMobileDevice
     ? css`

src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx

@@ -62,7 +62,7 @@ export const ScApplyButton = styled(ApplyButton)`
 `
 
 export const ScLink = styled.a`
-color: ${({ theme }) => theme.colors.text100};
-text-decoration: underline;
-margin-left: 6px;
+  color: ${({ theme }) => theme.colors.white};
+  text-decoration: underline;
+  margin-left: 6px;
 `

src/features/AuthServiceApp/components/Input/styled.tsx

@@ -9,7 +9,7 @@ export const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.inputs};
   width: 100%;
   height: 45px;
-  :not(:last-child) {
+  :not(:last-of-type) {
     border-bottom: 0.5px solid ${({ theme }) => theme.colors.black40};
   }
   ${client.styles.input}
@@ -59,14 +59,14 @@ export const InputStyled = styled.input`
   padding: 0 16px;
   flex-grow: 1;
   height: 100%;
-  color: ${({ theme }) => theme.colors.text100};
+  color: ${({ theme }) => theme.colors.white};
   font-size: 16px;
   letter-spacing: 0.1px;
 
   ::placeholder {
     font-weight: normal;
     width: 100%;
-    color: ${({ theme }) => theme.colors.text50};
+    color: ${({ theme }) => theme.colors.white50};
     font-style: normal;
     letter-spacing: 0.1px;
   }

src/features/AuthServiceApp/components/LanguageSelect/styled.tsx

@@ -31,7 +31,7 @@ export const Button = styled.button`
     height: 9px;
     border-right: 2px solid;
     border-bottom: 2px solid;
-    border-color: ${({ theme }) => theme.colors.text100};
+    border-color: ${({ theme }) => theme.colors.white};
   }
 `
 
@@ -40,7 +40,7 @@ export const ButtonTitle = styled.span`
   font-size: 16px;
   font-weight: normal;
   letter-spacing: -0.32px;
-  color: ${({ theme }) => theme.colors.text100};
+  color: ${({ theme }) => theme.colors.white};
 `
 
 export const ListWrapper = styled.div`
@@ -88,7 +88,7 @@ export const LangsItem = styled.li<LangsItemProps>`
   transition: 0.3s;
   font-weight: normal;
   font-size: 16px;
-  color: ${({ theme }) => theme.colors.text70};
+  color: ${({ theme }) => theme.colors.white70};
   :hover {
     background-color: #99999940;
     cursor: pointer;
@@ -98,7 +98,7 @@ export const LangsItem = styled.li<LangsItemProps>`
     selected
       ? css`
           font-weight: 600;
-          color: ${theme.colors.text100};
+          color: ${theme.colors.white};
         `
       : ''
   )}

src/features/AuthServiceApp/components/Logo/index.tsx

@@ -1,6 +1,4 @@
-import styled, { css } from 'styled-components/macro'
-
-import { isMobileDevice } from 'config/userAgent'
+import styled from 'styled-components/macro'
 
 import { client } from '../../config/clients'
 
@@ -14,14 +12,4 @@ export const Logo = styled.div<Props>`
   display: block;
   background-size: contain;
   background-repeat: no-repeat;
-  ${isMobileDevice
-    ? css`
-      width: 207px;
-      height: 48px;
-      @media screen and (orientation: landscape){
-        width: 92px;
-        height: 22px;
-      }
-    `
-    : ''}
 `

src/features/AuthServiceApp/components/RecoveryPopup/index.tsx

@@ -3,6 +3,7 @@ import { Fragment } from 'react'
 import { T9n } from 'features/T9n'
 import { ArrowLoader } from 'features/ArrowLoader'
 
+import { client } from 'features/AuthServiceApp/config/clients'
 import { useRecovery } from './hooks'
 
 import {
@@ -74,7 +75,9 @@ export const RecoveryPopup = (props: Props) => {
           <Footer>
             {!isSendMessage ? (
               <ApplyButton onClick={handleSubmit} disabled={isSendBtnDisabled}>
-                {isFetching ? <ArrowLoader /> : <T9n t='send' />}
+                {isFetching
+                  ? <ArrowLoader color={client.styles.popupLoader} />
+                  : <T9n t='send' />}
               </ApplyButton>
             ) : (
               <ApplyButton onClick={closePopup}>

src/features/AuthServiceApp/components/RecoveryPopup/styled.tsx

@@ -8,6 +8,7 @@ import { Modal as BaseModal } from 'features/Modal'
 import { Header as BaseHeader } from 'features/PopupComponents'
 
 import { ButtonSolid } from 'features/Common'
+import { client } from 'features/AuthServiceApp/config/clients'
 
 export const Modal = styled(BaseModal)`
   background-color: rgba(0, 0, 0, 0.7);
@@ -139,6 +140,7 @@ export const ApplyButton = styled(ButtonSolid)`
       }
     `
     : ''};
+    ${client.styles.popupApplyButton}
 `
 export const Text = styled.span`
   margin-bottom: 20px;

src/features/AuthServiceApp/components/Registration/styled.tsx

@@ -44,7 +44,7 @@ export const Label = styled.span`
 `
 
 export const Link = styled.a`
-  color: ${({ theme }) => theme.colors.text100};
+  color: ${({ theme }) => theme.colors.white};
   text-decoration: underline;
   margin-left: 6px;
 `

src/features/AuthServiceApp/config/clients/facr.tsx

@@ -2,12 +2,13 @@ import styled, { css } from 'styled-components/macro'
 
 import { facr as platformFacr } from 'config/clients/facr'
 
+import { isMobileDevice } from 'config/userAgent'
 import type { ClientConfig } from './types'
 
 const Background = styled.div`
   position: relative;
   width: 100%;
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   justify-content: center;
   background-color: #00257A;
@@ -17,14 +18,24 @@ export const facr: ClientConfig = {
   ...platformFacr,
   background: Background,
   styles: {
+    centerBlock: css`
+      margin-top: 9.15rem;
+      ${isMobileDevice ? css`
+        margin-top: 107px;
+        @media screen and (orientation: landscape) {
+          width: 290px;
+          margin: auto;
+        }
+      ` : ''};
+    `,
     input: css`
       background-color: transparent;
-      :not(:last-child) {
-        border-color: ${({ theme }) => theme.colors.text100};
+      :not(:last-of-type) {
+        border-color: ${({ theme }) => theme.colors.white};
       }
     `,
     inputGroup: css`
-      border: 1px solid ${({ theme }) => theme.colors.text100};
+      border: 1px solid ${({ theme }) => theme.colors.white};
     `,
     loader: css`
       color: #00257A;
@@ -33,9 +44,21 @@ export const facr: ClientConfig = {
       background-image: url(/images/facr_auth_logo.png);
       height: 163px;
       width: 213px;
+      margin-bottom: 1.82rem;
+      
+      ${isMobileDevice ? css`
+          margin-bottom: 20px;
+          width: 130px;
+          height: 100px;
+        ` : ''}
+    `,
+    popupApplyButton: css`
+      background-color: #00257A;
+      color: ${({ theme }) => theme.colors.white};
     `,
+    popupLoader: '#FFFFFF',
     submitButton: css`
-      background-color: ${({ theme }) => theme.colors.text100};
+      background-color: ${({ theme }) => theme.colors.white};
       color: #00257A;
     `,
   },

src/features/AuthServiceApp/config/clients/index.tsx

@@ -12,4 +12,4 @@ const clients = {
 const params = new URLSearchParams(window.location.search)
 const clientId = params.get('client_id') as ClientIds
 
-export const client = clients[clientId] || lff
+export const client = clients[clientId] || instat

src/features/AuthServiceApp/config/clients/instat.tsx

@@ -5,18 +5,37 @@ import { instat as platformInstat } from 'config/clients/instat'
 import { Background } from 'features/Background'
 
 import type { ClientConfig } from './types'
+import { isMobileDevice } from '../../../../config/userAgent'
 
 export const instat: ClientConfig = {
   ...platformInstat,
   background: Background,
   styles: {
-    loader: css`
-      color: white;
+    centerBlock: css`
+      margin-top: 9.15rem;
+      ${isMobileDevice ? css`
+        margin-top: 107px;
+        @media screen and (orientation: landscape) {
+          width: 290px;
+          margin: auto;
+        }
+      ` : ''};
     `,
     logo: css`
       background-image: url(/images/logo.svg);
       height: 54px;
       width: 234px;
+      margin-bottom: 1.82rem;
+
+      ${isMobileDevice ? css`
+          margin-bottom: 78px;
+          width: 207px;
+          height: 48px;
+          @media screen and (orientation: landscape){
+            width: 92px;
+            height: 22px;
+          }
+        ` : ''}
     `,
   },
 }

src/features/AuthServiceApp/config/clients/lff.tsx

@@ -2,12 +2,13 @@ import styled, { css } from 'styled-components/macro'
 
 import { lff as platformLff } from 'config/clients/lff'
 
+import { isMobileDevice } from 'config/userAgent'
 import type { ClientConfig } from './types'
 
 const Background = styled.div`
   position: relative;
   width: 100%;
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   justify-content: center;
   background: linear-gradient(18.42deg, #242321 8.36%, #242321 42.61%, #DB1C49 86.2%);
@@ -17,22 +18,36 @@ export const lff: ClientConfig = {
   ...platformLff,
   background: Background,
   styles: {
+    centerBlock: css`
+      margin-top: 6.15rem;
+      ${isMobileDevice ? css`
+        margin-top: 60px;
+        @media screen and (orientation: landscape) {
+          width: 290px;
+          margin-top: 5px;
+        }
+      ` : ''};
+    `,
     input: css`
       background-color: transparent;
-      :not(:last-child) {
-        border-color: ${({ theme }) => theme.colors.text100};
+      :not(:last-of-type) {
+        border-color: ${({ theme }) => theme.colors.white50};
       }
     `,
     inputGroup: css`
-      border: 1px solid ${({ theme }) => theme.colors.text100};
-    `,
-    loader: css`
-      color: #00257A;
+      border: 1px solid ${({ theme }) => theme.colors.white};
     `,
     logo: css`
       background-image: url(/images/lff_auth_logo.svg);
       height: 220px;
       width: 220px;
+      margin-bottom: 1rem;
+      
+      ${isMobileDevice ? css`
+          margin-bottom: 15px;
+          width: 74px;
+          height: 74px;
+        ` : ''}
     `,
     submitButton: css`
       background-color: #DF1C4A;

src/features/AuthServiceApp/config/clients/types.tsx

@@ -2,7 +2,7 @@ import type { ReactNode, FC } from 'react'
 import { css } from 'styled-components/macro'
 
 import type { Languages } from 'config/languages'
-import { ClientIds } from 'config/clients/types'
+import { ClientIds, ClientNames } from 'config/clients/types'
 
 type StyledCss = ReturnType<typeof css>
 
@@ -13,13 +13,16 @@ export type ClientConfig = {
   background: FC<{ children: ReactNode }>,
   defaultLanguage?: Languages,
   description: string,
-  name: string,
+  name: ClientNames,
   privacyLink: string,
   styles: {
+    centerBlock?: StyledCss,
     input?: StyledCss,
     inputGroup?: StyledCss,
     loader?: StyledCss,
     logo: StyledCss,
+    popupApplyButton?: StyledCss,
+    popupLoader?: string,
     submitButton?: StyledCss,
   },
   termsLink: string,

src/features/AuthServiceApp/styled.tsx

@@ -37,23 +37,12 @@ export const CenterBlock = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  margin-top: 9.15rem;
-  ${isMobileDevice
-    ? css`
-        margin-top: 107px;
-        overflow-y: auto;
-        @media screen and (orientation: landscape) {
-          width: 290px;
-          margin: auto;
-        }
-      `
-    : ''};
+  ${client.styles.centerBlock}
 `
 
 export const Form = styled.form`
   width: 100%;
   max-width: 493px;
-  margin-top: 1.82rem;
   margin-bottom: 6.604rem;
   display: flex;
   flex-direction: column;
@@ -61,10 +50,8 @@ export const Form = styled.form`
   ${isMobileDevice
     ? css`
         width: 100%;
-        margin-top: 78px;
         @media screen and (orientation: landscape){
           margin-bottom: 0;
-          margin-top: 10px;
           padding: 0;
         }
       `
@@ -77,7 +64,7 @@ export const BlockTitle = styled(T9n)`
   font-weight: bold;
   font-size: 24px;
   height: 24px;
-  color: ${({ theme: { colors } }) => colors.text100};
+  color: ${({ theme: { colors } }) => colors.white};
   margin-bottom: 30px;
   ${isMobileDevice
     ? css`

src/features/Background/styled.tsx

@@ -10,11 +10,6 @@ const Container = styled.div`
 &::-webkit-scrollbar {
     display: none;
   }
-
-  /* временное решение для низких разрешений на windows */
-  @media (min-width: 1340px) and (max-width: 1380px){
-    overflow-y: hidden;
-  }
 `
 
 export const ImageBackground = styled(Container)`

src/features/BuyMatchPopup/components/PackagesList/styled.tsx

@@ -66,8 +66,8 @@ export const Item = styled.li.attrs(() => ({
     margin-bottom: 20px;
   }
 
-  ${({ active }) => (
-    active ? 'background-color: #294FC3' : ''
+  ${({ active, theme: { colors } }) => (
+    active ? `background-color: ${colors.button}` : ''
   )};
 
   @media (max-width: 1370px) {
@@ -213,7 +213,7 @@ export const ScAutoRenewal = styled(PriceDetails)`
   font-size: 12px;
   text-transform: none;
   margin: 0;
-  color: ${({ theme: { colors } }) => colors.text70};
+  color: ${({ theme: { colors } }) => colors.white70};
 
   ${isMobileDevice
     ? css`

src/features/BuyMatchPopup/styled.tsx

@@ -52,7 +52,8 @@ export const Button = styled(ButtonSolid)`
   width: auto;
   height: 50px;
   padding: 0 20px;
-  background-color: #294FC3;
+  background-color: ${({ theme: { colors } }) => colors.button};
+  color: ${({ theme: { colors } }) => colors.white};
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   border-radius: 5px;
   font-weight: 600;

src/features/Common/Button/styled.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
-import { client } from 'config/clients'
+import { client } from 'features/AuthServiceApp/config/clients'
 
 const baseButtonStyles = css`
   width: 272px;
@@ -32,9 +32,9 @@ export const outlineButtonStyles = css`
 
   padding-top: 0.42rem;
   padding-bottom: 0.475rem;
-  color: ${({ theme: { colors } }) => colors.text100};
+  color: ${({ theme: { colors } }) => colors.white};
   font-weight: normal;
-  border-color: ${({ theme: { colors } }) => colors.text100};
+  border-color: ${({ theme: { colors } }) => colors.white};
   background: transparent;
 `
 
@@ -44,7 +44,7 @@ export const solidButtonStyles = css`
   color: #fff;
   font-weight: bold;
   border-color: transparent;
-  background-color: #294FC3;
+  background-color: ${({ theme: { colors } }) => colors.button};
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   ${isMobileDevice
     ? css`
@@ -53,10 +53,7 @@ export const solidButtonStyles = css`
     `
     : ''};  
   
-  ${client.name === 'lff' ? css`
-    background: #DF1C4A;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-  ` : ''}
+  ${client.styles.submitButton}
 `
 
 export const ButtonSolid = styled.button`

src/features/Common/Checkbox/styled.tsx

@@ -10,7 +10,7 @@ export const Wrapper = styled.span.attrs(() => ({
 export const Label = styled.label`
   display: flex;
   align-items: center;
-  color: ${({ theme: { colors } }) => colors.text100};
+  color: ${({ theme: { colors } }) => colors.white};
   font-style: normal;
   font-weight: bold;
   font-size: 18px;

src/features/Common/Input/styled.tsx

@@ -81,7 +81,7 @@ const inputStyles = css<InputProps>`
   background-color: transparent;
   border: transparent;
   margin-left: 1.1rem;
-  color: ${({ theme: { colors } }) => colors.text100};
+  color: ${({ theme: { colors } }) => colors.white};
 
   &[type='password'] {
     letter-spacing: 6px;
@@ -97,8 +97,8 @@ const inputStyles = css<InputProps>`
   :-webkit-autofill:focus,
   :-webkit-autofill:active  {
     box-shadow: 0 0 0 30px #3F3F3F inset;
-    caret-color: ${({ theme: { colors } }) => colors.text100};
-    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text100};
+    caret-color: ${({ theme: { colors } }) => colors.white};
+    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.white};
   }
   ${isMobileDevice
     ? css`

src/features/Common/Radio/styled.tsx

@@ -8,7 +8,7 @@ export const Wrapper = styled.span.attrs(() => ({
 export const Label = styled.label`
   display: flex;
   align-items: center;
-  color: ${({ theme: { colors } }) => colors.text100};
+  color: ${({ theme: { colors } }) => colors.white};
   font-style: normal;
   font-weight: bold;
   font-size: 18px;

src/features/HeaderFilters/components/DateFilter/styled.tsx

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
-import { client } from 'config/clients'
 import { devices } from 'config'
 
 export const BaseButton = styled.button`
@@ -18,16 +17,12 @@ export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  color: #656565;
+  color: ${({ theme: { colors } }) => colors.dateFilter};
 
   @media (max-width: 750px) {
     width: 100%;
   }
 
-  ${client.name === 'lff' ? css`
-    color: rgba(255, 255, 255, 0.5);
-  ` : ''}
-
   ${isMobileDevice
     ? css`
       /* padding-top: 4px; */
@@ -81,15 +76,9 @@ export const DateButton = styled(BaseButton)<DateButtonProps>`
   right: 3.6rem;
   width: 1.3rem;
   height: 1.26rem;
-  color: #fff;
-  opacity: 0.5;
+  color: ${({ theme: { colors } }) => colors.dateButton};
   margin-left: 10px;
 
-  ${client.name === 'lff' ? css`
-    color: rgba(255, 255, 255, 0.5);
-    opacity: 1;
-  ` : ''}
-
   ${isMobileDevice
     ? css`
       position: static;
@@ -152,16 +141,12 @@ export const WeekDay = styled(BaseButton)<WeekDayProps>`
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: #656565;
+  color: ${({ theme: { colors } }) => colors.dateFilter};
   min-width: 38px;
 
   :hover {
     color: #FFFFFF;
   }
-  
-  ${client.name === 'lff' ? css`
-    color: rgba(255, 255, 255, 0.5);
-  ` : ''}
 
   ${({ selected }) => (
     selected

src/features/HeaderMenu/styled.tsx

@@ -36,15 +36,7 @@ export const HeaderLogo = styled(Logo)`
     height: ${client.styles.matchLogoHeight}rem;
   ` : '')}
 
-  ${isMobileDevice && client.name !== 'lff' ? css`
-    width: 65px;
-    height: 15px;
-    margin: 5px 22px;
-  ` : ''}
-
-  ${isMobileDevice && client.name === 'lff' ? css`
-    width: 42px;
-    height: 42px;
-    margin: 5px 22px;
-  ` : ''}
+  ${isMobileDevice
+    ? client.styles.mobileHeaderLogo
+    : ''}
 `

src/features/HeaderMobile/styled.tsx

@@ -15,9 +15,7 @@ export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
 ) => {
   if (client.name === 'lff') {
-    return css`
-      background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000;
-    `
+    return client.styles.homePageHeader
   }
 
   if (headerImage && client.name === 'instat') {

src/features/ItemsList/styled.tsx

@@ -59,7 +59,7 @@ export const Name = styled(NameBase)`
   font-size: 0.65rem;
   line-height: 0.95rem;
   letter-spacing: 0.1px;
-  color: ${({ theme }) => theme.colors.text100};
+  color: ${({ theme }) => theme.colors.white};
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

src/features/Logo/index.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
 import { client } from 'config/clients'
 import { isMobileDevice } from 'config/userAgent'
@@ -20,14 +20,6 @@ export const Logo = styled.div<Props>`
   height: ${client.styles.logoHeight}rem;
 
   ${isMobileDevice
-    ? css`
-      width: 46px;
-      height: 46px;
-
-      @media screen and (orientation: landscape){
-        width: 92px;
-        height: 22px;
-      }
-    `
+    ? client.styles.mobileHeaderLogo
     : ''}
 `

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

@@ -53,7 +53,7 @@ export const Tab = styled.button<TabProps>`
   ${({ active, theme }) => (
     active
       ? css`
-        color: ${theme.colors.text100};
+        color: ${theme.colors.white};
 
         ::after {
           position: absolute;

src/features/MatchSidePlaylists/styled.tsx

@@ -4,7 +4,6 @@ import { devices } from 'config/devices'
 import { isMobileDevice } from 'config/userAgent'
 
 import { customScrollbar } from 'features/Common'
-import { client } from '../../config/clients'
 
 export const Wrapper = styled.div`
 ${isMobileDevice
@@ -94,8 +93,8 @@ export const Button = styled.button<ButtonProps>`
   }
 
   ${({ active, theme }) => {
-    const bgColor = client.name === 'lff' ? '#A30C2F' : theme.colors.button
-    const bgHoverColor = client.name === 'lff' ? '#A30C2F' : '#0c3ccc'
+    const bgColor = theme.colors.button
+    const bgHoverColor = theme.colors.buttonHover
 
     return active ? css`
       background-color: ${bgColor};

src/features/MatchSwitches/styled.tsx

@@ -24,7 +24,7 @@ export const Title = styled(T9n)`
   line-height: 1.14rem;
   text-transform: uppercase;
   margin-right: 0.614rem;
-  color: ${({ theme }) => theme.colors.text100};
+  color: ${({ theme }) => theme.colors.white};
   ${isMobileDevice
     ? css`
       font-size: 10px;

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

@@ -44,7 +44,7 @@ const Input = styled.input`
   display: block;
   margin-bottom: 2px;
   padding-left: 34px;
-  color: ${({ theme }) => theme.colors.text100};
+  color: ${({ theme }) => theme.colors.white};
   caret-color: rgba(255, 255, 255, 0.5);
   font-weight: normal;
   font-size: 0.66rem;

src/features/Price/styled.tsx

@@ -22,7 +22,7 @@ export const PriceAmount = styled.span`
   font-weight: 600;
   font-size: 48px;
   line-height: 40px;
-  color: ${({ theme: { colors } }) => colors.text100};
+  color: ${({ theme: { colors } }) => colors.white};
 
   @media ${devices.tablet} {
     font-size: 36px;
@@ -35,7 +35,7 @@ export const PriceDetails = styled.span`
   font-weight: normal;
   font-size: 18px;
   line-height: 21px;
-  color: ${({ theme: { colors } }) => colors.text100};
+  color: ${({ theme: { colors } }) => colors.white};
   text-transform: uppercase;
 
   @media ${devices.tablet} {

src/features/ProfileHeader/styled.tsx

@@ -14,9 +14,7 @@ export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
 ) => {
   if (client.name === 'lff') {
-    return css`
-      background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000;
-    `
+    return client.styles.homePageHeader
   }
 
   if (headerImage && client.name === 'instat') {
@@ -56,10 +54,6 @@ export const HeaderStyled = styled.header<HeaderProps>`
   justify-content: center;
   height: ${({ height = 8.5 }) => height}rem;
 
-  @media (max-width: 450px){
-    height: 124px;
-  }
-
   ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
 
   ${({ color }) => (
@@ -70,6 +64,7 @@ export const HeaderStyled = styled.header<HeaderProps>`
 
   ${isMobileDevice
     ? css`
+      height: 124px;
       padding: 8px;
     `
     : ''}
@@ -100,14 +95,8 @@ export const HeaderLogo = styled(Logo)`
     height: ${client.styles.matchLogoHeight}rem;
   ` : '')}
   
-  ${client.name === 'lff' ? css`
-    top: 5px;
-    left: 20px;
-  ` : ''}
-
   ${isMobileDevice ? css`
-    width: 85px;
-    height: 20px;
+    ${client.styles.mobileHeaderLogo}
 
     @media (max-width: 450px){
       left: 48vw;
@@ -116,11 +105,6 @@ export const HeaderLogo = styled(Logo)`
       position: absolute;
     }
   ` : ''}
-
-  ${client.name === 'lff' && isMobileDevice ? css`
-    width: 44px;
-    height: 44px;
-  ` : ''}
 `
 
 type PositionProps = {

src/features/Theme/config.tsx

@@ -1,5 +1,3 @@
-import { client } from 'config/clients'
-
 export const lightTheme = {
   colors: {
     background: '',
@@ -8,36 +6,40 @@ export const lightTheme = {
     black70: '',
     button: '',
     buttonHover: '',
+    dateButton: '',
+    dateFilter: '',
     error: '',
     inputs: '',
+    loader: '',
     primary: '',
     secondary: '',
     shadow: '',
-    text50: '',
-    text70: '',
-    text100: '',
+    white: '',
+    white50: '',
+    white70: '',
   },
   name: 'light' as Name,
-  switchTheme: () => {},
 }
 
-export const darkTheme = {
+export const defaultTheme: CustomTheme = {
   colors: {
-    background: client.name !== 'lff' ? `
+    background: `
       radial-gradient(
         49.07% 49.07% at 50% 29.54%,
         rgba(255, 255, 255, 0.14) 0%,
         rgba(255, 255, 255, 0) 100%
       ),
-      rgba(0, 0, 0, 0.9)
-    ` : '#1D1D1D',
+      rgba(0, 0, 0, 0.9)`,
     black: '#000000',
     black40: 'rgba(0, 0, 0, 0.4)',
     black70: 'rgba(0, 0, 0, 0.7)',
     button: '#294FC3',
     buttonHover: '#3255be',
+    dateButton: 'rgba(255, 255, 255, 0.5)',
+    dateFilter: '#656565',
     error: 'rgba(235, 87, 87, 1)',
     inputs: '#3F3F3F',
+    loader: '#FFFFFF',
     primary: `
       linear-gradient(
         180deg,
@@ -49,14 +51,37 @@ export const darkTheme = {
     `,
     secondary: '#999999',
     shadow: '0px 1px 1px rgba(0, 0, 0, 0.3)',
-    text50: 'rgba(255, 255, 255, 0.5)',
-    text70: 'rgba(255, 255, 255, 0.7)',
-    text100: '#FFFFFF',
+    white: '#FFFFFF',
+    white50: 'rgba(255, 255, 255, 0.5)',
+    white70: 'rgba(255, 255, 255, 0.7)',
   },
   name: 'dark' as Name,
-  switchTheme: () => {},
 }
 
-type Name = 'light' | 'dark'
+export const lffTheme: CustomTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    background: '#1D1D1D',
+    button: '#A30C2F',
+    buttonHover: '#DB1C49',
+    dateButton: defaultTheme.colors.white,
+    dateFilter: defaultTheme.colors.white50,
+    inputs: 'transparent',
+  },
+  name: 'lff',
+}
+
+export const facrTheme: CustomTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    button: '#00257A',
+    inputs: 'transparent',
+  },
+  name: 'facr',
+}
+
+type Name = 'light' | 'dark' | 'lff' | 'facr'
 
 export type CustomTheme = typeof lightTheme

src/features/Theme/index.tsx

@@ -3,28 +3,43 @@ import {
   ReactNode,
   useCallback,
   useMemo,
+  useEffect,
 } from 'react'
 import { ThemeProvider } from 'styled-components'
+import { client } from 'config/clients'
 
 import {
   CustomTheme,
-  lightTheme,
-  darkTheme,
+  defaultTheme,
+  facrTheme,
+  lffTheme,
 } from './config'
+import { ClientNames } from '../../config/clients/types'
 
 type Props = {
   children: ReactNode,
 }
 
 export const Theme = ({ children }: Props) => {
-  const [theme, setTheme] = useState<CustomTheme>(darkTheme)
+  const [theme, setTheme] = useState<CustomTheme>(defaultTheme)
 
-  const switchTheme = useCallback(
-    () => {
-      setTheme(theme.name === 'light' ? darkTheme : lightTheme)
-    },
-    [theme],
-  )
+  const switchTheme = useCallback(() => {
+    switch (client.name) {
+      case ClientNames.Lff:
+        setTheme(lffTheme)
+        break
+      case ClientNames.Facr:
+        setTheme(facrTheme)
+        break
+      default:
+        setTheme(defaultTheme)
+        break
+    }
+  }, [])
+
+  useEffect(() => {
+    switchTheme()
+  }, [switchTheme])
 
   const memoTheme = useMemo(() => ({
     ...theme,

src/features/TournamentList/components/TournamentMobile/index.tsx

@@ -25,7 +25,6 @@ import {
   ScMatchesWrapper,
   ScSecondInfo,
 } from './styled'
-import { client } from '../../../../config/clients'
 
 export type TournamentProps = {
   tournament: TournamentType & {
@@ -55,14 +54,10 @@ export const TournamentMobile = ({
     tournament.id,
   )
 
-  const activeWrapperColor = client.name === 'lff' ? '#A30C2F' : '#294FC3'
-  const wrapperColor = open ? activeWrapperColor : '#3f3f3f'
-
   return (
     <CardWrapperOuter>
       <CardWrapper
         onClick={() => setOpen(!open)}
-        color={wrapperColor}
         open={open}
       >
         <ScFirstInfo>

src/features/TournamentList/components/TournamentMobile/styled.tsx

@@ -23,13 +23,12 @@ export const CardWrapperOuter = styled.li.attrs({
 `
 
 export const CardWrapper = styled.div<{
-  color: string,
   open: boolean,
 }>`
   display: flex;
   align-items: center;
 
-  background-color: ${({ color }) => color};
+  background-color: ${({ open, theme: { colors } }) => (open ? colors.button : '#3f3f3f')};
   cursor: pointer;
   ${isMobileDevice
     ? css`

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

@@ -5,19 +5,19 @@ import styled, { css } from 'styled-components/macro'
 import { devices, PAGES } from 'config'
 import { isMobileDevice } from 'config/userAgent'
 import { client } from 'config/clients'
-
 import { Logo } from 'features/Logo'
 
+import { LogoutButton } from '../LogoutButton'
+
 const HeaderStyled = styled.header`
   display: flex;
-  align-items: center;
-  margin-bottom: 65px;
+  align-items: flex-start;
   width: 100%;
-  height: ${client.styles.logoHeight}rem;
+  min-height: 93px;
   justify-content: space-between;
 
   @media ${devices.tablet} {
-    margin-bottom: 0;
+    min-height: auto;
   }
 
   ${isMobileDevice ? css`
@@ -30,54 +30,19 @@ const HeaderStyled = styled.header`
   ` : ''};
 `
 
-const HomeIcon = styled.div`
-  display: block;
-  width: 30px;
-  height: 30px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-image: url(/images/home.png);
-`
-
 export const HeaderLogo = styled(Logo)`
-  position: absolute;
-  top: ${client.styles.logoTop}rem;
-  left: ${client.styles.logoLeft}rem;
+  ${client.styles.userAccountLogo}
 
-  ${isMobileDevice ? css`
-    left: 50%;
-    transform: translateX(-50%);
-  ` : ''}
-`
-
-export const HeaderLffLogo = styled(Logo)`
-  position: absolute;
-  width: 80px;
-  height: 80px;
-  top: 36px;
-  left: 32px;
-
-  ${isMobileDevice ? css`
-    width: 46px;
-    height: 46px;
-    left: 15px;
-    top: 15px;
-  ` : ''}
+  ${isMobileDevice
+    ? client.styles.mobileHeaderLogo
+    : ''};
 `
 
 export const Header = () => (
   <HeaderStyled>
     <Link to={PAGES.home}>
-      {
-        client.name === 'lff' ? (
-          <HeaderLffLogo />
-        ) : (
-          <HeaderLogo />
-        )
-      }
-    </Link>
-    <Link to={PAGES.home}>
-      <HomeIcon />
+      <HeaderLogo />
     </Link>
+    <LogoutButton />
   </HeaderStyled>
 )

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

@@ -11,23 +11,11 @@ const Button = styled.button`
   background-color: transparent;
   padding: 0;
   cursor: pointer;
-  margin-top: 3.0rem;
   display: flex;
   align-items: center;
   font-weight: 500;
   font-size: 1.2rem;
-  line-height: 3.2rem;
   color: #FFFFFF;
-  ${isMobileDevice
-    ? css`
-     bottom: -10px;
-     font-size: 12px;
-     height: 25px;
-     @media (orientation: landscape){
-       top: 60vh;
-     }
-    `
-    : ''};
   
   @media ${devices.tablet} {
     font-size: 2.8rem;
@@ -40,8 +28,16 @@ const ExitIcon = styled.span`
   height: 24px;
   background-image: url(/images/logout.svg);
   background-repeat: no-repeat;
+  background-size: contain;
   background-position: left;
   margin-right: 15px;
+
+  ${isMobileDevice
+    ? css`
+     width: 19px;
+     height: 19px;
+    `
+    : ''};
 `
 
 export const LogoutButton = () => {

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

@@ -46,7 +46,7 @@ export const Tab = styled.button<TabProps>`
   ${({ active, theme }) => (
     active
       ? css`
-        color: ${theme.colors.text100};
+        color: ${theme.colors.white};
 
         ::after {
           position: absolute;

src/features/UserAccount/components/PoweredByInstat/PoweredByInstat.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+import { PoweredByInstatIcon } from 'components/PoweredByInstatIcon'
+import { devices } from '../../../../config'
+
+const Wrapper = styled.div`
+  position: fixed;
+  bottom: 60px;
+  right: 55px;
+
+  @media ${devices.tablet} {
+    display: none;
+  }
+`
+
+export const PoweredByInstat = () => (
+  <Wrapper>
+    <PoweredByInstatIcon />
+  </Wrapper>
+)

src/features/UserAccount/index.tsx

@@ -9,13 +9,13 @@ import { usePageLogger } from 'hooks/usePageLogger'
 import { useLexicsConfig } from 'features/LexicsStore'
 import { T9n } from 'features/T9n'
 
+import { client } from 'config/clients'
 import { Header } from './components/Header'
 import { PagePersonalInfo } from './components/PagePersonalInfo'
 import { PageBankCards } from './components/PageBankCards'
 import { PageSubscriptions } from './components/PageSubscriptions'
 import { PagePaymentsHistory } from './components/PagePaymentsHistory'
 import { ScoreSwitch } from './components/ScoreSwitch'
-import { LogoutButton } from './components/LogoutButton'
 import {
   Aside,
   Body,
@@ -25,6 +25,7 @@ import {
   UserAccountWrapper,
 } from './styled'
 import { CompanyInfo } from '../CompanyInfo'
+import { PoweredByInstat } from './components/PoweredByInstat/PoweredByInstat'
 
 const UserAccount = () => {
   usePageLogger(PAGES.useraccount)
@@ -42,19 +43,27 @@ const UserAccount = () => {
             <StyledLink to={`${PAGES.useraccount}/bank-cards`}>
               <T9n t='bank_card' />
             </StyledLink>
-            <StyledLink disabled={isProduction} to={`${PAGES.useraccount}/subscriptions`}>
+            <StyledLink
+              disabled={isProduction || client.userAccountLinksDisabled}
+              to={`${PAGES.useraccount}/subscriptions`}
+            >
               <T9n t='my_subscriptions' />
             </StyledLink>
-            <StyledLink to={`${PAGES.useraccount}/payment-history`}>
+            <StyledLink
+              disabled={isProduction || client.userAccountLinksDisabled}
+              to={`${PAGES.useraccount}/payment-history`}
+            >
               <T9n t='payment_history' />
             </StyledLink>
-            <StyledLink disabled={isProduction} to={`${PAGES.useraccount}/devices`}>
+            <StyledLink
+              disabled={isProduction || client.userAccountLinksDisabled}
+              to={`${PAGES.useraccount}/devices`}
+            >
               <T9n t='my_devices' />
             </StyledLink>
 
             <ScoreSwitch />
           </Navigations>
-          <LogoutButton />
         </Aside>
         <ContentWrapper>
           <Route path={`${PAGES.useraccount}/personal-info`}>
@@ -72,6 +81,7 @@ const UserAccount = () => {
           <CompanyInfo textAlign='left' />
         </ContentWrapper>
       </Body>
+      {client.name !== 'instat' && <PoweredByInstat />}
     </UserAccountWrapper>
   )
 }

src/features/UserAccount/styled.tsx

@@ -6,7 +6,6 @@ import { devices } from 'config/devices'
 import { isMobileDevice } from 'config/userAgent'
 
 import { ButtonSolid, ButtonOutline } from 'features/Common/Button'
-import { client } from '../../config/clients'
 
 export const SolidButton = styled(ButtonSolid)`
   width: auto;
@@ -14,7 +13,7 @@ export const SolidButton = styled(ButtonSolid)`
   padding: 0 0.94rem;
   color: white;
   font-weight: bold;
-  background-color: ${client.name === 'lff' ? '#A30C2F' : '#294fc4'};
+  background-color: ${({ theme: { colors } }) => colors.button};
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   border-color: transparent;
   border-radius: 5px;
@@ -113,6 +112,7 @@ export const UserAccountWrapper = styled.div`
   display: flex;
   flex-direction: column;
   padding: 32px 30px 60px 36px;
+  position: relative;
   ${isMobileDevice
     ? css`
      padding: 15px 15px 0;

src/libs/index.ts

@@ -9,3 +9,4 @@ export { Volleyball } from './objects/Volleyball'
 export { Star } from './objects/Star'
 export { Dollar } from './objects/Dollar'
 export { Close } from './objects/Close'
+export { PoweredByInstat } from './objects/PoweredByInstat'

src/react-app-env.d.ts

@@ -3,7 +3,7 @@
 
 declare namespace NodeJS {
   export interface ProcessEnv {
-    REACT_APP_CLIENT: 'instat' | 'facr',
+    REACT_APP_CLIENT: 'instat' | 'facr' | 'lff',
     REACT_APP_ENV: 'production' | 'preproduction' | 'staging',
     REACT_APP_STAGE: 'staging' | 'a-staging' | 'b-staging' | 'c-staging' | 'd-staging' | 'e-staging',
     REACT_APP_TYPE: 'auth-service' | 'ott',