Improve pending OpenCode restart counter contrast
Place a high-contrast count badge first on the Apply & Restart action so pending settings changes remain obvious in the Settings chrome. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>
This commit is contained in:
co-authored by
Serhii Dziupin
parent
57819dd164
commit
190fbeedb4
@@ -61,21 +61,21 @@ export const PendingOpenCodeRestartAction: React.FC<PendingOpenCodeRestartAction
|
|||||||
onClick={() => void handleApply()}
|
onClick={() => void handleApply()}
|
||||||
className={cn('gap-1.5 shadow-sm', className)}
|
className={cn('gap-1.5 shadow-sm', className)}
|
||||||
>
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5',
|
||||||
|
'bg-background text-foreground typography-micro font-semibold tabular-nums',
|
||||||
|
)}
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{pendingCount}
|
||||||
|
</span>
|
||||||
<Icon name="restart" className="h-3.5 w-3.5 shrink-0" />
|
<Icon name="restart" className="h-3.5 w-3.5 shrink-0" />
|
||||||
<span className="truncate">
|
<span className="truncate">
|
||||||
{isApplying
|
{isApplying
|
||||||
? t('settings.view.pendingRestart.applying')
|
? t('settings.view.pendingRestart.applying')
|
||||||
: t('settings.view.actions.applyAndRestartOpenCode')}
|
: t('settings.view.actions.applyAndRestartOpenCode')}
|
||||||
</span>
|
</span>
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'inline-flex min-w-5 items-center justify-center rounded-md px-1.5 typography-micro font-semibold',
|
|
||||||
'bg-primary-foreground/15 text-primary-foreground',
|
|
||||||
)}
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
{pendingCount}
|
|
||||||
</span>
|
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user