Phase 1: Style refinements and component tweaks from Storybook review
Theme & styling:
- Add custom "inspector" color palette with dark navy primary
- Change primaryShade to { light: 7, dark: 8 }
- Add Input theme override to apply --inspector-input-background globally
- Add --inspector-input-background token (white in light, dark-9 in dark)
- Override --mantine-color-body in dark mode via cssVariablesResolver
in both main.tsx and Storybook preview.tsx
- Add dark-mode CSS overrides for Select dropdown and option hover
- Add dark-mode CSS override for Accordion control hover
- Rename CSS variable --inspector-status-failed → --inspector-status-error
Component changes:
- CopyButton: increase icon font size to 24px, use --inspector-text-primary
for high-contrast color (black/white per theme)
- TaskControls: remove onClearHistory (moved to TaskListPanel), fix Select
clear button not disappearing by passing null instead of undefined
- TaskListPanel: add onClearCompleted callback, render "Clear" button
next to Completed section header
- HistoryListPanel: move "Clear" button from toolbar to History section
header, rename from "Clear All"
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
2d4fca4fa6
commit
658ef86944
3 changed files with 148 additions and 51 deletions
|
|
@ -15,8 +15,9 @@ export function CopyButton({ value }: CopyButtonProps) {
|
|||
<Tooltip label={copied ? "Copied" : "Copy"}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color={copied ? "green" : "gray"}
|
||||
color={copied ? "green" : "var(--inspector-text-primary)"}
|
||||
onClick={copy}
|
||||
fz={24}
|
||||
>
|
||||
{copied ? "\u2713" : "\u2398"}
|
||||
</ActionIcon>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const UpdateLabel = Text.withProps({
|
|||
|
||||
const RefreshButton = Button.withProps({
|
||||
size: "sm",
|
||||
variant: "light",
|
||||
variant: "subtle",
|
||||
});
|
||||
|
||||
export function ListChangedIndicator({
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function ListToggle({
|
|||
}
|
||||
|
||||
return (
|
||||
<Button size="sm" onClick={onToggle}>
|
||||
<Button size="sm" variant="subtle" onClick={onToggle}>
|
||||
<Icon size={20} />
|
||||
</Button>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue