From 27a900225ee9e0709f44700f4646f88c81eeb335 Mon Sep 17 00:00:00 2001
From: Eric Arellano <ericarellano@me.com>
Date: Mon, 19 Aug 2024 21:47:13 -0400
Subject: [PATCH] Add hover to icons

---
 src/css/_about.scss        | 4 ++++
 src/css/_controls.scss     | 2 +-
 src/css/_header.scss       | 4 ++++
 src/css/_scorecard.scss    | 2 +-
 src/css/theme/_colors.scss | 5 +++++
 5 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/css/_about.scss b/src/css/_about.scss
index 9733cb4..b8c35b9 100644
--- a/src/css/_about.scss
+++ b/src/css/_about.scss
@@ -73,6 +73,10 @@
   align-items: center;
   justify-content: center;
 
+  &:hover {
+    background-color: colors.$hover-white;
+  }
+
   svg {
     height: icons.$icon-size-md;
     width: icons.$icon-size-md;
diff --git a/src/css/_controls.scss b/src/css/_controls.scss
index 29e6ee1..a5cd714 100644
--- a/src/css/_controls.scss
+++ b/src/css/_controls.scss
@@ -101,6 +101,6 @@ $zoom-controls-top-offset: calc(
   }
 
   &:hover {
-    background-color: colors.$hover;
+    background-color: colors.$hover-white;
   }
 }
diff --git a/src/css/_header.scss b/src/css/_header.scss
index 1d5766f..f58e6bd 100644
--- a/src/css/_header.scss
+++ b/src/css/_header.scss
@@ -37,6 +37,10 @@ $header-height: calc(
   justify-content: center;
   cursor: pointer;
 
+  &:hover {
+    background-color: colors.$hover-gray;
+  }
+
   svg {
     color: colors.$white;
     height: icons.$icon-size-md;
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
index 28d1349..b1c5aa2 100644
--- a/src/css/_scorecard.scss
+++ b/src/css/_scorecard.scss
@@ -72,7 +72,7 @@
   border-bottom-right-radius: borders.$border-radius;
 
   &:hover {
-    background-color: colors.$hover;
+    background-color: colors.$hover-white;
   }
 
   .scorecard-accordion-title {
diff --git a/src/css/theme/_colors.scss b/src/css/theme/_colors.scss
index d8becc6..3fa6a98 100644
--- a/src/css/theme/_colors.scss
+++ b/src/css/theme/_colors.scss
@@ -3,4 +3,9 @@ $white: hsl(0, 0%, 100%);
 $hover: hsl(0, 0%, 96%);
 $black: hsl(0, 0%, 0%);
 $gray: hsl(0, 0%, 25.88%); // Color comes from the logo
+$gray-light: hsl(0, 0%, 80%);
+
 $black-translucent: hsla(0, 0%, 0%, 0.4);
+
+$hover-white: hsl(0, 0%, 96%);
+$hover-gray: hsl(0, 0%, 32%);