color changes in search

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>