SpotifyControls: make panel look more in line with visual refresh (#3312)

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -17,6 +17,7 @@
 */
 
 import "./spotifyStyles.css";
+import "./visualRefreshSpotifyStyles.css"; // TODO: merge with spotifyStyles.css and remove when old UI is discontinued
 
 import { Settings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
@@ -307,8 +308,8 @@ function Info({ track }: { track: Track; }) {
                     {track.name}
                 </Forms.FormText>
                 {track.artists.some(a => a.name) && (
-                    <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
+                    <Forms.FormText variant="text-sm/normal" className={cl(["ellipoverflow", "secondary-song-info"])}>
-                        by&nbsp;
+                        <span className={cl("song-info-prefix")}>by&nbsp;</span>
                         {track.artists.map((a, i) => (
                             <React.Fragment key={a.name}>
                                 <span
@@ -325,8 +326,8 @@ function Info({ track }: { track: Track; }) {
                     </Forms.FormText>
                 )}
                 {track.album.name && (
-                    <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
+                    <Forms.FormText variant="text-sm/normal" className={cl(["ellipoverflow", "secondary-song-info"])}>
-                        on&nbsp;
+                        <span className={cl("song-info-prefix")}>on&nbsp;</span>
                         <span
                             id={cl("album-title")}
                             className={cl("album")}

src/plugins/spotifyControls/index.tsx

@@ -32,7 +32,7 @@ function toggleHoverControls(value: boolean) {
 export default definePlugin({
     name: "SpotifyControls",
     description: "Adds a Spotify player above the account panel",
-    authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000],
+    authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000, Devs.nin0dev],
     options: {
         hoverControls: {
             description: "Show controls on hover",

src/plugins/spotifyControls/spotifyStyles.css

@@ -2,7 +2,9 @@
     padding: 0.375rem 0.5rem;
     border-bottom: 1px solid var(--background-modifier-accent);
 
-    --vc-spotify-green: #1db954; /* so custom themes can easily change it */
+    --vc-spotify-green: var(--spotify, #1db954); /* so custom themes can easily change it */
+    --vc-spotify-green-90: color-mix(in hsl, var(--vc-spotify-green), transparent 90%);
+    --vc-spotify-green-80: color-mix(in hsl, var(--vc-spotify-green), transparent 80%);
 }
 
 .theme-light #vc-spotify-player {

src/plugins/spotifyControls/visualRefreshSpotifyStyles.css

@@ -0,0 +1,77 @@
+/* TODO: merge with spotifyStyles.css and remove when old UI is discontinued */
+.visual-refresh {
+    #vc-spotify-player {
+        padding: 12px;
+        background: var(--bg-overlay-floating, var(--background-base-low, var(--background-secondary-alt)));
+        margin: 0;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+    }
+
+    .vc-spotify-song-info-prefix {
+        display: none;
+    }
+
+    .vc-spotify-artist, .vc-spotify-album {
+        color: var(--header-primary);
+    }
+
+    .vc-spotify-secondary-song-info {
+        font-size: 12px;
+    }
+
+    #vc-spotify-progress-bar {
+        position: relative;
+        color: var(--text-normal);
+        width: 100%;
+    }
+
+    #vc-spotify-progress-bar > [class^="slider"] {
+        flex-grow: 1;
+        width: 100%;
+        padding: 0 !important;
+    }
+
+    #vc-spotify-progress-bar > [class^="slider"] [class^="bar"] {
+        height: 3px !important;
+        top: calc(12px - 4px / 2 + var(--bar-offset));
+    }
+
+    #vc-spotify-progress-bar > [class^="slider"] [class^="barFill"] {
+        background-color: var(--interactive-active);
+    }
+
+    #vc-spotify-progress-bar > [class^="slider"]:hover [class^="barFill"] {
+        background-color: var(--vc-spotify-green);
+    }
+
+    #vc-spotify-progress-bar > [class^="slider"] [class^="grabber"] {
+        background-color: var(--interactive-active);
+        width: 16px !important;
+        height: 16px !important;
+        margin-top: calc(17px/-2 + var(--bar-offset)/2);
+        margin-left: -0.5px;
+    }
+
+    .vc-spotify-progress-time {
+        margin-top: 8px;
+        font-family: var(--font-code);
+    }
+
+    .vc-spotify-button-row {
+        margin-top: 14px;
+    }
+
+    .vc-spotify-button {
+        margin: 0 2px;
+        border-radius: var(--radius-sm);
+    }
+
+    .vc-spotify-repeat-context, .vc-spotify-repeat-track, .vc-spotify-shuffle-on {
+        background-color: var(--vc-spotify-green-90);
+    }
+
+    .vc-spotify-repeat-context:hover, .vc-spotify-repeat-track:hover, .vc-spotify-shuffle-on:hover {
+        background-color: var(--vc-spotify-green-80);
+    }
+}