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/playlist/PlaylistDetails.js

@@ -4,36 +4,41 @@ import { makeStyles } from '@material-ui/core/styles'
 import { useTranslate } from 'react-admin'
 import { DurationField, SizeField } from '../common'
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    [theme.breakpoints.down('xs')]: {
-      padding: '0.7em',
-      minWidth: '24em',
+const useStyles = makeStyles(
+  (theme) => ({
+    container: {
+      [theme.breakpoints.down('xs')]: {
+        padding: '0.7em',
+        minWidth: '24em',
+      },
+      [theme.breakpoints.up('sm')]: {
+        padding: '1em',
+        minWidth: '32em',
+      },
     },
-    [theme.breakpoints.up('sm')]: {
-      padding: '1em',
-      minWidth: '32em',
+    details: {
+      display: 'inline-block',
+      verticalAlign: 'top',
+      [theme.breakpoints.down('xs')]: {
+        width: '14em',
+      },
+      [theme.breakpoints.up('sm')]: {
+        width: '26em',
+      },
+      [theme.breakpoints.up('lg')]: {
+        width: '38em',
+      },
     },
-  },
-  details: {
-    display: 'inline-block',
-    verticalAlign: 'top',
-    [theme.breakpoints.down('xs')]: {
-      width: '14em',
+    title: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
     },
-    [theme.breakpoints.up('sm')]: {
-      width: '26em',
-    },
-    [theme.breakpoints.up('lg')]: {
-      width: '38em',
-    },
-  },
-  title: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-}))
+  }),
+  {
+    name: 'NDPlaylistDetails',
+  }
+)
 
 const PlaylistDetails = (props) => {
   const { record = {} } = props

ui/src/playlist/PlaylistShow.js

@@ -5,14 +5,26 @@ import {
   useShowContext,
   useShowController,
 } from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
 import PlaylistDetails from './PlaylistDetails'
 import PlaylistSongs from './PlaylistSongs'
 import PlaylistActions from './PlaylistActions'
 import { Title, isReadOnly } from '../common'
 
+const useStyles = makeStyles(
+  (theme) => ({
+    playlistActions: {},
+  }),
+  {
+    name: 'NDPlaylistShow',
+  }
+)
+
 const PlaylistShowLayout = (props) => {
   const { loading, ...context } = useShowContext(props)
   const { record } = context
+  const classes = useStyles()
+
   return (
     <>
       {record && <PlaylistDetails {...context} />}
@@ -30,7 +42,12 @@ const PlaylistShowLayout = (props) => {
             {...props}
             readOnly={isReadOnly(record.owner)}
             title={<Title subTitle={record.name} />}
-            actions={<PlaylistActions record={record} />}
+            actions={
+              <PlaylistActions
+                className={classes.playlistActions}
+                record={record}
+              />
+            }
             resource={'playlistTrack'}
             exporter={false}
             perPage={0}