more refactoring

src/assets/css/Search/Search.scss

@@ -45,16 +45,6 @@
   &::-webkit-scrollbar {
     display: none;
   }
-
-  .theme {
-    background-image: linear-gradient(
-      45deg,
-      #464545fd 0%,
-      #1d1d1d 50%,
-      #4d4e50 100%
-    );
-    color: #fff;
-  }
 }
 
 .right-search {

src/components/FolderView/FolderList.vue

@@ -33,7 +33,7 @@ const props = defineProps({
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  gap: $small;
+  gap: $medium;
 }
 
 .f-container p {

src/components/PlaylistView/Header.vue

@@ -2,7 +2,7 @@
   <div class="p-header">
     <div class="info">
       <div>
-        <div class="name">Makaveli Radio</div>
+        <div class="title">Makaveli Radio</div>
         <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
       </div>
       <div class="buttons">
@@ -76,14 +76,10 @@
       width: calc(100% - 1rem);
     }
 
-    .name {
+    .title {
       font-size: 1.5rem;
       font-weight: bold;
       color: $white;
-
-      &::before {
-        content: "😎 ";
-      }
     }
 
     .metrics {

src/components/Search/AlbumGrid.vue

@@ -31,15 +31,13 @@ export default {
 </script>
 
 <style lang="scss">
-
 .right-search .albums-results {
   border-radius: 0.5rem;
   background: #0f131b44;
   margin-top: $small;
   padding: $small;
   overflow-x: hidden;
-  border: solid 2px $theme;
+  border: solid 1px $gray;
-  
 
   .result-item:hover {
     background-color: $gray3;
@@ -49,7 +47,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.75rem;
   }
 }
 </style>

src/components/Search/ArtistGrid.vue

@@ -35,8 +35,8 @@ export default {
   border-radius: 0.5rem;
   padding: $small;
   margin-bottom: $small;
-  border: solid 2px $theme;
+  border: solid 1px $gray;
-
+  background-color: #150d167c;
 
   .xartist {
     background: linear-gradient(

src/components/Search/TracksGrid.vue

@@ -42,6 +42,6 @@ function loadMore() {
 .right-search .tracks-results {
   border-radius: 0.5rem;
   padding: $small;
-  border: 2px solid $theme;
+  border: 1px solid $gray;
 }
 </style>

src/components/shared/AlbumCard.vue

@@ -6,12 +6,15 @@
     }"
     class="result-item shadow-sm"
   >
-    <div
+    <div class="_idk">
-      class="album-art image"
+      <div
-      :style="{
+        class="album-art image"
-        backgroundImage: `url(&quot;${album.image}&quot;)`,
+        :style="{
-      }"
+          backgroundImage: `url(&quot;${album.image}&quot;)`,
-    ></div>
+        }"
+      ></div>
+      <div class="play shadow-lg image"></div>
+    </div>
     <div class="title ellip">{{ album.name }}</div>
     <div class="artistsx ellipsis">{{ album.artist }}</div>
   </router-link>
@@ -36,11 +39,35 @@ export default {
   color: #ffffffde !important;
   transition: all 0.5s ease;
 
-  .album-art {
+  ._idk {
-    height: 7.5rem;
+    position: relative;
-    width: 7.5rem;
+
-    border-radius: 0.5rem;
+    &:hover {
-    margin-bottom: 0.5rem;
+      .play {
+        visibility: visible;
+      }
+    }
+
+    .play {
+      width: 3rem;
+      height: 3rem;
+      background-color: $gray;
+      border-radius: 1rem;
+      position: absolute;
+      left: 2rem;
+      bottom: 2.5rem;
+      background-image: url("../../assets/icons/play.svg");
+      background-size: 2rem;
+      background-position: 60% 50%;
+      visibility: hidden;
+    }
+
+    .album-art {
+      height: 7.5rem;
+      width: 7.5rem;
+      border-radius: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
   }
 
   .title {

src/components/shared/SongItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr class="songlist-item" :class="{ current: current.trackid === song.trackid }">
+  <tr class="songlist-item" :class="{ current: current.trackid === song.trackid }" @dblclick="emitUpdate(song)">
     <td class="index">{{ index }}</td>
     <td class="flex" @click="emitUpdate(song)">
       <div