refactor colors

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>