Allow ExternalLink icons to be styled (#1503)

* Allow ArtistExternalLink icons to be styled * Allow AlbumExternalLink icons to be styled * Standardize external links' classes to kebab-case Co-authored-by: Deluan <deluan@navidrome.org>
navidrome · Sep 30, 2022 · 66818b2 · 66818b2
1 parent e7fab8b
commit 66818b2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/ui/src/album/AlbumExternalLinks.js b/ui/src/album/AlbumExternalLinks.js
@@ -33,14 +33,14 @@ const AlbumExternalLinks = (props) => {
       encodeURIComponent(record.name)
     }`,
     'message.openIn.lastfm',
-    <ImLastfm2 />
+    <ImLastfm2 className="lastfm-icon" />
   )
 
   record.mbzAlbumId &&
     addLink(
       `https://musicbrainz.org/release/${record.mbzAlbumId}`,
       'message.openIn.musicbrainz',
-      <MusicBrainz />
+      <MusicBrainz className="musicbrainz-icon" />
     )
 
   return <div className={className}>{intersperse(links, ' ')}</div>

diff --git a/ui/src/artist/ArtistExternalLink.js b/ui/src/artist/ArtistExternalLink.js
@@ -36,9 +36,17 @@ const ArtistExternalLinks = ({ artistInfo, record }) => {
     linkButtons.push(<span key={`link-${record.id}-${id}`}>{link}</span>)
   }
 
-  addLink(links[0], 'message.openIn.lastfm', <ImLastfm2 />)
+  addLink(
+    links[0],
+    'message.openIn.lastfm',
+    <ImLastfm2 className="lastfm-icon" />
+  )
   artistInfo?.musicBrainzId &&
-    addLink(links[1], 'message.openIn.musicbrainz', <MusicBrainz />)
+    addLink(
+      links[1],
+      'message.openIn.musicbrainz',
+      <MusicBrainz className="musicbrainz-icon" />
+    )
 
   return <div>{intersperse(linkButtons, ' ')}</div>
 }

diff --git a/ui/src/icons/MusicBrainz.js b/ui/src/icons/MusicBrainz.js