feat(2313): add image for tournaiment

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 (
     <Fragment>
       <HeaderStyled
-        headerImage={headerImage}
+        headerImage={imageHeader}
         color={headerColor || color}
         height={height}
       >

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<HeaderProps>`
     height: 124px;
   }
 
-  ${({ color }) => defaultHeaderStyles(color)}
+  ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
 
   ${isMobileDevice
     ? css`