Reorganize AudioTitle classes.

Should fix https://github.com/web-scrobbler/web-scrobbler/issues/2828

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>

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: {},
     },

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',