From 7b2e162ed40de7b266ae02cfff6c22aa9533589a Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 3 Aug 2022 14:07:53 +0300
Subject: [PATCH] redesign the load more button to match other buttons

---
 src/assets/scss/Global/basic.scss             |  9 ++++++++
 .../RightSideBar/Queue/QueueActions.vue       |  1 -
 .../RightSideBar/Search/AlbumGrid.vue         | 23 ++-----------------
 .../RightSideBar/Search/ArtistGrid.vue        |  9 +-------
 .../RightSideBar/Search/LoadMore.vue          | 19 ++++-----------
 src/components/RightSideBar/Search/Main.vue   | 14 ++++-------
 .../RightSideBar/Search/TabsWrapper.vue       |  2 --
 src/components/shared/AlbumCard.vue           |  1 +
 src/components/shared/ArtistCard.vue          |  2 +-
 9 files changed, 23 insertions(+), 57 deletions(-)

diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
index a7b45d22..6b5b3024 100644
--- a/src/assets/scss/Global/basic.scss
+++ b/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 {
diff --git a/src/components/RightSideBar/Queue/QueueActions.vue b/src/components/RightSideBar/Queue/QueueActions.vue
index e5445506..2ca7034c 100644
--- a/src/components/RightSideBar/Queue/QueueActions.vue
+++ b/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);
diff --git a/src/components/RightSideBar/Search/AlbumGrid.vue b/src/components/RightSideBar/Search/AlbumGrid.vue
index 5872886b..8024edaa 100644
--- a/src/components/RightSideBar/Search/AlbumGrid.vue
+++ b/src/components/RightSideBar/Search/AlbumGrid.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="albums-results">
-    <div class="grid">
+  <div class="artists-results">
+    <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>
diff --git a/src/components/RightSideBar/Search/ArtistGrid.vue b/src/components/RightSideBar/Search/ArtistGrid.vue
index c0811186..534aaeef 100644
--- a/src/components/RightSideBar/Search/ArtistGrid.vue
+++ b/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>
diff --git a/src/components/RightSideBar/Search/LoadMore.vue b/src/components/RightSideBar/Search/LoadMore.vue
index aae43d79..b54845d9 100644
--- a/src/components/RightSideBar/Search/LoadMore.vue
+++ b/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 {
-    height: 2.5rem;
-    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;
-    }
+  button {
+    padding: 0 1rem !important;
   }
 }
 </style>
diff --git a/src/components/RightSideBar/Search/Main.vue b/src/components/RightSideBar/Search/Main.vue
index ad6c1102..6567a934 100644
--- a/src/components/RightSideBar/Search/Main.vue
+++ b/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>
diff --git a/src/components/RightSideBar/Search/TabsWrapper.vue b/src/components/RightSideBar/Search/TabsWrapper.vue
index 1b35d4f7..07e96cd9 100644
--- a/src/components/RightSideBar/Search/TabsWrapper.vue
+++ b/src/components/RightSideBar/Search/TabsWrapper.vue
@@ -77,8 +77,6 @@ const s = useSearchStore();
     overflow: auto;
     overflow-x: hidden;
     padding-bottom: 1rem;
-
-    // overflow: hidden;
   }
 }
 </style>
diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue
index 5b9730e8..5fe01412 100644
--- a/src/components/shared/AlbumCard.vue
+++ b/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;
diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue
index 159e87a5..37dc535e 100644
--- a/src/components/shared/ArtistCard.vue
+++ b/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;