color changes in search

src/components/Search/AlbumGrid.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="albums-results border">
-    <div class="heading">💿 ALBUMS</div>
+  <div class="albums-results">
+    <div class="heading">ALBUMS</div>
     <div class="grid">
       <AlbumCard v-for="album in albums" :key="album" :album="album" />
     </div>
@@ -31,19 +31,34 @@ export default {
 </script>
 
 <style lang="scss">
+$theme: #353333;
+
 .right-search .albums-results {
   border-radius: 0.5rem;
   background: #0f131b44;
   margin-top: $small;
-  padding-bottom: $small;
-  padding-top: $small;
+  padding: $small;
   overflow-x: hidden;
+  border: solid 2px $theme;
+
+  .result-item:hover {
+    border: solid 2px $theme;
+  }
+
+  .heading {
+    background-color: $theme;
+    color: #fff;
+  }
+
+  .morexx > button {
+    background-color: $theme !important;
+    color: #fff;
+  }
 
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
-    padding: $small $small 0 $small;
     gap: $small;
   }
 }

src/components/Search/ArtistGrid.vue

@@ -1,12 +1,8 @@
 <template>
-  <div class="artists-results border">
-    <div class="heading">😳 ARTISTS</div>
+  <div class="artists-results">
+    <div class="heading">ARTISTS</div>
     <div class="grid">
-      <ArtistCard
-        v-for="artist in artists"
-        :key="artist"
-        :artist="artist"
-      />
+      <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
     </div>
     <LoadMore v-if="more" @loadMore="loadMore" />
   </div>
@@ -35,17 +31,32 @@ export default {
 </script>
 
 <style lang="scss">
+$theme: #585858cc;
+
 .right-search .artists-results {
   border-radius: 0.5rem;
   background: #1214178c;
-  padding: $small 0;
+  padding: $small;
   margin-bottom: $small;
+  border: solid 2px $theme;
+
+  .xartist:hover {
+    border: solid 2px $theme;
+  }
+
+  .heading {
+    background-color: $theme;
+    color: #fff;
+  }
+
+  .morexx > button {
+    background-color: $theme !important;
+    color: #fff;
+  }
 
   .grid {
-    padding: $small $small 0 $small;
     display: flex;
     flex-wrap: wrap;
-    gap: $small;
   }
 }
-</style>
+</style>

src/components/Search/TracksGrid.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="tracks-results border" v-if="tracks">
-    <div class="heading">🎵 TRACKS</div>
+  <div class="tracks-results" v-if="tracks">
+    <div class="heading">TRACKS</div>
     <div class="items">
       <table>
         <tbody>
@@ -31,7 +31,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["loadMore"])
+const emit = defineEmits(["loadMore"]);
 
 function loadMore() {
   emit("loadMore", "tracks");
@@ -39,8 +39,21 @@ function loadMore() {
 </script>
 
 <style lang="scss">
+$theme: rgb(86, 86, 87);
+
 .right-search .tracks-results {
   border-radius: 0.5rem;
-  padding: 1rem $small;
+  padding: $small;
+  border: 2px solid $theme;
+
+  .heading {
+    background-color: $theme;
+    color: #fff;
+  }
+
+  .morexx > button {
+    background-color: $theme !important;
+    color: #fff;
+  }
 }
 </style>