diff --git a/src/features/MatchPage/helpers/buildPlaylists.tsx b/src/features/MatchPage/helpers/buildPlaylists.tsx index 26b1e4a2..fa84c9b4 100644 --- a/src/features/MatchPage/helpers/buildPlaylists.tsx +++ b/src/features/MatchPage/helpers/buildPlaylists.tsx @@ -48,8 +48,14 @@ export const buildPlaylists = (matchPlaylists: MatchPlaylists | null) => { lexics: matchPlaylists?.lexics, match: getMatchPlaylists(matchPlaylists), players: { - team1: getPlayerPlaylists(matchPlaylists?.players1), - team2: getPlayerPlaylists(matchPlaylists?.players2), + team1: { + color: matchPlaylists?.color1 || '222222', + list: getPlayerPlaylists(matchPlaylists?.players1), + }, + team2: { + color: matchPlaylists?.color2 || 'FFFFFF', + list: getPlayerPlaylists(matchPlaylists?.players2), + }, }, } return playlists diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx index cbea283d..70af1fda 100644 --- a/src/features/MatchPage/types.tsx +++ b/src/features/MatchPage/types.tsx @@ -46,7 +46,13 @@ export type Playlists = { lexics?: Lexics, match: MatchPlaylistOptions, players: { - team1: PlayerPlaylistOptions, - team2: PlayerPlaylistOptions, + team1: { + color: string, + list: PlayerPlaylistOptions, + }, + team2: { + color: string, + list: PlayerPlaylistOptions, + }, }, } diff --git a/src/features/MatchPopup/components/GroupedPlayersList/index.tsx b/src/features/MatchPopup/components/GroupedPlayersList/index.tsx index 9e3438a5..a7b2308e 100644 --- a/src/features/MatchPopup/components/GroupedPlayersList/index.tsx +++ b/src/features/MatchPopup/components/GroupedPlayersList/index.tsx @@ -36,11 +36,13 @@ const useItemsLoadedState = (items: PlayerPlaylistOptions) => { type Props = { players: PlayerPlaylistOptions, team: Teams, + teamColor: string, } export const GroupedPlayersList = ({ players, team, + teamColor, }: Props) => { const { allLoaded, onLoad } = useItemsLoadedState(players) @@ -60,12 +62,14 @@ export const GroupedPlayersList = ({ } void, players: PlayerPlaylistOptions, team: Teams, + teamColor: string, } export const PlayersList = ({ @@ -31,6 +32,7 @@ export const PlayersList = ({ onLoad, players, team, + teamColor, }: Props) => { const { handlePlayerClick, match } = useMatchPopupStore() @@ -47,7 +49,7 @@ export const PlayersList = ({ id={player.id} sportType={match.sportType} profileType={ProfileTypes.PLAYERS} - team={team} + teamColor={teamColor} onLoad={() => onLoad(player.id)} /> {player.gk && ( diff --git a/src/features/MatchPopup/components/PlayersList/styled.tsx b/src/features/MatchPopup/components/PlayersList/styled.tsx index 41f7285b..f23338b3 100644 --- a/src/features/MatchPopup/components/PlayersList/styled.tsx +++ b/src/features/MatchPopup/components/PlayersList/styled.tsx @@ -72,7 +72,7 @@ export const Button = styled.button` ` type LogoProps = { - team: Teams, + teamColor: string, } export const Logo = styled(ProfileLogo)` @@ -80,11 +80,7 @@ export const Logo = styled(ProfileLogo)` height: 100%; object-fit: contain; border-radius: 50%; - background-color: ${({ team }) => ( - team === Teams.TEAM1 - ? '#222222' - : '#FFFFFF' - )}; + background-color: ${({ teamColor }) => `#${teamColor}`}; ` export const NameWrapper = styled.span` diff --git a/src/features/MatchPopup/components/PlayersListDesktop/index.tsx b/src/features/MatchPopup/components/PlayersListDesktop/index.tsx index a69c2291..0bff89cc 100644 --- a/src/features/MatchPopup/components/PlayersListDesktop/index.tsx +++ b/src/features/MatchPopup/components/PlayersListDesktop/index.tsx @@ -43,11 +43,13 @@ export const PlayersListDesktop = () => { diff --git a/src/features/MatchPopup/components/PlayersListMobile/index.tsx b/src/features/MatchPopup/components/PlayersListMobile/index.tsx index 4ac02382..c9b92404 100644 --- a/src/features/MatchPopup/components/PlayersListMobile/index.tsx +++ b/src/features/MatchPopup/components/PlayersListMobile/index.tsx @@ -47,7 +47,8 @@ export const PlayersListMobile = () => { ) diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index cda34d7a..172160f0 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -69,13 +69,13 @@ export const MatchSidePlaylists = ({ diff --git a/src/requests/getMatchPlaylists.tsx b/src/requests/getMatchPlaylists.tsx index 45a62f24..48df798d 100644 --- a/src/requests/getMatchPlaylists.tsx +++ b/src/requests/getMatchPlaylists.tsx @@ -56,6 +56,8 @@ export type Lexics = { export type MatchPlaylists = { ball_in_play: PlaylistWithDuration, + color1?: string, + color2?: string, full_game: PlaylistWithDuration, goals: PlaylistWithDuration, highlights: PlaylistWithDuration,