feat(ott-1797): some match page style changes for facr (#532)

* feat(ott-1797): some match page style changes for facr

* fix(ott-1797): pr fix

src/config/clients/facr.tsx

@@ -1,13 +1,16 @@
 import { css } from 'styled-components/macro'
 
-import type { ClientConfig } from './types'
 import { PROCEDURES } from '../procedures'
 
+import type { ClientConfig } from './types'
+
 const randomHash = () => (
   (Math.random() ** Math.random()) * 9999999999999999
 )
 
-const params = { _p_version: 'facrtv' }
+const params = {
+  _p_version: 'facrtv',
+}
 
 export const facr: ClientConfig = {
   auth: {
@@ -22,6 +25,7 @@ export const facr: ClientConfig = {
     [PROCEDURES.get_player_matches]: params,
     [PROCEDURES.get_tournament_matches]: params,
   },
+  showSearch: false,
   styles: {
     background: '',
     homePageHeader: css`
@@ -34,5 +38,8 @@ export const facr: ClientConfig = {
     logo: 'facr-logo.svg',
     logoHeight: 3.35,
     logoWidth: 2.45,
+    matchLogoHeight: 2.7,
+    matchLogoTopMargin: 0.6,
+    matchLogoWidth: 1.9,
   },
 }

src/config/clients/index.tsx

@@ -1,7 +1,7 @@
 import type { ClientConfig } from './types'
 
-import { instat } from './instat'
 import { facr } from './facr'
+import { instat } from './instat'
 
 const currentClient = process.env.REACT_APP_CLIENT || 'instat'
 

src/config/clients/instat.tsx

@@ -4,10 +4,14 @@ export const instat: ClientConfig = {
   auth: {
     clientId: 'ott-web',
   },
+  showSearch: true,
   styles: {
     background: 'background-image: url(/images/Checker.png);',
     logo: 'logo.svg',
     logoHeight: 1.465,
     logoWidth: 6.37,
+    matchLogoHeight: 1.465,
+    matchLogoTopMargin: 1.14,
+    matchLogoWidth: 6.37,
   },
 }

src/config/clients/types.tsx

@@ -4,7 +4,6 @@ import type { Languages } from 'config/languages'
 
 type ProcedureName = string
 type RequestParameters = any
-
 type StyledCss = ReturnType<typeof css>
 
 export type ClientConfig = {
@@ -15,11 +14,15 @@ export type ClientConfig = {
   defaultLanguage?: Languages,
   disabledPreferences?: boolean,
   requests?: Record<ProcedureName, RequestParameters>,
+  showSearch?: boolean,
   styles: {
     background?: string,
     homePageHeader?: StyledCss,
     logo: string,
     logoHeight?: number,
     logoWidth?: number,
+    matchLogoHeight?: number,
+    matchLogoTopMargin?: number,
+    matchLogoWidth?: number,
   },
 }

src/features/Logo/index.tsx

@@ -1,24 +1,28 @@
 import styled, { css } from 'styled-components/macro'
 
-import { isMobileDevice } from 'config/userAgent'
 import { client } from 'config/clients'
+import { isMobileDevice } from 'config/userAgent'
 
 type Props = {
   height?: number,
+  isMatchPage?: boolean,
   width?: number,
 }
 
 export const Logo = styled.div<Props>`
   display: block;
-  width: ${client.styles.logoWidth}rem;
-  height: ${client.styles.logoHeight}rem;
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url(/images/${client.styles.logo});
+
+  width: ${client.styles.logoWidth}rem;
+  height: ${client.styles.logoHeight}rem;
+  
   ${isMobileDevice
     ? css`
       width: 144px;
       height: 33px;
+      
       @media screen and (orientation: landscape){
         width: 92px;
         height: 22px;

src/features/ProfileHeader/index.tsx

@@ -1,20 +1,24 @@
-import type { ReactNode } from 'react'
 import { Fragment } from 'react'
+import type { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
 import { PAGES } from 'config'
 
+import { client } from 'config/clients'
+
 import { Menu } from 'features/Menu'
-import { ScoreSwitch } from 'features/MatchSwitches'
 import { Search } from 'features/Search'
+import { ScoreSwitch } from 'features/MatchSwitches'
+
+import { isMatchPage } from 'helpers/isMatchPage'
 
-import { useProfileColor } from './hooks'
 import {
   HeaderStyled,
   HeaderGroup,
   HeaderLogo,
   Position,
 } from './styled'
+import { useProfileColor } from './hooks'
 
 type Props = {
   children?: ReactNode,
@@ -32,6 +36,7 @@ export const ProfileHeader = ({
   profileId,
 }: Props) => {
   const color = useProfileColor(profileId)
+
   return (
     <Fragment>
       <HeaderStyled
@@ -39,12 +44,13 @@ export const ProfileHeader = ({
         color={headerColor || color}
         height={height}
       >
-        <Position left={1.7}>
+        <Position isMatchPage={isMatchPage()} left={1.7}>
           <HeaderGroup marginTop={0.19}>
             <Link to={PAGES.home}>
-              <HeaderLogo />
+              <HeaderLogo isMatchPage={isMatchPage()} />
             </Link>
-            <Search />
+
+            {client.showSearch && <Search />}
           </HeaderGroup>
         </Position>
 

src/features/ProfileHeader/styled.tsx

@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components/macro'
 
-import { isMobileDevice } from 'config/userAgent'
 import isUndefined from 'lodash/isUndefined'
 
-import { Logo } from 'features/Logo'
 import { client } from 'config/clients'
+import { isMobileDevice } from 'config/userAgent'
+
+import { Logo } from 'features/Logo'
 
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 
@@ -28,13 +29,16 @@ export const HeaderStyled = styled.header<HeaderProps>`
   display: flex;
   justify-content: center;
   height: ${({ height = 8.5 }) => height}rem;
+  
   ${({ color, headerImage }) => (headerImage
     ? css`background: url(${headerImage});`
     : client.styles.homePageHeader || defaultHeaderStyles(color)
   )}
+  
   ${isMobileDevice
     ? css`
      height: 124px;
+    
      @media screen and (orientation: landscape){
        height: 121px;
      }
@@ -49,8 +53,10 @@ type Props = {
 
 export const HeaderGroup = styled.div<Props>`
   display: flex;
+  
   ${({ height }) => (height ? `height: ${height}rem` : '')};
   ${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};
+  
   ${isMobileDevice
     ? css`
       position: relative;
@@ -61,6 +67,12 @@ export const HeaderGroup = styled.div<Props>`
 
 export const HeaderLogo = styled(Logo)`
   margin-top: 4px;
+  
+  ${({ isMatchPage }) => (isMatchPage ? css`
+    width: ${client.styles.matchLogoWidth}rem;
+    height: ${client.styles.matchLogoHeight}rem;
+  ` : '')}
+  
   ${isMobileDevice
     ? css`
       @media (max-width: 650px){
@@ -84,13 +96,18 @@ export const HeaderLogo = styled(Logo)`
 `
 
 type PositionProps = {
+  isMatchPage?: boolean,
   left?: number,
   right?: number,
 }
 
 export const Position = styled.div<PositionProps>`
   position: absolute;
-  top: 1.14rem;
+  
+  top: ${({ isMatchPage }) => (
+    isMatchPage ? client.styles.matchLogoTopMargin : ''
+  )}rem;
+  
   ${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
   ${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
 `