remove background colors

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

src/App.vue

@@ -11,7 +11,7 @@
   >
     <LeftSidebar />
     <NavBar />
-    <div id="acontent" class="rounded">
+    <div id="acontent">
       <router-view />
     </div>
     <NowPlayingRight />

src/assets/scss/Global/app-grid.scss

@@ -86,7 +86,6 @@
   display: grid;
   grid-template-rows: 1fr max-content;
   gap: 1rem;
-  background-color: $black;
 }
 
 .b-bar {

src/assets/scss/Global/basic.scss

@@ -43,6 +43,10 @@
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.425);
 }
 
+.border {
+  border: 1px solid $gray3;
+}
+
 .heading {
   font-size: 2rem;
   font-weight: bold;

src/assets/scss/_variables.scss

@@ -1,6 +1,6 @@
 // colors
 
-$body: #0f1218;
+$body: #202124;
 $separator: #ffffff2f;
 $highlight-blue: #006eff;
 $darkestblue: #234ece;
@@ -45,6 +45,7 @@ $secondary: $gray5;
 $danger: $red;
 $track-hover: $gray4;
 $context: $gray;
+$playlist-card-bg: #46474C;
 
 // SVG COLORS
 $default: $accent;

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;

src/layouts/HeaderContentBottom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ap-container rounded">
+  <div class="ap-container">
     <div id="ap-page">
       <header class="ap-page-header" ref="apheader">
         <slot name="header"></slot>

src/stores/search.ts

@@ -28,10 +28,13 @@ function scrollOnLoad() {
 }
 
 export default defineStore("search", () => {
+  // @ts-ignore
   const query = useDebouncedRef(null, 600);
   const { startLoading, stopLoading } = useLoaderStore();
 
   const currentTab = ref("tracks");
+  const RESULT_COUNT = 6;
+
   const loadCounter = reactive({
     tracks: 0,
     albums: 0,
@@ -98,7 +101,7 @@ export default defineStore("search", () => {
   }
 
   function loadTracks() {
-    loadCounter.tracks += 12;
+    loadCounter.tracks += RESULT_COUNT;
 
     startLoading();
     loadMoreTracks(loadCounter.tracks)
@@ -111,7 +114,7 @@ export default defineStore("search", () => {
   }
 
   function loadAlbums() {
-    loadCounter.albums += 12;
+    loadCounter.albums += RESULT_COUNT;
 
     startLoading();
     loadMoreAlbums(loadCounter.albums)
@@ -128,7 +131,7 @@ export default defineStore("search", () => {
   }
 
   function loadArtists() {
-    loadCounter.artists += 12;
+    loadCounter.artists += RESULT_COUNT;
 
     startLoading();
     loadMoreArtists(loadCounter.artists)
@@ -143,7 +146,9 @@ export default defineStore("search", () => {
   watch(
     () => query.value,
     (newQuery) => {
+      // reset all counters
       for (const key in loadCounter) {
+        // @ts-ignore
         loadCounter[key] = 0;
       }