Merge pull request #184 from Andres2D/field-responsive

Field responsive

components/layout/navbar.tsx

@@ -99,7 +99,7 @@ const Navbar: NextPage = () => {
             >
               Log out
             </Button>
-            <p>Version 2.2.2</p>
+            <p>Version 2.3.0</p>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>

components/matches/detail/field/field.module.scss

@@ -7,16 +7,64 @@
   align-items: center;
 
   .field {
-    width: 100%;
+    border-radius: 20px;
+    border: 3px solid ghostwhite;
     height: 400px;
-    background-image: url('/images/field.svg');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    margin-top: 20px;
+    background-color: #6abd67;
     display: grid;
+    margin-top: 20px;
+    position: relative;
+    width: 90%;
+
+    .smallArea {
+      border: 4px solid ghostwhite;
+      border-bottom: 0;
+      bottom: -43px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      height: 80px;
+      width: 30%;
+    }
+
+    .bigArea {
+      border: 4px solid ghostwhite;
+      border-bottom: 0;
+      bottom: -64px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      height: 128px;
+      width: 60%;
+    }
+
+    .outArea {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 71px;
+      bottom: 89px;
+      border-radius: 150px 150px 0 0;
+      border: 4px solid ghostwhite;
+      width: 25%;
+    }
+
+    .middle {
+      position: absolute;
+      left: 50%;
+      top: 32px;
+      transform: translate(-50%, -50%);
+      height: 70px;
+      bottom: 89px;
+      width: 25%;
+      border-radius: 0 0 150px 150px;
+      border: 4px solid ghostwhite;
+    }
+
 
     .player {
       margin: auto auto;
+      z-index: 1;
     }
 
     .player1 {
@@ -392,30 +440,59 @@
 @media (max-width: $medium-device) {
   .fieldGroup {
     width: 90%;
-  }
-}
 
-@media (max-width: $medium-small-device) {
-  .fieldGroup {
     .field {
-      height: 315px;
+      .smallArea {
+        bottom: -32px;
+        height: 60px;
+      }
+
+      .bigArea {
+        bottom: -46px;
+        height: 92px;
+        width: 55%;
+      }
+
+      .outArea {
+        bottom: 65px;
+        height: 48px;
+        width: 82px;
+      }
+
+      .middle {
+        top: 22px;
+        height: 48px;
+        width: 82px;
+      }
     }
   }
 }
 
 @media (max-width: $small-device) {
   .fieldGroup {
     .field {
-      background-image: url('/images/field-mobile-md.svg');
+      .smallArea {
+        bottom: -26px;
+        height: 45px;
+      }
+
+      .bigArea {
+        bottom: -38px;
+        height: 75px;
+        width: 55%;
+      }
+
+      .outArea {
+        bottom: 51px;
+        height: 40px;
+        width: 64px;
+      }
+
+      .middle {
+        top: 17px;
+        height: 40px;
+        width: 64px;
+      }
     }
   }
 }
-
-@media (max-width: $extra-small-device) {
-  .fieldGroup {
-    .field {
-      background-image: url('/images/field-mobile-sm.svg');
-    }
-  }
-}
-

components/matches/detail/field/field.tsx

@@ -78,6 +78,10 @@ const FieldLayout: NextPage<Props> = ({team, isAway}) => {
       <section className={`${styles.field} 
         ${styles[`${formationTypeMap[matchDetails.match[teamKey].formation]}${formationKeyMap[team.length]}`]}`}>
         {playersMap}
+        <div className={styles.smallArea} />
+        <div className={styles.bigArea} />
+        <div className={styles.outArea} />
+        <div className={styles.middle} />
       </section>
       <Stack className={styles.check} spacing={5} direction='row'>
         <Checkbox 

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

@@ -9,6 +9,8 @@
   .fields {
     display: flex;
     justify-content: space-evenly;
+    flex-wrap: wrap;
+    width: 100%;
   }
 
   .leaveButton {