remove background colors

-
try to imitate Google's design of things
it makes UI look declattered
-

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;

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;