Introduce tabs to right sidebar

- new icons
- rename upnext.vue to queue.vue
- other tiny changes

src/components/Search/AlbumGrid.vue

@@ -35,7 +35,6 @@ export default {
   border-radius: 0.5rem;
   background: #0f131b44;
 
-  margin-left: $small;
   margin-top: $small;
   padding: $small 0;
   overflow-x: hidden;

src/components/Search/ArtistGrid.vue

@@ -38,8 +38,8 @@ export default {
 .right-search .artists-results {
   border-radius: 0.5rem;
   background: #1214178c;
-  margin: 0 0 0 $small;
   padding: $small 0;
+  margin-bottom: $small;
 
   .grid {
     padding: 0 0 0 $small;

src/components/Search/Filters.vue

@@ -29,9 +29,10 @@ export default {
 <style lang="scss">
 .right-search .filter {
   display: flex;
-  margin-left: 3rem;
+  margin-left: 2rem;
   height: 2rem;
 
+
   .item {
     &:hover {
       width: 4rem;

src/components/Search/LoadMore.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="morexx">
     <button @click="loadMore">
-      <div class="text">Load All</div>
+      <div class="text">Load More</div>
     </button>
   </div>
 </template>

src/components/Search/Loader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
-    <div class="content" v-if="!loading">/</div>
+    <div v-if="!loading">😹</div>
   </div>
 </template>
 
@@ -18,15 +18,14 @@ export default {
 <style lang="scss">
 .loaderx {
   position: absolute;
-  left: 0.65rem;
   top: 0.65rem;
   width: 1.5rem;
   height: 1.5rem;
+  border-radius: 50%;
 }
 
 .loader {
   border: dotted $blue;
-  border-radius: 50%;
   animation: spin 0.25s linear infinite;
 
   @keyframes spin {
@@ -40,8 +39,7 @@ export default {
 }
 
 .not_loader {
-  border: solid 1px;
-  border-radius: 50%;
-  background-image: url("");
+  display: grid;
+  place-items: center;
 }
 </style>

src/components/Search/Options.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="options" v-if="magic_flag">
+  <div class="options border rounded">
     <div class="item info">Filter by:</div>
     <div
       class="item"
@@ -54,6 +54,7 @@ export default {
 <style lang="scss">
 .right-search .options {
   display: flex;
+  margin-bottom: $small;
 
   .item {
     margin: $small;

src/components/Search/TracksGrid.vue

@@ -41,7 +41,6 @@ function loadMore() {
 <style lang="scss">
 .right-search .tracks-results {
   border-radius: 0.5rem;
-  margin-left: $small;
   padding: $small;
 }
 </style>