From 2d35b951f90b5b44db4e70ea78a8010fb4bd07d9 Mon Sep 17 00:00:00 2001
From: Eric Arellano <ericarellano@me.com>
Date: Sun, 30 Jun 2024 13:56:32 -0400
Subject: [PATCH] Move colors to one place

---
 src/css/_about.scss     |  6 ++++--
 src/css/_colors.scss    |  7 +++++++
 src/css/_header.scss    | 14 ++++++++------
 src/css/_scorecard.scss | 27 +++++++++++++--------------
 4 files changed, 32 insertions(+), 22 deletions(-)
 create mode 100644 src/css/_colors.scss

diff --git a/src/css/_about.scss b/src/css/_about.scss
index 7b771ae..1e34629 100644
--- a/src/css/_about.scss
+++ b/src/css/_about.scss
@@ -1,3 +1,5 @@
+@use "colors";
+
 dd {
   margin-bottom: 10px;
 }
@@ -5,9 +7,9 @@ dd {
 div.about-text-popup {
   position: absolute;
   z-index: 2001;
-  background-color: white;
+  background-color: colors.$white;
   font-size: 18px;
-  border: 1px solid rgba(186, 186, 186, 0.7);
+  border: 1px solid colors.$gray-light-translucent;
   display: none;
   left: 10%;
   height: 60%;
diff --git a/src/css/_colors.scss b/src/css/_colors.scss
new file mode 100644
index 0000000..db42a4e
--- /dev/null
+++ b/src/css/_colors.scss
@@ -0,0 +1,7 @@
+$teal: #21ccb9;
+$gray: rgb(60, 60, 60);
+$gray-light: #4d4d4d;
+$gray-light-translucent: rgba(186, 186, 186, 0.7);
+$white: white;
+$black: black;
+$black-translucent: rgba(0, 0, 0, 0.2);
diff --git a/src/css/_header.scss b/src/css/_header.scss
index 2559f16..7b095c3 100644
--- a/src/css/_header.scss
+++ b/src/css/_header.scss
@@ -1,9 +1,11 @@
+@use "colors";
+
 header {
   width: 100%;
   padding: 0.4em 1em;
 
-  background-color: #4d4d4d;
-  color: white;
+  background-color: colors.$gray-light;
+  color: colors.$white;
   font-size: 1.3em;
 
   display: flex;
@@ -15,7 +17,7 @@ header {
   cursor: pointer;
 
   svg {
-    color: white;
+    color: colors.$white;
   }
 
   .header-about-icon {
@@ -56,9 +58,9 @@ header {
 }
 
 .choices__inner {
-  border: 2px solid rgba(0, 0, 0, 0.2);
+  border: 2px solid colors.$black-translucent;
   border-radius: 10px;
-  color: black;
+  color: colors.$black;
   height: 40px;
 
   @media only screen and (min-width: 20em) {
@@ -83,5 +85,5 @@ header {
 .choices__list--dropdown,
 .choices__list[aria-expanded] {
   z-index: 1001;
-  color: black;
+  color: colors.$black;
 }
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
index b1a2758..da05a11 100644
--- a/src/css/_scorecard.scss
+++ b/src/css/_scorecard.scss
@@ -1,5 +1,4 @@
-$teal: #21ccb9;
-$gray: rgb(60, 60, 60);
+@use "colors";
 
 .popup-fixed {
   position: fixed;
@@ -29,7 +28,7 @@ div.leaflet-popup-content-wrapper div div {
 }
 
 div.leaflet-popup-content-wrapper > div > div.title {
-  color: $teal;
+  color: colors.$teal;
   font-weight: bold;
   font-size: 16px;
 }
@@ -37,15 +36,15 @@ div.leaflet-popup-content-wrapper > div > div.title {
 div.leaflet-popup-content-wrapper div span.details-title,
 div.leaflet-popup-content-wrapper div span.details-value {
   font-size: 14px;
-  color: black;
+  color: colors.$black;
 }
 
 div.leaflet-popup-content-wrapper span.details-value {
-  color: $teal;
+  color: colors.$teal;
 }
 
 div.leaflet-popup-content-wrapper > div > div.title {
-  color: $teal;
+  color: colors.$teal;
   font-weight: bold;
   font-size: 18px;
   display: inline-block;
@@ -63,30 +62,30 @@ div.leaflet-popup-content-wrapper > div > div.url-copy-button:hover {
 }
 
 div.leaflet-popup-content-wrapper > div > div.url-copy-button svg.fa-link {
-  color: $teal;
+  color: colors.$teal;
 }
 
 div.popup-button a {
-  background-color: $teal;
+  background-color: colors.$teal;
   padding: 10px;
   font-size: 16px;
-  color: white;
+  color: colors.$white;
   border-radius: 8px;
   font-weight: bold;
   text-decoration: none;
-  border: 1px solid $teal;
+  border: 1px solid colors.$teal;
   display: inline-block;
 }
 
 div.popup-button a:hover {
-  background-color: white;
-  color: $teal;
-  border: 1px solid $teal;
+  background-color: colors.$white;
+  color: colors.$teal;
+  border: 1px solid colors.$teal;
 }
 
 .community-tag {
   font-size: 14px;
-  color: $gray;
+  color: colors.$gray;
 }
 
 @media only screen and (max-width: 830px) {