diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index db98b87a..8fb1cbbe 100644 --- a/src/config/clients/facr.tsx +++ b/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, }, } diff --git a/src/config/clients/index.tsx b/src/config/clients/index.tsx index d497219f..b9eaa9da 100644 --- a/src/config/clients/index.tsx +++ b/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' diff --git a/src/config/clients/instat.tsx b/src/config/clients/instat.tsx index 08ae89ec..e2271f15 100644 --- a/src/config/clients/instat.tsx +++ b/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, }, } diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index ead1f145..fc2ccefa 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -4,7 +4,6 @@ import type { Languages } from 'config/languages' type ProcedureName = string type RequestParameters = any - type StyledCss = ReturnType export type ClientConfig = { @@ -15,11 +14,15 @@ export type ClientConfig = { defaultLanguage?: Languages, disabledPreferences?: boolean, requests?: Record, + showSearch?: boolean, styles: { background?: string, homePageHeader?: StyledCss, logo: string, logoHeight?: number, logoWidth?: number, + matchLogoHeight?: number, + matchLogoTopMargin?: number, + matchLogoWidth?: number, }, } diff --git a/src/features/Logo/index.tsx b/src/features/Logo/index.tsx index bf378e52..f4ce9d50 100644 --- a/src/features/Logo/index.tsx +++ b/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` 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; diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index c017ee2e..aa78cc71 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/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 ( - + - + - + + {client.showSearch && } diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index 165d552f..d723756b 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/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` 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` 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` 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` position: absolute; - top: 1.14rem; + + top: ${({ isMatchPage }) => ( + isMatchPage ? client.styles.matchLogoTopMargin : '' + )}rem; + ${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)}; ${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)}; `