From 6d6d2831c09b7ef1630ea2e72572fc5ed898adfb Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 12 Feb 2022 11:32:50 +0300
Subject: [PATCH] further refactor paddings and colors

---
 src/App.vue                               | 2 +-
 src/assets/css/Search/Search.scss         | 3 +--
 src/assets/css/global.scss                | 2 +-
 src/components/AlbumView/Header.vue       | 8 ++++++--
 src/components/FolderView/FolderList.vue  | 3 +--
 src/components/LeftSidebar/Navigation.vue | 2 ++
 src/components/PlaylistView/Header.vue    | 1 +
 src/components/RightSideBar/Home/Main.vue | 2 +-
 src/components/RightSideBar/Main.vue      | 4 ++--
 src/components/RightSideBar/Queue.vue     | 6 +-----
 src/components/Search.vue                 | 2 +-
 src/views/AlbumView.vue                   | 3 ++-
 src/views/FolderView.vue                  | 5 ++---
 src/views/PlaylistView.vue                | 7 ++++---
 14 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb95eead..239ca7f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@
         <AlbumArt :collapsed="collapsed" />
       </div>
     </div>
-    <div class="content">
+    <div class="content card-dark">
       <div class="search-box"></div>
       <router-view />
     </div>
diff --git a/src/assets/css/Search/Search.scss b/src/assets/css/Search/Search.scss
index e3e97dd4..79d7e1aa 100644
--- a/src/assets/css/Search/Search.scss
+++ b/src/assets/css/Search/Search.scss
@@ -1,6 +1,6 @@
 .right-search {
   position: relative;
-  background-color: #03000eab;
+  background-color: $card-dark;
   display: grid;
   grid-template-rows: min-content 1fr;
   overflow: hidden;
@@ -10,7 +10,6 @@
 
   .no-res {
     text-align: center;
-    // height: calc(100% - 1rem);
     display: grid;
 
     .highlight {
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 7faa75d3..abf033b3 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -183,7 +183,7 @@ button {
 /* Handle */
 
 ::-webkit-scrollbar-thumb {
-  background: grey;
+  background: rgba(128, 128, 128, 0.322);
   border-radius: 1rem;
 }
 
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index ba9c3fa1..8008a820 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -146,16 +146,20 @@ export default {
   display: flex;
   align-items: center;
   padding: 0 1rem 0 1rem;
+  position: relative;
+  padding-left: 14rem;
 
   .art {
-    width: 14rem;
+    position: absolute;
+    left: $small;
+    width: 13rem;
     height: 13rem;
     background: no-repeat center/cover;
     margin-right: 1rem;
   }
 
   .info {
-    width: calc(100% - 13rem);
+    width: 100%;
     height: calc(100% - 1rem);
     display: flex;
     flex-direction: column;
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index 51a97fc7..170110c4 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -23,8 +23,7 @@ const props = defineProps({
 
 <style lang="scss">
 .f-container {
-  padding: $small 0 $smaller 0;
-  overflow: hidden;
+  padding: 0 0 0 0;
 }
 
 .no_f {
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 8ab65d07..6cf956af 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -87,6 +87,8 @@ const props = defineProps({
     padding: 0.6rem 0 0.6rem 0;
 
     &:hover {
+      background-color: rgba(73, 73, 73, 0.13);
+
       #home-icon {
         background-color: rgba(145, 58, 58, 0.555);
       }
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 37a84b54..be286964 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -29,6 +29,7 @@
   height: 14rem;
   background-image: url("../../assets/images/eggs.jpg");
   position: relative;
+  margin-top: $small;
 
   .last-updated {
     position: absolute;
diff --git a/src/components/RightSideBar/Home/Main.vue b/src/components/RightSideBar/Home/Main.vue
index 345013e7..b367261c 100644
--- a/src/components/RightSideBar/Home/Main.vue
+++ b/src/components/RightSideBar/Home/Main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="r-home border">
+  <div class="r-home">
    <NowPlaying />
    <Recommendations />
   </div>
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index c00fd9d6..769a0aa5 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="r-sidebar">
     <div class="grid">
-      <div class="r-content">
+      <div class="r-content border">
         <div class="r-dash" v-show="current_tab == tabs.home">
           <DashBoard />
         </div>
@@ -13,7 +13,7 @@
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys card-dark">
+      <div class="tab-keys card-dark border">
         <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
       </div>
     </div>
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 53b67587..96ed47ed 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="up-next border">
+  <div class="up-next">
     <p class="heading">COMING UP NEXT</p>
     <div class="r-grid">
       <div class="main-item h-1 border" @click="playNext">
@@ -129,10 +129,6 @@ export default {
       overflow: auto;
       background-color: $card-dark;
       scrollbar-color: grey transparent;
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
     }
   }
 }
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 455246dd..59ef08f0 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-search border">
+  <div class="right-search">
     <div>
       <div class="input">
         <Loader/>
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index ddc955ad..ab4630aa 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -71,8 +71,9 @@ export default {
 .al-view {
   height: calc(100% - 1rem);
   overflow: auto;
-  margin-top: $small;
+  margin: $smaller $small;
   scrollbar-width: none;
+
   .songs {
     padding: $small;
     background-color: $card-dark;
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 67cae804..a7c3c102 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="f-view-parent" class="rounded">
+  <div id="f-view-parent" class="card-dark">
     <div class="fixed">
       <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
     </div>
@@ -128,10 +128,9 @@ export default {
 <style lang="scss">
 #f-view-parent {
   position: relative;
-  background-color: $card-dark;
   padding: 4rem $small 0 $small;
   overflow: hidden;
-  margin: $smaller;
+  margin: 0;
 }
 
 #f-view-parent .fixed {
diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue
index c93e36cc..909f69bd 100644
--- a/src/views/PlaylistView.vue
+++ b/src/views/PlaylistView.vue
@@ -3,7 +3,7 @@
     <Header :playlist_info="playlist_info" />
     <div class="separator no-border"></div>
 
-    <div class="songlist rounded border">
+    <div class="songlist rounded">
       <SongList :songs="songs" />
     </div>
     <div class="separator no-border"></div>
@@ -40,9 +40,10 @@ export default {
 
 <style lang="scss">
 .playlist-view {
-  height: calc(100% - $small);
-  margin: $smaller $smaller 0 $smaller;
+  height: calc(100% - 0rem);
+  margin: 0 $small;
   overflow: auto;
+  padding-bottom: $small;
 
   &::-webkit-scrollbar {
     display: none;