mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-05-03 02:11:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(components): refactor to use design system

Browse source
This commit is contained in:
Austin Pickett 2026-04-28 13:03:05 -04:00
parent 663602f6b0
commit 1285172aca
20 changed files with 243 additions and 597 deletions
Download patch file Download diff file Expand all files Collapse all files

43
web/src/components/ThemeSwitcher.tsx
View file

@ -1,6 +1,6 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { Palette, Check } from "lucide-react";
import { Typography } from "@nous-research/ui";
import { Button, ListItem, Typography } from "@nous-research/ui";
import { BUILTIN_THEMES, useTheme } from "@/themes";
import { useI18n } from "@/i18n";
import { cn } from "@/lib/utils";
@ -50,27 +50,26 @@ export function ThemeSwitcher({ dropUp = false }: ThemeSwitcherProps) {
return (
<div ref={wrapperRef} className="relative">
<button
type="button"
<Button
ghost
onClick={() => setOpen((o) => !o)}
className={cn(
"group relative inline-flex items-center gap-1.5 px-2 py-1 text-xs",
"text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground",
)}
className="px-2 py-1 normal-case tracking-normal font-normal text-xs text-muted-foreground hover:text-foreground"
title={t.theme?.switchTheme ?? "Switch theme"}
aria-label={t.theme?.switchTheme ?? "Switch theme"}
aria-expanded={open}
aria-haspopup="listbox"
>
<Palette className="h-3.5 w-3.5" />
<Typography
mondwest
className="hidden sm:inline tracking-wide uppercase text-[0.65rem]"
>
{label}
</Typography>
</button>
<span className="inline-flex items-center gap-1.5">
<Palette className="h-3.5 w-3.5" />
<Typography
mondwest
className="hidden sm:inline tracking-wide uppercase text-[0.65rem]"
>
{label}
</Typography>
</span>
</Button>
{open && (
<div
@ -97,20 +96,16 @@ export function ThemeSwitcher({ dropUp = false }: ThemeSwitcherProps) {
const preset = BUILTIN_THEMES[th.name];
return (
<button
<ListItem
key={th.name}
type="button"
active={isActive}
role="option"
aria-selected={isActive}
onClick={() => {
setTheme(th.name);
close();
}}
className={cn(
"flex w-full items-center gap-3 px-3 py-2 text-left transition-colors cursor-pointer",
"hover:bg-midground/10",
isActive ? "text-midground" : "text-midground/60",
)}
className="gap-3"
>
{preset ? (
<ThemeSwatch theme={preset.name} />
@ -138,7 +133,7 @@ export function ThemeSwitcher({ dropUp = false }: ThemeSwitcherProps) {
isActive ? "opacity-100" : "opacity-0",
)}
/>
</button>
</ListItem>
);
})}
</div>