mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-07-01 10:02:57 +08:00
032258b260
Rework the color system around warm neutrals and route hardcoded surfaces through theme tokens for consistency. - Theme tokens (index.css, ThemeContext): warm cream light mode and neutral charcoal dark mode, replacing the pure-white/blue-tinted palette; update PWA theme-color meta - Code blocks: soft grey background in light mode via oneLight/oneDark, and drop the Tailwind Typography <pre> shell that framed the highlighter in a dark box - Dropdowns/panels: convert CommandMenu, Quick Settings, and the JSON response block from hardcoded gray/slate to popover/muted/border tokens - Git panel: Publish button purple -> primary blue - Composer: drop top padding so the input sits flush with the thread
35 lines
865 B
TypeScript
35 lines
865 B
TypeScript
import { memo } from 'react';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
import { CHECKBOX_CLASS, TOGGLE_ROW_CLASS } from '../constants';
|
|
|
|
type QuickSettingsToggleRowProps = {
|
|
label: string;
|
|
icon: LucideIcon;
|
|
checked: boolean;
|
|
onCheckedChange: (checked: boolean) => void;
|
|
};
|
|
|
|
function QuickSettingsToggleRow({
|
|
label,
|
|
icon: Icon,
|
|
checked,
|
|
onCheckedChange,
|
|
}: QuickSettingsToggleRowProps) {
|
|
return (
|
|
<label className={TOGGLE_ROW_CLASS}>
|
|
<span className="flex items-center gap-2 text-sm text-foreground">
|
|
<Icon className="h-4 w-4 text-muted-foreground" />
|
|
{label}
|
|
</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(event) => onCheckedChange(event.target.checked)}
|
|
className={CHECKBOX_CLASS}
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
export default memo(QuickSettingsToggleRow);
|