From d7a3d4abd3ea30c8502b60cad21f2a9429044267 Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Fri, 19 Apr 2024 11:36:54 -0400
Subject: [PATCH] added play and shuffle non functional buttons

---
 src/components/playlist.rs |  5 ++++-
 style/sidebar.scss         | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/playlist.rs b/src/components/playlist.rs
index b94cbf5..d9df472 100644
--- a/src/components/playlist.rs
+++ b/src/components/playlist.rs
@@ -84,7 +84,10 @@ pub fn PlayListPopUp(playlist: Playlist, set_show_playlist: WriteSignal<bool>) -
                 <h1>{playlist.name.clone()}</h1>
                 <p>{move || songs.get().len()} songs {move || convert_to_text_time(total_duration(songs))}</p>
             </div>
-            
+            <div class="options">
+                <button><Icon class="button-icons" icon=icondata::BsPlayFill />Play</button>
+                <button><Icon class="button-icons" icon=icondata::IoShuffle />Shuffle</button>
+            </div>
             <ul class="songs">
                 {
                     move || songs.get().iter().enumerate().map(|(index,song)| view! {
diff --git a/style/sidebar.scss b/style/sidebar.scss
index 6174cab..d518056 100644
--- a/style/sidebar.scss
+++ b/style/sidebar.scss
@@ -251,6 +251,29 @@
               color: #aaa;
             }
           }
+          .options {
+            display: flex;
+            button {
+              background-color: white;
+              border: none;
+              color: black;
+              font-size: 1rem;
+              padding: .6rem;
+              border-radius: 5px;
+              cursor: pointer;
+              transition: background-color 0.3s ease;
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              margin-right: 10px;
+              margin-top: 1rem;
+              margin-left: 5px;
+              .button-icons {
+                margin-right: 7px;
+                font-size: 1.3rem;
+              }  
+            }
+          }
           .songs {
             list-style: none;
             padding: 0;