From d8e7ffd96390349c899885d60f4cbc0c990b63ce Mon Sep 17 00:00:00 2001
From: ecco257 <72117210+ecco257@users.noreply.github.com>
Date: Fri, 15 Mar 2024 16:53:12 -0400
Subject: [PATCH] Separate Song component from queue styling to use for general
 case

---
 src/song.rs      |  4 ++--
 style/queue.scss | 29 +++--------------------------
 style/song.scss  | 22 ++++++++++++++++++++++
 3 files changed, 27 insertions(+), 28 deletions(-)
 create mode 100644 style/song.scss

diff --git a/src/song.rs b/src/song.rs
index 615cfc6..9220cc1 100644
--- a/src/song.rs
+++ b/src/song.rs
@@ -3,9 +3,9 @@ use leptos::*;
 #[component]
 pub fn Song(song_image_path: String, song_title: String, song_artist: String) -> impl IntoView {
 	view!{
-		<div class="queue-song">
+		<div class="song">
 			<img src={song_image_path} alt={song_title.clone()} />
-			<div class="queue-song-info">
+			<div class="song-info">
 				<h3>{song_title}</h3>
 				<p>{song_artist}</p>
 			</div>
diff --git a/style/queue.scss b/style/queue.scss
index aa5e637..a7684d1 100644
--- a/style/queue.scss
+++ b/style/queue.scss
@@ -5,10 +5,12 @@
 	top: 0;
 	right: 0; 
 	width: 400px; 
-	height: calc(100% - 78.9px); /* Adjust height to fit the queue */
+	height: calc(100% - 87px); /* Adjust height to fit the queue */
 	background-color: #424242; /* Queue background color */
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
 	overflow-y: auto; /* Add scroll bar when queue is too long */
+	margin: 5px;
+	border-radius: 5px;
   
 	.queue-header {
 	  background-color: #333; /* Header background color */
@@ -29,31 +31,6 @@
 			padding-right: 10px;
 			padding-top: 5px;
 			padding-bottom: 5px;
-			
-			.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 */
-					border-radius: 5px; /* Add border radius to image */
-				}
-			
-				.queue-song-info {
-					h3 {
-						margin: 0; /* Remove default margin for heading */
-						color: #fff; /* Adjust text color for song */
-					}
-			
-					p {
-						margin: 0; /* Remove default margin for paragraph */
-						color: #aaa; /* Adjust text color for artist */
-					}
-				}
-			}
 
 			button {
 				background: none;
diff --git a/style/song.scss b/style/song.scss
new file mode 100644
index 0000000..71acd29
--- /dev/null
+++ b/style/song.scss
@@ -0,0 +1,22 @@
+.song {
+	display: flex;
+	align-items: center;
+
+	img {
+		max-width: 50px; /* Adjust maximum width for images */
+		margin-right: 10px; /* Add spacing between image and text */
+		border-radius: 5px; /* Add border radius to image */
+	}
+
+	.song-info {
+		h3 {
+			margin: 0; 
+			color: #fff; /* Adjust text color for song */
+		}
+
+		p {
+			margin: 0; 
+			color: #aaa; /* Adjust text color for artist */
+		}
+	}
+}
\ No newline at end of file