further refactor paddings and colors

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>

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 {

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;
 }
 

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;

src/components/FolderView/FolderList.vue

@@ -23,8 +23,7 @@ const props = defineProps({
 
 <style lang="scss">
 .f-container {
-  padding: $small 0 $smaller 0;
+  padding: 0 0 0 0;
-  overflow: hidden;
 }
 
 .no_f {

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);
       }

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;

src/components/RightSideBar/Home/Main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-home border">
+  <div class="r-home">
    <NowPlaying />
    <Recommendations />
   </div>

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>

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;
-      }
     }
   }
 }

src/components/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="right-search border">
+  <div class="right-search">
     <div>
       <div class="input">
         <Loader/>

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;

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 {

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);
+  height: calc(100% - 0rem);
-  margin: $smaller $smaller 0 $smaller;
+  margin: 0 $small;
   overflow: auto;
+  padding-bottom: $small;
 
   &::-webkit-scrollbar {
     display: none;