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>