further refactor paddings and colors

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;
-  overflow: hidden;
+  padding: 0 0 0 0;
 }
 
 .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/>