From 3cede28161dc5c08d59f322d77f0fe2cb130e590 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sat, 24 Apr 2021 18:06:24 -0400
Subject: [PATCH] Reorganize AudioTitle classes.

Should fix https://github.com/web-scrobbler/web-scrobbler/issues/2828
---
 ui/src/audioplayer/Player.js | 24 +++++++++++-------------
 ui/src/themes/ligera.js      | 14 +++++++-------
 ui/src/themes/spotify.js     | 14 +++++++-------
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 14b0363e..9615ded3 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -32,23 +32,21 @@ const useStyle = makeStyles(
     audioTitle: {
       textDecoration: 'none',
       color: theme.palette.primary.dark,
-      '&.songTitle': {
-        fontWeight: 'bold',
-      },
-      '&.songInfo': {
-        display: 'block',
+    },
+    songTitle: {
+      fontWeight: 'bold',
+      '&:hover + $qualityInfo': {
+        opacity: 1,
       },
     },
+    songInfo: {
+      display: 'block',
+    },
     qualityInfo: {
       marginTop: '-4px',
       opacity: 0,
       transition: 'all 500ms ease-out',
     },
-    audioName: {
-      '&:hover + $qualityInfo': {
-        opacity: 1,
-      },
-    },
     player: {
       display: (props) => (props.visible ? 'block' : 'none'),
       '@media screen and (max-width:810px)': {
@@ -86,15 +84,15 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
 
   return (
     <Link to={`/album/${audioInfo.albumId}/show`} className={className}>
-      <span className={`${className} songTitle`}>
-        <span className={classes.audioName}>{audioInfo.name}</span>
+      <span>
+        <span className={classes.songTitle}>{audioInfo.name}</span>
         {isDesktop && (
           <QualityInfo record={qi} className={classes.qualityInfo} />
         )}
       </span>
       {!isMobile && (
         <div className={classes.artistAlbum}>
-          <span className={`${className} songInfo`}>
+          <span className={classes.songInfo}>
             {`${audioInfo.singer} - ${audioInfo.album}`}
           </span>
         </div>
diff --git a/ui/src/themes/ligera.js b/ui/src/themes/ligera.js
index 80a6110c..a7a9e64f 100644
--- a/ui/src/themes/ligera.js
+++ b/ui/src/themes/ligera.js
@@ -319,13 +319,13 @@ export default {
       audioTitle: {
         color: '#000',
         fontSize: '0.875rem',
-        '&.songTitle': {
-          fontWeight: 400,
-        },
-        '&.songInfo': {
-          fontSize: '0.675rem',
-          color: '#b3b3b3',
-        },
+      },
+      songTitle: {
+        fontWeight: 400,
+      },
+      songInfo: {
+        fontSize: '0.675rem',
+        color: '#b3b3b3',
       },
       player: {},
     },
diff --git a/ui/src/themes/spotify.js b/ui/src/themes/spotify.js
index 95a8cf63..c0501777 100644
--- a/ui/src/themes/spotify.js
+++ b/ui/src/themes/spotify.js
@@ -241,13 +241,13 @@ export default {
       audioTitle: {
         color: '#fff',
         fontSize: '0.875rem',
-        '&.songTitle': {
-          fontWeight: 400,
-        },
-        '&.songInfo': {
-          fontSize: '0.675rem',
-          color: '#b3b3b3',
-        },
+      },
+      songTitle: {
+        fontWeight: 400,
+      },
+      songInfo: {
+        fontSize: '0.675rem',
+        color: '#b3b3b3',
       },
       player: {
         border: '10px solid blue',