fix(styles): add global styles

faculedesma · Dec 30, 2022 · 28f15cc · 28f15cc
1 parent 609d45a
commit 28f15cc
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -1,12 +1,14 @@
+@import '../../utils/variables';
+
 .card,
 .card-loading,
 .card-empty {
   height: 400px;
   width: 300px;
-  border: 2px solid black;
+  border: 2px solid $secondary-color;
   border-radius: 8px;
-  background-color: #FFFCF3;
-  box-shadow: 0px 4px 0px black;
+  background-color: $primary-color;
+  box-shadow: 0px 4px 0px $secondary-color;
 
   &-empty {
     display: flex;
@@ -16,21 +18,21 @@
 
   &-header {
     height: 30%;
-    background-color: #FFCD69;
+    background-color: $highlight-color-dark;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-bottom: 2px solid black;
+    border-bottom: 2px solid $secondary-color;
     border-radius: 8px 8px 0 0;
 
     .image-container {
       position: relative;
       width: 150px;
       height: 150px;
       border-radius: 50%;
-      border: 2px solid black;
+      border: 2px solid $secondary-color;
       transform: translateY(37%);
-      background-color: #FFFCF3;
+      background-color: $primary-color;
 
       img {
         position: absolute;
@@ -80,7 +82,7 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    border-top: 2px solid black;
+    border-top: 2px solid $secondary-color;
 
     .stat {
       height: 100%;

diff --git a/src/components/home/home.scss b/src/components/home/home.scss
@@ -1,3 +1,5 @@
+@import '../../utils/variables';
+
 .home {
   min-width: 100%;
   min-height: 100%;
@@ -14,7 +16,7 @@
     align-items: center;
 
     .table {
-      background-color: #fffcf3;
+      background-color: $primary-color;
 
       thead {
         th {
@@ -29,19 +31,19 @@
           cursor: pointer;
 
           &:hover {
-            background-color: #fbd68b;
+            background-color: $highlight-color;
           }
 
           &:active {
-            background-color: #ffcd69;
+            background-color: $highlight-color-dark;
           }
         }
       }
     }
 
     .table-skeleton {
       height: 528px;
-      background-color: #fffcf3;
+      background-color: $primary-color;
     }
 
     .pagination {

diff --git a/src/index.scss b/src/index.scss
@@ -1,12 +1,14 @@
+@import './utils/variables';
+
 body {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: $primary-font;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
   width: 100%;
   margin: 0;
   min-height: 100vh;
-  color: #242424;
+  color: $secondary-color;
 }
 
 h1 {

diff --git a/src/utils/_variables.scss b/src/utils/_variables.scss
@@ -1,2 +1,9 @@
+// fonts
+$primary-font: 'Inter', sans-serif;
+
 // colors
-$primary-colors: #fdf8e3;
+$primary-color: #fffcf3;
+$secondary-color: #242424;
+$highlight-color: #fbd68b;
+$highlight-color-dark: #ffcd69;
+