refactor colors

src/assets/css/BottomBar/BottomBar.scss

@@ -3,7 +3,7 @@
   padding: $small;
 
   .grid {
-    background-color: $gray;
+    background-color: $primary;
     display: grid;
     height: 100%;
     padding-right: $small;

src/assets/css/ProgressBar.scss

@@ -5,36 +5,44 @@ input[type="range"] {
   height: 0.3rem;
   border-radius: 5px;
   background-size: 0 100%;
-  background: $black linear-gradient($blue, $blue) no-repeat;
+  background: $gray linear-gradient($accent, $accent) no-repeat;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+
+    height: 0.9rem;
+    width: 0.9rem;
+    border-radius: 0 50% 50% 0;
+    background: $accent;
+  }
+
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 0rem;
+    border-radius: 50%;
+    background: $accent;
+    border: none;
+  }
+
+  &:hover {
+    &::-moz-range-thumb {
+      height: .8rem;
+    }
+  }
+
+  &::-ms-thumb {
+    -webkit-appearance: none;
+    display: none;
+
+    height: 0.9rem;
+    width: 0.9rem;
+    border-radius: 0 50% 50% 0;
+    background: $accent;
+    border: none;
+  }
 }
 
 /* Input Thumb */
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 0.8rem;
-  width: 0.8rem;
-  border-radius: 50%;
-  background: $blue;
-}
-
-input[type="range"]::-moz-range-thumb {
-  -webkit-appearance: none;
-  height: 0.8rem;
-  width: 0.8rem;
-  border-radius: 50%;
-  background: $blue;
-  border: none;
-}
-
-input[type="range"]::-ms-thumb {
-  -webkit-appearance: none;
-  height: 0.8rem;
-  width: 0.8rem;
-  border-radius: 50%;
-  background: $blue;
-  border: none;
-}
-
 input[type="range"]::-webkit-slider-thumb:hover {
   background: $pink;
 }

src/assets/css/Search/Search.scss

@@ -1,48 +0,0 @@
-.right-search {
-  position: relative;
-  display: grid;
-  grid-template-rows: min-content 1fr;
-  overflow: hidden;
-  width: auto;
-  height: 100%;
-  padding: $small $small 0 0;
-
-  .no-res {
-    text-align: center;
-    display: grid;
-    height: calc(100% - $small);
-    place-items: center;
-    font-size: 2rem;
-    transition: all 0.3s ease;
-    line-height: 4rem !important;
-
-    .highlight {
-      padding: $small;
-      background-color: rgb(29, 26, 26);
-    }
-  }
-
-  .heading {
-    padding: $medium;
-    border-radius: $small;
-    margin-bottom: $small;
-    text-align: center !important;
-    font-size: 2rem;
-    color: $white;
-  }
-
-  .input {
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-}
-
-.right-search .scrollable {
-  overflow-y: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}

src/assets/css/_variables.scss

@@ -36,9 +36,12 @@ $indigo: rgb(94, 92, 230);
 $teal: rgb(64, 200, 224);
 
 // 60 30 10
-$primary: $blue;
+$primary: $gray4;
 $accent: $indigo;
-$cta: $red;
+$cta: $blue;
+$danger: $red;
+$track-hover: $gray4;
+$context: $gray4;
 
 // media query mixins
 @mixin phone-only {

src/assets/css/global.scss

@@ -11,7 +11,7 @@
 
 body {
   margin: 0;
-  background-color: #171c28;
+  background-color: #0f1218;
   
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,

src/components/AlbumView/Header.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="album-h" @contextmenu="hideShowContext" id="album-h">
+  <div class="album-h">
-    <div class="a-header">
+    <div class="a-header rounded">
       <div
-        class="image art shadow-lg"
+        class="image art shadow-lg rounded"
         :style="{
           backgroundImage: `url(&quot;${props.album_info.image}&quot;)`,
         }"
@@ -49,12 +49,6 @@ function playAlbum() {
 
 <style lang="scss">
 .album-h {
-  @include tablet-landscape {
-    grid-template-columns: 1fr;
-  }
-
-  gap: $small;
-  position: relative;
   height: 14rem;
 }
 
@@ -64,6 +58,7 @@ function playAlbum() {
   align-items: center;
   padding: 1rem;
   height: 100%;
+  background-color: $gray4;
   background-image: linear-gradient(
     to bottom,
     $gray3 0%,

src/components/FolderView/FolderItem.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   display: flex;
   align-items: center;
   position: relative;
-  background-color: $gray;
+  background-color: $gray4;
   transition: all 0.2s ease;
   border-radius: .75rem;
 

src/components/FolderView/Header.vue

@@ -18,7 +18,7 @@
       </div>
       <input
         type="text"
-        class="search-input border"
+        class="search-input"
         placeholder="Search this folder"
         v-model="query"
       />
@@ -85,6 +85,7 @@ export default {
     font-size: 1rem;
     line-height: 2.2rem;
     outline: none;
+    border: 1px solid $gray3;
   }
 }
 

src/components/FolderView/SongList.vue

@@ -8,7 +8,7 @@
         <div class="album-header">Album</div>
         <div class="duration-header">Duration</div>
       </div>
-      <div>
+      <div class="songlist">
         <SongItem
           v-for="(song, index) in props.songs"
           :key="song"
@@ -138,5 +138,12 @@ function loadAlbum(title, albumartist) {
       display: none;
     }
   }
+
+  .songlist {
+    .context-on {
+      background-color: $gray4;
+      color: $white !important;
+    }
+  }
 }
 </style>

src/components/RightSideBar/Search.vue

@@ -140,3 +140,54 @@ search.$subscribe((mutation, state) => {
   });
 });
 </script>
+
+<style lang="scss">
+.right-search {
+  position: relative;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+  overflow: hidden;
+  width: auto;
+  height: 100%;
+  padding: $small $small 0 0;
+
+  .no-res {
+    text-align: center;
+    display: grid;
+    height: calc(100% - $small);
+    place-items: center;
+    font-size: 2rem;
+    transition: all 0.3s ease;
+    line-height: 4rem !important;
+
+    .highlight {
+      padding: $small;
+      background-color: rgb(29, 26, 26);
+    }
+  }
+
+  .heading {
+    padding: $medium;
+    border-radius: $small;
+    margin-bottom: $small;
+    text-align: center !important;
+    font-size: 2rem;
+    color: $white;
+  }
+
+  .input {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+}
+
+.right-search .scrollable {
+  overflow-y: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

src/components/RightSideBar/SearchInput.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="gsearch-input">
     <Filters :filters="search.filters" @removeFilter="removeFilter" />
-    <div class="input-loader border">
+    <div class="input-loader">
       <input
         id="search"
+        class="rounded"
         v-model="search.query"
-        placeholder="Aretha Franklin"
+        placeholder="Search"
         type="text"
         @keyup.backspace="removeLastFilter"
       />
@@ -44,8 +45,7 @@ function removeLastFilter() {
 
 <style lang="scss">
 .gsearch-input {
-  margin-top: $small;
+  padding: $small;
-  padding: 0 $small;
   display: flex;
 
   @include tablet-landscape {
@@ -59,7 +59,7 @@ function removeLastFilter() {
 
     ._loader {
       position: absolute;
-      top: -0.25rem;
+      top: -0.15rem;
       right: 2rem;
     }
 
@@ -68,7 +68,8 @@ function removeLastFilter() {
       align-items: center;
       width: 100%;
       border: none;
-      line-height: 2rem;
+      border: solid 1px $primary;
+      line-height: 2.25rem;
       background-color: transparent;
       color: rgb(255, 255, 255);
       font-size: 1rem;

src/components/RightSideBar/Tabs.vue

@@ -25,7 +25,7 @@ const tabs = useTabStore();
   padding: $small;
 
   .cont {
-    background-color: $gray3;
+    background-color: $primary;
     display: flex;
     gap: $small;
     height: 100%;

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;
+  border: solid 1px $gray3;
-  background-color: #150d167c;
 
   .xartist {
-    background: linear-gradient(
+    background-color: $gray;
-      to bottom,
-      $gray2 20%,
-      $gray4 50%,
-      $gray 80%
-    );
   }
 
   .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;
+    background-color: $accent;
-    border: solid 1px $gray;
+    // 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>

src/components/shared/AlbumCard.vue

@@ -4,7 +4,7 @@
       name: 'AlbumView',
       params: { album: album.album, artist: album.artist },
     }"
-    class="result-item shadow-sm"
+    class="result-item"
   >
     <div class="_idk">
       <div
@@ -34,10 +34,10 @@ export default {
   padding: $small;
   border-radius: 0.75rem;
   text-align: left !important;
-  border: solid 2px transparent;
   background-color: $gray;
   color: #ffffffde !important;
   transition: all 0.5s ease;
+  // border: solid 1px $gray3;
 
   ._idk {
     position: relative;

src/components/shared/SongItem.vue

@@ -108,10 +108,7 @@ const current = state.current;
 </script>
 
 <style lang="scss">
-.context-on {
+// 
-  background-color: $gray4;
-  color: $white !important;
-}
 
 .songlist-item {
   display: grid;

src/components/shared/TrackItem.vue

@@ -2,9 +2,12 @@
   <div
     class="track-item h-1"
     @click="playThis(props.track)"
-    :class="{
+    :class="[
+      {
         currentInQueue: current.trackid === props.track.trackid,
-    }"
+      },
+      { 'context-on': context_on },
+    ]"
     @contextmenu="showContextMenu"
   >
     <div
@@ -39,12 +42,20 @@ import useContextStore from "@/stores/context.js";
 import trackContext from "../../composables/track_context";
 
 const contextStore = useContextStore();
+const context_on = ref(false);
 
 const showContextMenu = (e) => {
   e.preventDefault();
   e.stopPropagation();
 
   contextStore.showContextMenu(e, trackContext(props.track));
+  context_on.value = true;
+
+  contextStore.$subscribe((mutation, state) => {
+    if (!state.visible) {
+      context_on.value = false;
+    }
+  });
 };
 const props = defineProps({
   track: Object,
@@ -66,6 +77,11 @@ const playThis = (song) => {
   background-color: $gray3;
 }
 
+.context-on {
+  background-color: $gray4;
+  color: $white !important;
+}
+
 .track-item {
   width: 26.55rem;
   display: flex;
@@ -77,7 +93,7 @@ const playThis = (song) => {
 
   &:hover {
     cursor: pointer;
-    background-color: $gray5 !important;
+    background-color: $gray4 !important;
   }
 
   hr {

src/views/FolderView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="f-view-parent" class="border rounded">
+  <div id="f-view-parent" class="rounded">
     <div class="fixed">
       <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
     </div>