Merge pull request #209 from Andres2D/improve-full-time-design

Improve full time design

components/matches/detail/avatar/avatar.tsx

@@ -45,10 +45,16 @@ const AvatarMatchLayout: NextPage<Props> = ({
     : details.match.home_team.showStats;
 
   const changePlayerHandler = () => {
+    if(details.match.fullTime) {
+      return;
+    }
     dispatch(matchDetailsActions.toggleChangePlayerModal());
   };
 
   const selectPlayerHandler = () => {
+    if(details.match.fullTime) {
+      return;
+    }
     dispatch(matchDetailsActions.selectPlayer({ playerId: id, isAway }));
 
     if (

components/matches/detail/field/field.tsx

@@ -75,6 +75,7 @@ const FieldLayout: NextPage<Props> = ({team, isAway}) => {
         teamShield={matchDetails.match[teamKey].shield}
         teamOverall={teamAverage}
         isAway={isAway}
+        fullTime={matchDetails.match.fullTime}
       />
       <section className={`${styles.field} 
         ${styles[`${formationTypeMap[matchDetails.match[teamKey].formation]}${formationKeyMap[team.length]}`]}`}>
@@ -113,6 +114,7 @@ const FieldLayout: NextPage<Props> = ({team, isAway}) => {
         onChange={updateFormation}
         value={matchDetails.match[teamKey].formation}
         color={'gray.50'}
+        disabled={matchDetails.match.fullTime}
       >
         { team.length > 0 &&
           ['t','s','f'].map(op => (

components/matches/detail/field/header.tsx

@@ -11,10 +11,18 @@ interface Props {
   teamName: string;
   teamShield: string;
   teamOverall: number;
+  fullTime: boolean;
   isAway?: boolean;
 }
 
-const FieldHeader: NextPage<Props> = ({teamName, teamShield, teamOverall, isAway = false}) => {
+const FieldHeader: NextPage<Props> = (
+  {
+    teamName, 
+    teamShield, 
+    teamOverall, 
+    fullTime,
+    isAway = false,
+  }) => {
 
   return (
     <header className={`${styles.header} `}>
@@ -29,7 +37,10 @@ const FieldHeader: NextPage<Props> = ({teamName, teamShield, teamOverall, isAway
         />
         <div className={styles.teamDetails}>
           <Heading color={'gray.50'} size='2xl'>{teamName}</Heading>
-          <SetTeam isAway={isAway} />
+          {
+            !fullTime &&
+            <SetTeam isAway={isAway} />
+          }
         </div>
       </section>
       <RatioStars average={teamOverall} />

components/matches/detail/match-detail.module.scss

@@ -14,7 +14,7 @@
   }
 
   .leaveButton {
-    margin-top: 30px;
+    margin: 30px 0;
   }
 }
 

components/matches/detail/match-detail.tsx

@@ -59,14 +59,17 @@ const MatchDetailsLayout: NextPage = () => {
           <FieldLayout team={matchDetails.home} />
           <FieldLayout team={matchDetails.away} isAway />
         </div>
-        <Button 
-          colorScheme='telegram'
-          className={styles.leaveButton}
-          rightIcon={<LeaveIcon />}
-          onClick={leaveMatchModalOnOpen}
-        >
+        {
+          !matchDetails.match.fullTime &&
+          <Button 
+            colorScheme='telegram'
+            className={styles.leaveButton}
+            rightIcon={<LeaveIcon />}
+            onClick={leaveMatchModalOnOpen}
+          >
             Leave match
-        </Button>
+          </Button>
+        }
       </section>
       <ModalAlert 
         isOpen={leaveMatchModalIsOpen} 

components/matches/match-list.module.scss

@@ -52,6 +52,11 @@
         .details {
           color: #f7fafc;
         }
+
+        .fullTime {
+          font-weight: bold;
+          font-size: 20px;
+        }
       }
     }
   }
@@ -95,6 +100,10 @@
         .containerVS {
           flex-direction: row;
           margin: 20px;
+
+          .versusIcon {
+            display: none;
+          }
         }
       }
     }

components/matches/match-list.tsx

@@ -206,13 +206,15 @@ const MatchList: NextPage<Props> = ({ matches }) => {
                 name={home_team.name}
                 image={home_team.shield}
                 fullTime={fullTime}
+                isWinner={homeScore > awayScore}
                 score={homeScore}
                 width={120}
                 height={120}
               />
 
               <div className={styles.containerVS}>
                 <Image
+                  className={styles.versusIcon}
                   src={'/images/vs-icon.png'}
                   alt="Icon versus"
                   width={55}
@@ -221,13 +223,18 @@ const MatchList: NextPage<Props> = ({ matches }) => {
                 <div className={styles.details}>
                   <h2>{date}</h2>
                   <h2>{location}</h2>
+                  { 
+                    fullTime &&
+                    <h2 className={styles.fullTime}>Full-time</h2>
+                  }
                 </div>
               </div>
 
               <Team
                 name={away_team.name}
                 image={away_team.shield}
                 fullTime={fullTime}
+                isWinner={awayScore > homeScore}
                 score={awayScore}
                 width={120}
                 height={120}

components/matches/team.module.scss

@@ -1,11 +1,12 @@
+@import '../../styles/colors';
+
 .team {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
 
-  .tag,
-  .score {
+  .tag {
     color: #333 !important;
   }
 
@@ -15,6 +16,17 @@
 
   .score {
     margin-top: 5px;
+    font-weight: bold;
+  }
+
+  .winner {
+    background-color: $brand;
+    color: white;
+  }
+
+  .loser {
+    background-color: $loser;
+    color: white;
   }
 
   .logoShadow {

components/matches/team.tsx

@@ -10,9 +10,19 @@ interface Props {
   score: number;
   width: number;
   height: number;
+  isWinner: boolean;
 }
 
-const Team: NextPage<Props> = ({name, image, fullTime, score, width, height}: Props) => {
+const Team: NextPage<Props> = (
+  {
+    name, 
+    image, 
+    fullTime, 
+    score, 
+    width, 
+    height, 
+    isWinner
+  }: Props) => {
   return (
     <div className={styles.team}>
       <Image
@@ -36,7 +46,7 @@ const Team: NextPage<Props> = ({name, image, fullTime, score, width, height}: Pr
           size='lg' 
           variant='solid' 
           colorScheme='clean'
-          className={styles.score}
+          className={`${styles.score} ${ isWinner ? styles.winner : styles.loser}`}
         >
           {score}
         </Tag>

interfaces/Match.ts

@@ -47,6 +47,9 @@ export interface IFullMatch extends base {
   _id: string;
   home_team: IFullTeam;
   away_team: IFullTeam;
+  homeScore: number;
+  awayScore: number;
+  fullTime: boolean;  
 }
 
 export interface IMatchDetailsResponse {

mock/match.mock.ts

@@ -17,6 +17,9 @@ export const matchDetailsMock: IMatchDetailsResponse = {
       formation: 'f',
       shield: 'https://media.api-sports.io/football/teams/34.png',
     },
+    awayScore: 0,
+    fullTime: false,
+    homeScore: 0
   },
   home: [
     {

store/match-details.slice.ts

@@ -51,6 +51,9 @@ export const initialState: IMatchDetails = {
     },
     date: '',
     location: '',
+    awayScore: 0,
+    fullTime: false,
+    homeScore: 0
   },
   home: [],
   away: [],

styles/_colors.scss

@@ -1 +1,3 @@
 $skeleton: #B1B1B1;
+$brand: #4ECB71;
+$loser: #E31E24;