color changes in search

src/assets/css/Search/Search.scss

@@ -18,12 +18,12 @@
   }
 
   .heading {
-    margin-left: $small;
-    background-color: rgb(3, 54, 112);
-    width: 6rem;
-    padding: $small;
+    padding: $medium;
     border-radius: $small;
     margin-bottom: $small;
+    text-align: center !important;
+    font-size: 1;
+    color: #fff;
   }
 
   .input {
@@ -31,7 +31,6 @@
     align-items: center;
     position: relative;
   }
-  
 }
 
 .right-search .scrollable {
@@ -48,7 +47,7 @@
     width: 100%;
     border-radius: 0.4rem;
     position: relative;
-    
+
     ._loader {
       position: absolute;
       top: 0;
@@ -64,7 +63,7 @@
       font-size: 1rem;
       outline: none;
       transition: all 0.5s ease;
-      padding-left: .75rem;
+      padding-left: 0.75rem;
 
       &:focus {
         transition: all 0.5s ease;

src/components/RightSideBar/Main.vue

@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from "vue";
-import Search from "../Search.vue";
+import Search from "./Search.vue";
 import UpNext from "./Queue.vue";
 import Tabs from "./Tabs.vue";
 import Main from "./Home/Main.vue";
@@ -63,9 +63,9 @@ function changeTab(tab) {
     display: none;
   }
 
-  @include tablet-landscape {
-    width: 3rem;
-  }
+  // @include tablet-landscape {
+  //   width: 3rem;
+  // }
 
   .grid {
     height: 100%;
@@ -77,9 +77,9 @@ function changeTab(tab) {
       width: 29rem;
 
 
-      @include tablet-landscape {
-        display: none;
-      }
+      // @include tablet-landscape {
+      //   display: none;
+      // }
 
       .r-search {
         height: 100%;

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>

src/components/shared/AlbumCard.vue

@@ -31,10 +31,11 @@ export default {
   padding: $small;
   border-radius: .75rem;
   text-align: left !important;
+  border: solid 2px transparent;
 
-  &:hover {
-    background-color: #1b3688cb;
-  }
+  // &:hover {
+  //   background-color: #1b3688cb;
+  // }
 
   .album-art {
     height: 7.5rem;

src/components/shared/ArtistCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="xartist" :style="{ backgroundColor: `#${color}` }">
     <div
-      class="artist-image image"
+      class="artist-image image border-sm"
       :style="{ backgroundImage: `url('${artist.image}')` }"
     ></div>
     <div>
@@ -30,19 +30,17 @@ export default {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  background-color: transparent;
 
   .artist-image {
     width: 7em;
     height: 7em;
-    border: solid;
     border-radius: 60%;
     margin-bottom: $small;
     background-size: 7rem 7rem;
     background-position: center;
     background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;
-    border: solid 1px rgba(5, 5, 5, 0.055);
-    box-shadow: 0 0 80px rgb(0, 0, 0);
   }
 
   &:hover {
@@ -61,4 +59,4 @@ export default {
     max-width: 7rem;
   }
 }
-</style>
+</style>