refactor(layout): use ds-* utilities in top bar, history search, project sidebar

Made-with: Cursor
This commit is contained in:
Douglas 2026-04-23 11:21:22 +01:00
parent 172936ca54
commit 48e94c1916
5 changed files with 22 additions and 22 deletions

View file

@ -45,7 +45,7 @@ export default function SearchInput({
placeholder={placeholder ?? t('layout.search')}
leadingIcon={
leadingIcon ?? (
<Search className="h-5 w-5 text-[color:var(--ds-icon-neutral-muted-default)]" />
<Search className="h-5 w-5 text-ds-icon-neutral-muted-default" />
)
}
/>

View file

@ -303,8 +303,8 @@ export function HeaderAction() {
</AccordionTrigger>
<AccordionContent className="px-3 py-3">
<div className="gap-3 pl-7 -mr-1 flex flex-col">
<div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-[var(--ds-bg-neutral-subtle-default)] hover:ring-2 hover:ring-[var(--ds-bg-neutral-subtle-default)] hover:ring-offset-2 hover:ring-offset-[var(--ds-bg-neutral-subtle-default)]">
<span className="min-w-0 text-body-sm font-medium flex-1 text-[color:var(--ds-text-neutral-muted-default)]">
<div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-ds-bg-neutral-subtle-default hover:ring-2 hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-2 hover:ring-offset-ds-bg-neutral-subtle-default">
<span className="min-w-0 text-body-sm font-medium flex-1 text-ds-text-neutral-muted-default">
{instructionsHint}
</span>
<Button
@ -319,8 +319,8 @@ export function HeaderAction() {
<PenLine className="h-4 w-4 shrink-0" aria-hidden />
</Button>
</div>
<div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-[var(--ds-bg-neutral-subtle-default)] hover:ring-2 hover:ring-[var(--ds-bg-neutral-subtle-default)] hover:ring-offset-2 hover:ring-offset-[var(--ds-bg-neutral-subtle-default)]">
<span className="min-w-0 text-body-sm font-medium text-[color:var(--ds-text-neutral-muted-default)]">
<div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-ds-bg-neutral-subtle-default hover:ring-2 hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-2 hover:ring-offset-ds-bg-neutral-subtle-default">
<span className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default">
{memoryLabel}
</span>
<Button
@ -335,8 +335,8 @@ export function HeaderAction() {
{memoryOn ? memoryOnLabel : memoryOffLabel}
</Button>
</div>
<div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-[var(--ds-bg-neutral-subtle-default)] hover:ring-2 hover:ring-[var(--ds-bg-neutral-subtle-default)] hover:ring-offset-2 hover:ring-offset-[var(--ds-bg-neutral-subtle-default)]">
<span className="min-w-0 text-body-sm font-medium text-[color:var(--ds-text-neutral-muted-default)]">
<div className="gap-2 min-w-0 rounded-lg flex items-center justify-between hover:bg-ds-bg-neutral-subtle-default hover:ring-2 hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-2 hover:ring-offset-ds-bg-neutral-subtle-default">
<span className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default">
{workforceSettingLabel}
</span>
<Button

View file

@ -76,10 +76,10 @@ export function NavList({
const sessionLeadIconClass = (taskStatus: ChatTaskStatusType | undefined) => {
if (taskStatus === ChatTaskStatus.RUNNING)
return 'text-[color:var(--ds-icon-status-splitting-default-default)]';
return 'text-ds-icon-status-splitting-default-default';
if (taskStatus === ChatTaskStatus.FINISHED)
return 'text-[color:var(--ds-icon-status-completed-default-default)]';
return 'text-[color:var(--ds-icon-neutral-default-default)]';
return 'text-ds-icon-status-completed-default-default';
return 'text-ds-icon-neutral-default-default';
};
return (
@ -103,8 +103,8 @@ export function NavList({
size="sm"
buttonContent="icon-only"
className={cn(
'no-drag mr-1 rounded-xl shrink-0 hover:bg-[var(--ds-bg-neutral-strong-default)]',
'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--ds-border-neutral-default-default)] focus-visible:outline-none'
'no-drag mr-1 rounded-xl shrink-0 hover:bg-ds-bg-neutral-strong-default',
'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ds-border-neutral-default-default focus-visible:outline-none'
)}
aria-label={newSessionLabel}
onClick={(e) => {
@ -114,7 +114,7 @@ export function NavList({
}}
>
<Plus
className="h-4 w-4 text-[color:var(--ds-icon-neutral-muted-default)]"
className="h-4 w-4 text-ds-icon-neutral-muted-default"
aria-hidden
/>
</Button>
@ -141,7 +141,7 @@ export function NavList({
aria-label={newSessionLabel}
>
<Plus
className="h-4 w-4 shrink-0 text-[color:var(--ds-icon-neutral-muted-default)]"
className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default"
aria-hidden
/>
</button>

View file

@ -345,7 +345,7 @@ export default function ProjectPageSidebar({
label="Scheduled"
trailing={
showTriggersDisconnectedTag ? (
<span className="rounded-md px-1.5 font-medium leading-tight max-w-[5.5rem] shrink-0 truncate bg-[var(--ds-bg-neutral-default-default)] py-px text-[10px] text-[color:var(--ds-text-status-error-strong-default)]">
<span className="rounded-md px-1.5 font-medium leading-tight max-w-[5.5rem] shrink-0 truncate bg-ds-bg-neutral-default-default py-px text-[10px] text-ds-text-status-error-strong-default">
{t('layout.triggers-disconnected')}
</span>
) : undefined
@ -372,8 +372,8 @@ export default function ProjectPageSidebar({
size="sm"
buttonContent="icon-only"
className={cn(
'no-drag mr-1 rounded-xl shrink-0 hover:bg-[var(--ds-bg-neutral-strong-default)]',
'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--ds-border-neutral-default-default)] focus-visible:outline-none'
'no-drag mr-1 rounded-xl shrink-0 hover:bg-ds-bg-neutral-strong-default',
'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ds-border-neutral-default-default focus-visible:outline-none'
)}
aria-label={t('triggers.add-trigger')}
onClick={(e) => {
@ -383,7 +383,7 @@ export default function ProjectPageSidebar({
}}
>
<Plus
className="h-4 w-4 text-[color:var(--ds-icon-neutral-muted-default)]"
className="h-4 w-4 text-ds-icon-neutral-muted-default"
aria-hidden
/>
</Button>

View file

@ -296,7 +296,7 @@ function HeaderWin() {
aria-current="page"
>
<Sparkles
className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
className="h-4 w-4 text-ds-icon-neutral-default-default"
aria-hidden
/>
</Button>
@ -316,7 +316,7 @@ function HeaderWin() {
aria-current="page"
>
<House
className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
className="h-4 w-4 text-ds-icon-neutral-default-default"
aria-hidden
/>
</Button>
@ -336,7 +336,7 @@ function HeaderWin() {
aria-label={t('layout.back')}
>
<ChevronLeft
className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
className="h-4 w-4 text-ds-icon-neutral-default-default"
aria-hidden
/>
</Button>
@ -355,7 +355,7 @@ function HeaderWin() {
aria-label={t('layout.forward')}
>
<ChevronRight
className="h-4 w-4 text-[color:var(--ds-icon-neutral-default-default)]"
className="h-4 w-4 text-ds-icon-neutral-default-default"
aria-hidden
/>
</Button>