feat: 🎸 (770) added GK label in match popup (#288)

* feat: 🎸 (770) added GK label in match popup

* quick fix

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,

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,

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,6 +40,7 @@ export const PlayersList = ({
         map(players, (player) => (
           <Item key={player.id} isReady={allLoaded}>
             <Button onClick={() => handlePlayerClick(player)}>
+              <PlayerPhoto>
                 <Logo
                   id={player.id}
                   sportType={match.sportType}
@@ -44,6 +48,12 @@ export const PlayersList = ({
                   team={team}
                   onLoad={() => onLoad(player.id)}
                 />
+                {player.gk && (
+                  <PlayerGk>
+                    <T9n t='gk' />
+                  </PlayerGk>
+                )}
+              </PlayerPhoto>
               <PlayerName nameObj={player} />
             </Button>
           </Item>

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

@@ -34,7 +34,8 @@ export const List = styled.ul<ListProps>`
 
 export const Item = styled.li<ItemProps>`
   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)<LogoProps>`
-  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;
+`