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!{ -
+
{song_title.clone()} -
+

{song_title}

{song_artist}

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