feat(2263): changed covers for tournaments and teams

src/config/clients/facr.tsx

@@ -36,11 +36,7 @@ export const facr: ClientConfig = {
   styles: {
     background: '',
     homePageHeader: css`
-      background: linear-gradient(
-      45.42deg,
-      #00257A 51.04%,
-      #000000 80.83%),
-      #000000;
+      background: linear-gradient(83.42deg, #00257A 53.04%, rgba(0, 0, 0, 0) 94.83%), #000000;
     `,
     logo: 'facr-logo.svg',
     logoHeight: 4.76,

src/features/ProfileHeader/index.tsx

@@ -11,6 +11,7 @@ import { Search } from 'features/Search'
 import { ScoreSwitch } from 'features/MatchSwitches'
 
 import { isMatchPage } from 'helpers/isMatchPage'
+import { getColor } from 'helpers/getColor'
 
 import {
   HeaderStyled,
@@ -18,7 +19,6 @@ import {
   HeaderLogo,
   Position,
 } from './styled'
-import { useProfileColor } from './hooks'
 
 type Props = {
   children?: ReactNode,
@@ -35,8 +35,7 @@ export const ProfileHeader = ({
   height,
   profileId,
 }: Props) => {
-  const color = useProfileColor(profileId)
-
+  const color = getColor(profileId)
   return (
     <Fragment>
       <HeaderStyled

src/features/ProfileHeader/styled.tsx

@@ -9,7 +9,14 @@ import { Logo } from 'features/Logo'
 
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 
-const defaultHeaderStyles = (color: string = DEFAULT_HEADER_COLOR) => css`
+export const defaultHeaderStyles = (color: string = DEFAULT_HEADER_COLOR) => {
+  if (color.includes('linear-gradient')) {
+    return css`
+      background: ${color};
+      z-index: 10;
+`
+  }
+  return client.name === 'facr' ? client.styles.homePageHeader : css`
   background: linear-gradient(
     187deg,
     ${color} -4.49%,
@@ -17,6 +24,7 @@ const defaultHeaderStyles = (color: string = DEFAULT_HEADER_COLOR) => css`
     #000000;
   z-index: 10;
 `
+}
 
 type HeaderProps = {
   color?: string,
@@ -34,10 +42,7 @@ export const HeaderStyled = styled.header<HeaderProps>`
     height: 124px;
   }
 
-  ${({ color, headerImage }) => (headerImage
-    ? css`background: url(${headerImage});`
-    : client.styles.homePageHeader || defaultHeaderStyles(color)
-  )}
+  ${({ color }) => defaultHeaderStyles(color)}
 
   ${isMobileDevice
     ? css`

src/helpers/getColor/index.ts

@@ -0,0 +1,14 @@
+const DEFAULT_COLOR = 'linear-gradient(83.42deg, #00257A 53.04%, rgba(0, 0, 0, 0) 94.83%), #000000'
+export const getColor = (id: number | undefined):string => {
+  if (!id) return DEFAULT_COLOR
+  switch (id) {
+    case 227:
+      return 'linear-gradient(83.42deg, #A3C05B 53.04%, #37411C 94.83%), #000000'
+    case 946:
+      return 'linear-gradient(83.42deg, #000000 53.04%, #000000 94.83%), #000000'
+    case 3067:
+      return 'linear-gradient(83.42deg, #007179 53.04%, #007179 94.83%), #000000'
+    default:
+      return 'linear-gradient(83.42deg, #01257B 53.04%, #0144B5 94.83%), #000000'
+  }
+}