Fix artist link contrast in light theme

navidrome · Apr 25, 2020 · 79454d7 · 79454d7
1 parent 87cc397
commit 79454d7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js
@@ -7,7 +7,7 @@ import { linkToRecord, Loading } from 'react-admin'
 import subsonic from '../subsonic'
 import { ArtistLinkField } from './ArtistLinkField'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   root: {
     margin: '20px',
   },
@@ -23,7 +23,7 @@ const useStyles = makeStyles({
   tileBar: {
     textAlign: 'center',
     background:
-      'linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
+      'linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
   },
   albumArtistName: {
     whiteSpace: 'nowrap',
@@ -32,7 +32,10 @@ const useStyles = makeStyles({
     textAlign: 'center',
     fontSize: '1em',
   },
-})
+  artistLink: {
+    color: theme.palette.primary.light,
+  },
+}))
 
 const getColsForWidth = (width) => {
   if (width === 'xs') return 2
@@ -69,7 +72,10 @@ const LoadedAlbumGrid = ({ ids, data, basePath, width }) => {
               title={data[id].name}
               subtitle={
                 <div className={classes.albumArtistName}>
-                  <ArtistLinkField record={data[id]}>
+                  <ArtistLinkField
+                    record={data[id]}
+                    className={classes.artistLink}
+                  >
                     {data[id].albumArtist}
                   </ArtistLinkField>
                 </div>

diff --git a/ui/src/album/ArtistLinkField.js b/ui/src/album/ArtistLinkField.js
@@ -1,18 +1,24 @@
-import { Link } from 'react-admin'
 import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-admin'
 
-export const ArtistLinkField = (props) => {
-  const filter = { artist_id: props.record.albumArtistId }
+export const ArtistLinkField = ({ record, className }) => {
+  const filter = { artist_id: record.albumArtistId }
   const url = `/album?filter=${JSON.stringify(
     filter
   )}&order=ASC&sort=maxYear&displayedFilters={"compilation":true}`
   return (
-    <Link to={url} onClick={(e) => e.stopPropagation()}>
-      {props.record.albumArtist}
+    <Link to={url} onClick={(e) => e.stopPropagation()} className={className}>
+      {record.albumArtist}
     </Link>
   )
 }
 
+ArtistLinkField.propTypes = {
+  className: PropTypes.string,
+  source: PropTypes.string,
+}
+
 ArtistLinkField.defaultProps = {
   source: 'artistId',
   addLabel: true,