chore(ui): Clean new keyboard option

Fixed the Tailwind CSS syntax for `in` (nested) selector
Added missing React dependency for `useEffect`
This commit is contained in:
Marc Brooks 2025-05-21 17:32:31 -05:00
parent b91a995918
commit 0512673eee
No known key found for this signature in database
GPG Key ID: 583A6AF2D6AE1DC6
2 changed files with 2 additions and 3 deletions

View File

@ -25,7 +25,7 @@ export default function SettingsKeyboardRoute() {
if ("error" in resp) return; if ("error" in resp) return;
setKeyboardLayout(resp.result as string); setKeyboardLayout(resp.result as string);
}); });
}, []); }, [send, setKeyboardLayout]);
const onKeyboardLayoutChange = useCallback( const onKeyboardLayoutChange = useCallback(
(e: React.ChangeEvent<HTMLSelectElement>) => { (e: React.ChangeEvent<HTMLSelectElement>) => {

View File

@ -151,7 +151,6 @@ export default function SettingsRoute() {
className={({ isActive }) => (isActive ? "active" : "")} className={({ isActive }) => (isActive ? "active" : "")}
> >
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent"> <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuMouse className="h-4 w-4 shrink-0" /> <LuMouse className="h-4 w-4 shrink-0" />
<h1>Mouse</h1> <h1>Mouse</h1>
</div> </div>
@ -163,7 +162,7 @@ export default function SettingsRoute() {
to="keyboard" to="keyboard"
className={({ isActive }) => (isActive ? "active" : "")} className={({ isActive }) => (isActive ? "active" : "")}
> >
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent"> <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
<LuKeyboard className="h-4 w-4 shrink-0" /> <LuKeyboard className="h-4 w-4 shrink-0" />
<h1>Keyboard</h1> <h1>Keyboard</h1>
</div> </div>