Skip to content

fix(ui): fix transparency bleeding of copied tooltip#1913

Merged
danielroe merged 1 commit intonpmx-dev:mainfrom
ShroXd:fix-copied-bg
Mar 4, 2026
Merged

fix(ui): fix transparency bleeding of copied tooltip#1913
danielroe merged 1 commit intonpmx-dev:mainfrom
ShroXd:fix-copied-bg

Conversation

@ShroXd
Copy link
Contributor

@ShroXd ShroXd commented Mar 4, 2026

🔗 Linked issue

n/a

🧭 Context

The copied tooltip was transparent, which is inconsistent with the other tooltips.

📚 Description

Scenario Screenshot
Before 5672cac651f1ed3a788b595c998a878b
After - Light 124f83a133407d5522da6d458f1961f4
After - Dark Screenshot From 2026-03-04 11-33-16
After - Different color Screenshot From 2026-03-04 11-34-54

@vercel
Copy link

vercel bot commented Mar 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Mar 4, 2026 3:20am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Mar 4, 2026 3:20am
npmx-lunaria Ignored Ignored Mar 4, 2026 3:20am

Request Review

@ShroXd ShroXd changed the title fix: fix transparency bleeding of copied tooltip fix(ui): fix transparency bleeding of copied tooltip Mar 4, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 4, 2026

📝 Walkthrough

Walkthrough

The CopyToClipboardButton.vue component's styling logic for the copied state has been refactored. The template's dynamic class binding now uses an array format when copied, combining the existing 'text-accent' class with a new CSS module class. The non-copied state binding remains unchanged. A new .copiedBg CSS rule has been introduced that applies a background colour via the color-mix function, blending 10% accent with the background colour.

Suggested reviewers

  • danielroe
  • knowler
  • nicolo-ribaudo
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description is directly related to the changeset, explaining the problem (transparent tooltip) and the solution (adjusting the background styling).

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Mar 4, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

Copy link
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

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

thank you! ❤️

@danielroe danielroe added this pull request to the merge queue Mar 4, 2026
Merged via the queue into npmx-dev:main with commit 9216309 Mar 4, 2026
22 checks passed
@github-actions
Copy link

github-actions bot commented Mar 4, 2026

Thanks for your first contribution, @ShroXd! ⭐

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.

@github-actions github-actions bot mentioned this pull request Mar 4, 2026
@ShroXd ShroXd deleted the fix-copied-bg branch March 4, 2026 09:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants