Update select styles

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: url("/icons/Arrow.svg"), $grey-90;
-    background-repeat: no-repeat;
+    // background-repeat: no-repeat;
-    background-position-y: center;
+    // background-position-y: center;
-    background-position-x: 95%;
+    // background-position-x: 95%;
-    background-size: $unit * 1.5;
+    // background-size: $unit * 1.5;
     color: $grey-50;
     font-size: $font-small;
     margin: 0;

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);
       }
     }
 

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;
   }
 }

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};

styles/variables.scss

@@ -12,10 +12,11 @@ $medium-screen: 800px;
 $unit: 8px;
 
 // Colors
+$grey-00: #111;
 $grey-10: #191919;
-$grey-15: #2f2f2f;
+$grey-15: #232323;
-$grey-20: #444;
+$grey-20: #2f2f2f;
-$grey-30: #555;
+$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;