refactor colors

src/components/Search/AlbumGrid.vue

@@ -36,14 +36,13 @@ export default {
 <style lang="scss">
 .right-search .albums-results {
   border-radius: 0.5rem;
-  background: #0f131b44;
   margin-top: $small;
   padding: $small;
   overflow-x: hidden;
-  border: solid 1px $gray;
+  border: solid 1px $gray3;
 
   .result-item:hover {
-    background-color: $gray3;
+    background-color: $gray4;
   }
 
   .grid {

src/components/Search/ArtistGrid.vue

@@ -38,22 +38,16 @@ export default {
   border-radius: 0.5rem;
   padding: $small;
   margin-bottom: $small;
-  border: solid 1px $gray;
-  background-color: #150d167c;
+  border: solid 1px $gray3;
 
   .xartist {
-    background: linear-gradient(
-      to bottom,
-      $gray2 20%,
-      $gray4 50%,
-      $gray 80%
-    );
+    background-color: $gray;
   }
 
   .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: .75rem;
+    gap: 0.75rem;
   }
 }
 </style>

src/components/Search/Filters.vue

@@ -29,11 +29,12 @@ export default {
 <style lang="scss">
 .gsearch-input .filter {
   display: flex;
-  // height: 2rem;
-  // border: solid;
 
   .item {
     transition: all 0.2s ease-in-out;
+    background-color: $gray3;
+    height: 2.5rem;
+
     &:hover {
       width: 4rem;
 

src/components/Search/LoadMore.vue

@@ -33,11 +33,11 @@ export default {
     display: grid;
     transition: all 0.5s ease;
     color: rgba(255, 255, 255, 0.87) !important;
-    background-color: transparent;
-    border: solid 1px $gray;
+    background-color: $accent;
+    // border: solid 1px $gray;
 
     &:hover {
-      background-color: $gray !important;
+      background-color: $blue !important;
       width: 50%;
     }
   }

src/components/Search/Options.vue

@@ -48,6 +48,8 @@ const options = [
 .right-search .options {
   display: flex;
   margin-bottom: $small;
+    border: solid 1px $gray3;
+  // background: $gray3;
 
   .item {
     margin: $small;
@@ -58,7 +60,7 @@ const options = [
     overflow: hidden;
     transition: all 0.2s ease-in-out;
     position: relative;
-    background-color: $gray4;
+    background-color: $gray3;
 
     .title {
       position: absolute;
@@ -75,6 +77,7 @@ const options = [
 
     &:hover {
       width: 5.5rem;
+      background-color: $gray5;
 
       .title {
         visibility: visible;

src/components/Search/TracksGrid.vue

@@ -45,6 +45,7 @@ function loadMore() {
 .right-search .tracks-results {
   border-radius: 0.5rem;
   padding: $small;
-  border: 1px solid $gray;
+  border: 1px solid $gray3;
+  // background: ;
 }
 </style>