fix(ui): update artist link rendering and improve button styles

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

ui/src/album/__snapshots__/AlbumDetails.test.jsx.snap

@@ -251,175 +251,3 @@ exports[`Details component > Mobile view > renders correctly with year range (st
   </span>
 </div>
 `;
-
-exports[`Details component > renders correctly in mobile view 1`] = `
-<div>
-  <span>
-    ♫  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    ○  Jun 15, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with all date fields 1`] = `
-<div>
-  <span>
-    resources.album.fields.originalDate  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    resources.album.fields.releaseDate  Jun 15, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-6"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with date 1`] = `
-<div>
-  <span>
-    May 1, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-2"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with date and originalDate 1`] = `
-<div>
-  <span>
-    resources.album.fields.originalDate  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-4"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with just year range 1`] = `
-<div>
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-1"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with originalDate 1`] = `
-<div>
-  <span>
-    resources.album.fields.originalDate  Mar 15, 2018
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-3"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;
-
-exports[`Details component > renders correctly with releaseDate 1`] = `
-<div>
-  <span>
-    resources.album.fields.releaseDate  Jun 15, 2020
-  </span>
-   · 
-  <span>
-    12 resources.song.name
-  </span>
-   · 
-  <span>
-    <span>
-      01:00:00
-    </span>
-  </span>
-   · 
-  <span>
-    <span
-      class="makeStyles-root-5"
-    >
-      100 KB
-    </span>
-  </span>
-</div>
-`;

ui/src/common/ArtistLinkField.jsx

@@ -44,7 +44,9 @@ const parseAndReplaceArtists = (
         result.push(displayAlbumArtist.slice(lastIndex, index))
       }
       // Add the artist link
-      result.push(<ALink artist={artist} className={className} />)
+      result.push(
+        <ALink artist={artist} className={className} key={artist.id} />,
+      )
       lastIndex = index + artist.name.length
     }
   })

ui/src/missing/DeleteMissingFilesButton.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import DeleteIcon from '@material-ui/icons/Delete'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles, alpha } from '@material-ui/core/styles'
-import { fade } from '@material-ui/core/styles/colorManipulator'
 import clsx from 'clsx'
 import {
   Button,
@@ -17,7 +16,7 @@ const useStyles = makeStyles(
     deleteButton: {
       color: theme.palette.error.main,
       '&:hover': {
-        backgroundColor: fade(theme.palette.error.main, 0.12),
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
         // Reset on mouse devices
         '@media (hover: none)': {
           backgroundColor: 'transparent',

ui/src/user/DeleteUserButton.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import DeleteIcon from '@material-ui/icons/Delete'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles, alpha } from '@material-ui/core/styles'
-import { fade } from '@material-ui/core/styles/colorManipulator'
 import clsx from 'clsx'
 import {
   useDeleteWithConfirmController,
@@ -16,7 +15,7 @@ const useStyles = makeStyles(
     deleteButton: {
       color: theme.palette.error.main,
       '&:hover': {
-        backgroundColor: fade(theme.palette.error.main, 0.12),
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
         // Reset on mouse devices
         '@media (hover: none)': {
           backgroundColor: 'transparent',