feat: replaced QR text button with small QR icon

This commit is contained in:
etiennecollin
2025-08-14 12:44:20 -04:00
parent 12a1b06d8a
commit 339e7bbc0a
3 changed files with 14 additions and 7 deletions

2
frontend/public/qr.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 9h6V3H3zm1-5h4v4H4zm1 1h2v2H5zm10 4h6V3h-6zm1-5h4v4h-4zm1 1h2v2h-2zM3 21h6v-6H3zm1-5h4v4H4zm1 1h2v2H5zm15 2h1v2h-2v-3h1zm0-3h1v1h-1zm0-1v1h-1v-1zm-10 2h1v4h-1v-4zm-4-7v2H4v-1H3v-1h3zm4-3h1v1h-1zm3-3v2h-1V3h2v1zm-3 0h1v1h-1zm10 8h1v2h-2v-1h1zm-1-2v1h-2v2h-2v-1h1v-2h3zm-7 4h-1v-1h-1v-1h2v2zm6 2h1v1h-1zm2-5v1h-1v-1zm-9 3v1h-1v-1zm6 5h1v2h-2v-2zm-3 0h1v1h-1v1h-2v-1h1v-1zm0-1v-1h2v1zm0-5h1v3h-1v1h-1v1h-1v-2h-1v-1h3v-1h-1v-1zm-9 0v1H4v-1zm12 4h-1v-1h1zm1-2h-2v-1h2zM8 10h1v1H8v1h1v2H8v-1H7v1H6v-2h1v-2zm3 0V8h3v3h-2v-1h1V9h-1v1zm0-4h1v1h-1zm-1 4h1v1h-1zm3-3V6h1v1z"/><path fill="none" d="M0 0h24v24H0z"/></svg>

After

Width:  |  Height:  |  Size: 828 B

View File

@@ -202,10 +202,10 @@
/* ---------------------------------- */
@utility bg-interactive {
@apply bg-neutral-50 dark:bg-neutral-700;
@apply bg-neutral-50 dark:bg-neutral-800;
}
@utility bg-interactive-hover {
@apply hover:bg-neutral-100 dark:hover:bg-neutral-600;
@apply hover:bg-neutral-100 dark:hover:bg-neutral-700;
}
@utility interactive-disabled {
@apply disabled:opacity-50 disabled:bg-disabled disabled:hover:bg-disabled disabled:text-primary disabled:border-default disabled:cursor-default;
@@ -325,7 +325,7 @@
}
select {
@apply appearance-none bg-surface border border-default cursor-pointer focus-accent px-3 py-2 rounded-lg w-full;
@apply appearance-none bg-surface bg-interactive-hover border border-default cursor-pointer focus-accent px-3 py-2 rounded-lg w-full;
}
input {
@apply bg-surface border border-default focus-accent px-3 py-2 rounded-lg w-full;
@@ -349,7 +349,7 @@
/* ========================================================================== */
@utility btn {
@apply inline-flex-center font-medium rounded-lg focus:ring-2 cursor-pointer px-4 py-2 border interactive-disabled border-default text-primary;
@apply inline-flex-center bg-interactive-hover font-medium rounded-lg focus:ring-2 cursor-pointer px-4 py-2 border interactive-disabled border-default text-primary;
}
@layer components {

View File

@@ -51,13 +51,18 @@ export default function Header() {
<div className="flex-center gap-3">
<button
onClick={() => setShowWifi(true)}
className="btn"
className="btn p-1"
disabled={!wifiConfig}
aria-label="Open WiFi QR code"
title="Open WiFi QR code"
>
{/* TODO: Make content a small QR code SVG */}
QR
<img
src="/qr.svg"
width={45}
height={45}
className="dark:invert"
alt="QR code icon"
/>
</button>
<ThemeSwitcher />
</div>