fix(ui): artist buttons in spotify-ish

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/artist/ArtistShow.jsx

@@ -17,31 +17,36 @@ import { useAlbumsPerPage, useResourceRefresh, Title } from '../common/index.js'
 import ArtistActions from './ArtistActions'
 import { makeStyles } from '@material-ui/core'
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(
-  actions: {
+  (theme) => ({
-    width: '100%',
+    actions: {
-    justifyContent: 'flex-start',
+      width: '100%',
-    display: 'flex',
+      justifyContent: 'flex-start',
-    paddingTop: '0.25em',
+      display: 'flex',
-    paddingBottom: '0.25em',
+      paddingTop: '0.25em',
-    paddingLeft: '1em',
+      paddingBottom: '0.25em',
-    paddingRight: '1em',
+      paddingLeft: '1em',
-    flexWrap: 'wrap',
+      paddingRight: '1em',
-    overflowX: 'auto',
+      flexWrap: 'wrap',
-    [theme.breakpoints.down('xs')]: {
+      overflowX: 'auto',
-      paddingLeft: '0.5em',
+      [theme.breakpoints.down('xs')]: {
-      paddingRight: '0.5em',
+        paddingLeft: '0.5em',
-      gap: '0.5em',
+        paddingRight: '0.5em',
-      justifyContent: 'space-around',
+        gap: '0.5em',
+        justifyContent: 'space-around',
+      },
     },
-  },
+    actionsContainer: {
-  actionsContainer: {
+      paddingLeft: '.75rem',
-    paddingLeft: '.75rem',
+      [theme.breakpoints.down('xs')]: {
-    [theme.breakpoints.down('xs')]: {
+        padding: '.5rem',
-      padding: '.5rem',
+      },
     },
+  }),
+  {
+    name: 'NDArtistShow',
   },
-}))
+)
 
 const ArtistDetails = (props) => {
   const record = useRecordContext(props)

ui/src/themes/spotify.js

@@ -242,6 +242,64 @@ export default {
     NDPlaylistShow: {
       playlistActions: musicListActions,
     },
+    NDArtistShow: {
+      actions: {
+        padding: '2rem 0',
+        alignItems: 'center',
+        overflow: 'visible',
+        minHeight: '120px',
+        '@global': {
+          button: {
+            border: '1px solid transparent',
+            backgroundColor: 'inherit',
+            color: '#b3b3b3',
+            margin: '0 0.5rem',
+            '&:hover': {
+              border: '1px solid #b3b3b3',
+              backgroundColor: 'inherit !important',
+            },
+          },
+          // Hide shuffle button label (first button)
+          'button:first-child>span:first-child>span': {
+            display: 'none',
+          },
+          // Style shuffle button (first button)
+          'button:first-child': {
+            '@media screen and (max-width: 720px)': {
+              transform: 'scale(1.5)',
+              margin: '1rem',
+              '&:hover': {
+                transform: 'scale(1.6) !important',
+              },
+            },
+            transform: 'scale(2)',
+            margin: '1.5rem',
+            minWidth: 0,
+            padding: 5,
+            transition: 'transform .3s ease',
+            background: spotifyGreen['500'],
+            color: '#fff',
+            borderRadius: 500,
+            border: 0,
+            '&:hover': {
+              transform: 'scale(2.1)',
+              backgroundColor: `${spotifyGreen['500']} !important`,
+              border: 0,
+            },
+          },
+          'button:first-child>span:first-child': {
+            padding: 0,
+          },
+          'button>span:first-child>span, button:not(:first-child)>span:first-child>svg':
+            {
+              color: '#b3b3b3',
+            },
+        },
+      },
+      actionsContainer: {
+        overflow: 'visible',
+      },
+    },
     NDAudioPlayer: {
       audioTitle: {
         color: '#fff',