mirror of
https://github.com/etiennecollin/unifi-voucher-manager.git
synced 2025-11-03 05:23:30 +00:00
feat: replaced QR text button with small QR icon
This commit is contained in:
2
frontend/public/qr.svg
Normal file
2
frontend/public/qr.svg
Normal 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 |
@@ -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 {
|
||||
|
||||
@@ -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 Wi‑Fi QR code"
|
||||
title="Open Wi‑Fi 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>
|
||||
|
||||
Reference in New Issue
Block a user