From b3f7137d85b88220f0e784bd01e69501fa4b04e6 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Mon, 13 Nov 2023 02:23:14 -0700
Subject: [PATCH] Add more indicators that tools are currently active

---
 script.js |  3 +++
 style.css | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index f68f445..b7ea3a7 100644
--- a/script.js
+++ b/script.js
@@ -240,6 +240,9 @@ function colorGrid() {
 function changeColor() {
     const buttonID = this.id;
 
+    buttons.forEach(btn => btn.classList.remove("is-active"));
+    this.classList.add("is-active");
+
     if (buttonID === "rgbColor") {
         isRgb = true;
     } else {
diff --git a/style.css b/style.css
index 48c3b71..dd6387d 100644
--- a/style.css
+++ b/style.css
@@ -57,7 +57,8 @@ button, .container, .color-input, .knob {
     border: none;
     color: #000;
 }
-button:hover, .container:hover, .color-input:hover {
+button:hover, .container:hover, .color-input:hover, 
+.knob:hover, .knob:active, .is-active {
     background-color: #68ffd8;
 }
 
@@ -144,6 +145,12 @@ button {
     border-radius: 6px;
     margin-bottom: 20px;
 }
+.range-slider:hover {
+    box-shadow: 1px 2px 10px 1px #68ffd8;
+}
+.range-slider:active {
+    box-shadow: 1px 2px 10px 1px #68ffd8;
+}
 
 input[type="range"]::-moz-range-thumb {
     appearance: none;
@@ -217,6 +224,12 @@ input[type="range"]::-webkit-slider-runnable-track {
     transform-style: preserve-3d;
     will-change: transform;
 }
+.knob:hover {
+    box-shadow: 1px 2px 10px 1px #68ffd8;
+}
+.knob:active {
+    box-shadow: 1px 2px 10px 1px #68ffd8;
+}
 
 .knotch {
     width: 10px;