From 44bd5511ae4dac9faea54624d677cb29eb1b7c76 Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Wed, 4 Jan 2023 17:26:23 -0500
Subject: [PATCH] Add resposive design to the create match page

---
 .../matches/new/header/steps.module.scss      | 10 +++++
 components/matches/new/header/steps.tsx       |  2 +-
 components/matches/new/new-match.module.scss  |  2 +
 .../new/place-date/place-date.module.scss     | 10 +++++
 .../new/players/players-form.module.scss      | 19 ++++++++++
 .../matches/new/players/players-form.tsx      |  4 +-
 .../matches/new/team/team-form.module.scss    | 37 ++++++++++++++++++-
 components/matches/new/team/team-form.tsx     |  5 ++-
 .../new/teams/create-teams.module.scss        | 15 ++++++++
 styles/_breakpoints.scss                      |  1 +
 10 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/components/matches/new/header/steps.module.scss b/components/matches/new/header/steps.module.scss
index 396b68b..d91ce8b 100644
--- a/components/matches/new/header/steps.module.scss
+++ b/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;
+    }
+  }
+}
diff --git a/components/matches/new/header/steps.tsx b/components/matches/new/header/steps.tsx
index e04a00c..00ad1b4 100644
--- a/components/matches/new/header/steps.tsx
+++ b/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}
diff --git a/components/matches/new/new-match.module.scss b/components/matches/new/new-match.module.scss
index 1977e07..439ea0c 100644
--- a/components/matches/new/new-match.module.scss
+++ b/components/matches/new/new-match.module.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/breakpoints';
+
 .steps {
   display: flex;
   flex-direction: column;
diff --git a/components/matches/new/place-date/place-date.module.scss b/components/matches/new/place-date/place-date.module.scss
index b111414..e80a821 100644
--- a/components/matches/new/place-date/place-date.module.scss
+++ b/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%;
+    }
+  }
+}
diff --git a/components/matches/new/players/players-form.module.scss b/components/matches/new/players/players-form.module.scss
index 0bd94f0..57701d5 100644
--- a/components/matches/new/players/players-form.module.scss
+++ b/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%;
+  }
+}
+
diff --git a/components/matches/new/players/players-form.tsx b/components/matches/new/players/players-form.tsx
index 0d962a0..313f5fa 100644
--- a/components/matches/new/players/players-form.tsx
+++ b/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>
   );
diff --git a/components/matches/new/team/team-form.module.scss b/components/matches/new/team/team-form.module.scss
index 9e7abff..f7686c7 100644
--- a/components/matches/new/team/team-form.module.scss
+++ b/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%;
+  }
 }
diff --git a/components/matches/new/team/team-form.tsx b/components/matches/new/team/team-form.tsx
index 27b83c2..75a8173 100644
--- a/components/matches/new/team/team-form.tsx
+++ b/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>
   );
diff --git a/components/matches/new/teams/create-teams.module.scss b/components/matches/new/teams/create-teams.module.scss
index f11f02b..1540150 100644
--- a/components/matches/new/teams/create-teams.module.scss
+++ b/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;
+  }
+}
diff --git a/styles/_breakpoints.scss b/styles/_breakpoints.scss
index 50e8de9..8e4171c 100644
--- a/styles/_breakpoints.scss
+++ b/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;