From 5cc32ace16e8aa080838b48b1aced8b148459291 Mon Sep 17 00:00:00 2001 From: Berdyshev Oleksandr Date: Mon, 21 Feb 2022 10:41:32 +0300 Subject: [PATCH] feat(2263): changed covers for tournaments and teams --- src/config/clients/facr.tsx | 6 +----- src/features/ProfileHeader/index.tsx | 5 ++--- src/features/ProfileHeader/styled.tsx | 15 ++++++++++----- src/helpers/getColor/index.ts | 14 ++++++++++++++ 4 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 src/helpers/getColor/index.ts diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index acc29599..bc3d76ab 100644 --- a/src/config/clients/facr.tsx +++ b/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, diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index 61f1f072..74d2031c 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/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 ( 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` height: 124px; } - ${({ color, headerImage }) => (headerImage - ? css`background: url(${headerImage});` - : client.styles.homePageHeader || defaultHeaderStyles(color) - )} + ${({ color }) => defaultHeaderStyles(color)} ${isMobileDevice ? css` diff --git a/src/helpers/getColor/index.ts b/src/helpers/getColor/index.ts new file mode 100644 index 00000000..303c5152 --- /dev/null +++ b/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' + } +}