Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow ArtistExternalLink icons to be styled #1503

Merged

Conversation

srichter
Copy link
Contributor

@srichter srichter commented Dec 6, 2021

This adds classes to the ArtistExternalLink icons, allowing them to be styled by themes. Additionally, it adds a two-color horizontal gradient that can be styled and used to color the MusicBrainz icon allowing for a split fill.

Themes can style the icons by adding the following to the overrides section:

NDDesktopArtistDetails: {
  button: {
    '& .LastfmIcon': {
      color: '#d92323',
    },
    '& #mb-icon-gradient': {
      '--mb-icon-color-one': '#ba478f',
      '--mb-icon-color-two': '#d3562c',
    },
    '& .MusicBrainzIcon': {
      fill: 'url(#mb-icon-gradient)',
    },
  },
},

image

Comment on lines 41 to 50
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="mb-icon-gradient" x2="1">
<stop stopColor="var(--mb-icon-color-one, #FFF)" offset="0%" />
<stop stopColor="var(--mb-icon-color-one, #FFF)" offset="50%" />
<stop stopColor="var(--mb-icon-color-two, #FFF)" offset="50%" />
<stop stopColor="var(--mb-icon-color-two, #FFF)" offset="100%" />
</linearGradient>
</defs>
</svg>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this svg required for? If it is really required for the functionality proposed, can't we just move it to the MusicBrainzIcon file itself?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@srichter, did you see this comment?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The gradient lets you style the MusicBrainz icon with two colors (to match the official logo). It does make more sense to be inside the svg itself; moved it there.

@srichter srichter force-pushed the add-classes-to-artistexternallink-icons branch from 8e585b0 to 0e072c9 Compare January 22, 2022 05:06
@deluan deluan merged commit 66818b2 into navidrome:master Sep 30, 2022
@github-actions
Copy link

github-actions bot commented Mar 8, 2023

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants