From 2b8cb0c438240c07f4632aa99bd60172a8bad102 Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Wed, 1 Mar 2023 15:11:08 +0500
Subject: [PATCH] feat(in-353): team colors

---
 .../components/TabStats/index.tsx             |  2 ++
 .../components/TabStats/styled.tsx            | 30 ++++++++++++++++---
 src/requests/getMatchInfo.tsx                 |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/features/MatchSidePlaylists/components/TabStats/index.tsx b/src/features/MatchSidePlaylists/components/TabStats/index.tsx
index 72c6b359..297e4465 100644
--- a/src/features/MatchSidePlaylists/components/TabStats/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabStats/index.tsx
@@ -85,6 +85,7 @@ export const TabStats = () => {
               onClick={() => setSelectedTab(Tabs.TEAM1)}
             >
               <TabTitle
+                teamColor={team1.shirt_color}
                 onMouseOver={isMobileDevice
                   ? undefined
                   : onMouseOver({
@@ -111,6 +112,7 @@ export const TabStats = () => {
               onClick={() => setSelectedTab(Tabs.TEAM2)}
             >
               <TabTitle
+                teamColor={team2.shirt_color}
                 onMouseOver={isMobileDevice
                   ? undefined
                   : onMouseOver({
diff --git a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx
index 701d94f7..a295bf35 100644
--- a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx
@@ -32,9 +32,31 @@ export const Tooltip = styled(TooltipWrapper)`
   }
 `
 
-export const TabTitle = styled.span`
-  color: ${({ theme }) => theme.colors.white};
-  opacity: 0.4;
+type TabTitleProps = {
+  teamColor?: string | null,
+}
+
+export const TabTitle = styled.span<TabTitleProps>`
+  position: relative;
+  color: rgba(255, 255, 255, 0.5);
+
+  ${({ teamColor, theme }) => (teamColor
+    ? css`
+        ::before {
+          content: '';
+          position: absolute;
+          left: -8px;
+          top: 50%;
+          translate: 0 -50%;
+          width: 5px;
+          height: 5px;
+          outline: ${teamColor.toUpperCase() === theme.colors.white ? 'none' : `0.5px solid ${theme.colors.white}`};
+          border-radius: 50%;
+          background-color: ${teamColor};
+        }
+      `
+    : ''
+  )}
 `
 
 export const Tab = styled.button.attrs({ role: 'tab' })`
@@ -53,7 +75,7 @@ export const Tab = styled.button.attrs({ role: 'tab' })`
     border-color: ${({ theme }) => theme.colors.white};
 
     ${TabTitle} {
-      opacity: 1;
+      color: ${({ theme }) => theme.colors.white};
     }
   }
 `
diff --git a/src/requests/getMatchInfo.tsx b/src/requests/getMatchInfo.tsx
index ba392a1d..a50297da 100644
--- a/src/requests/getMatchInfo.tsx
+++ b/src/requests/getMatchInfo.tsx
@@ -17,6 +17,7 @@ export type Team = {
   name_eng: string,
   name_rus: string,
   score: number,
+  shirt_color: string | null,
 }
 
 export type VideoBound = {
-- 
2.30.2