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,

ui/src/album/AlbumGridView.js

@@ -19,59 +19,64 @@ import {
   RangeField,
 } from '../common'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    margin: '20px',
-  },
-  tileBar: {
-    transition: 'all 150ms ease-out',
-    opacity: 0,
-    textAlign: 'left',
-    marginBottom: '3px',
-    background:
-      'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
-  },
-  tileBarMobile: {
-    textAlign: 'left',
-    marginBottom: '3px',
-    background:
-      'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
-  },
-  albumArtistName: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    textAlign: 'left',
-    fontSize: '1em',
-  },
-  albumName: {
-    fontSize: '14px',
-    color: theme.palette.type === 'dark' ? '#eee' : 'black',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-  },
-  albumSubtitle: {
-    fontSize: '12px',
-    color: theme.palette.type === 'dark' ? '#c5c5c5' : '#696969',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-  },
-  link: {
-    position: 'relative',
-    display: 'block',
-    textDecoration: 'none',
-    '&:hover $tileBar': {
-      opacity: 1,
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      margin: '20px',
     },
-  },
-  albumLink: {
-    position: 'relative',
-    display: 'block',
-    textDecoration: 'none',
-  },
-}))
+    tileBar: {
+      transition: 'all 150ms ease-out',
+      opacity: 0,
+      textAlign: 'left',
+      marginBottom: '3px',
+      background:
+        'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
+    },
+    tileBarMobile: {
+      textAlign: 'left',
+      marginBottom: '3px',
+      background:
+        'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
+    },
+    albumArtistName: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textAlign: 'left',
+      fontSize: '1em',
+    },
+    albumName: {
+      fontSize: '14px',
+      color: theme.palette.type === 'dark' ? '#eee' : 'black',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    albumSubtitle: {
+      fontSize: '12px',
+      color: theme.palette.type === 'dark' ? '#c5c5c5' : '#696969',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    link: {
+      position: 'relative',
+      display: 'block',
+      textDecoration: 'none',
+      '&:hover $tileBar': {
+        opacity: 1,
+      },
+    },
+    albumLink: {
+      position: 'relative',
+      display: 'block',
+      textDecoration: 'none',
+    },
+    albumContainer: {},
+    albumPlayButton: {},
+  }),
+  { name: 'NDAlbumGridView' }
+)
 
 const useCoverStyles = makeStyles({
   cover: {
@@ -112,7 +117,7 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
   const classes = useStyles()
 
   return (
-    <div>
+    <div className={classes.albumContainer}>
       <Link
         className={classes.link}
         to={linkToRecord(basePath, record.id, 'show')}
@@ -120,7 +125,14 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
         <Cover album={record} />
         <GridListTileBar
           className={isDesktop ? classes.tileBar : classes.tileBarMobile}
-          subtitle={<PlayButton color={'white'} record={record} size="small" />}
+          subtitle={
+            <PlayButton
+              className={classes.albumPlayButton}
+              color={'white'}
+              record={record}
+              size="small"
+            />
+          }
           actionIcon={<AlbumContextMenu record={record} color={'white'} />}
         />
       </Link>

ui/src/album/AlbumShow.js

@@ -5,13 +5,24 @@ import {
   useShowContext,
   useShowController,
 } from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
 import AlbumSongs from './AlbumSongs'
 import AlbumDetails from './AlbumDetails'
 import AlbumActions from './AlbumActions'
 
+const useStyles = makeStyles(
+  (theme) => ({
+    albumActions: {},
+  }),
+  {
+    name: 'NDAlbumShow',
+  }
+)
+
 const AlbumShowLayout = (props) => {
   const { loading, ...context } = useShowContext(props)
   const { record } = context
+  const classes = useStyles()
 
   return (
     <>
@@ -29,7 +40,9 @@ const AlbumShowLayout = (props) => {
           <AlbumSongs
             resource={'albumSong'}
             exporter={false}
-            actions={<AlbumActions record={record} />}
+            actions={
+              <AlbumActions className={classes.albumActions} record={record} />
+            }
           />
         </ReferenceManyField>
       )}