more refactoring

src/components/Search/AlbumGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="albums-results">
-    <div class="heading theme">ALBUMS</div>
+    <div class="heading">Albums</div>
     <div class="grid">
       <AlbumCard v-for="album in albums" :key="album" :album="album" />
     </div>
@@ -39,16 +39,17 @@ export default {
   padding: $small;
   overflow-x: hidden;
   border: solid 2px $theme;
+  
 
   .result-item:hover {
-    border: solid 2px $theme;
+    background-color: $gray3;
   }
 
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
-    gap: $small;
+    gap: 1rem;
   }
 }
 </style>

src/components/Search/ArtistGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="artists-results">
-    <div class="heading theme">ARTISTS</div>
+    <div class="heading">Artists</div>
     <div class="grid">
       <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
     </div>
@@ -31,23 +31,26 @@ export default {
 </script>
 
 <style lang="scss">
-
 .right-search .artists-results {
   border-radius: 0.5rem;
-  background: #1214178c;
   padding: $small;
   margin-bottom: $small;
   border: solid 2px $theme;
 
-  .xartist:hover {
-    border: solid 2px $theme;
+
+  .xartist {
+    background: linear-gradient(
+      to bottom,
+      $gray2 20%,
+      $gray4 50%,
+      $gray 80%
+    );
   }
 
-  
-
   .grid {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: .75rem;
   }
 }
 </style>

src/components/Search/LoadMore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="morexx">
-    <button @click="loadMore" class="theme">
+    <button @click="loadMore" class="">
       <div class="text">Load More</div>
     </button>
   </div>
@@ -27,9 +27,19 @@ export default {
   margin-top: $small;
 
   button {
+    border-radius: 1.5rem;
     height: 2.5rem;
-    width: 10rem;
+    width: 15rem;
     display: grid;
+    transition: all 0.5s ease;
+    color: rgba(255, 255, 255, 0.87) !important;
+    background-color: transparent;
+    border: solid 1px $gray;
+
+    &:hover {
+      background-color: $gray !important;
+      width: 50%;
+    }
   }
 }
 </style>

src/components/Search/Options.vue

@@ -68,6 +68,7 @@ export default {
     overflow: hidden;
     transition: all 0.2s ease-in-out;
     position: relative;
+    background-color: $gray4;
 
     .title {
       position: absolute;

src/components/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tracks-results" v-if="tracks">
-    <div class="heading theme">TRACKS</div>
+    <div class="heading">Tracks</div>
     <div class="items">
       <table>
         <tbody>