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

Color inheritence problem on Reveal/Hide icon on Inbox page #2895

Open
4 tasks done
travis-jeans opened this issue Jan 8, 2025 · 1 comment
Open
4 tasks done

Color inheritence problem on Reveal/Hide icon on Inbox page #2895

travis-jeans opened this issue Jan 8, 2025 · 1 comment
Labels
bug Something isn't working

Comments

@travis-jeans
Copy link

Requirements

  • This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
  • Please check to see if this issue already exists.
  • It's a single bug. Do not report multiple bugs in one issue.
  • It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

On the inbox page when a user has received a message, the show/reveal button has a weird colour inheritance which means when developing themes that it can change to an unexpected colour.

Color is determined by fill: currentColor. For the custom theme I was making, this ended up black and made it blend in with the background. To fix it I needed to add: .inbox .private-message ul.list-inline.mb-0.text-muted.small li:last-child .icon { color: rgba(var(--gray-200-rgb), 0.75); }

HTML code for the button:
<button class="pointer text-monospace p-0 bg-transparent border-0 d-block" type="button"><svg class="icon"><use xlink:href="/static/61a827a1/assets/symbols.svg#icon-minus-square"></use><div class="visually-hidden"><title>minus-square</title></div></svg></button>

This seems like it should be defined like the reveal post toggle button on posts on the Lemmy homepage:
<button class="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline" type="button"><svg class="icon icon-inline"><use xlink:href="/static/61a827a1/assets/symbols.svg#icon-plus-square"></use><div class="visually-hidden"><title>plus-square</title></div></svg></button>
My suspicion is it needs the .btn or btn-sm class for the colours to inherit properly.

Image Description: Screenshot from RBlind with the theme Darkly applied. Next to the from MostlyBlindGamer 26 days ago there is an SVG icon reveal button. The private message shows a test message.
test-message-mostlyblindgamer

Steps to Reproduce

  1. Visit the inbox page
  2. Click "All" to reveal all messages (or at least 1)
  3. Use the Developer Tools Inspection tool to target the SVG button
  4. Inspect the color inheritence

Technical Details

Windows and Linux
Firefox / Waterfox

Lemmy Instance Version

BE: 0.19.8

Lemmy Instance URL

https://rblind.com/

@travis-jeans travis-jeans added the bug Something isn't working label Jan 8, 2025
@dessalines
Copy link
Member

Possibly because its using text-muted ? I'm not sure.

Here's the component: https://github.com/LemmyNet/lemmy-ui/blob/main/src/shared/components/comment/comment-node.tsx#L202

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants