Merge pull request #52 from carloshs1994/style-refactor

Style refactor
carloshs1994 · Jun 17, 2022 · ef739ea · ef739ea
2 parents 679f1e1 + 47c4afc
commit ef739ea
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,5 @@
 node_modules/
 .eslintrc.json
 .hintrc
-.stylelintrc.json
 dist/
-coverage/
+coverage/
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "csstree/validator": true
+  },
+  "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+}
diff --git a/README.md b/README.md
@@ -4,7 +4,11 @@
 
 > "Choose your Pokemon" is a Webpack project meant to fetch data from two different APIs: [PokéAPI](https://pokeapi.co/) and Involvement API. Here we display a list of 20 Pokemons for whom one can like, display more info, and comment; all based on the data from these two external resources.  
 
-![Preview](./preview.gif))
+## Desktop Preview
+![Preview](./desktop_preview.gif)
+
+## Mobile Preview
+![Preview](./mobile_preview.gif)
 
 Got to code them all! The ultimate fan database is now available. Go through the list of Pokemons, pick the best ones (including evolution), comment, like, and see which one is the best among the community of Trainers!
 

diff --git a/desktop_preview.gif b/desktop_preview.gif
diff --git a/mobile_preview.gif b/mobile_preview.gif
diff --git a/preview.gif b/preview.gif
diff --git a/src/scripts/styles/abstracts/_variables.scss b/src/scripts/styles/abstracts/_variables.scss
@@ -1,11 +1,30 @@
 $gray-dark: rgb(59, 59, 59);
-$red-dark: rgb(105, 29, 29);
 $red-medium: rgb(119, 11, 11);
 $red-light: rgb(255, 88, 88);
 $gray-light: rgb(116, 116, 116);
-$green-light: rgb(127, 255, 0);
-$blue-light-transparent: rgba(36, 220, 253, 0.95);
 $black-custom: rgb(51, 51, 51);
-$orange-light: rgb(215, 168, 132);
-$white-custom: rgb(238, 238, 238);
-$green-medium: rgb(88, 173, 2);
+
+// Dark Theme text
+$light-text: #fff;
+$light-primary-text: $light-text;
+$light-accent-text: rgba($light-primary-text, 0.7);
+$light-disabled-text: rgba($light-primary-text, 0.5);
+$light-dividers: rgba($light-primary-text, 0.12);
+$light-focused: rgba($light-primary-text, 0.12);
+$dark-background: #2c2c2c;
+
+// Light Theme Text
+$dark-text: #000;
+$dark-primary-text: rgba($dark-text, 0.87);
+$dark-accent-text: rgba($dark-primary-text, 0.54);
+$dark-disabled-text: rgba($dark-primary-text, 0.38);
+$dark-dividers: rgba($dark-primary-text, 0.12);
+$dark-focused: rgba($dark-primary-text, 0.12);
+
+$primary-color: #562891;
+$primary-lighter-color: #ccbfde;
+$primary-darker-color: #3c1874;
+
+$accent-color: #d2d2d2;
+$accent-lighter-color: #f2f2f2;
+$accent-darker-color: #c1c1c1;
diff --git a/src/scripts/styles/base/_typography.scss b/src/scripts/styles/base/_typography.scss
@@ -22,13 +22,16 @@ strong {
 
 h1 {
   font-size: 4rem;
+  color: $light-primary-text;
 }
 
 h2 {
   font-size: 2.5rem;
+  color: $light-primary-text;
 }
 
 h3,
 p {
   font-size: 2rem;
+  color: $light-primary-text;
 }
diff --git a/src/scripts/styles/components/_buttons.scss b/src/scripts/styles/components/_buttons.scss
@@ -22,10 +22,10 @@
 
 button {
   font-size: 2rem;
-  border: 2px solid black;
+  border: 2px solid $primary-color;
   padding: 10px 20px;
-  background-color: $black-custom;
-  color: $white-custom;
+  background-color: $primary-darker-color;
+  color: $accent-color;
   box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0 -12px 30px, rgba(0, 0, 0, 0.12) 0 4px 6px, rgba(0, 0, 0, 0.17) 0 12px 13px, rgba(0, 0, 0, 0.09) 0 -3px 5px;
   transition: 0.3s;
 
@@ -34,8 +34,8 @@ button {
   }
 
   &:hover {
-    background-color: $green-light;
-    color: $black-custom;
+    background-color: $primary-lighter-color;
+    color: $primary-color;
     cursor: pointer;
   }
 }

diff --git a/src/scripts/styles/layout/_footer.scss b/src/scripts/styles/layout/_footer.scss
@@ -1,18 +1,20 @@
 // footer
 footer {
-  border: 1px solid black;
+  border: 1px solid $dark-primary-text;
   padding: 3rem;
-  background-color: $orange-light;
+  background-color: $accent-color;
 
   p,
   a {
     font-family: 'Roboto Mono', monospace;
-    font-size: 2rem;
+    font-size: 2.5rem;
     transition: padding 0.2s ease-in-out;
+    color: $dark-primary-text;
+    font-weight: 600;
   }
 
   a:hover {
-    color: $red-medium;
+    color: $primary-color;
     padding: 3px;
   }
 }
diff --git a/src/scripts/styles/layout/_grid.scss b/src/scripts/styles/layout/_grid.scss
@@ -19,6 +19,7 @@ main {
   grid-area: Main;
   overflow: auto;
   scroll-behavior: smooth;
+  background-color: $dark-background;
 }
 
 footer {
@@ -30,9 +31,9 @@ footer {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: $gray-dark;
+  background-color: $dark-accent-text;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: $gray-light;
+  background-color: $accent-color;
 }
diff --git a/src/scripts/styles/layout/_navigation.scss b/src/scripts/styles/layout/_navigation.scss
@@ -5,10 +5,10 @@
   flex-wrap: wrap;
   justify-content: space-between;
   width: 100%;
-  background-color: $orange-light;
+  background-color: $accent-darker-color;
 
   &-parent {
-    border: 1px solid black;
+    border: 1px solid $dark-primary-text;
     padding: 2rem 3rem;
     align-items: center;
   }
@@ -32,7 +32,7 @@
       padding: 50px;
       gap: 5rem;
       z-index: 2;
-      background-color: $orange-light;
+      background-color: $accent-darker-color;
       transform: translateX(-100%);
       transition: transform 0.4s ease-in-out;
 
@@ -50,12 +50,13 @@
   }
 
   a {
+    font-size: 3.2rem;
     transition: padding 0.2s ease-in-out;
   }
 
   a:hover {
     display: block;
-    color: $red-medium;
+    color: $primary-color;
     padding: 3px;
   }
 }

diff --git a/src/scripts/styles/pages/_about.scss b/src/scripts/styles/pages/_about.scss
@@ -20,8 +20,8 @@
   position: relative;
   width: 100%;
   height: 50vh;
-  border-top: 3px solid black;
-  border-bottom: 3px solid black;
+  border-top: 3px solid $dark-text;
+  border-bottom: 3px solid $dark-text;
 
   img {
     width: 100%;
@@ -47,7 +47,7 @@
 
   a {
     font-size: 2.5rem;
-    color: $red-light;
+    color: $primary-lighter-color;
   }
 }
 

diff --git a/src/scripts/styles/pages/_home.scss b/src/scripts/styles/pages/_home.scss
@@ -48,11 +48,15 @@ main {
   flex-direction: column;
   align-items: center;
   gap: 30px;
-  border: 5px solid $gray-dark;
+  border: 5px solid $primary-color;
   padding: 20px;
-  box-shadow: 10px 10px 5px 5px $red-dark;
+  box-shadow: 10px 10px 5px 5px $primary-darker-color;
   transition: transform 0.2s ease-in;
 
+  img {
+    background-color: $accent-color;
+  }
+
   h2 {
     text-transform: capitalize;
     font-weight: 600;
@@ -69,7 +73,7 @@ main {
 }
 
 .pokemon {
-  border: 3px solid $gray-dark;
+  border: 5px solid $primary-color;
   border-radius: 5%;
   width: 100%;
   height: 300px;
@@ -82,7 +86,7 @@ main {
   left: 0;
   height: 100vh;
   width: 100vw;
-  background-color: $blue-light-transparent;
+  background-color: $accent-darker-color;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -124,15 +128,15 @@ main {
     border: 2px solid black;
     border-radius: 5%;
     padding: 10px;
-    background-color: $black-custom;
-    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0 inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
+    background-color: $dark-background;
+    box-shadow: $primary-color 3px 3px 6px 0 inset, $primary-color -3px -3px 6px 1px inset;
     transition: 0.2s;
 
     &:hover {
       box-shadow: rgb(38, 57, 77) 0 20px 30px -10px;
       transform: scale(1.02);
       background-color: black;
-      border: 2px solid $white-custom;
+      border: 2px solid $accent-color;
     }
 
     img {
@@ -141,8 +145,10 @@ main {
     }
   }
 
-  h2 {
+  h2,
+  h3 {
     text-transform: capitalize;
+    color: $dark-primary-text;
   }
 
   &-comments {
@@ -166,7 +172,7 @@ main {
       height: 75px;
       width: 100%;
       overflow-y: auto;
-      border: 2px dashed $black-custom;
+      border: 2px dashed $primary-color;
       padding-left: 1%;
       padding-top: 1%;
     }
@@ -214,14 +220,14 @@ main {
 
       input,
       textarea {
-        background-color: $black-custom;
-        border-color: black;
-        color: $white-custom;
+        background-color: $dark-background;
+        border-color: $accent-color;
+        color: $light-primary-text;
         padding: 3px;
         box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0 -12px 30px, rgba(0, 0, 0, 0.12) 0 4px 6px, rgba(0, 0, 0, 0.17) 0 12px 13px, rgba(0, 0, 0, 0.09) 0 -3px 5px;
 
         &::placeholder {
-          color: $white-custom;
+          color: $light-primary-text;
           font-weight: 400;
         }
       }
@@ -246,7 +252,7 @@ main {
       position: absolute;
       top: 2%;
       right: 0;
-      background-color: $green-light;
+      background-color: $primary-color;
       width: 100px;
       border-radius: 5%;
       padding: 3px;
@@ -377,7 +383,8 @@ main {
 
     &-comments {
       ul {
-        background-color: $white-custom;
+        background-color: $dark-background;
+        color: $light-primary-text;
       }
     }
   }
@@ -404,9 +411,9 @@ main {
       left: 3%;
       right: 3%;
       bottom: 27%;
-      background-color: rgb(185, 0, 0);
+      background-color: $red-medium;
       z-index: 2;
-      border: 7px solid $black-custom;
+      border: 7px solid $dark-background;
       border-radius: 4px;
 
       &-top {
@@ -415,10 +422,10 @@ main {
         left: -7px;
         right: -7px;
         bottom: 88%;
-        border: 7px solid $black-custom;
+        border: 7px solid $dark-background;
         border-radius: 4px;
         box-shadow: rgba(0, 0, 0, 0.45) 0 25px 20px -20px;
-        background-color: rgb(185, 0, 0);
+        background-color: $red-medium;
         z-index: 3;
       }
 
@@ -428,9 +435,9 @@ main {
         left: -7px;
         right: 51%;
         bottom: -7px;
-        border: 7px solid $black-custom;
+        border: 7px solid $dark-background;
         border-radius: 4px;
-        background-color: rgb(185, 0, 0);
+        background-color: $accent-color;
         z-index: 2;
 
         .circular-button {
@@ -451,7 +458,7 @@ main {
           bottom: 5%;
           width: 20%;
           height: 5%;
-          background: radial-gradient($green-light, $green-medium);
+          background: radial-gradient($primary-lighter-color, $primary-darker-color);
           border-radius: 10% / 50%;
           box-shadow: rgba(0, 0, 0, 0.45) 0 25px 20px -20px;
         }
@@ -480,7 +487,7 @@ main {
         right: 2%;
         bottom: 21%;
         z-index: 2;
-        background-color: $gray-light;
+        background-color: $accent-darker-color;
         border: 4px solid black;
         border-radius: 7px;
         box-shadow: rgba(0, 0, 0, 0.45) 0 25px 20px -20px;