improved user menu hover style

CHANGELOG.md

@@ -20,3 +20,4 @@ Improved:
 - Better install script for MacOs/Linux
 - `About` settings area is always open now
 - Context menus are now glassy
+- User menu hover state

src/js/main.js

@@ -28,7 +28,7 @@ DribbblishShared.config.register({
     name: "Round Sidebar Icons",
     description: "If the Sidebar Icons should be round instead of square",
     defaultValue: false,
-    onChange: (val) => $("html").css("--sidebar-icons-border-radius", val ? "50%" : "var(--image-radius)")
+    onChange: (val) => $("html").css("--sidebar-icons-border-radius", val ? "50vh" : "var(--image-radius)")
 });
 
 DribbblishShared.config.register({

src/styles/main.scss

@@ -18,7 +18,7 @@
     --cover-border-radius: 8px;
     --playbar-movement-anim-speed: 0.5s;
     --image-radius: 10px;
-    --sidebar-icons-border-radius: 50%;
+    --sidebar-icons-border-radius: 50vh; // 50vh = round / pill
     --song-transition-speed: 3s;
 }
 
@@ -292,14 +292,13 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .cover-art,
-.main-userWidget-box.update-avail,
 .view-homeShortcutsGrid-shortcut,
 :not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) {
     border-radius: var(--image-radius) !important;
 }
 
 .main-avatar-image,
-.main-userWidget-box:not(.update-avail),
+.main-userWidget-box,
 .main-avatar-userIcon,
 .view-homeShortcutsGrid-shortcutLink {
     border-radius: var(--sidebar-icons-border-radius) !important;
@@ -310,8 +309,14 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-userWidget-box.update-avail {
-    backdrop-filter: invert(0.1);
     padding-right: 10px;
+    background-color: spiceColor("subtext", 0.1) !important;
+
+    &:hover,
+    &:active,
+    &[data-context-menu-open="true"] {
+        background-color: spiceColor("subtext", 0.15) !important;
+    }
 }
 
 .main-avatar-avatar.main-avatar-withBadge:after {
@@ -812,7 +817,7 @@ li.GlueDropTarget {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 400;
     letter-spacing: normal;
     line-height: 16px;