fix(ui): artist buttons in spotify-ish

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

ui/src/artist/ArtistShow.jsx

@@ -17,7 +17,8 @@ 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(
+  (theme) => ({
     actions: {
       width: '100%',
       justifyContent: 'flex-start',
@@ -41,7 +42,11 @@ const useStyles = makeStyles((theme) => ({
         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',