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;
+`