add gradients to search grids

src/assets/css/Search/Search.scss

@@ -10,6 +10,11 @@
   .no-res {
     text-align: center;
     display: grid;
+    height: calc(100% - $small);
+    place-items: center;
+    font-size: 2rem;
+    transition: all 0.3s ease;
+    line-height: 4rem !important;
 
     .highlight {
       padding: $small;

src/components/RightSideBar/Search.vue

@@ -30,7 +30,7 @@
           :albums="albums.albums"
           :more="albums.more"
       />
-      <div class="separator no-border"></div>
+      <div class="separator no-border" v-if="albums.albums.length"></div>
       <ArtistGrid
           v-if="artists.artists.length"
           :artists="artists.artists"
@@ -42,14 +42,14 @@
           !tracks.tracks.length &&
           !albums.albums.length && query.length !== 0
         "
-          class="no-res"
+          class="no-res border rounded"
       >
         <div class="no-res-text">
           No results for <span class="highlight rounded">{{ query }}</span>
         </div>
       </div>
-      <div v-else-if="query.length === 0" class="no-res">
+      <div v-else-if="query.length === 0" class="no-res border rounded">
-        <div class="no-res-text">Find your music 🔍😀</div>
+        <div class="no-res-text">👻 Find your music</div>
       </div>
     </div>
   </div>

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 {
+  .theme {
-    background-color: $theme;
+    background-image: linear-gradient(
-    color: #fff;
+      45deg,
-  }
+      #380079 20%,
-
+      #6405d1 50%,
-  .morexx > button {
+      #1b0342 100%
-    background-color: $theme !important;
+    );
     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 {
+  .theme {
-    background-color: $theme;
+    background-image: linear-gradient(
-    color: #fff;
+      45deg,
-  }
+      #141414 0%,
-
+      #464545fd 50%,
-  .morexx > button {
+      #111111 100%
-    background-color: $theme !important;
+    );
     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 {
+  .theme {
-    background-color: $theme;
+    background-image: linear-gradient(
-    color: #fff;
+      45deg,
-  }
+      #21216b 20%,
-
+      $theme 50%,
-  .morexx > button {
+      #16266b 100%
-    background-color: $theme !important;
+    );
     color: #fff;
   }
 }