feat(ott-2362): create lff client

package.json

@@ -14,7 +14,8 @@
     "build-storybook": "build-storybook -s public",
     "start:auth": "REACT_APP_TYPE=auth-service react-scripts start",
     "test:auth": "REACT_APP_TYPE=auth-service react-scripts test",
-    "facr": "REACT_APP_CLIENT=facr react-scripts start"
+    "facr": "REACT_APP_CLIENT=facr react-scripts start",
+    "lff": "REACT_APP_CLIENT=lff react-scripts start"
   },
   "dependencies": {
     "@stripe/react-stripe-js": "^1.4.0",

public/images/score-switch-lff-mobile-off.svg

@@ -0,0 +1,22 @@
+<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="37" y="17.5" width="36" height="14" rx="7" transform="rotate(-180 37 17.5)" fill="#3F3F3F"/>
+<g filter="url(#filter0_dd_24561_217032)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.5C5.02944 1.5 1 5.52944 1 10.5C1 15.4706 5.02944 19.5 10 19.5C14.9706 19.5 19 15.4706 19 10.5C19 5.52944 14.9706 1.5 10 1.5Z" fill="#9F9F9F"/>
+</g>
+<defs>
+<filter id="filter0_dd_24561_217032" x="0" y="0.5" width="20" height="21" 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" result="hardAlpha"/>
+<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.237602 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24561_217032"/>
+<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" result="hardAlpha"/>
+<feOffset/>
+<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.12 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_24561_217032" result="effect2_dropShadow_24561_217032"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_24561_217032" result="shape"/>
+</filter>
+</defs>
+</svg>

public/images/score-switch-lff-mobile-on.svg

@@ -0,0 +1,22 @@
+<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="3.5" width="36" height="14" rx="7" fill="#A30C2F"/>
+<g filter="url(#filter0_dd_24503_218575)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 19.5C31.9706 19.5 36 15.4706 36 10.5C36 5.52944 31.9706 1.5 27 1.5C22.0294 1.5 18 5.52944 18 10.5C18 15.4706 22.0294 19.5 27 19.5Z" fill="#9F9F9F"/>
+</g>
+<defs>
+<filter id="filter0_dd_24503_218575" x="17" y="0.5" width="20" height="21" 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" result="hardAlpha"/>
+<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.237602 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24503_218575"/>
+<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" result="hardAlpha"/>
+<feOffset/>
+<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.12 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_24503_218575" result="effect2_dropShadow_24503_218575"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_24503_218575" result="shape"/>
+</filter>
+</defs>
+</svg>

public/images/score-switch-lff-off.svg

@@ -0,0 +1,22 @@
+<svg width="100%" height="100%" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31 18H11C7.1 18 4 14.9 4 11C4 7.1 7.1 4 11 4H31C34.9 4 38 7.1 38 11C38 14.9 34.9 18 31 18Z" fill="#B8C1CC" fill-opacity="0.3"/>
+<g filter="url(#filter0_dd)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" fill="#B8C1CC"/>
+</g>
+<defs>
+<filter id="filter0_dd" x="0" y="0" width="22" height="23" 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.237602 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<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/>
+<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.12 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

public/images/score-switch-lff-on.svg

@@ -0,0 +1,22 @@
+<svg width="100%" height="100%" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="1" d="M27 18H7C3.1 18 0 14.9 0 11C0 7.1 3.1 4 7 4H27C30.9 4 34 7.1 34 11C34 14.9 30.9 18 27 18Z" fill="#1D1D1D"/>
+<g filter="url(#filter0_dd)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 21C32.5228 21 37 16.5228 37 11C37 5.47715 32.5228 1 27 1C21.4772 1 17 5.47715 17 11C17 16.5228 21.4772 21 27 21Z" fill="#B8C1CC"/>
+</g>
+<defs>
+<filter id="filter0_dd" x="16" y="0" width="22" height="23" 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.237602 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<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/>
+<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.12 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

src/config/clients/index.tsx

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

src/config/clients/lff.tsx

@@ -0,0 +1,28 @@
+import {
+  ClientConfig,
+  ClientIds,
+  ClientNames,
+} from './types'
+
+export const lff: ClientConfig = {
+  auth: {
+    clientId: ClientIds.Lff,
+  },
+  defaultLanguage: 'en',
+  description: 'Live sports streaming platform. Football, basketball, ice hockey and more. Access to various player playlists and game highlights. Multiple subscription options. Available across all devices.',
+  disabledPreferences: true,
+  name: ClientNames.Lff,
+  privacyLink: '/clients/instat/terms-and-conditions.html',
+  showSearch: true,
+  styles: {
+    background: 'background-image: url(/images/Checker.png);',
+    logo: 'lff_auth_logo.svg',
+    logoHeight: 6,
+    logoLeft: 1.2,
+    logoTop: 1.2,
+    logoWidth: 6,
+    matchLogoHeight: 2.5,
+    matchLogoWidth: 2.5,
+  },
+  title: 'InStat TV - The Home of Sports Streaming',
+}

src/config/clients/types.tsx

@@ -9,11 +9,13 @@ type StyledCss = ReturnType<typeof css>
 export enum ClientIds {
   Facr = 'facr-ott-web',
   Instat = 'ott-web',
+  Lff = 'lff-ott-web',
 }
 
 export enum ClientNames {
   Facr = 'facr',
   Instat = 'instat',
+  Lff = 'lff',
 }
 
 export type ClientConfig = {

src/features/App/AuthenticatedApp.tsx

@@ -36,7 +36,6 @@ const SystemSettings = lazy(() => import('features/SystemSettings'))
 
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
-
   return (
     <StripeElements>
       <CardsStore>

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

@@ -2,12 +2,14 @@ import { ClientIds } from 'config/clients/types'
 
 import { facr } from './facr'
 import { instat } from './instat'
+import { lff } from './lff'
 
 const clients = {
   [ClientIds.Facr]: facr,
   [ClientIds.Instat]: instat,
+  [ClientIds.Lff]: lff,
 }
 const params = new URLSearchParams(window.location.search)
 const clientId = params.get('client_id') as ClientIds
 
-export const client = clients[clientId] || instat
+export const client = clients[clientId] || lff

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

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components/macro'
+
+import { lff as platformLff } from 'config/clients/lff'
+
+import type { ClientConfig } from './types'
+
+const Background = styled.div`
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(18.42deg, #242321 8.36%, #242321 42.61%, #DB1C49 86.2%);
+`
+
+export const lff: ClientConfig = {
+  ...platformLff,
+  background: Background,
+  styles: {
+    input: css`
+      background-color: transparent;
+      :not(:last-child) {
+        border-color: ${({ theme }) => theme.colors.text100};
+      }
+    `,
+    inputGroup: css`
+      border: 1px solid ${({ theme }) => theme.colors.text100};
+    `,
+    loader: css`
+      color: #00257A;
+    `,
+    logo: css`
+      background-image: url(/images/lff_auth_logo.svg);
+      height: 220px;
+      width: 220px;
+    `,
+    submitButton: css`
+      background-color: #DF1C4A;
+      color: white;
+    `,
+  },
+}

src/features/Common/Button/styled.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
+import { client } from 'config/clients'
 
 const baseButtonStyles = css`
   width: 272px;
@@ -44,13 +45,18 @@ export const solidButtonStyles = css`
   font-weight: bold;
   border-color: transparent;
   background-color: #294FC3;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   ${isMobileDevice
     ? css`
       height: 30px; 
       min-height: 30px;
     `
     : ''};  
+  
+  ${client.name === 'lff' ? css`
+    background: #DF1C4A;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+  ` : ''}
 `
 
 export const ButtonSolid = styled.button`

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

@@ -1,6 +1,7 @@
 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`
@@ -23,6 +24,10 @@ export const Wrapper = styled.div`
     width: 100%;
   }
 
+  ${client.name === 'lff' ? css`
+    color: rgba(255, 255, 255, 0.5);
+  ` : ''}
+
   ${isMobileDevice
     ? css`
       /* padding-top: 4px; */
@@ -80,6 +85,11 @@ export const DateButton = styled(BaseButton)<DateButtonProps>`
   opacity: 0.5;
   margin-left: 10px;
 
+  ${client.name === 'lff' ? css`
+    color: rgba(255, 255, 255, 0.5);
+    opacity: 1;
+  ` : ''}
+
   ${isMobileDevice
     ? css`
       position: static;
@@ -149,6 +159,10 @@ export const WeekDay = styled(BaseButton)<WeekDayProps>`
     color: #FFFFFF;
   }
   
+  ${client.name === 'lff' ? css`
+    color: rgba(255, 255, 255, 0.5);
+  ` : ''}
+
   ${({ selected }) => (
     selected
       ? 'color: #FFFFFF;'

src/features/HeaderMenu/styled.tsx

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

src/features/HeaderMobile/styled.tsx

@@ -5,7 +5,6 @@ import isUndefined from 'lodash/isUndefined'
 import { client } from 'config/clients'
 import { isMobileDevice } from 'config/userAgent'
 
-import { Logo } from 'features/Logo'
 import { ModalWindow } from 'features/Modal/styled'
 import { Modal as BaseModal } from 'features/Modal'
 import { customScrollbar } from 'features/Common'
@@ -15,7 +14,13 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
 ) => {
-  if (headerImage && client.name !== 'facr') {
+  if (client.name === 'lff') {
+    return css`
+      background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000;
+    `
+  }
+
+  if (headerImage && client.name === 'instat') {
     return css`background: url(${headerImage}.png);
       background-size: 100% 100%;
       @media (max-width: 450px){
@@ -93,20 +98,6 @@ export const HeaderGroup = styled.div<Props>`
     : ''};
 `
 
-export const HeaderLogo = styled(Logo)`
-  ${({ isMatchPage }) => (isMatchPage ? css`
-    width: ${client.styles.matchLogoWidth}rem;
-    height: ${client.styles.matchLogoHeight}rem;
-  ` : '')}
-
-  ${isMobileDevice
-    ? css`
-        width: 65px;
-        height: 15px;
-    `
-    : ''}
-`
-
 type PositionProps = {
   isMatchPage?: boolean,
   left?: number,

src/features/Logo/index.tsx

@@ -21,8 +21,8 @@ export const Logo = styled.div<Props>`
 
   ${isMobileDevice
     ? css`
-      width: 144px;
+      width: 46px;
-      height: 33px;
+      height: 46px;
 
       @media screen and (orientation: landscape){
         width: 92px;

src/features/MatchPage/index.tsx

@@ -70,7 +70,7 @@ const MatchPage = () => {
 
   return (
     <PageWrapper>
-      <ProfileHeader color='rgb(0,0,0)' height={4.5}>
+      <ProfileHeader color='#2B2A28' height={4.5}>
         <MatchProfileCard profile={profile} />
       </ProfileHeader>
       <Main>

src/features/MatchSidePlaylists/styled.tsx

@@ -4,6 +4,7 @@ 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
@@ -92,16 +93,17 @@ export const Button = styled.button<ButtonProps>`
     border-radius: 1.8px;
   }
 
-  ${({ active, theme }) => (
+  ${({ active, theme }) => {
-    active
+    const bgColor = client.name === 'lff' ? '#A30C2F' : theme.colors.button
-      ? css`
+    const bgHoverColor = client.name === 'lff' ? '#A30C2F' : '#0c3ccc'
-          background-color: ${theme.colors.button};
+
+    return active ? css`
+      background-color: ${bgColor};
       &:hover {
-            background-color: #0c3ccc;
+        background-color: ${bgHoverColor};
       }
-        `
+    ` : ''
-      : ''
+  }}
-  )}
 `
 
 export const Title = styled.span`

src/features/MatchSwitches/components/ScoreSwitch/index.tsx

@@ -1,5 +1,6 @@
 import { isMobileDevice } from 'config/userAgent'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
+import { getSwitchScoreIconName } from 'helpers/getSwitchScoreIconName'
 
 import {
   Switch,
@@ -20,7 +21,7 @@ export const ScoreSwitch = () => {
       >
         <Title t={isMobileDevice ? 'scores' : 'hide_score'} />
         <Icon
-          iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'}
+          iconName={getSwitchScoreIconName()}
           isOn={!isScoreHidden}
         />
       </Switch>

src/features/ProfileHeader/index.tsx

@@ -52,6 +52,7 @@ export const ProfileHeader = ({
   const imageHeader = profileId === 5704
     && sportType === SportTypes.FOOTBALL
     && profileType === ProfileTypes.TOURNAMENTS ? url : headerImage
+
   return (
     <Fragment>
       <HeaderStyled

src/features/ProfileHeader/styled.tsx

@@ -13,7 +13,13 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
 ) => {
-  if (headerImage && client.name !== 'facr') {
+  if (client.name === 'lff') {
+    return css`
+      background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000;
+    `
+  }
+
+  if (headerImage && client.name === 'instat') {
     return css`background: url(${headerImage}.png);
       background-size: 100% 100%;
       @media (max-width: 450px){
@@ -56,6 +62,12 @@ export const HeaderStyled = styled.header<HeaderProps>`
 
   ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
 
+  ${({ color }) => (
+    client.name === 'lff' ? css`
+      background: ${color};
+    ` : ''
+  )}
+
   ${isMobileDevice
     ? css`
       padding: 8px;
@@ -88,8 +100,12 @@ export const HeaderLogo = styled(Logo)`
     height: ${client.styles.matchLogoHeight}rem;
   ` : '')}
   
-  ${isMobileDevice
+  ${client.name === 'lff' ? css`
-    ? css`
+    top: 5px;
+    left: 20px;
+  ` : ''}
+
+  ${isMobileDevice ? css`
     width: 85px;
     height: 20px;
 
@@ -99,8 +115,12 @@ export const HeaderLogo = styled(Logo)`
       transform: translateX(-50%);
       position: absolute;
     }
-    `
+  ` : ''}
-    : ''}
+
+  ${client.name === 'lff' && isMobileDevice ? css`
+    width: 44px;
+    height: 44px;
+  ` : ''}
 `
 
 type PositionProps = {

src/features/Theme/config.tsx

@@ -1,3 +1,5 @@
+import { client } from 'config/clients'
+
 export const lightTheme = {
   colors: {
     background: '',
@@ -21,14 +23,14 @@ export const lightTheme = {
 
 export const darkTheme = {
   colors: {
-    background: `
+    background: client.name !== 'lff' ? `
       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',
     black: '#000000',
     black40: 'rgba(0, 0, 0, 0.4)',
     black70: 'rgba(0, 0, 0, 0.7)',

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

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

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

@@ -22,11 +22,14 @@ export const CardWrapperOuter = styled.li.attrs({
     : ''};
 `
 
-export const CardWrapper = styled.div<{ open: boolean }>`
+export const CardWrapper = styled.div<{
+  color: string,
+  open: boolean,
+}>`
   display: flex;
   align-items: center;
 
-  background-color: ${({ open }) => (open ? '#294FC3' : '#3f3f3f')};
+  background-color: ${({ color }) => color};
   cursor: pointer;
   ${isMobileDevice
     ? css`

src/features/TournamentPage/hooks.tsx

@@ -3,6 +3,7 @@ import {
   useState,
   useCallback,
 } from 'react'
+import { useHistory } from 'react-router'
 
 import type { TournamentInfo } from 'requests'
 import { getTournamentInfo, getTournamentMatches } from 'requests'
@@ -10,17 +11,23 @@ import { getTournamentInfo, getTournamentMatches } from 'requests'
 import { usePageParams } from 'hooks/usePageParams'
 
 import { useName } from 'features/Name'
+import { isPermittedTournament } from '../../helpers/isPermittedTournament'
 
 export const useTournamentPage = () => {
   const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null)
   const { profileId: tournamentId, sportType } = usePageParams()
   const country = useName(tournamentProfile?.country || {})
+  const history = useHistory()
 
   useEffect(() => {
+    if (!isPermittedTournament(tournamentId, sportType)) {
+      history.push('/')
+    }
     getTournamentInfo(sportType, tournamentId)
       .then(setTournamentProfile)
   },
   [
+    history,
     sportType,
     tournamentId,
   ])

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

@@ -20,16 +20,14 @@ const HeaderStyled = styled.header`
     margin-bottom: 0;
   }
 
-  ${isMobileDevice
+  ${isMobileDevice ? css`
-    ? css`
+    @media (max-width: 650px) {
-      @media (max-width: 650px){
       margin-bottom: 20px;
     }
-      @media (orientation: landscape){
+    @media (orientation: landscape) {
       margin-bottom: 20px;
     }
-    `
+  ` : ''};
-    : ''};
 `
 
 const HomeIcon = styled.div`
@@ -46,18 +44,37 @@ export const HeaderLogo = styled(Logo)`
   top: ${client.styles.logoTop}rem;
   left: ${client.styles.logoLeft}rem;
 
-  ${isMobileDevice
+  ${isMobileDevice ? css`
-    ? 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;
+  ` : ''}
 `
 
 export const Header = () => (
   <HeaderStyled>
     <Link to={PAGES.home}>
+      {
+        client.name === 'lff' ? (
+          <HeaderLffLogo />
+        ) : (
           <HeaderLogo />
+        )
+      }
     </Link>
     <Link to={PAGES.home}>
       <HomeIcon />

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

@@ -2,13 +2,13 @@ import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
 import { devices } from 'config'
-
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import {
   Switch,
   Icon,
   Title as TitleBase,
 } from 'features/MatchSwitches/styled'
+import { getSwitchScoreIconName } from 'helpers/getSwitchScoreIconName'
 
 type TWrapper = {
   isHidden?: boolean,
@@ -61,7 +61,7 @@ export const ScoreSwitch = ({ className }: Props) => {
         <Icon
           width={1.8}
           height={1.4}
-          iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'}
+          iconName={getSwitchScoreIconName()}
           isOn={isScoreHidden}
         />
       </Switch>

src/features/UserAccount/styled.tsx

@@ -6,6 +6,7 @@ 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;
@@ -13,7 +14,7 @@ export const SolidButton = styled(ButtonSolid)`
   padding: 0 0.94rem;
   color: white;
   font-weight: bold;
-  background-color: #294fc4;
+  background-color: ${client.name === 'lff' ? '#A30C2F' : '#294fc4'};
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   border-color: transparent;
   border-radius: 5px;

src/helpers/getSwitchScoreIconName/index.tsx

@@ -0,0 +1,17 @@
+import { isMobileDevice } from 'config/userAgent'
+import { client } from 'config/clients'
+
+export const getSwitchScoreIconName = () => {
+  switch (true) {
+    case client.name === 'lff' && !isMobileDevice:
+      return 'score-switch-lff'
+    case client.name === 'lff' && isMobileDevice:
+      return 'score-switch-lff-mobile'
+    case client.name !== 'lff' && !isMobileDevice:
+      return 'score-switch'
+    case client.name !== 'lff' && isMobileDevice:
+      return 'score-switch-mobile'
+    default:
+      return 'score-switch'
+  }
+}

src/helpers/isPermittedTournament/index.tsx

@@ -0,0 +1,15 @@
+import includes from 'lodash/includes'
+
+import { client } from 'config/clients'
+import { SportTypes } from 'config/sportTypes'
+
+export const isPermittedTournament = (
+  tournamentId: number,
+  sportType: SportTypes,
+) => {
+  if (client.name !== 'lff') {
+    return true
+  }
+
+  return includes([928, 1620], tournamentId) && sportType === 1
+}