Merge pull request #683 from dali-lab/feat/links-hover-states

feat: add hover states to links and introduce color variables
dali-lab · Nov 18, 2024 · e58f0de · e58f0de
2 parents 564b9d5 + 55cbc06
commit e58f0de
Show file tree

Hide file tree

Showing 40 changed files with 287 additions and 218 deletions.
diff --git a/src/components/button/style.scss b/src/components/button/style.scss
@@ -6,13 +6,13 @@
     text-decoration: none;
 
     &-primary {
-        color: #ffffff;
-        background-color: #424755;
+        color: $white;
+        background-color: $greyBlue800;
     }
 
     &-secondary {
         background-color: white;
-        border: 1px solid #424755 !important;
-        color: #424755
+        border: 1px solid $greyBlue800 !important;
+        color: $greyBlue800;
     }
 }
diff --git a/src/components/download-data/style.scss b/src/components/download-data/style.scss
@@ -14,7 +14,7 @@
     padding-left: 12px;
     padding-top: 5px;
     border-radius: 6px;
-    background-color: #4CD791;
+    background-color: $green500;
     display: flex;
 }
 
@@ -28,7 +28,7 @@
     font-size: 15px;
     text-align: center;
     white-space: nowrap;
-    color: #ffffff;
+    color: $white;
 }
 
 .modal-divide-flex {
@@ -46,13 +46,13 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: #F3F3F3;
+    background-color: $grey200;
     margin-top: 1vh;
     border-radius: 10px;
     width: 302px;
 
     .input-container {
-        background-color: #F3F3F3;
+        background-color: $grey200;
         height: 30px;
     }
 
@@ -72,23 +72,23 @@
     align-items: center;
     width: 300px;
     height: 40px;
-    background-color: #FFFFFF;
+    background-color: $white;
     border-radius: 100px;
-    border: 1px solid #B7B7B7;
+    border: 1px solid $grey500;
     box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
     margin-top: 5vh;
 
     .selected-option-p {
         display: flex;
         flex-direction: row;
         align-items: center;
-        background-color: #DFFBFF;
+        background-color: $blue200;
         border-radius: 100px;
         padding-left: 25px;
         padding-right: 25px;
 
         .selected-option-text-p {
-            color: #ffffff;
+            color: $white;
         }
 
         img {
@@ -101,13 +101,13 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        background-color: #505050;
+        background-color: $grey800;
         border-radius: 100px;
         padding-left: 15px;
         padding-right: 15px;
 
         .selected-option-text-p {
-            color: #ffffff;
+            color: $white;
         }
 
         img {
@@ -128,7 +128,7 @@
         cursor: pointer;
 
         .unselected-option-text-p {
-            color: #93949B;
+            color: $greyBlue600;
         }
 
         img {
@@ -148,13 +148,13 @@
     height: 70vh;
     padding: 50px;
     border-radius: 20px;
-    background-color: #ffffff;
+    background-color: $white;
     // TODO: replace box shadow with grayer background later
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 
     .selection-button {
         width: 9vw;
-        background-color: #F3F3F3;
+        background-color: $grey200;
     }
 }
 
@@ -185,7 +185,7 @@
     font-size: 30px;
     font-weight: 500;
     text-align: center;
-    color: #1e1e1e;
+    color: $headingColor;
 }
 
 #modal-year {
@@ -216,16 +216,16 @@
     margin-top: 10px;
     display: flex;
     border-radius: 5px;
-    background-color: #F3F3F3;
+    background-color: $grey200;
     padding: 5px;
 }
 
 .download-clear-button {
-    background: #505050;
+    background: $grey800;
     font-size: 18px;
     border-radius: 10px;
     letter-spacing: 1.5px;
-    color: #FFFFFF;
+    color: $white;
     border: 0;
     margin-top: auto;
     height: 45px;
@@ -244,7 +244,7 @@
 }
 
 #divider-line {
-    border-left: 1px solid #AEAEAE;
+    border-left: 1px solid $grey500;
     height: 62vh;
     margin-left: 20px;
     margin-right: 20px;
@@ -264,7 +264,7 @@
     flex-direction: column;
     justify-content: space-between;
     gap: 10px;
-    background-color: #F3F3F3;
+    background-color: $grey200;
     padding-right: 25px;
     padding-left: 25px;
     padding-top: 15px;
@@ -286,7 +286,7 @@
     margin-top: auto;
 
     .download-error {
-        color: #cc0002;
+        color: $red700;
         margin-right: 20px;
     }
 }
@@ -296,7 +296,7 @@
     padding: 5px 25px 5px 25px;
     right: 0px;
     border-radius: 10px;
-    background-color: #434754;
+    background-color: $greyBlue800;
     display: flex;
     border: none;
     text-align: center;
@@ -312,7 +312,7 @@
 #modal-submit-btn p {
     font-size: 16px;
     line-height: 1.8;
-    color: #ffffff;
+    color: $white;
 }
 
 #modal-footnote-container {
@@ -321,7 +321,7 @@
 
 .modal-footnote {
     font-size: 11px;
-    color: #AEAEAE;
+    color: $grey500;
     margin-bottom: 5px;
 }
 

diff --git a/src/components/footer/style.scss b/src/components/footer/style.scss
@@ -2,7 +2,7 @@
     height: auto;
     margin: 0px 0px 0px 0px;
     padding: 0px 5px;
-    background-color: #f1f1fb;
+    background-color: $footerColor;
 
     #footer-container {
         padding: 0px;
@@ -17,7 +17,7 @@
     p {
         text-align: center;
         font-family: 'Open Sans', sans-serif;
-        color: #2f303a;
+        color: $greyBlue900;
     }
 
     a {

diff --git a/src/components/header/style.scss b/src/components/header/style.scss
@@ -1,19 +1,19 @@
 #header {
     height: auto;
     padding: 12px;
-    background-color: #FBFBFD;
+    background-color: $backgroundColor;
 
     #title-area {
         display: flex;
         justify-content: space-around;
         align-items: center;
-        background-color: #FBFBFD;
+        background-color: $backgroundColor;
         max-width: 1200px;
         margin: auto;
 
         a {
             text-decoration: none;
-            color: #000000;
+            color: $black;
         }
 
         img {
@@ -32,7 +32,6 @@
             align-items: center;
 
             img {
-                margin-top: 13px;
                 width: 26px;
                 height: 32px;
             }
@@ -67,7 +66,13 @@
                     width: 95px;
                 }
             }
-
+
+        }
+
+        .nav-button:hover,
+        .nav-button-short:hover {
+            transform: scale(1.05);
+            color: $greyBlue800;
         }
 
         #download-button-area {
@@ -103,12 +108,12 @@
         }
 
         .active-nav {
-            color: #000000;
+            color: $black;
             font-weight: bold;
         }
 
         .inactive-nav {
-            color: #73767e;
+            color: $greyBlue700;
         }
     }
 }
diff --git a/src/components/input-components/file-input/style.scss b/src/components/input-components/file-input/style.scss
@@ -11,18 +11,18 @@ input[type=file] {
     display: inline-block;
     padding: 6px 15px 5px;
     border-radius: 6px;
-    background-color: #c9cdd9;
+    background-color: $greyBlue400;
     font-size: 18px;
     line-height: 1.8;
-    color: #000000;
+    color: $black;
     margin-top: 8px;
     cursor: pointer;
     border: 0;
     font-family: 'Inter';
 }
 
 #upload-button {
-    background-color: #86ccff;
+    background-color: $blue500;
 }
 
 .uploading-message-container {
@@ -40,24 +40,24 @@ input[type=file] {
 }
 
 #success-message {
-    color: #86ccff;
+    color: $blue500;
     margin-top: -5px !important;
 }
 
 #uploading-error-container {
     h3 {
-        color: #ff364e;
+        color: $red500;
         margin-bottom: 20px;
     }
 
     button {
         width: 100px;
         border: none;
         padding: 10px;
-        background-color: #c9cdd9;
+        background-color: $greyBlue400;
         font-size: 14px;
         font-weight: 600;
-        color: #3c4253;
+        color: $greyBlue800;
         border-radius: 8px;
         margin-top: 20px;
         display: block;