Fine tune colors, remove PlayButton from AlbumDetail

ui/src/album/AlbumDetails.js

@@ -6,7 +6,6 @@ import 'react-image-lightbox/style.css'
 import subsonic from '../subsonic'
 import { DurationField, formatRange, StarButton, SizeField } from '../common'
 import { ArtistLinkField } from '../common'
-import { PlayButton } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
   const [isLightboxOpen, setLightboxOpen] = React.useState(false)
@@ -37,13 +36,7 @@ const AlbumDetails = ({ classes, record }) => {
         image={imageUrl}
         className={classes.albumCover}
         onClick={handleOpenLightbox}
-      >
-        <PlayButton
-          record={record}
-          className={classes.playButton}
-          size={'large'}
-        />
-      </CardMedia>
+      ></CardMedia>
       <CardContent className={classes.albumDetails}>
         <Typography variant="h5" className={classes.albumTitle}>
           {record.name}
@@ -54,8 +47,8 @@ const AlbumDetails = ({ classes, record }) => {
         <Typography component="p">{genreYear(record)}</Typography>
         <Typography component="p">
           {record.songCount}{' '}
-          {translate('resources.song.name', { smart_count: record.songCount })}{' '}
-          · <DurationField record={record} source={'duration'} /> ·{' '}
+          {translate('resources.song.name', { smart_count: record.songCount })}
+          {' · '} <DurationField record={record} source={'duration'} /> {' · '}
           <SizeField record={record} source="size" />
         </Typography>
         <StarButton record={record} resource={'album'} size={'large'} />

ui/src/album/AlbumGridView.js

@@ -2,6 +2,7 @@ import React from 'react'
 import {
   GridList,
   GridListTile,
+  Typography,
   GridListTileBar,
   useMediaQuery,
 } from '@material-ui/core'
@@ -11,7 +12,12 @@ import { Link } from 'react-router-dom'
 import { linkToRecord, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import subsonic from '../subsonic'
-import { AlbumContextMenu, PlayButton } from '../common'
+import {
+  AlbumContextMenu,
+  PlayButton,
+  ArtistLinkField,
+  RangeField,
+} from '../common'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -38,19 +44,16 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'left',
     fontSize: '1em',
   },
-  artistLink: {
-    color: theme.palette.primary.light,
-  },
-  albumArtist: {
-    fontSize: '12px',
-    color: '#c5c5c5',
+  albumName: {
+    fontSize: '14px',
+    color: theme.palette.type === 'dark' ? '#eee' : 'black',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
   },
-  albumName: {
-    fontSize: '14px',
-    color: '#eee',
+  albumSubtitle: {
+    fontSize: '12px',
+    color: theme.palette.type === 'dark' ? '#c5c5c5' : '#696969',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
@@ -63,7 +66,7 @@ const useStyles = makeStyles((theme) => ({
       opacity: 1,
     },
   },
-  albumLlink: {
+  albumLink: {
     position: 'relative',
     display: 'block',
     textDecoration: 'none',
@@ -118,22 +121,26 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
         <Cover album={record} />
         <GridListTileBar
           className={isDesktop ? classes.tileBar : classes.tileBarMobile}
-          subtitle={
-            <PlayButton
-              record={record}
-              className={classes.playButton}
-              size="small"
-            />
-          }
+          subtitle={<PlayButton color={'white'} record={record} size="small" />}
           actionIcon={<AlbumContextMenu record={record} color={'white'} />}
         />
       </Link>
       <Link
-        className={classes.albumLlink}
+        className={classes.albumLink}
         to={linkToRecord(basePath, record.id, 'show')}
       >
-        <div className={classes.albumName}>{record.name}</div>
-        <div className={classes.albumArtist}>{record.albumArtist}</div>
+        <Typography className={classes.albumName}>{record.name}</Typography>
+        {showArtist ? (
+          <ArtistLinkField record={record} className={classes.albumSubtitle} />
+        ) : (
+          <RangeField
+            record={record}
+            source={'year'}
+            sortBy={'maxYear'}
+            sortByOrder={'DESC'}
+            className={classes.albumSubtitle}
+          />
+        )}
       </Link>
     </div>
   )

ui/src/album/styles.js

@@ -11,10 +11,6 @@ export const useStyles = makeStyles((theme) => ({
       minWidth: '32em',
     },
   },
-  playButton: {
-    opacity: 0,
-    transition: 'all 150ms ease-out',
-  },
   albumCover: {
     display: 'inline-flex',
     justifyContent: 'center',