fix(#in670): header color fixes

src/config/clients/insports.tsx

@@ -1,4 +1,5 @@
 import { css } from 'styled-components/macro'
+
 import {
   ClientConfig,
   ClientIds,

src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx

@@ -7,7 +7,6 @@ import {
   ProfileTypes,
   PAGES,
   client,
-  isLffClient,
 } from 'config'
 
 import type { Match } from 'features/Matches'
@@ -19,8 +18,6 @@ import { useUserFavoritesStore } from 'features/UserFavorites/store'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 import { Icon } from 'features/Icon'
 
-import { getCardColor } from 'helpers/getCardColor'
-
 import type { LiveScore } from 'requests'
 
 import { NoAccessMessage } from '../../NoAccessMessage'
@@ -73,6 +70,7 @@ export const CardFrontsideMobile = ({
   const {
     access,
     date,
+    group,
     live,
     preview,
     previewURL,
@@ -88,6 +86,7 @@ export const CardFrontsideMobile = ({
   const { isInFavorites } = useUserFavoritesStore()
   const { isScoreHidden } = useMatchSwitchesStore()
   const { isMonthMode } = useHeaderFiltersStore()
+  const { color } = tournament
   const isInFuture = getUnixTime(date) > getUnixTime(new Date())
   const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden)
   const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id)
@@ -111,10 +110,10 @@ export const CardFrontsideMobile = ({
 
   return (
     <CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}>
-      <CardWrapper>
+      <CardWrapper gradientColor={color || group?.color}>
         <HoverFrame />
-        <PreviewWrapper isGradientPreview={isLffClient} color={getCardColor(tournament.id)}>
+        <PreviewWrapper>
-          {!isLffClient && previewImage && (
+          {previewImage && (
             <Preview title={tournamentName} src={previewImage} />
           )}
           {access === MatchAccess.NoCountryAccess ? (

src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx

@@ -27,7 +27,11 @@ export const CardWrapperOuter = styled.li.attrs({
     : ''};
 `
 
-export const CardWrapper = styled.div`
+type TCardWrapper = {
+  gradientColor?: string,
+}
+
+export const CardWrapper = styled.div<TCardWrapper>`
   position: absolute;
   top: 0;
   left: 0;
@@ -38,6 +42,15 @@ export const CardWrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.matchCardBackground};
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   cursor: pointer;
+
+    
+  ${({ gradientColor }) => (
+    gradientColor
+      ? css`
+          background: linear-gradient(270deg, ${gradientColor} -4.49%, #000000 68.29%), #000000;`
+      : '')
+}
+
   ${isMobileDevice
     ? css`
         padding-bottom: 0;
@@ -63,19 +76,11 @@ export const HoverFrame = styled.div`
   }
 `
 
-type TPreviewWrapper = {
+export const PreviewWrapper = styled.div`
-  color?: string,
-  isGradientPreview?: boolean,
-}
-
-export const PreviewWrapper = styled.div<TPreviewWrapper>`
   position: relative;
   display: flex;
   width: 100%;
   height: 60%;
-  ${({ color, isGradientPreview }) => isGradientPreview
-    && css`
-    background: ${color};`}
   ${isMobileDevice
     ? css`
         width: 40%;

src/features/MatchCard/CardFrontside/index.tsx

@@ -4,12 +4,10 @@ import { useLocation, useRouteMatch } from 'react-router'
 import getUnixTime from 'date-fns/getUnixTime'
 
 import { ProfileTypes, PAGES } from 'config'
-import { client, isLffClient } from 'config/clients'
+import { client } from 'config/clients'
 
 import type { LiveScore } from 'requests'
 
-import { getCardColor } from 'helpers/getCardColor'
-
 import type { Match } from 'features/Matches'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import { useName } from 'features/Name'
@@ -18,7 +16,6 @@ import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
 import { TournamentSubtitle } from 'features/TournamentSubtitle'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
-
 import { NoAccessMessage } from '../NoAccessMessage'
 import { Score } from '../Score'
 import {
@@ -86,6 +83,7 @@ export const CardFrontside = ({
   const { isInFavorites } = useUserFavoritesStore()
   const { isScoreHidden } = useMatchSwitchesStore()
   const { isMonthMode } = useHeaderFiltersStore()
+  const { color } = tournament
   const isInFuture = getUnixTime(date) > getUnixTime(new Date())
   const showScore = !(
     isInFuture
@@ -116,14 +114,13 @@ export const CardFrontside = ({
       onKeyPress={onKeyPress}
       isMatchPage={isMatchPage}
     >
-      <CardWrapper isMatchPage={isMatchPage}>
+      <CardWrapper
+        isMatchPage={isMatchPage}
+        gradientColor={color || group?.color}
+      >
         <HoverFrame />
-        <PreviewWrapper
+        <PreviewWrapper isMatchPage={isMatchPage}>
-          isGradientPreview={isLffClient}
+          {previewImage && (
-          color={getCardColor(tournament.id)}
-          isMatchPage={isMatchPage}
-        >
-          {!isLffClient && previewImage && (
             <Preview
               isMatchPage={isMatchPage}
               title={tournamentName}

src/features/MatchCard/styled.tsx

@@ -7,6 +7,7 @@ import { Name } from 'features/Name'
 import { ProfileLogo } from 'features/ProfileLogo'
 
 type CardProps = {
+  gradientColor?: string,
   isMatchPage?: boolean,
 }
 
@@ -42,6 +43,13 @@ export const CardWrapper = styled.div<CardProps>`
   padding: ${({ isMatchPage }) => (isMatchPage ? '0.5rem 0.625rem 1.8rem' : '0 0 0.75rem')};
   border-radius: 3px;
   background-color: ${({ theme }) => theme.colors.matchCardBackground};
+  
+  ${({ gradientColor }) => (
+    gradientColor
+      ? css`
+          background: linear-gradient(187deg, ${gradientColor} -4.49%, #000000 68.29%), #000000;`
+      : '')
+}
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   cursor: pointer;
 
@@ -71,8 +79,6 @@ export const HoverFrame = styled.div`
 `
 
 type TPreviewWrapper = {
-  color?: string,
-  isGradientPreview?: boolean,
   isMatchPage?: boolean,
 }
 
@@ -81,9 +87,6 @@ export const PreviewWrapper = styled.div<TPreviewWrapper>`
   display: flex;
   width: 100%;
   height: 60%;
-  ${({ color, isGradientPreview }) => isGradientPreview
-    && css`
-    background: ${color};`}
   
   ${({ isMatchPage }) => (
     isMatchPage

src/features/PlayerPage/hooks.tsx

@@ -63,6 +63,7 @@ export const usePlayerPage = () => {
 
   return {
     fetchMatches,
+    playerProfile,
     profile,
     teamId: playerProfile?.club_team?.id,
   }

src/features/PlayerPage/index.tsx

@@ -19,13 +19,17 @@ const PlayerPage = () => {
   usePageLogger()
   const {
     fetchMatches,
+    playerProfile,
     profile,
     teamId,
   } = usePlayerPage()
 
   return (
     <PageWrapper>
-      <ProfileHeader profileId={teamId}>
+      <ProfileHeader
+        profileId={teamId}
+        color={playerProfile?.tournament.color}
+      >
         {profile && <ProfileCard profile={profile} />}
       </ProfileHeader>
       <Main>

src/features/ProfileHeader/hooks.tsx

@@ -1,61 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { getProfileColor } from 'requests/getProfileColor'
-
-import { usePageParams } from 'hooks/usePageParams'
-import { getColor } from 'helpers/getColor'
-
-import { client } from 'config/clients'
-import { DEFAULT_HEADER_COLOR } from './styled'
-
-export const useProfileColor = (profileId?: number) => {
-  const {
-    profileType,
-    sportType,
-  } = usePageParams()
-  const [color, setColor] = useState(DEFAULT_HEADER_COLOR)
-
-  useEffect(() => {
-    if (!profileId) return
-
-    getProfileColor({
-      profileId,
-      profileType,
-      sportType,
-    }).then(setColor)
-  }, [
-    profileId,
-    profileType,
-    sportType,
-  ])
-
-  // TODO remove this logic when backend will return the correct colors
-  const prifileWithConfifColor = [
-    227, 946, 3067, 5665, 23, 2719, 528, 17018, 567, 16306, 1189, 480, 16920, 6032, 17624, 114440,
-  ]
-  if (
-    client.name === 'facr'
-    && sportType === 1 && profileId && prifileWithConfifColor.includes(profileId)
-  ) {
-    return getColor(profileId)
-  }
-  const lffColorConfig = [
-    262,
-    928,
-    1620,
-    5858,
-    5975,
-    5976,
-    6004,
-    1000045,
-    1000046,
-    1000047,
-    1000048,
-  ]
-  // eslint-disable-next-line postro4no/function-args
-
-  if (client.name === 'lff' && profileId && lffColorConfig.includes(profileId)) {
-    return getColor(profileId)
-  }
-  return color
-}

src/features/ProfileHeader/index.tsx

@@ -14,7 +14,6 @@ import { Search } from 'features/Search'
 import { ScoreSwitch } from 'features/MatchSwitches'
 
 import { usePageParams } from 'hooks/usePageParams'
-import { useProfileColor } from './hooks'
 
 import {
   HeaderStyled,
@@ -48,7 +47,6 @@ export const ProfileHeader = ({
     sportType,
   } = usePageParams()
 
-  const color = useProfileColor(profileId)
   // @ts-ignore
   const imageHeader = Boolean(profileWithImage[profileId])
     && sportType === 1
@@ -57,7 +55,7 @@ export const ProfileHeader = ({
   return (
     <HeaderStyled
       headerImage={imageHeader}
-      color={headerColor || color}
+      color={headerColor}
       height={height}
     >
       <Position

src/features/ProfileHeader/styled.tsx

@@ -11,10 +11,10 @@ import { ScoreSwitch } from 'features/MatchSwitches'
 
 import { isMatchPage } from 'helpers/isMatchPage'
 
-export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
+export const DEFAULT_HEADER_COLOR = client.styles.homePageHeader?.toString() || 'rgba(53, 96, 225, 0.56)'
 
 export const defaultHeaderStyles = (
-  color: string = DEFAULT_HEADER_COLOR,
+  color: string | undefined = DEFAULT_HEADER_COLOR,
   headerImage: string | undefined | null,
 ) => {
   if ([
@@ -36,21 +36,25 @@ export const defaultHeaderStyles = (
       }
       `
   }
-  if (color.includes('linear-gradient')) {
+  if (color) {
     return css`
-      background: ${color};
+      background: linear-gradient(
+        187deg,
+        ${color} -4.49%,
+        #000000 68.29%),
+        #000000;
       z-index: 10;
-`
+    `
   }
 
   return css`
     background: linear-gradient(
       187deg,
-      ${color} -4.49%,
+      ${DEFAULT_HEADER_COLOR} -4.49%,
       #000000 68.29%),
       #000000;
-    z-index: 10;
+      z-index: 10;
-  `
+   `
 }
 
 type HeaderProps = {
@@ -72,9 +76,11 @@ export const HeaderStyled = styled.header<HeaderProps>`
     client.name === ClientNames.Lff
     || client.name === ClientNames.Facr
     || client.name === ClientNames.Fqtv
-    || client.name === ClientNames.Tunisia ? css`
+    || client.name === ClientNames.Tunisia
-      background: ${color};
+      ? css`
-    ` : ''
+           background: linear-gradient(187deg, ${color} -4.49%, #000000 68.29%), #000000; 
+            z-index: 10;
+      ` : ''
   )}
   
   ${isMobileDevice

src/features/TeamPage/hooks.tsx

@@ -66,5 +66,6 @@ export const useTeamPage = () => {
     profile,
     sportType,
     teamId,
+    teamProfile,
   }
 }

src/features/TeamPage/index.tsx

@@ -22,11 +22,13 @@ const TeamPage = () => {
     headerImage,
     profile,
     teamId,
+    teamProfile,
   } = useTeamPage()
 
   return (
     <PageWrapper>
       <ProfileHeader
+        color={teamProfile?.tournament.color}
         headerImage={headerImage}
         profileId={teamId}
       >

src/features/TournamentPage/hooks.tsx

@@ -16,6 +16,7 @@ import { openSubscribePopup, redirectToUrl } from 'helpers'
 import { PAGES } from 'config'
 
 import { useName } from 'features/Name'
+import { DEFAULT_HEADER_COLOR } from 'features/ProfileHeader/styled'
 
 import { checkUrlParams } from 'helpers/parseUrlParams/parseUrlParams'
 
@@ -126,6 +127,7 @@ export const useTournamentPage = () => {
   }, [])
 
   return {
+    color: tournamentProfile?.color || DEFAULT_HEADER_COLOR,
     fetchMatches,
     headerImage: tournamentProfile?.header_image,
     infoItems: [country],

src/features/TournamentPage/index.tsx

@@ -20,6 +20,7 @@ import { FavouriteTeamPopup } from '../MatchPage/components/FavouriteTeam'
 const TournamentPage = () => {
   usePageLogger()
   const {
+    color,
     fetchMatches,
     headerImage,
     profile,
@@ -30,6 +31,7 @@ const TournamentPage = () => {
   return (
     <PageWrapper>
       <ProfileHeader
+        color={color}
         headerImage={headerImage}
         profileId={tournamentId}
       >

src/helpers/getCardColor/index.tsx

@@ -1,33 +0,0 @@
-import { isMobileDevice } from 'config/userAgent'
-
-const degree = isMobileDevice ? '270deg' : '0deg'
-
-export const getCardColor = (id: number | undefined): string => {
-  const defaultColor = 'none'
-
-  if (!id) return defaultColor
-
-  switch (id) {
-    case 928:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(49,186,177,1) 100%);`
-    case 1620:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(96,24,75,1) 100%);`
-    case 5976:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(0,160,228,1) 100%);`
-    case 5975:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(225,27,74,1) 100%);`
-    case 5858:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(252,162,78, 1) 100%);`
-    case 262:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(192,166,96,1) 100%);`
-    case 6004:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(79,81,205,1) 100%);`
-    case 100045:
-    case 100046:
-    case 100047:
-    case 100048:
-      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(55, 179, 72,1) 100%);`
-    default:
-      return defaultColor
-  }
-}

src/helpers/getColor/index.ts

@@ -1,53 +0,0 @@
-import { client } from 'config/clients'
-
-const DEFAULT_FACR_COLOR = 'linear-gradient(83.42deg, #00257A 53.04%, rgba(0, 0, 0, 0) 94.83%), #000000'
-const DEFAULT_INSTAT_COLOR = 'linear-gradient( 187deg, rgba(53,96,225,0.56) -4.49%, #000000 68.29%), #000000'
-
-export const getColor = (id: number | undefined): string => {
-  const currentDefaultColor = client.name === 'facr' ? DEFAULT_FACR_COLOR : DEFAULT_INSTAT_COLOR
-
-  if (!id) return currentDefaultColor
-  switch (id) {
-    case 227:
-      return 'linear-gradient(83.42deg, #004A49 53.04%, #071616 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'
-    case 928:
-      return 'linear-gradient(90deg, rgba(21,83,79,1) 0%, rgba(49,186,177,1) 100%);'
-    case 1620:
-      return 'linear-gradient(90deg, rgba(47,4,39,1) 0%, rgba(96,24,75,1) 100%);'
-    case 5976:
-      return 'linear-gradient(90deg, rgba(13,94,129,1) 0%, rgba(0,160,228,1) 100%);'
-    case 5975:
-      return 'linear-gradient(90deg, rgba(140,13,43,1) 0%, rgba(225,27,74,1) 100%);'
-    case 5858:
-      return 'linear-gradient(90deg, rgba(184,99,21,1) 0%, rgba(252,162,78, 1) 100%);'
-    case 262:
-      return 'linear-gradient(90deg, rgba(114,103,76,1) 0%, rgba(192,166,96,1) 100%);'
-    case 6004:
-      return 'linear-gradient(255.69deg, #474AF1 15.59%, #202284 94.93%);'
-    case 1000045:
-    case 1000046:
-    case 1000047:
-    case 1000048:
-      return 'linear-gradient(255.69deg, #37B348 15.59%, #003E08 94.93%);'
-    case 5665:
-    case 23:
-    case 2719:
-    case 528:
-    case 17018:
-    case 567:
-    case 16306:
-    case 1189:
-    case 480:
-    case 16920:
-    case 6032:
-    case 17624:
-    case 114440:
-      return 'linear-gradient(83.42deg, #01257B 53.04%, #0144B5 94.83%), #000000'
-    default:
-      return currentDefaultColor
-  }
-}

src/requests/getMatches/types.tsx

@@ -9,6 +9,7 @@ type AwsTournamentMedia = AwsTeamMedia & {
 }
 
 export type TournamentType = {
+  color?: string,
   id: number,
   is_super_tournament?: boolean,
   media?: AwsTournamentMedia,

src/requests/getPlayerInfo.tsx

@@ -4,6 +4,7 @@ import {
 
 } from 'config'
 import { callApi } from 'helpers'
+import type { TournamentType } from './getMatches'
 
 const proc = PROCEDURES.get_player_info
 
@@ -29,6 +30,7 @@ export type PlayerProfile = {
   lastname_rus: string,
   nickname_eng: string | null,
   nickname_rus: string | null,
+  tournament: TournamentType,
   weight: number | null,
 } | null
 

src/requests/getProfileColor.tsx

@@ -1,48 +0,0 @@
-import {
-  API_ROOT,
-  ProfileTypes,
-
-} from 'config'
-import { callApi } from 'helpers'
-
-const profiles = {
-  [ProfileTypes.TEAMS]: 'team',
-  [ProfileTypes.TOURNAMENTS]: 'tournament',
-  [ProfileTypes.PLAYERS]: 'team',
-  [ProfileTypes.MATCHES]: '',
-  [ProfileTypes.SUPERTOURNAMENTS]: '',
-}
-
-type Response = {
-  b: number,
-  code: string,
-  g: number,
-  r: number,
-}
-
-type Args = {
-  profileId: number,
-  profileType: ProfileTypes,
-  sportType: number,
-}
-
-export const getProfileColor = async ({
-  profileId,
-  profileType,
-  sportType,
-}: Args): Promise<string> => {
-  const config = {
-    body: {
-      profile_id: profileId,
-      profile_type: profiles[profileType],
-      sport_id: sportType,
-    },
-  }
-
-  const response: Response = await callApi({
-    config,
-    url: `${API_ROOT}/profile/color`,
-  })
-
-  return `rgba(${response.r}, ${response.g}, ${response.b}, 0.56)`
-}

src/requests/getTeamInfo.tsx

@@ -8,6 +8,7 @@ import { callApi } from 'helpers'
 const proc = PROCEDURES.get_team_info
 
 type NameObject = {
+  color?: string,
   id: number,
   name_eng: string,
   name_rus: string,

src/requests/getTournamentInfo.tsx

@@ -7,6 +7,7 @@ import { callApi } from 'helpers'
 const proc = PROCEDURES.get_tournament_info
 
 export type TournamentInfo = {
+  color: string,
   country: {
     id: number,
     name_eng: string,