feat: design for queue, add songs, search and more

web/src/scss/components/queue.scss

@@ -6,6 +6,7 @@
     height: 10rem;
     width: 10rem;
     position: relative;
+    margin-right: 20px;
 
     .song-cover,
     .fa-solid {
@@ -25,6 +26,7 @@
       left: 0;
       width: 100%;
       height: 100%;
+      cursor: pointer;
 
       &.hover {
         display: none;
@@ -37,6 +39,39 @@
       }
     }
   }
+
+  >.song-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    >* {
+      margin: 5px;
+    }
+
+    >h3 {
+      font-size: 1.8rem;
+    }
+  }
+
+  >.song-actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-left: auto;
+    margin-right: 10px;
+
+    >* {
+      margin: 5px;
+    }
+
+    >.fa-solid {
+      font-size: 1.25rem;
+      cursor: pointer;
+    }
+  }
 }
 
 .playing-symbols {

web/src/scss/components/search.scss

@@ -3,10 +3,42 @@
   height: 60vh;
   overflow-x: hidden;
   overflow-y: scroll;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  &.placeholder {
+    justify-content: center;
+  }
 
   >div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    width: 75%;
+    cursor: pointer;
+
+    >div {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-direction: column;
+      height: 100%;
+
+      >* {
+        margin: 5px;
+      }
+    }
+
     >img {
-      width: 10%;
+      height: 7rem;
+      width: 7rem;
+      margin-right: 20px;
+    }
+
+    >.fa-solid {
+      margin-left: auto;
+      font-size: 2rem;
     }
   }
 }

web/src/scss/components/sortablelist.scss

@@ -18,6 +18,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    margin-bottom: 5px;
 
     &.moving {
       position: fixed;