refactor colors

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="{
-      currentInQueue: current.trackid === props.track.trackid,
-    }"
+    :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 {