From 585367f7157d4f395251e53029eede95a26df775 Mon Sep 17 00:00:00 2001
From: ecco257 <72117210+ecco257@users.noreply.github.com>
Date: Fri, 22 Mar 2024 21:02:11 -0400
Subject: [PATCH] Update coloring of search bar and items to be based on
 theme.scss

---
 style/searchbar.scss | 18 +++++++++---------
 style/theme.scss     |  5 +++++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/style/searchbar.scss b/style/searchbar.scss
index 0a9d2b3..42f6874 100644
--- a/style/searchbar.scss
+++ b/style/searchbar.scss
@@ -20,10 +20,10 @@
 }
   
 .search-bar input[type="search"] {
-	background-color: gray;
+	background-color: $search-bar-input-background-color;
 	border: none;
 	outline: none;
-	color: black;
+	color: $search-bar-input-color;
 	padding: 10px;
 	border-radius: 5px;
 	font-size: 16px;
@@ -33,7 +33,7 @@
 }
   
 .search-results {
-	background-color: #212121;
+	background-color: $search-background-color;
 	border-bottom-left-radius: 5px;
 	border-bottom-right-radius: 5px;
 	display: flex;
@@ -51,17 +51,17 @@
 		li {
 			width: calc(100% - 20px);
 			padding: 10px;
-			border-bottom: 1px solid #333;
+			border-bottom: 1px solid $search-highlight-color;
 			border-radius: 5px;
 			color: white;
 			font-size: 16px;
 			cursor: pointer;
 			&:hover {
-				background-color: #333;
+				background-color: $search-highlight-color;
 			}
 
 			&:first-child {
-				border-top: 2px solid #333;
+				border-top: 2px solid $search-highlight-color;
 			}
 
 			.result-container {
@@ -77,7 +77,7 @@
 				justify-content: space-between;
 			
 				.search-item-type {
-					color: #666;
+					color: $search-item-type-color;
 					margin-right: 10px;
 				}
 
@@ -86,11 +86,11 @@
 					border: none;
 					
 					&:hover {
-						color: #666;
+						color: $search-options-color;
 					}
 
 					&:active {
-						color: #999;
+						color: $search-options-color;
 					}
 				}
 			}
diff --git a/style/theme.scss b/style/theme.scss
index c4e29e6..1b1e955 100644
--- a/style/theme.scss
+++ b/style/theme.scss
@@ -8,6 +8,11 @@ $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
 $queue-background-color: $play-bar-background-color;
 $search-background-color: $play-bar-background-color;
+$search-bar-input-background-color: gray;
+$search-bar-input-color: black;
+$search-highlight-color: #333;
+$search-item-type-color: #666;
+$search-options-color: #666;
 
 $auth-inputs: #796dd4;
 $auth-containers: white;