From 33c1b52ba207ca0d9dc9ebc1edf4982fc6114662 Mon Sep 17 00:00:00 2001
From: ecco257 <72117210+ecco257@users.noreply.github.com>
Date: Fri, 2 Feb 2024 17:19:15 -0500
Subject: [PATCH] Add styling for queue and queue toggle button

---
 style/main.scss    |  1 +
 style/playbar.scss | 24 +++++++++++++++++++++++
 style/queue.scss   | 48 ++++++++++++++++++++++++++++++++++++++++++++++
 style/theme.scss   |  1 +
 4 files changed, 74 insertions(+)
 create mode 100644 style/queue.scss

diff --git a/style/main.scss b/style/main.scss
index e49fe50..e496880 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,5 +1,6 @@
 @import 'playbar.scss';
 @import 'theme.scss';
+@import 'queue.scss';
 
 body {
 	font-family: sans-serif;
diff --git a/style/playbar.scss b/style/playbar.scss
index 058b6c4..6d91b94 100644
--- a/style/playbar.scss
+++ b/style/playbar.scss
@@ -88,4 +88,28 @@
 		right: 10px;
 		top: 13px;
 	}
+
+	.queue-toggle {
+		position: absolute;
+		bottom: 13px;
+		top: 13px;
+		right: 90px;
+
+		button {
+			.controlbtn {
+				color: $text-controls-color;
+			}
+
+			.controlbtn:hover {
+				color: $controls-hover-color;
+			}
+
+			.controlbtn:active {
+				color: $controls-click-color;
+			}
+	
+			background-color: transparent;
+			border: transparent;
+		}
+	}
 }
diff --git a/style/queue.scss b/style/queue.scss
new file mode 100644
index 0000000..21df7cf
--- /dev/null
+++ b/style/queue.scss
@@ -0,0 +1,48 @@
+@import 'theme.scss';
+
+.queue {
+	position: fixed;
+	top: 0;
+	right: 0; 
+	width: 300px; 
+	height: 55.3rem;
+	background-color: $queue-background-color; /* Queue background color */
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
+  
+	.queue-header {
+	  background-color: #333; /* Header background color */
+	  color: #fff; /* Header text color */
+	  padding: 10px;
+	  text-align: center;
+	}
+  
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	
+		.queue-song {
+		  display: flex;
+		  align-items: center;
+		  padding: 10px;
+		  border-bottom: 1px solid #ccc; /* Separator line color */
+	
+		  img {
+			max-width: 50px; /* Adjust maximum width for images */
+			margin-right: 10px; /* Add spacing between image and text */
+		  }
+	
+		  .queue-song-info {
+			h3 {
+			  margin: 0; /* Remove default margin for heading */
+			}
+	
+			p {
+			  margin: 0; /* Remove default margin for paragraph */
+			  color: #888; /* Adjust text color for artist */
+			}
+		  }
+		}
+	}
+}
+  
\ No newline at end of file
diff --git a/style/theme.scss b/style/theme.scss
index 9ac5872..63ff157 100644
--- a/style/theme.scss
+++ b/style/theme.scss
@@ -6,3 +6,4 @@ $controls-click-color: #909090;
 $play-bar-background-color: #212121;
 $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
+$queue-background-color: $play-bar-background-color;