From e4b9627e95aad5015c5ac192bb61e492444b87b7 Mon Sep 17 00:00:00 2001
From: Arthur <72667180+bjornsondev@users.noreply.github.com>
Date: Wed, 3 Feb 2021 20:01:18 +0600
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20(770)=20added=20GK=20lab?=
 =?UTF-8?q?el=20in=20match=20popup=20(#288)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* quick fix
---
 src/config/lexics/indexLexics.tsx             |  1 +
 src/features/MatchPage/types.tsx              |  1 +
 .../components/PlayersList/index.tsx          | 24 ++++++++----
 .../components/PlayersList/styled.tsx         | 38 ++++++++++++++-----
 4 files changed, 48 insertions(+), 16 deletions(-)

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) => (
           <Item key={player.id} isReady={allLoaded}>
             <Button onClick={() => handlePlayerClick(player)}>
-              <Logo
-                id={player.id}
-                sportType={match.sportType}
-                profileType={ProfileTypes.PLAYERS}
-                team={team}
-                onLoad={() => onLoad(player.id)}
-              />
+              <PlayerPhoto>
+                <Logo
+                  id={player.id}
+                  sportType={match.sportType}
+                  profileType={ProfileTypes.PLAYERS}
+                  team={team}
+                  onLoad={() => onLoad(player.id)}
+                />
+                {player.gk && (
+                  <PlayerGk>
+                    <T9n t='gk' />
+                  </PlayerGk>
+                )}
+              </PlayerPhoto>
               <PlayerName nameObj={player} />
             </Button>
           </Item>
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<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;
+`