Merge pull request #215 from Andres2D/css-variables

Css variables
Andres2D · Feb 21, 2023 · f947dcf · f947dcf · vercel · Feb 21, 2023
2 parents c546293 + 7a5aeb1
commit f947dcf
Show file tree

Hide file tree

Showing 39 changed files with 158 additions and 132 deletions.
diff --git a/components/auth/login-form.module.scss b/components/auth/login-form.module.scss
@@ -1,4 +1,5 @@
 @import '../../styles/breakpoints';
+@import '../../styles/sizes';
 
 .form {
   display: flex;
@@ -32,12 +33,12 @@
   .form {
     .control {
       .input {
-        width: 90%;
+        width: $content;
       }
     }
 
     .actions {
-      width: 90%;
+      width: $content;
       justify-content: space-between;
 
       .login {

diff --git a/components/layout/navbar.module.scss b/components/layout/navbar.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/colors';
+
 .navbarSpacing {
   height: 80px;
 }
@@ -8,30 +10,24 @@
   justify-content: space-between;
 }
 
-.avatar {
-  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+.avatar,
+.avatarMenu {
+  box-shadow: $dark-shadow 0px 10px 20px, $dark-shadow 0px 6px 6px;
   cursor: pointer;
 }
 
+.avatarMenu {
+  margin-top: 20px;
+}
+
 .headerMenu {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: #333;
-}
-
-.avatarMenu {
-  margin-top: 2rem;
-  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
-  cursor: pointer;
 }
 
 .username {
-  padding-top: 16px ;
-}
-
-.dark {
-  color: #333;
+  padding-top: 16px;
 }
 
 .columnMenu {

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
@@ -57,7 +57,7 @@ const Navbar: NextPage = () => {
       >
         <DrawerOverlay />
         <DrawerContent>
-          <DrawerCloseButton className={styles.dark} />
+          <DrawerCloseButton />
           <DrawerHeader className={styles.headerMenu}>
             <Avatar
               className={styles.avatarMenu}
@@ -99,7 +99,7 @@ const Navbar: NextPage = () => {
             >
               Log out
             </Button>
-            <p>Version 2.6.2</p>
+            <p>Version 2.6.3</p>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>

diff --git a/components/matches/detail/avatar/avatar.module.scss b/components/matches/detail/avatar/avatar.module.scss
@@ -1,3 +1,4 @@
+@import '../../../../styles/colors';
 @import '../../../../styles/breakpoints';
 
 .container {
@@ -14,29 +15,29 @@
     z-index: 2;
 
     .avatar {
-      border: 2px solid white;
+      border: 2px solid $white;
       cursor: pointer;
     }
 
     .playerName,
     .playerOverall {
       position: absolute;
       font-weight: bold;
-      text-shadow: #333 -2px 0 10px;
+      text-shadow: $dark -2px 0 10px;
       text-align: center;
       word-break: break-word;
       line-height: 15px;
-      color: #F7FAFC;
       z-index: 3;
     }
 
     .playerName {
+      color: $white;
       width: 105px;
       bottom: 65px;
     }
 
     .playerOverall {
-      color: #FAE505;
+      color: $gold;
       right: 55px;
       width: 30px;
     }
@@ -53,7 +54,7 @@
     .replaceIcon {
       cursor: pointer;
       filter: drop-shadow(
-        #333 -2px 0 10px
+        $dark -2px 0 10px
       );
       margin: 2px auto;
       z-index: 2;
@@ -62,7 +63,7 @@
     .changeIcon {
       animation: spin 2s infinite linear;
       filter: drop-shadow(
-        #333 -2px 0 10px
+        $dark -2px 0 10px
         );
       margin: 2px auto;
       z-index: 2;

diff --git a/components/matches/detail/avatar/change-player.modal.module.scss b/components/matches/detail/avatar/change-player.modal.module.scss
@@ -1,4 +1,6 @@
 @import '../../../../styles/breakpoints';
+@import '../../../../styles/colors';
+@import '../../../../styles/sizes';
 
 .modalContent {
   .container {
@@ -15,7 +17,7 @@
 
       .playerResult {
         margin: 5px;
-        border: 2px solid gray;
+        border: 2px solid $skeleton;
         border-radius: 10px;
         display: flex;
         justify-content: space-between;
@@ -24,7 +26,7 @@
 
         &:hover {
           color: white;
-          background-color: gray;
+          background-color: $skeleton;
         }
       }
 
@@ -39,15 +41,15 @@
       flex-direction: column;
 
       .inputPlayer {
-        border: 2px solid gray;
+        border: 2px solid $skeleton;
       }
     }
   }
 }
 
 @media (max-width: $medium-small-device) {
   .modalContent {
-    width: 90% !important;
+    width: $content !important;
   }
 }
 

diff --git a/components/matches/detail/field/field.module.scss b/components/matches/detail/field/field.module.scss
@@ -1,4 +1,6 @@
 @import '../../../../styles/breakpoints';
+@import '../../../../styles/colors';
+@import '../../../../styles/sizes';
 
 .fieldGroup {
   width: 550px;
@@ -9,30 +11,30 @@
 
   .field {
     border-radius: 20px;
-    border: 3px solid ghostwhite;
+    border: 3px solid $clear;
     height: 400px;
-    background-color: #6abd67;
+    background-color: $field;
     display: grid;
     margin-top: 20px;
     position: relative;
-    width: 90%;
+    width: $content;
 
     .smallArea {
-      border: 4px solid ghostwhite;
+      border: 4px solid $clear;
       border-bottom: 0;
       bottom: -43px;
-      left: 50%;
+      left: $half;
       transform: translate(-50%, -50%);
       position: absolute;
       height: 80px;
       width: 30%;
     }
 
     .bigArea {
-      border: 4px solid ghostwhite;
+      border: 4px solid $clear;
       border-bottom: 0;
       bottom: -64px;
-      left: 50%;
+      left: $half;
       transform: translate(-50%, -50%);
       position: absolute;
       height: 128px;
@@ -41,25 +43,25 @@
 
     .outArea {
       position: absolute;
-      left: 50%;
+      left: $half;
       transform: translate(-50%, -50%);
       height: 71px;
       bottom: 89px;
       border-radius: 150px 150px 0 0;
-      border: 4px solid ghostwhite;
+      border: 4px solid $clear;
       width: 25%;
     }
 
     .middle {
       position: absolute;
-      left: 50%;
+      left: $half;
       top: 32px;
       transform: translate(-50%, -50%);
       height: 70px;
       bottom: 89px;
       width: 25%;
       border-radius: 0 0 150px 150px;
-      border: 4px solid ghostwhite;
+      border: 4px solid $clear;
     }
 
 
@@ -113,10 +115,6 @@
     }
   }
 
-  .check {
-    color: #F7FAFC;
-  }
-
   .formations {
     margin: 10px auto;
     text-align: center;
@@ -440,7 +438,7 @@
 
 @media (max-width: $medium-device) {
   .fieldGroup {
-    width: 90%;
+    width: $content;
 
     .field {
       .smallArea {

diff --git a/components/matches/detail/field/field.tsx b/components/matches/detail/field/field.tsx
@@ -85,7 +85,7 @@ const FieldLayout: NextPage<Props> = ({team, isAway}) => {
         <div className={styles.outArea} />
         <div className={styles.middle} />
       </section>
-      <Stack className={styles.check} spacing={5} direction='row'>
+      <Stack color='white' spacing={5} direction='row'>
         <Checkbox 
           colorScheme='yellow'
           isChecked={

diff --git a/components/matches/detail/field/header.module.scss b/components/matches/detail/field/header.module.scss
@@ -1,10 +1,11 @@
 @import '../../../../styles/breakpoints';
+@import '../../../../styles/sizes';
 
 .header {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 50%;
+  width: $half;
   justify-content: center;
 
   .shield {
@@ -30,17 +31,14 @@
 @media (max-width: $small-device) {
   .header {
     justify-content: flex-start;
-    width: 90%;
+    width: $content;
   }
 }
 
 @media (max-width: $extra-small-device) {
   .header {
     .shield {
       flex-direction: column;
-      // .teamDetails {
-
-      // }
     }
   }
 }
diff --git a/components/matches/detail/field/set-team.module.scss b/components/matches/detail/field/set-team.module.scss
@@ -1,4 +1,5 @@
 @import '../../../../styles/breakpoints';
+@import '../../../../styles/sizes';
 
 .modal {
   .shieldSelector {
@@ -27,6 +28,6 @@
 
 @media (max-width: $medium-small-device) {
   .modal {
-    width: 90% !important;
+    width: $content !important;
   }
 }
diff --git a/components/matches/detail/match-detail.module.scss b/components/matches/detail/match-detail.module.scss
@@ -1,4 +1,5 @@
 @import '../../../styles/breakpoints';
+@import '../../../styles/sizes';
 
 .details {
   display: flex;
@@ -10,7 +11,7 @@
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
-    width: 100%;
+    width: $full;
   }
 
   .leaveButton {

diff --git a/components/matches/detail/ratio-stars/ratio-stars.module.scss b/components/matches/detail/ratio-stars/ratio-stars.module.scss
@@ -1,19 +1,21 @@
+@import '../../../../styles/colors';
+
 .ratio {
   display: flex;
   justify-content: center;
 
   .star {
     height: 24px;
     margin-right: 5px;
-    stroke: white;
+    stroke: $white;
     width: 24px;
   }
 
   .filled {
-    fill: gold;
+    fill: $gold;
   }
 
   .notFilled {
-    fill: white;
+    fill: $white;
   }
 }