iamdoubz
3d0f091bba
lucide-react (1.56.0) is the one icon set; it hides icons from screen readers by default and only the icons used are bundled (+6 kB gzipped). It replaces the ✕ ☀ ☾ ↑ ↓ ▶ ✓ ← characters and the hand-drawn menu and phone icons. The admin sidebar's 21 pages are grouped under Call routing, People, Features, History and System, each with an icon; the current page gets a left bar. The My Phone tabs have icons and a blue active state. Home is a greeting and cards (new shared Panel): My status, Missed calls with a call-back button, New voicemails, with friendly empty states. Softphone: a status pill (dot and word), call controls as icon-over-label buttons that are toggles with aria-pressed (Mute, Hold, Keypad, Transfer, red Hang up), and a round keypad with the letters under the digits.
20 lines
616 B
TypeScript
20 lines
616 B
TypeScript
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
import { Moon, Sun } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { toggleTheme } from '../theme.ts';
|
|
import { Button } from './ui.tsx';
|
|
|
|
export function ThemeToggle() {
|
|
const [dark, setDark] = useState(() => document.documentElement.classList.contains('dark'));
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
aria-pressed={dark}
|
|
aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
|
|
onClick={() => setDark(toggleTheme())}
|
|
>
|
|
{dark ? <Sun className="size-4" /> : <Moon className="size-4" />}
|
|
</Button>
|
|
);
|
|
}
|