From f9823d191fbdd906e1b3b43384dea71c898bf485 Mon Sep 17 00:00:00 2001 From: Farber Denis Date: Tue, 27 Jun 2023 12:38:37 +0300 Subject: [PATCH] fix(#in670): header color fixes --- src/config/clients/insports.tsx | 1 + .../CardFrontside/MatchCardMobile/index.tsx | 11 ++-- .../CardFrontside/MatchCardMobile/styled.tsx | 25 +++++--- .../MatchCard/CardFrontside/index.tsx | 19 +++--- src/features/MatchCard/styled.tsx | 13 ++-- src/features/PlayerPage/hooks.tsx | 1 + src/features/PlayerPage/index.tsx | 6 +- src/features/ProfileHeader/hooks.tsx | 61 ------------------- src/features/ProfileHeader/index.tsx | 4 +- src/features/ProfileHeader/styled.tsx | 28 +++++---- src/features/TeamPage/hooks.tsx | 1 + src/features/TeamPage/index.tsx | 2 + src/features/TournamentPage/hooks.tsx | 2 + src/features/TournamentPage/index.tsx | 2 + src/helpers/getCardColor/index.tsx | 33 ---------- src/helpers/getColor/index.ts | 53 ---------------- src/requests/getMatches/types.tsx | 1 + src/requests/getPlayerInfo.tsx | 2 + src/requests/getProfileColor.tsx | 48 --------------- src/requests/getTeamInfo.tsx | 1 + src/requests/getTournamentInfo.tsx | 1 + 21 files changed, 73 insertions(+), 242 deletions(-) delete mode 100644 src/features/ProfileHeader/hooks.tsx delete mode 100644 src/helpers/getCardColor/index.tsx delete mode 100644 src/helpers/getColor/index.ts delete mode 100644 src/requests/getProfileColor.tsx diff --git a/src/config/clients/insports.tsx b/src/config/clients/insports.tsx index 7939de5e..592bbb1b 100644 --- a/src/config/clients/insports.tsx +++ b/src/config/clients/insports.tsx @@ -1,4 +1,5 @@ import { css } from 'styled-components/macro' + import { ClientConfig, ClientIds, diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx index 5b30d040..f7850103 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx +++ b/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 ( - + - - {!isLffClient && previewImage && ( + + {previewImage && ( )} {access === MatchAccess.NoCountryAccess ? ( diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx index 773b761e..a5f32dcf 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx +++ b/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` 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 = { - color?: string, - isGradientPreview?: boolean, -} - -export const PreviewWrapper = styled.div` +export const PreviewWrapper = styled.div` position: relative; display: flex; width: 100%; height: 60%; - ${({ color, isGradientPreview }) => isGradientPreview - && css` - background: ${color};`} ${isMobileDevice ? css` width: 40%; diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 4b1c5d2b..0c1b047a 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/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} > - + - - {!isLffClient && previewImage && ( + + {previewImage && ( ` 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` display: flex; width: 100%; height: 60%; - ${({ color, isGradientPreview }) => isGradientPreview - && css` - background: ${color};`} ${({ isMatchPage }) => ( isMatchPage diff --git a/src/features/PlayerPage/hooks.tsx b/src/features/PlayerPage/hooks.tsx index eb56f013..c2b597c6 100644 --- a/src/features/PlayerPage/hooks.tsx +++ b/src/features/PlayerPage/hooks.tsx @@ -63,6 +63,7 @@ export const usePlayerPage = () => { return { fetchMatches, + playerProfile, profile, teamId: playerProfile?.club_team?.id, } diff --git a/src/features/PlayerPage/index.tsx b/src/features/PlayerPage/index.tsx index 363dc088..fa282812 100644 --- a/src/features/PlayerPage/index.tsx +++ b/src/features/PlayerPage/index.tsx @@ -19,13 +19,17 @@ const PlayerPage = () => { usePageLogger() const { fetchMatches, + playerProfile, profile, teamId, } = usePlayerPage() return ( - + {profile && }
diff --git a/src/features/ProfileHeader/hooks.tsx b/src/features/ProfileHeader/hooks.tsx deleted file mode 100644 index 9e353386..00000000 --- a/src/features/ProfileHeader/hooks.tsx +++ /dev/null @@ -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 -} diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index bbed7782..241a7664 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/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 ( { 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` client.name === ClientNames.Lff || client.name === ClientNames.Facr || client.name === ClientNames.Fqtv - || client.name === ClientNames.Tunisia ? css` - background: ${color}; - ` : '' + || client.name === ClientNames.Tunisia + ? css` + background: linear-gradient(187deg, ${color} -4.49%, #000000 68.29%), #000000; + z-index: 10; + ` : '' )} ${isMobileDevice diff --git a/src/features/TeamPage/hooks.tsx b/src/features/TeamPage/hooks.tsx index e8ab92d3..b92b9cae 100644 --- a/src/features/TeamPage/hooks.tsx +++ b/src/features/TeamPage/hooks.tsx @@ -66,5 +66,6 @@ export const useTeamPage = () => { profile, sportType, teamId, + teamProfile, } } diff --git a/src/features/TeamPage/index.tsx b/src/features/TeamPage/index.tsx index 16c65038..45c062ce 100644 --- a/src/features/TeamPage/index.tsx +++ b/src/features/TeamPage/index.tsx @@ -22,11 +22,13 @@ const TeamPage = () => { headerImage, profile, teamId, + teamProfile, } = useTeamPage() return ( diff --git a/src/features/TournamentPage/hooks.tsx b/src/features/TournamentPage/hooks.tsx index 2e93603f..a7b428ee 100644 --- a/src/features/TournamentPage/hooks.tsx +++ b/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], diff --git a/src/features/TournamentPage/index.tsx b/src/features/TournamentPage/index.tsx index 51f6d52f..cf21dd64 100644 --- a/src/features/TournamentPage/index.tsx +++ b/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 ( diff --git a/src/helpers/getCardColor/index.tsx b/src/helpers/getCardColor/index.tsx deleted file mode 100644 index 59890051..00000000 --- a/src/helpers/getCardColor/index.tsx +++ /dev/null @@ -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 - } -} diff --git a/src/helpers/getColor/index.ts b/src/helpers/getColor/index.ts deleted file mode 100644 index ae5cc766..00000000 --- a/src/helpers/getColor/index.ts +++ /dev/null @@ -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 - } -} diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index cbf15a0c..4afa6458 100644 --- a/src/requests/getMatches/types.tsx +++ b/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, diff --git a/src/requests/getPlayerInfo.tsx b/src/requests/getPlayerInfo.tsx index 1ce69eca..ef65c642 100644 --- a/src/requests/getPlayerInfo.tsx +++ b/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 diff --git a/src/requests/getProfileColor.tsx b/src/requests/getProfileColor.tsx deleted file mode 100644 index 2bdb016a..00000000 --- a/src/requests/getProfileColor.tsx +++ /dev/null @@ -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 => { - 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)` -} diff --git a/src/requests/getTeamInfo.tsx b/src/requests/getTeamInfo.tsx index 5e0d6cb0..c99c6f88 100644 --- a/src/requests/getTeamInfo.tsx +++ b/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, diff --git a/src/requests/getTournamentInfo.tsx b/src/requests/getTournamentInfo.tsx index a1d8d2b4..3ac8bdac 100644 --- a/src/requests/getTournamentInfo.tsx +++ b/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,