use img in playlist card

+ use $black background on right sidebar

src/assets/scss/Global/basic.scss

@@ -65,12 +65,12 @@ button {
   background: linear-gradient(70deg, $gray3, $gray2);
 
   &:hover {
-    background-image: linear-gradient(70deg, #234ece, $darkblue);
+    background-image: linear-gradient(70deg, $darkestblue, $darkblue);
   }
 }
 
 .btn-active {
-  background-image: linear-gradient(70deg, #234ece, $darkblue);
+  background-image: linear-gradient(70deg, $darkestblue, $darkblue);
 }
 
 .btn-more {

src/assets/scss/_variables.scss

@@ -3,6 +3,7 @@
 $body: #0f1218;
 $separator: #ffffff2f;
 $highlight-blue: #006eff;
+$darkestblue: #234ece;
 $bbb: #161616; //bottom controls background
 $theme: #464545fd;
 
@@ -41,7 +42,6 @@ $teal: rgb(64, 200, 224);
 $primary: $gray4;
 $accent: $gray1;
 $secondary: $gray5;
-$cta: $blue;
 $danger: $red;
 $track-hover: $gray4;
 $context: $gray;

src/components/Contextmenu/ContextItem.vue

@@ -66,7 +66,7 @@ defineProps<{
   }
 
   &:hover {
-    background: #234ece;
+    background: $darkestblue;
 
     .children {
       transform: scale(1);

src/components/LeftSidebar/NP/HotKeys.vue

@@ -37,7 +37,7 @@ const q = useQStore();
     cursor: pointer;
 
     &:hover {
-      background-color: $accent;
+      background-color: $darkestblue;
     }
   }
 

src/components/PlaylistsList/PlaylistCard.vue

@@ -4,12 +4,7 @@
     :playlist="props.playlist"
     class="p-card rounded bg-primary"
   >
-    <div
+    <img :src="imguri + props.playlist.thumb" class="rounded" />
-      class="image p-image rounded shadow-sm"
-      :style="{
-        backgroundImage: `url(${imguri + props.playlist.thumb})`,
-      }"
-    ></div>
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
       <div class="count">
@@ -41,47 +36,20 @@ const props = defineProps<{
   transition: all 0.25s ease;
   position: relative;
 
-  .p-image {
+  img {
-    min-width: 100%;
+    width: 100%;
-    transition: all 0.2s ease;
-    background-color: $gray4;
     aspect-ratio: 1;
-  }
+    object-fit: cover;
-
-  .drop {
-    position: absolute;
-    bottom: 4rem;
-    right: 1.25rem;
-    opacity: 0;
-    transition: all 0.25s ease-in-out;
-    display: none;
-
-    .drop-btn {
-      background-color: $gray3;
-    }
-  }
-
-  .pbtn {
-    display: none;
-    position: absolute;
-    bottom: 4.5rem;
-    left: 1.25rem;
-    transition: all 0.25s ease-in-out;
-    z-index: 10;
   }
 
   &:hover {
-    background-color: $gray2;
+    background-color: $darkestblue;
-
-    .drop {
-      transition-delay: 0.75s;
-      opacity: 1;
-      transform: translate(0, -0.5rem);
-    }
   }
 
   .bottom {
-    margin-top: 1rem;
+    margin-top: $smaller;
+    display: grid;
+    justify-items: center;
 
     .name {
       font-weight: 900;
@@ -89,7 +57,7 @@ const props = defineProps<{
 
     .count {
       font-size: $medium;
-      color: $gray1;
+      opacity: .5;
     }
   }
 }

src/components/RightSideBar/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="r-sidebar"
+    class="r-sidebar rounded"
     :style="{
       marginBottom: !settings.use_alt_np ? '-1rem' : '',
     }"
@@ -35,6 +35,7 @@ const settings = useSettingsStore();
 <style lang="scss">
 .r-sidebar {
   width: 100%;
+  background-color: $black;
 
   .grid {
     display: flex;

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <div class="scrollable-r bg-primary rounded">
+      <div class="scrollable-r rounded">
         <QueueActions />
         <div
           class="inner"

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="right-tabs" class="bg-primary rounded">
+  <div id="right-tabs" class="rounded">
     <div class="tab-buttons-wrapper">
       <div id="tabheaders" class="rounded-sm noscroll">
         <div

src/components/SettingsView/Components/Switch.vue

@@ -32,7 +32,7 @@ defineProps<{
 }
 
 .toggled {
-  background-color: $darkblue;
+  background-color: $darkestblue;
   transition-delay: 0.15s;
 
   .circle {

src/components/shared/Loader.vue

@@ -2,7 +2,6 @@
   <div
     class="loaderx"
     :class="{ loader: loader.loading, not_loader: !loader.loading }"
-    @click="modal.showSearchModal"
   >
     <div v-if="!loader.loading">🦋</div>
   </div>
@@ -10,10 +9,8 @@
 
 <script setup lang="ts">
 import useLoaderStore from "@/stores/loader";
-import useModalStore from "@/stores/modal";
 
 const loader = useLoaderStore();
-const modal = useModalStore();
 </script>
 
 <style lang="scss">