From f9cceed2ba25c28ba066a703f45f9e2864ada5cb Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 22 Feb 2022 20:56:13 +0300
Subject: [PATCH] add gradients to search grids

---
 src/assets/css/Search/Search.scss      |  5 +++++
 src/components/RightSideBar/Search.vue |  8 ++++----
 src/components/Search/AlbumGrid.vue    | 18 +++++++++---------
 src/components/Search/ArtistGrid.vue   | 18 +++++++++---------
 src/components/Search/LoadMore.vue     |  2 +-
 src/components/Search/TracksGrid.vue   | 18 +++++++++---------
 6 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/assets/css/Search/Search.scss b/src/assets/css/Search/Search.scss
index fa8db89..050ce05 100644
--- a/src/assets/css/Search/Search.scss
+++ b/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;
diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue
index 28aa968..918f54e 100644
--- a/src/components/RightSideBar/Search.vue
+++ b/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 class="no-res-text">Find your music 🔍😀</div>
+      <div v-else-if="query.length === 0" class="no-res border rounded">
+        <div class="no-res-text">👻 Find your music</div>
       </div>
     </div>
   </div>
diff --git a/src/components/Search/AlbumGrid.vue b/src/components/Search/AlbumGrid.vue
index f8b9703..2203e4f 100644
--- a/src/components/Search/AlbumGrid.vue
+++ b/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;
   }
 
diff --git a/src/components/Search/ArtistGrid.vue b/src/components/Search/ArtistGrid.vue
index e602deb..b3d1501 100644
--- a/src/components/Search/ArtistGrid.vue
+++ b/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;
   }
 
diff --git a/src/components/Search/LoadMore.vue b/src/components/Search/LoadMore.vue
index 9cf7ce5..457d30d 100644
--- a/src/components/Search/LoadMore.vue
+++ b/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>
diff --git a/src/components/Search/TracksGrid.vue b/src/components/Search/TracksGrid.vue
index cae78bf..85c58b7 100644
--- a/src/components/Search/TracksGrid.vue
+++ b/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;
   }
 }