From 3760cf3d4c7b07a731a4f266d8fec7f013e8f0c1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 4 Dec 2022 14:26:54 -0800
Subject: [PATCH] Update select styles

---
 components/FilterBar/index.scss | 14 +++++++-------
 components/GridRep/index.scss   | 10 +++++-----
 styles/globals.scss             |  2 ++
 styles/themes.scss              | 20 ++++++++++++++++++++
 styles/variables.scss           | 28 ++++++++++++++++++++--------
 5 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss
index 5d45dbca..60204302 100644
--- a/components/FilterBar/index.scss
+++ b/components/FilterBar/index.scss
@@ -1,6 +1,6 @@
 .FilterBar {
   align-items: center;
-  background: var(--card-bg);
+  background: var(--bar-bg);
   border-radius: 6px;
   display: flex;
   flex-direction: row;
@@ -18,7 +18,7 @@
   }
 
   h1 {
-    color: $grey-30;
+    color: var(--text-primary);
     font-size: $font-regular;
     font-weight: $normal;
     flex-grow: 1;
@@ -26,11 +26,11 @@
   }
 
   select {
-    background: url("/icons/Arrow.svg"), $grey-90;
-    background-repeat: no-repeat;
-    background-position-y: center;
-    background-position-x: 95%;
-    background-size: $unit * 1.5;
+    // background: url("/icons/Arrow.svg"), $grey-90;
+    // background-repeat: no-repeat;
+    // background-position-y: center;
+    // background-position-x: 95%;
+    // background-size: $unit * 1.5;
     color: $grey-50;
     font-size: $font-small;
     margin: 0;
diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index 95ed00d8..7fdfc87d 100644
--- a/components/GridRep/index.scss
+++ b/components/GridRep/index.scss
@@ -6,7 +6,7 @@
   padding: $unit * 2;
 
   &:hover {
-    background: white;
+    background: var(--grid-rep-hover);
 
     h2,
     .Grid {
@@ -14,7 +14,7 @@
     }
 
     .Grid .weapon {
-      box-shadow: inset 0 0 0 1px $grey-80;
+      box-shadow: inset 0 0 0 1px var(--grid-border-color);
     }
   }
 
@@ -24,7 +24,7 @@
     flex-shrink: 0;
 
     .weapon {
-      background: white;
+      background: var(--card-bg);
       border-radius: 4px;
     }
 
@@ -64,7 +64,7 @@
     gap: calc($unit / 2);
 
     h2 {
-      color: $grey-10;
+      color: var(--text-primary);
       font-size: $font-regular;
       overflow: hidden;
       padding-bottom: 1px;
@@ -73,7 +73,7 @@
       max-width: 258px; // Can we not do this?
 
       &.empty {
-        color: $grey-50;
+        color: var(--text-secondary);
       }
     }
 
diff --git a/styles/globals.scss b/styles/globals.scss
index d6af2bd2..d0151f2c 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -78,6 +78,7 @@ h1 {
 
 select {
   appearance: none;
+  background-color: var(--input-bg);
   background-image: url("/icons/Arrow.svg");
   background-repeat: no-repeat;
   background-position-y: center;
@@ -93,6 +94,7 @@ select {
   width: 100%;
 
   &:hover {
+    background-color: var(--input-bg-hover);
     cursor: pointer;
   }
 }
diff --git a/styles/themes.scss b/styles/themes.scss
index 07e0cd94..f16c50bc 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -1,7 +1,14 @@
 :root {
   --background: #{$page--bg--light};
   --page-hover: #{$page--hover--light};
+
+  --grid-rep-hover: #{$grid--rep--hover--light};
+
   --card-bg: white;
+  --bar-bg: white;
+
+  --input-bg: #{$input--bg--light};
+  --input-bg-hover: #{$input--bg--light--hover};
 
   --text-primary: #{$text--primary--color--light};
 
@@ -10,8 +17,11 @@
 
   --icon-secondary: #{$icon--secondary--color--light};
   --icon-secondary-hover: #{$icon--secondary--hover--light};
+
   --switch-nub: #{$switch--nub--bg--light};
 
+  --grid-border-color: #{$grid--border--color--light};
+
   --wind-hover-bg: #{$wind-bg-20};
   --wind-hover-text: #{$wind-text-20};
   --fire-hover-bg: #{$fire-bg-20};
@@ -29,7 +39,14 @@
 [data-theme="dark"] {
   --background: #{$page--bg--dark};
   --page-hover: #{$page--hover--dark};
+
+  --grid-rep-hover: #{$grid--rep--hover--dark};
+
   --card-bg: #{$page--element--bg--dark};
+  --bar-bg: #{$grey-00};
+
+  --input-bg: #{$input--bg--dark};
+  --input-bg-hover: #{$input--bg--dark--hover};
 
   --text-primary: #{$text--primary--color--dark};
 
@@ -38,8 +55,11 @@
 
   --icon-secondary: #{$icon--secondary--color--dark};
   --icon-secondary-hover: #{$icon--secondary--hover--dark};
+
   --switch-nub: #{$switch--nub--bg--dark};
 
+  --grid-border-color: #{$grid--border--color--dark};
+
   --wind-hover-bg: #{$wind-bg-00};
   --wind-hover-text: #{$wind-text-00};
   --fire-hover-bg: #{$fire-bg-00};
diff --git a/styles/variables.scss b/styles/variables.scss
index 826a9662..b25e5bb1 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -12,10 +12,11 @@ $medium-screen: 800px;
 $unit: 8px;
 
 // Colors
+$grey-00: #111;
 $grey-10: #191919;
-$grey-15: #2f2f2f;
-$grey-20: #444;
-$grey-30: #555;
+$grey-15: #232323;
+$grey-20: #2f2f2f;
+$grey-30: #444;
 $grey-40: #777;
 $grey-50: #888;
 $grey-60: #a9a9a9;
@@ -28,19 +29,30 @@ $page--bg--light: $grey-90;
 $page--bg--dark: $grey-10;
 
 $page--hover--light: $grey-90;
-$page--hover--dark: $grey-15;
+$page--hover--dark: $grey-20;
 
 $page--element--bg--light: $grey-70;
-$page--element--bg--dark: $grey-20;
+$page--element--bg--dark: $grey-30;
+
+$input--bg--light: $grey-90;
+$input--bg--light--hover: $grey-80;
+$input--bg--dark: $grey-10;
+$input--bg--dark--hover: $grey-15;
+
+$grid--rep--hover--light: white;
+$grid--rep--hover--dark: $grey-00;
+
+$grid--border--color--light: $grey-80;
+$grid--border--color--dark: $grey-30;
 
 $switch--nub--bg--light: $grey-80;
-$switch--nub--bg--dark: $grey-15;
+$switch--nub--bg--dark: $grey-20;
 
-$text--primary--color--light: $grey-20;
+$text--primary--color--light: $grey-30;
 $text--primary--color--dark: $grey-90;
 
 $text--secondary--color--light: $grey-40;
-$text--secondary--hover--light: $grey-20;
+$text--secondary--hover--light: $grey-30;
 $text--secondary--color--dark: $grey-40;
 $text--secondary--hover--dark: $grey-70;