Ott 995 color for players (#349)

* feat(ott-995): add color

* feat(ott-995): add color

* feat(ott-995): fix comments

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

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,
+    },
   },
 }

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 = ({
       }
       <PlayersList
         team={team}
+        teamColor={teamColor}
         players={startingPlayers}
         allLoaded={allLoaded}
         onLoad={onLoad}
       />
       <PlayersList
         team={team}
+        teamColor={teamColor}
         players={benchedPlayers}
         allLoaded={allLoaded}
         onLoad={onLoad}

src/features/MatchPopup/components/PlayersList/index.tsx

@@ -24,6 +24,7 @@ type Props = {
   onLoad: (id: number) => 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 && (

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)<LogoProps>`
@@ -80,11 +80,7 @@ export const Logo = styled(ProfileLogo)<LogoProps>`
   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`

src/features/MatchPopup/components/PlayersListDesktop/index.tsx

@@ -43,11 +43,13 @@ export const PlayersListDesktop = () => {
       <ListsWrapper>
         <GroupedPlayersList
           team={Teams.TEAM1}
-          players={matchPlaylists.players.team1}
+          teamColor={matchPlaylists.players.team1.color}
+          players={matchPlaylists.players.team1.list}
         />
         <GroupedPlayersList
           team={Teams.TEAM2}
-          players={matchPlaylists.players.team2}
+          teamColor={matchPlaylists.players.team2.color}
+          players={matchPlaylists.players.team2.list}
         />
       </ListsWrapper>
     </Wrapper>

src/features/MatchPopup/components/PlayersListMobile/index.tsx

@@ -47,7 +47,8 @@ export const PlayersListMobile = () => {
       </Tabs>
       <GroupedPlayersList
         team={selectedTeam}
-        players={players}
+        players={players.list}
+        teamColor={players.color}
       />
     </Wrapper>
   )

src/features/MatchSidePlaylists/index.tsx

@@ -69,13 +69,13 @@ export const MatchSidePlaylists = ({
             <List>
               <PlayersPlaylists
                 teamName={profile?.team1}
-                players={playlists.players.team1}
+                players={playlists.players.team1.list}
                 selectedMathPlaylist={selectedPlaylist}
                 onSelect={onSelect}
               />
               <PlayersPlaylists
                 teamName={profile?.team2}
-                players={playlists.players.team2}
+                players={playlists.players.team2.list}
                 selectedMathPlaylist={selectedPlaylist}
                 onSelect={onSelect}
               />

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,