convert $small padding -> $smaller padding

src/assets/css/Search/Search.scss

@@ -1,6 +1,5 @@
 .right-search {
   position: relative;
-  border-radius: $small;
   background-color: #03000eab;
   display: grid;
   grid-template-rows: min-content 1fr;

src/assets/css/global.scss

@@ -16,6 +16,7 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
+  overflow: hidden;
 }
 
 .heading {
@@ -39,7 +40,7 @@ a {
 }
 
 .border {
-  border: solid 1px rgba(39, 38, 38, 0.329);
+  border: solid 1px #27262654;
 }
 
 .separator {
@@ -88,9 +89,6 @@ button {
     "bottom-bar bottom-bar bottom-bar";
   width: 100vw;
   height: 100vh;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   background: rgba(0, 0, 0, 0.575);
 }
 
@@ -133,8 +131,9 @@ button {
 
 .content {
   grid-area: content;
-  border-radius: 0.25rem;
   overflow: hidden;
+  padding: 0;
+  border-left: solid 1px #27262654;
 }
 
 .r-sidebar {

src/components/AlbumsExplorer/AlbumList.vue

@@ -153,7 +153,7 @@ export default {
       }
 
       &:hover {
-        background-color: rgb(87, 74, 74);
+        background-color: #574a4a;
 
         .play {
           transition: 0.5s all ease;

src/components/FolderView/FolderList.vue

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

src/components/RightSideBar/Home/Main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-home rounded border">
+  <div class="r-home border">
    <NowPlaying />
    <Recommendations />
   </div>
@@ -10,7 +10,7 @@
   height: 100%;
   width: 31rem;
   background-color: $card-dark;
-  padding: $small;
+  padding: $smaller $small;
 }
 </style>
 

src/components/RightSideBar/Main.vue

@@ -13,7 +13,7 @@
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys card-dark border">
+      <div class="tab-keys card-dark">
         <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
       </div>
     </div>
@@ -26,6 +26,7 @@ import Search from "../Search.vue";
 import UpNext from "./Queue.vue";
 import Tabs from "./Tabs.vue";
 import Main from "./Home/Main.vue";
+import perks from "../../composables/perks";
 
 const DashBoard = Main;
 
@@ -40,22 +41,29 @@ const default_tab = tabs.home;
 const current_tab = ref(default_tab);
 
 function changeTab(tab) {
-  current_tab.value = tab;
+  new Promise((resolve) => {
+    current_tab.value = tab;
+    resolve();
+    setTimeout(() => {}, 300);
+  }).then(() => {
+    if (tab === tabs.queue) {
+      perks.focusCurrent();
+    }
+  });
 }
 </script>
 
 <style lang="scss">
 .r-sidebar {
-  width: 34.5em;
-  margin: $small 0 $small 0;
-  
-  @include phone-only {
-    display: none;
-  }
+  width: 34em;
 
-  @include tablet-landscape {
-    width: 3rem;
-  }
+  // @include phone-only {
+  //   display: none;
+  // }
+
+  // @include tablet-landscape {
+  //   width: 3rem;
+  // }
 
   .grid {
     height: 100%;
@@ -66,9 +74,9 @@ function changeTab(tab) {
       grid-area: content;
       width: 31rem;
 
-      @include tablet-landscape {
-        display: none;
-      }
+      // @include tablet-landscape {
+      //   display: none;
+      // }
 
       .r-search {
         height: 100%;
@@ -84,12 +92,14 @@ function changeTab(tab) {
     }
 
     .tab-keys {
+      width: 3rem;
       right: 0;
       height: 100%;
       position: absolute;
       grid-area: tabs;
-      padding: $small;
-      border-radius: $small 0 0 $small;
+      // padding: $small 0;
+      border-radius: 0;
+      overflow: hidden;
     }
   }
 }

src/components/RightSideBar/Queue.vue

@@ -71,7 +71,6 @@ export default {
 <style lang="scss">
 .up-next {
   background-color: $card-dark;
-  border-radius: 0.5rem;
   padding: $small;
   overflow: hidden;
   height: 100%;

src/components/RightSideBar/Tabs.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="r-tabs">
-    <button v-for="tab in props.tabs"
+    <div v-for="tab in props.tabs"
     @click="changeTab(tab)"
     :key="tab"
-      class="image t-item rounded"
+      class="image t-item"
       :class="{ active_tab: props.current_tab == tab }, `${tab}`"
-    ></button>
+    ></div>
     <div>
     </div>
   </div>
@@ -33,31 +33,40 @@ function changeTab(tab) {
   display: flex;
   flex-direction: column;
   gap: $small;
+  margin-top: $small;
+  margin-left: $small;
 
   .t-item {
-    width: 2rem;
-    height: 2rem;
+    float: right;
+    width: 100%;
+    height: 2.45rem;
     background-size: 1.5rem;
+    border-radius: 0;
+      border-radius: $small 0 0 $small;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.281);
+    }
   }
 
   .active_tab {
     border-right: solid;
-    border-radius: $small 0 0 $small;
+    background-color: rgba(17, 123, 223, 0.192);
   }
 
   .search {
     background-image: url("../../assets/icons/search.svg");
-    background-color: rgba(35, 35, 66, 0.247);
+    // background-color: rgba(35, 35, 66, 0.247);
   }
 
   .queue {
     background-image: url("../../assets/icons/queue.svg");
-    background-color: rgba(46, 25, 33, 0.445);
+    // background-color: rgba(46, 25, 33, 0.445);
   }
 
   .home {
     background-image: url("../../assets/icons/dashboard.svg");
-    background-color: rgba(148, 102, 50, 0.445);
+    // background-color: rgba(148, 102, 50, 0.445);
   }
 }
 </style>

src/components/shared/SongItem.vue

@@ -150,7 +150,7 @@ export default {
     }
     & {
       & td {
-        background-color: rgb(5, 80, 150);
+        background-color: #3131313b;
       }
 
       td:first-child {

src/components/shared/TrackItem.vue

@@ -66,7 +66,6 @@ const playThis = (song) => {
 
   &:hover {
     cursor: pointer;
-    background-color: $blue;
   }
 
   hr {

src/views/FolderView.vue

@@ -131,7 +131,7 @@ export default {
   background-color: $card-dark;
   padding: 4rem $small 0 $small;
   overflow: hidden;
-  margin: $small 0 $small 0;
+  margin: $smaller;
 }
 
 #f-view-parent .fixed {

src/views/PlaylistView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="playlist-view rounded">
+  <div class="playlist-view">
     <Header :playlist_info="playlist_info" />
     <div class="separator no-border"></div>
 
@@ -40,8 +40,8 @@ export default {
 
 <style lang="scss">
 .playlist-view {
-  height: calc(100% - 1rem);
-  margin-top: $small;
+  height: calc(100% - $small);
+  margin: $smaller $smaller 0 $smaller;
   overflow: auto;
 
   &::-webkit-scrollbar {
@@ -53,4 +53,4 @@ export default {
     min-height: 100%;
   }
 }
-</style>
+</style>