Merge pull request #153 from Andres2D/create-match-steper-responsive-…

…design

Add resposive design to the create match page

components/matches/new/header/steps.module.scss

@@ -1,3 +1,5 @@
+@import '../../../../styles/breakpoints';
+
 .tabs {
   margin-top: 50px;
   color: #F7FAFC;
@@ -16,3 +18,11 @@
     font-size: 20px;
   }
 }
+
+@media (max-width: $medium-device-extra) {
+  .tabs {
+    .tabsList {
+      display: none;
+    }
+  }
+}

components/matches/new/header/steps.tsx

@@ -45,7 +45,7 @@ const Steps: NextPage<Props> = ({teams, players, schedule}) => {
       index={form.current_step} 
       onChange={handleTabsChange}
     >
-      <TabList>
+      <TabList className={styles.tabsList}>
         <Tab 
           _selected={selectedTab}
           className={styles.tab}

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

@@ -1,3 +1,5 @@
+@import '../../../styles/breakpoints';
+
 .steps {
   display: flex;
   flex-direction: column;

components/matches/new/place-date/place-date.module.scss

@@ -1,3 +1,5 @@
+@import '../../../../styles/breakpoints';
+
 .form {
   display: flex;
   flex-direction: column;
@@ -25,3 +27,11 @@
     }
   }
 }
+
+@media (max-width: $medium-device-extra) {
+  .form {
+    .formControl {
+      width: 90%;
+    }
+  }
+}

components/matches/new/players/players-form.module.scss

@@ -1,3 +1,5 @@
+@import '../../../../styles/breakpoints';
+
 .players {
   display: flex;
   flex-wrap: wrap;
@@ -26,3 +28,20 @@
   }
 }
 
+@media (max-width: $medium-device-extra) {
+  .players,
+  .playerResult {
+    width: 90%;
+  }
+
+  .playerNameInput {
+    width: 90% !important;
+  }
+}
+
+@media (max-width: $extra-small-device) {
+  .completePlayers {
+    width: 90%;
+  }
+}
+

components/matches/new/players/players-form.tsx

@@ -161,18 +161,20 @@ const PlayersForm: NextPage = () => {
         mt='5'
         ref={inputRef}
         onChange={searchPlayer}
+        className={styles.playerNameInput}
       />
       {playersResults}
       <div className={styles.players}>
         {playersAdded}
       </div>
       <Button
+        className={styles.completePlayers}
         size='lg'
         colorScheme='brand'
         mt='5px'
         onClick={autoCompletePlayers}
       >
-        Auto complete players ({missingState - playersAdded.length})
+        Complete players ({missingState - playersAdded.length})
       </Button>
     </section>
   );

components/matches/new/team/team-form.module.scss

@@ -1,5 +1,9 @@
+@import '../../../../styles/breakpoints';
+
 .team {
   margin-top: 50px;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   color: #333;
   text-align: center;
@@ -19,7 +23,7 @@
     .shields {
       margin: 10px;
       display: flex;
-      justify-content: flex-start;
+      justify-content: center;
       align-items: center;
       align-content: space-between;
       gap: 15px;
@@ -28,4 +32,35 @@
       overflow-y: scroll;
     }
   }
+
+  .nameInput {
+    width: 50%;
+  }
+}
+
+@media (max-width: $medium-device-extra) {
+  .team {
+    width: 50%;
+
+    .title {
+      font-size: xx-large;
+    }
+
+    .shieldTeam {
+      .selectedShield {
+        width: 150px;
+        height: 150px;
+      }
+    }
+
+    .nameInput {
+      width: 90%;
+    }
+  }
+}
+
+@media (max-width: $medium-small-device) {
+  .team {
+    width: 90%;
+  }
 }

components/matches/new/team/team-form.tsx

@@ -69,6 +69,7 @@ const TeamForm: NextPage<Props> = ({type = 'home'}: Props) => {
         bgClip="text" 
         fontSize="6xl" 
         fontWeight="extrabold"
+        className={styles.title}
       >
         {`${type.charAt(0).toUpperCase()}${type.slice(1, type.length)}`}
       </Text>
@@ -83,7 +84,7 @@ const TeamForm: NextPage<Props> = ({type = 'home'}: Props) => {
               className={styles.selectedShield}
             ></Image>
           </PopoverTrigger>
-          <PopoverContent>
+          <PopoverContent w='250px'>
             <PopoverArrow />
             <PopoverCloseButton />
             <PopoverHeader>Team</PopoverHeader>
@@ -102,12 +103,12 @@ const TeamForm: NextPage<Props> = ({type = 'home'}: Props) => {
       </div>
       <Input 
         placeholder='Name of the team' 
-        width={'50%'} 
         colorScheme='white' 
         variant='filled' 
         mt='5'
         onChange={updateField}
         ref={teamName}
+        className={styles.nameInput}
       />
     </div>
   );

components/matches/new/teams/create-teams.module.scss

@@ -1,5 +1,20 @@
+@import '../../../../styles/breakpoints';
+
 .form {
   width: 80%;
   display: flex;
   justify-content: space-between;
 }
+
+@media (max-width: $medium-device-extra) {
+  .form {
+    width: 100%;
+  }
+}
+
+@media (max-width: $medium-small-device) {
+  .form {
+    flex-direction: column;
+    align-items: center;
+  }
+}

styles/_breakpoints.scss

@@ -1,5 +1,6 @@
 $large-device: 995px;
 $medium-large-device: 845px;
+$medium-device-extra: 600px;
 $medium-device: 565px;
 $medium-small-device: 500px;
 $small-device: 400px;