From 60747a87660ebb15fe649024710f357628c0ec8f Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Tue, 2 Dec 2025 15:07:02 -0500
Subject: [PATCH] Style changes so that icons are visible.

---
 frontend/src/components/SideBar.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index 61cba21..4eee35b 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -156,7 +156,8 @@ const handleCategoryClick = (category) => {
 </template>
 
 <style lang="css">
-.sidebar-button.active {
+.sidebar-button.active,
+.sidebar-button.active:hover{
 	background-color: var(--primary-color);
 	color: white;
 	border-left: 3px solid var(--primary-600);
@@ -166,8 +167,8 @@ const handleCategoryClick = (category) => {
 .sidebar-button:hover {
 	background-color: var(--surface-hover);
 	color: var(--primary-color);
-	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-	transform: translateX(2px);
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
+	transform: translateX(1px);
 }
 
 .button-icon {
@@ -177,11 +178,17 @@ const handleCategoryClick = (category) => {
 	margin-left: 10px;
 	margin-right: 10px;
 	opacity: 0.9;
+	color: black;
 }
 
 .sidebar-button.active .button-icon,
+.sidebar-button.active:hover .button-icon{
+	opacity: 1;
+	color: white;
+}
 .sidebar-button:hover .button-icon {
 	opacity: 1;
+	color: black;
 }
 
 .create-item {
@@ -282,10 +289,15 @@ const handleCategoryClick = (category) => {
 }
 
 .toggle-icon {
+	color: black;
 	width: 16px;
 	height: 16px;
 }
 
+.toggle-icon:hover {
+	color: white;
+}
+
 .collapsed .button-text {
 	display: none;
 }