Make spotify-ish more spotify-ish (#914)

* [Theme] Allow customising album and player parts

* [Theme] Allow customizing song lists view

* Make spotify-ish more spotify-ish

* Fix responsive issues in spotify-ish

* Spotify-ish login page

* Add back the previous "Spotify-ish" theme as "Green"

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/album/AlbumDetails.js

@@ -22,65 +22,73 @@ import {
 } from '../common'
 import config from '../config'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    [theme.breakpoints.down('xs')]: {
-      padding: '0.7em',
-      minWidth: '20em',
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      [theme.breakpoints.down('xs')]: {
+        padding: '0.7em',
+        minWidth: '20em',
+      },
+      [theme.breakpoints.up('sm')]: {
+        padding: '1em',
+        minWidth: '32em',
+      },
     },
-    [theme.breakpoints.up('sm')]: {
-      padding: '1em',
-      minWidth: '32em',
+    cardContents: {
+      display: 'flex',
     },
-  },
-  cardContents: {
-    display: 'flex',
-  },
-  details: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  content: {
-    flex: '2 0 auto',
-  },
-  coverParent: {
-    [theme.breakpoints.down('xs')]: {
-      height: '8em',
-      width: '8em',
-      minWidth: '8em',
+    details: {
+      display: 'flex',
+      flexDirection: 'column',
     },
-    [theme.breakpoints.up('sm')]: {
-      height: '10em',
-      width: '10em',
-      minWidth: '10em',
+    content: {
+      flex: '2 0 auto',
     },
-    [theme.breakpoints.up('lg')]: {
-      height: '15em',
-      width: '15em',
-      minWidth: '15em',
+    coverParent: {
+      [theme.breakpoints.down('xs')]: {
+        height: '8em',
+        width: '8em',
+        minWidth: '8em',
+      },
+      [theme.breakpoints.up('sm')]: {
+        height: '10em',
+        width: '10em',
+        minWidth: '10em',
+      },
+      [theme.breakpoints.up('lg')]: {
+        height: '15em',
+        width: '15em',
+        minWidth: '15em',
+      },
     },
-  },
-  cover: {
-    objectFit: 'contain',
-    cursor: 'pointer',
-    display: 'block',
-    width: '100%',
-    height: '100%',
-  },
-  loveButton: {
-    top: theme.spacing(-0.2),
-    left: theme.spacing(0.5),
-  },
-  commentBlock: {
-    display: 'inline-block',
-    marginTop: '1em',
-    float: 'left',
-    wordBreak: 'break-all',
-  },
-  pointerCursor: {
-    cursor: 'pointer',
-  },
-}))
+    cover: {
+      objectFit: 'contain',
+      cursor: 'pointer',
+      display: 'block',
+      width: '100%',
+      height: '100%',
+    },
+    loveButton: {
+      top: theme.spacing(-0.2),
+      left: theme.spacing(0.5),
+    },
+    commentBlock: {
+      display: 'inline-block',
+      marginTop: '1em',
+      float: 'left',
+      wordBreak: 'break-all',
+    },
+    pointerCursor: {
+      cursor: 'pointer',
+    },
+    recordName: {},
+    recordArtist: {},
+    recordMeta: {},
+  }),
+  {
+    name: 'NDAlbumDetails',
+  }
+)
 
 const AlbumComment = ({ record }) => {
   const classes = useStyles()
@@ -159,7 +167,7 @@ const AlbumDetails = ({ record }) => {
         </div>
         <div className={classes.details}>
           <CardContent className={classes.content}>
-            <Typography variant="h5">
+            <Typography variant="h5" className={classes.recordName}>
               {record.name}
               {config.enableFavourites && (
                 <LoveButton
@@ -172,11 +180,13 @@ const AlbumDetails = ({ record }) => {
                 />
               )}
             </Typography>
-            <Typography component="h6">
+            <Typography component="h6" className={classes.recordArtist}>
               <ArtistLinkField record={record} />
             </Typography>
-            <Typography component="p">{genreYear(record)}</Typography>
-            <Typography component="p">
+            <Typography component="p" className={classes.recordMeta}>
+              {genreYear(record)}
+            </Typography>
+            <Typography component="p" className={classes.recordMeta}>
               {record.songCount}{' '}
               {translate('resources.song.name', {
                 smart_count: record.songCount,