diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index dc4f5704..4613aecf 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -3,6 +3,7 @@ import { proceduresLexics } from './procedures' const matchPopupLexics = { apply: 13491, episode_duration: 13410, + gk: 3515, go_back_to_match: 13405, match_interviews: 13031, match_settings: 13490, diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx index ebd1509b..b32d8d11 100644 --- a/src/features/MatchPage/types.tsx +++ b/src/features/MatchPage/types.tsx @@ -15,6 +15,7 @@ export type MatchPlaylistOption = { } export type PlayerPlaylistOption = { + gk?: boolean, id: number, name_eng: string, name_rus: string, diff --git a/src/features/MatchPopup/components/PlayersList/index.tsx b/src/features/MatchPopup/components/PlayersList/index.tsx index c8142432..b25d6b29 100644 --- a/src/features/MatchPopup/components/PlayersList/index.tsx +++ b/src/features/MatchPopup/components/PlayersList/index.tsx @@ -2,6 +2,7 @@ import map from 'lodash/map' import { ProfileTypes } from 'config' +import { T9n } from 'features/T9n' import { PlayerPlaylistOptions } from 'features/MatchPage/types' import { useMatchPopupStore } from 'features/MatchPopup/store' @@ -12,6 +13,8 @@ import { Logo, PlayerName, Button, + PlayerPhoto, + PlayerGk, } from './styled' type Props = { @@ -37,13 +40,20 @@ export const PlayersList = ({ map(players, (player) => ( diff --git a/src/features/MatchPopup/components/PlayersList/styled.tsx b/src/features/MatchPopup/components/PlayersList/styled.tsx index 3a0c8b86..2e3ccbe5 100644 --- a/src/features/MatchPopup/components/PlayersList/styled.tsx +++ b/src/features/MatchPopup/components/PlayersList/styled.tsx @@ -34,7 +34,8 @@ export const List = styled.ul` export const Item = styled.li` width: 76px; - height: 95px; + min-height: 95px; + max-height: 110px; margin: 10px; transition: .3s; opacity: ${({ isReady }) => ( @@ -77,20 +78,13 @@ type LogoProps = { } export const Logo = styled(ProfileLogo)` - width: 65px; - height: 65px; + width: 100%; border-radius: 50%; background-color: ${({ team }) => ( team === Teams.TEAM1 ? '#222222' : '#FFFFFF' )}; - - @media ${devices.mobile} { - width: 49px; - height: 49px; - margin-right: 11px; - } ` export const PlayerName = styled(Name)` @@ -109,3 +103,29 @@ export const PlayerName = styled(Name)` letter-spacing: 0.1px; } ` + +export const PlayerPhoto = styled.div` + position: relative; + width: 65px; + height: 65px; + margin-bottom: 10px; + + @media ${devices.mobile} { + width: 49px; + height: 49px; + margin-right: 11px; + } +` + +export const PlayerGk = styled.span` + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); + width: 24px; + font-weight: bold; + font-size: 9px; + line-height: 12px; + background-color: #fff; + border-radius: 12px; +`