redesign the load more button to match other buttons

src/assets/scss/Global/basic.scss

@@ -59,6 +59,15 @@ button {
   align-items: center;
   justify-content: center;
   height: 2rem;
+  background-image: linear-gradient(70deg, $gray3, $gray2);
+
+  &:hover {
+    background-image: linear-gradient(70deg, #234ece, $darkblue);
+  }
+}
+
+.btn-active {
+  background-image: linear-gradient(70deg, #234ece, $darkblue);
 }
 
 .separator {

src/components/RightSideBar/Queue/QueueActions.vue

@@ -39,7 +39,6 @@ const queue = useQueueStore();
   .action {
     padding: $smaller;
     padding-right: $small;
-    background-image: linear-gradient(70deg, $gray3, $gray2);
 
     svg {
       transform: scale(0.8);

src/components/RightSideBar/Search/AlbumGrid.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="albums-results">
+  <div class="artists-results">
-    <div class="grid">
+    <div class="search-results-grid">
       <AlbumCard
         v-for="album in search.albums.value"
         :key="`${album.artist}-${album.title}`"
@@ -23,22 +23,3 @@ function loadMore() {
   search.loadAlbums(search.loadCounter.albums);
 }
 </script>
-
-<style lang="scss">
-.right-search .albums-results {
-  border-radius: 0.5rem;
-  overflow-x: hidden;
-  margin: 0 1rem;
-
-  .result-item:hover {
-    background-color: $gray4;
-  }
-
-  .grid {
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: 0.75rem;
-  }
-}
-</style>

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="artists-results" v-if="search.artists.value.length">
-    <div class="grid">
+    <div class="search-results-grid">
       <ArtistCard
         v-for="artist in search.artists.value"
         :key="artist.image"
@@ -35,15 +35,8 @@ function loadMore() {
     .artist-image {
       width: 7rem;
       height: 7rem;
-      aspect-ratio: 1 !important;
       object-fit: cover;
     }
   }
-
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
-  }
 }
 </style>

src/components/RightSideBar/Search/LoadMore.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="morexx">
-    <div @click="loadMore" class="btn circular">
+    <button @click="loadMore" class="btn">
       <div class="text">Load More</div>
-    </div>
+    </button>
   </div>
 </template>
 
@@ -22,19 +22,8 @@ function loadMore() {
   place-items: center;
   margin-top: $small;
 
-  .btn {
+  button {
-    height: 2.5rem;
+    padding: 0 1rem !important;
-    width: 15rem;
-    display: grid;
-    place-items: center;
-    transition: all 0.5s ease;
-    background-image: linear-gradient(37deg, $red, $blue);
-    cursor: pointer;
-
-    &:hover {
-      background-color: $blue !important;
-      width: 12rem;
-    }
   }
 }
 </style>

src/components/RightSideBar/Search/Main.vue

@@ -42,6 +42,11 @@ import TracksGrid from "./TracksGrid.vue";
     font-size: 2rem;
     color: $white;
   }
+  .search-results-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.75rem;
+  }
 
   .input {
     display: flex;
@@ -49,13 +54,4 @@ import TracksGrid from "./TracksGrid.vue";
     position: relative;
   }
 }
-
-.right-search .scrollable {
-  overflow-y: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
 </style>

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -77,8 +77,6 @@ const s = useSearchStore();
     overflow: auto;
     overflow-x: hidden;
     padding-bottom: 1rem;
-
-    // overflow: hidden;
   }
 }
 </style>

src/components/shared/AlbumCard.vue

@@ -41,6 +41,7 @@ defineProps<{
   background-color: $gray4;
   color: #ffffffde !important;
   transition: all 0.5s ease;
+  min-width: 8.5rem;
 
   .img {
     position: relative;

src/components/shared/ArtistCard.vue

@@ -25,7 +25,7 @@ defineProps<{
   overflow: hidden;
   position: relative;
 
-  min-width: 8.25em;
+  min-width: 8.5em;
   height: 11em;
   border-radius: 0.75rem;
   display: flex;