From c20bbd795c12c894083eb6f90c2a816fae66930e Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 2 Sep 2022 16:05:11 +0300
Subject: [PATCH] remove background colors

-
try to imitate Google's design of things
it makes UI look declattered
-
---
 src/App.vue                                      |  2 +-
 src/assets/scss/Global/app-grid.scss             |  1 -
 src/assets/scss/Global/basic.scss                |  4 ++++
 src/assets/scss/_variables.scss                  |  3 ++-
 src/components/FolderView/SongList.vue           |  3 +--
 src/components/LeftSidebar/index.vue             |  2 +-
 src/components/Logo.vue                          |  3 ++-
 src/components/PlaylistsList/NewPlaylistCard.vue |  2 +-
 src/components/PlaylistsList/PlaylistCard.vue    |  8 +++++---
 src/components/RightSideBar/Main.vue             |  3 +--
 src/components/RightSideBar/SearchInput.vue      |  8 ++++++--
 src/layouts/HeaderContentBottom.vue              |  2 +-
 src/stores/search.ts                             | 11 ++++++++---
 13 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8e42f56b..75fa8211 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
   >
     <LeftSidebar />
     <NavBar />
-    <div id="acontent" class="rounded">
+    <div id="acontent">
       <router-view />
     </div>
     <NowPlayingRight />
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index 7513a572..8999a1f2 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/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 {
diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
index d6d9fd4a..362449f8 100644
--- a/src/assets/scss/Global/basic.scss
+++ b/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;
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 2103cd19..d8a7f4a3 100644
--- a/src/assets/scss/_variables.scss
+++ b/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;
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index eea6ae98..74d57d2a 100644
--- a/src/components/FolderView/SongList.vue
+++ b/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 {
diff --git a/src/components/LeftSidebar/index.vue b/src/components/LeftSidebar/index.vue
index 21281b99..ee5e3d12 100644
--- a/src/components/LeftSidebar/index.vue
+++ b/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 />
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 4682588e..44fa47e8 100644
--- a/src/components/Logo.vue
+++ b/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>
diff --git a/src/components/PlaylistsList/NewPlaylistCard.vue b/src/components/PlaylistsList/NewPlaylistCard.vue
index 6f7b2fca..a45f732c 100644
--- a/src/components/PlaylistsList/NewPlaylistCard.vue
+++ b/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 />
diff --git a/src/components/PlaylistsList/PlaylistCard.vue b/src/components/PlaylistsList/PlaylistCard.vue
index 7ed50a5a..0254fe9b 100644
--- a/src/components/PlaylistsList/PlaylistCard.vue
+++ b/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 {
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index b5fab453..20b39b7e 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/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;
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 1868c78f..1168e16f 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/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;
diff --git a/src/layouts/HeaderContentBottom.vue b/src/layouts/HeaderContentBottom.vue
index 0231e8b7..e377d4d3 100644
--- a/src/layouts/HeaderContentBottom.vue
+++ b/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>
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 990cbedc..4b87297d 100644
--- a/src/stores/search.ts
+++ b/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;
       }