Fixes attribute filters hover color to match spec

Adds hover color to units header
concord-consortium · Jan 31, 2024 · a19ed1b · a19ed1b
1 parent 3e4dc3f
commit a19ed1b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/components/attribute-filter.scss b/src/components/attribute-filter.scss
@@ -1,6 +1,6 @@
 @import "./vars.scss";
-$filter-background-green: rgba(90, 249, 90, 0.25);
-$filter-background-green-hover: rgba(90, 249, 90, 0.5);
+$filter-background-green-25: rgba(90, 249, 90, 0.25);
+$filter-background-green-60: rgba(90, 249, 90, 0.6);
 
 $filter-green: #2dbe5e;
 
@@ -29,6 +29,10 @@ $filter-green: #2dbe5e;
       min-width: 36px;
       background-color: rgba(126, 126, 126, 0.3);
       cursor: pointer;
+      &:hover {
+        background-color: rgba(126, 126, 126, 0.6);
+        color: white;
+      }
     }
     &.filter-header {
       width: 41px;
@@ -66,18 +70,18 @@ $filter-green: #2dbe5e;
       cursor: pointer;
 
       &.filtering {
-        background-color: $filter-background-green;
+        background-color: $filter-background-green-25;
         color: $filter-green;
       }
       &.has-filter {
-        background-color: $filter-background-green;
+        background-color: $filter-background-green-25;
         color: $filter-green;
         &:hover {
-          background-color: $filter-background-green-hover;
+          background-color: $filter-background-green-60;
         }
       }
       &:hover {
-        background-color: $teal-light;
+        background-color: $teal-light-60;
       }
       .filter-value-container {
         display: flex;

diff --git a/src/components/vars.scss b/src/components/vars.scss
@@ -4,6 +4,7 @@ $teal-medium: #ddeff1;
 $teal-light: #72bfca;
 $teal-dark-75: rgba(23, 121, 145, 0.75);
 $teal-dark-50: rgba(23, 121, 145, 0.5);
+$teal-light-60: rgba(114, 191, 202, 0.6);
 $teal-light-25: rgba(114, 191, 202, 0.25);
 $teal-light-12: rgba(114, 191, 202, 0.12);
 $placeholder-gray: #c6c6c6