remove background colors

-
try to imitate Google's design of things
it makes UI look declattered
-

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="table rounded"
+    class="table rounded border"
     v-if="tracks.length"
     ref="tracklistElem"
     :class="{
@@ -189,7 +189,6 @@ function getTrackList() {
 .table {
   height: 100%;
   overflow-y: hidden;
-  background-color: $black;
   padding: $small 0;
 
   .header {

src/components/LeftSidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l-sidebar rounded">
+  <div class="l-sidebar rounded border">
     <div class="withlogo">
       <Logo />
       <Navigation />

src/components/Logo.vue

@@ -2,7 +2,7 @@
   <div id="logo-container"
   >
     <router-link :to="{ name: 'Home' }">
-      <div id="logo" class="rounded"></div
+      <div id="logo"></div
     ></router-link>
   </div>
 </template>
@@ -19,5 +19,6 @@
   background-image: url(./../assets/images/logo.webp);
   background-size: contain;
   @include ximage;
+  border-radius: $medium;
 }
 </style>

src/components/PlaylistsList/NewPlaylistCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-card new-playlist-card rounded bg-primary"
+    class="p-card new-playlist-card rounded"
     @click="Modal.showNewPlaylistModal()"
   >
     <PlusSvg />

src/components/PlaylistsList/PlaylistCard.vue

@@ -2,9 +2,9 @@
   <router-link
     :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
     :playlist="props.playlist"
-    class="p-card rounded bg-primary"
+    class="p-card rounded"
   >
-    <img :src="imguri + props.playlist.thumb" class="rounded" />
+    <img :src="imguri + props.playlist.thumb"/>
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
       <div class="count">
@@ -32,14 +32,16 @@ const props = defineProps<{
 <style lang="scss">
 .p-card {
   width: 100%;
-  padding: 1rem;
+  padding: $medium;
   transition: all 0.25s ease;
   position: relative;
+  background-color: $playlist-card-bg;
 
   img {
     width: 100%;
     aspect-ratio: 1;
     object-fit: cover;
+    border-radius: $medium;
   }
 
   &:hover {

src/components/RightSideBar/Main.vue

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

src/components/RightSideBar/SearchInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="gsearch-input">
-    <div id="ginner" tabindex="0" class="bg-primary rounded-sm">
+    <div id="ginner" tabindex="0" class="bg-primary">
       <input
         id="globalsearch"
         v-model="search.query"
@@ -11,7 +11,7 @@
       />
       <SearchSvg />
     </div>
-    <div class="buttons rounded-sm bg-primary">
+    <div class="buttons bg-primary">
       <button
         @click="tabs.switchToQueue"
         v-if="tabs.current !== tabs.tabs.queue"
@@ -58,6 +58,10 @@ function removeFocusedClass() {
   grid-template-columns: 1fr max-content;
   gap: 1rem;
 
+  & > * {
+    border-radius: $medium;
+  }
+
   .buttons {
     display: grid;
     grid-auto-flow: column;