updates to context menu

src/renderer/style.less

@@ -2806,7 +2806,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   top: 0;
   left: 0;
   z-index: 100;
-  background: #000000a3;
+  background: rgb(0 0 0 / 32%);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2826,6 +2826,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       border: 0;
       background: transparent;
 
+      &.active {
+        .sidebar-icon>.svg-icon {
+          --color: var(--keyColor);
+        }
+      }
+
       &:hover {
         background: var(--selected);
       }
@@ -2838,13 +2844,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .menu-panel-body {
     display: flex;
     flex-flow: column;
-    background: #585858ba;
+    background: rgb(38 38 38);
     position: relative;
     min-height: 300px;
     min-width: 300px;
     box-shadow: var(--ciderShadow-Generic);
     border-radius: var(--mediaItemRadius);
-    backdrop-filter: blur(16px) saturate(180%);
     overflow: hidden;
     font-size: 14px;
 

src/renderer/views/components/mediaitem-list-item.ejs

@@ -268,8 +268,9 @@
                                 }
                             },
                             {
-                                "icon": "./assets/feather/unheart.svg",
+                                "icon": "./assets/feather/heart.svg",
                                 "id": "unlove",
+                                "active": true,
                                 "name": "Unlove",
                                 "hidden": true,
                                 "action": function () {
@@ -287,9 +288,10 @@
                                 }
                             },
                             {
-                                "icon": "./assets/feather/x-circle.svg",
+                                "icon": "./assets/feather/thumbs-down.svg",
                                 "id": "undo_dislike",
                                 "name": "Undo dislike",
+                                "active": true,
                                 "hidden": true,
                                 "action": function () {
                                     app.unlove(self.item)

src/renderer/views/components/menu-panel.ejs

@@ -11,7 +11,7 @@
         </div>
         <div class="menu-header-body" v-if="Object.keys(content.headerItems).length != 0">
             <template v-for="item in content.headerItems">
-                <button class="menu-option-header" :title="item.name" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">
+                <button class="menu-option-header" :class="getClasses(item)" :title="item.name" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">
                     <div class="sidebar-icon" style="margin: 0;" v-if="item.icon">
                         <div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
                     </div>
@@ -47,6 +47,11 @@
         mounted() {
         },
         methods: {
+            getClasses(item) {
+                if(item["active"]) {
+                    return "active";
+                }
+            },
             getStyle(item) {
                 if(item["disabled"]) {
                     return {

src/renderer/views/main.ejs

@@ -538,10 +538,8 @@
                         <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                     </div>
                 </transition>
-                <transition name="modal">
-                        <cider-menu-panel v-if="menuPanel.visible">
-                        </cider-menu-panel>
-                </transition>
+                <cider-menu-panel v-if="menuPanel.visible">
+                </cider-menu-panel>
 
             </div>
         </div>