diff --git a/public/images/5704.png b/public/images/5704.png new file mode 100644 index 00000000..0654b2dc Binary files /dev/null and b/public/images/5704.png differ diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index b444320b..5fa6c38d 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -2,7 +2,11 @@ import { Fragment } from 'react' import type { ReactNode } from 'react' import { Link } from 'react-router-dom' -import { PAGES } from 'config' +import { + PAGES, + SportTypes, + ProfileTypes, +} from 'config' import { client } from 'config/clients' @@ -12,6 +16,7 @@ import { ScoreSwitch } from 'features/MatchSwitches' import { isMatchPage } from 'helpers/isMatchPage' +import { usePageParams } from 'hooks/usePageParams' import { useProfileColor } from './hooks' import { @@ -36,11 +41,20 @@ export const ProfileHeader = ({ height, profileId, }: Props) => { + const { + profileType, + sportType, + } = usePageParams() + + const url = '/images/5704.png' const color = useProfileColor(profileId) + const imageHeader = profileId === 5704 + && sportType === SportTypes.FOOTBALL + && profileType === ProfileTypes.TOURNAMENTS ? url : headerImage return ( diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index 41ce494f..d0e06f6b 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -9,7 +9,13 @@ import { Logo } from 'features/Logo' export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)' -export const defaultHeaderStyles = (color: string = DEFAULT_HEADER_COLOR) => { +export const defaultHeaderStyles = ( + color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, +) => { + if (headerImage && client.name !== 'facr') { + return css`background: url(${headerImage}); + background-size: 100% 100%;` + } if (color.includes('linear-gradient')) { return css` background: ${color}; @@ -42,7 +48,7 @@ export const HeaderStyled = styled.header` height: 124px; } - ${({ color }) => defaultHeaderStyles(color)} + ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)} ${isMobileDevice ? css`