feat(in-353): team colors #97

Merged
andrey.dekterev merged 1 commits from in-353 into in-142 3 years ago
  1. 2
      src/features/MatchSidePlaylists/components/TabStats/index.tsx
  2. 30
      src/features/MatchSidePlaylists/components/TabStats/styled.tsx
  3. 1
      src/requests/getMatchInfo.tsx

@ -85,6 +85,7 @@ export const TabStats = () => {
onClick={() => setSelectedTab(Tabs.TEAM1)} onClick={() => setSelectedTab(Tabs.TEAM1)}
> >
<TabTitle <TabTitle
teamColor={team1.shirt_color}
onMouseOver={isMobileDevice onMouseOver={isMobileDevice
? undefined ? undefined
: onMouseOver({ : onMouseOver({
@ -111,6 +112,7 @@ export const TabStats = () => {
onClick={() => setSelectedTab(Tabs.TEAM2)} onClick={() => setSelectedTab(Tabs.TEAM2)}
> >
<TabTitle <TabTitle
teamColor={team2.shirt_color}
onMouseOver={isMobileDevice onMouseOver={isMobileDevice
? undefined ? undefined
: onMouseOver({ : onMouseOver({

@ -32,9 +32,31 @@ export const Tooltip = styled(TooltipWrapper)`
} }
` `
export const TabTitle = styled.span` type TabTitleProps = {
color: ${({ theme }) => theme.colors.white}; teamColor?: string | null,
opacity: 0.4; }
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' })` 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}; border-color: ${({ theme }) => theme.colors.white};
${TabTitle} { ${TabTitle} {
opacity: 1; color: ${({ theme }) => theme.colors.white};
} }
} }
` `

@ -17,6 +17,7 @@ export type Team = {
name_eng: string, name_eng: string,
name_rus: string, name_rus: string,
score: number, score: number,
shirt_color: string | null,
} }
export type VideoBound = { export type VideoBound = {

Loading…
Cancel
Save