add gradients to search grids

src/components/Search/AlbumGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="albums-results">
-    <div class="heading">ALBUMS</div>
+    <div class="heading theme">ALBUMS</div>
     <div class="grid">
       <AlbumCard v-for="album in albums" :key="album" :album="album" />
     </div>
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style lang="scss">
-$theme: #353333;
+$theme: #6405d1;
 
 .right-search .albums-results {
   border-radius: 0.5rem;
@@ -45,13 +45,13 @@ $theme: #353333;
     border: solid 2px $theme;
   }
 
-  .heading {
-    background-color: $theme;
-    color: #fff;
-  }
-
-  .morexx > button {
-    background-color: $theme !important;
+  .theme {
+    background-image: linear-gradient(
+      45deg,
+      #380079 20%,
+      #6405d1 50%,
+      #1b0342 100%
+    );
     color: #fff;
   }
 

src/components/Search/ArtistGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="artists-results">
-    <div class="heading">ARTISTS</div>
+    <div class="heading theme">ARTISTS</div>
     <div class="grid">
       <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
     </div>
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style lang="scss">
-$theme: #585858cc;
+$theme: #464545fd;
 
 .right-search .artists-results {
   border-radius: 0.5rem;
@@ -44,13 +44,13 @@ $theme: #585858cc;
     border: solid 2px $theme;
   }
 
-  .heading {
-    background-color: $theme;
-    color: #fff;
-  }
-
-  .morexx > button {
-    background-color: $theme !important;
+  .theme {
+    background-image: linear-gradient(
+      45deg,
+      #141414 0%,
+      #464545fd 50%,
+      #111111 100%
+    );
     color: #fff;
   }
 

src/components/Search/LoadMore.vue

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

src/components/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tracks-results" v-if="tracks">
-    <div class="heading">TRACKS</div>
+    <div class="heading theme">TRACKS</div>
     <div class="items">
       <table>
         <tbody>
@@ -39,20 +39,20 @@ function loadMore() {
 </script>
 
 <style lang="scss">
-$theme: rgb(86, 86, 87);
+$theme: #0056f5;
 
 .right-search .tracks-results {
   border-radius: 0.5rem;
   padding: $small;
   border: 2px solid $theme;
 
-  .heading {
-    background-color: $theme;
-    color: #fff;
-  }
-
-  .morexx > button {
-    background-color: $theme !important;
+  .theme {
+    background-image: linear-gradient(
+      45deg,
+      #21216b 20%,
+      $theme 50%,
+      #16266b 100%
+    );
     color: #fff;
   }
 }