mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Fix NIP-46 QR code styling to use tokenized colors and utility classes
Updated `js/ui/loginModalController.js` to resolve QR code colors from CSS variables (`--color-white`, `--color-black`) instead of hardcoding hex values, ensuring compatibility with the design system. Updated `components/login-modal.html` to use Tailwind utility classes (`bg-white`, `text-black`, `p-6`) instead of inline styles, improving maintainability and readability. This ensures the QR code remains scannable (high contrast) while respecting the codebase's tokenized styling approach.
This commit is contained in:
1 parent
57c065125c
commit
6541421928
2 files changed
+16
-4
No files matched your search
@@ -348,8 +348,7 @@
|
||||
<div data-nip46-handshake-panel class="space-y-6">
|
||||
<div class="flex flex-col items-center gap-6">
|
||||
<div
|
||||
class="flex aspect-square w-full max-w-xs items-center justify-center rounded-2xl border border-border-strong bg-white p-6 shadow-sm"
|
||||
style="background-color: white; color: black;"
|
||||
class="flex aspect-square w-full max-w-xs items-center justify-center rounded-2xl border border-border-strong bg-white text-black p-6 shadow-sm"
|
||||
data-nip46-qr
|
||||
aria-hidden="true"
|
||||
>
|
||||
|
||||
@@ -1299,8 +1299,21 @@ export default class LoginModalController {
|
||||
qrContainer.innerHTML = "";
|
||||
// Force high-contrast black-on-white for the QR code to ensure
|
||||
// it remains readable and scannable regardless of the application theme.
|
||||
const qrLightColor = "#ffffff";
|
||||
const qrDarkColor = "#000000";
|
||||
// We resolve these from the unified token system to ensure consistency.
|
||||
let qrLightColor = "#ffffff";
|
||||
let qrDarkColor = "#000000";
|
||||
|
||||
if (this.window && typeof this.window.getComputedStyle === "function") {
|
||||
try {
|
||||
const style = this.window.getComputedStyle(this.document.documentElement);
|
||||
const white = style.getPropertyValue("--color-white").trim();
|
||||
const black = style.getPropertyValue("--color-black").trim();
|
||||
if (white) qrLightColor = white;
|
||||
if (black) qrDarkColor = black;
|
||||
} catch (error) {
|
||||
// Fallback to hardcoded values if style resolution fails
|
||||
}
|
||||
}
|
||||
|
||||
if (uri) {
|
||||
try {
|
||||
|
||||
Reference in new issue
Block a user