refactor: migrate status callout banners to status-subtle/border tokens

This commit is contained in:
Marco Beretta 2026-06-20 19:12:50 +02:00
parent 5cce877109
commit 3256906f9e
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
7 changed files with 9 additions and 9 deletions

View file

@ -76,7 +76,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
return (
<>
{showResendLink && (
<div className="mt-2 rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary">
<div className="mt-2 rounded-md border border-status-success-border bg-status-success-subtle px-3 py-2 text-sm text-text-secondary">
{localize('com_auth_email_verification_resend_prompt')}
<button
type="button"

View file

@ -133,7 +133,7 @@ const Registration: React.FC = () => {
)}
{registerUser.isSuccess && countdown > 0 && (
<div
className="rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary"
className="rounded-md border border-status-success-border bg-status-success-subtle px-3 py-2 text-sm text-text-secondary"
role="alert"
>
{localize(

View file

@ -21,7 +21,7 @@ export default function Section({ heading, danger, children }: SectionProps) {
<div
className={cn(
'divide-y divide-border-light overflow-hidden rounded-xl border text-sm text-text-primary',
danger ? 'border-red-500/30' : 'border-border-light',
danger ? 'border-status-error-border' : 'border-border-light',
)}
>
{children}

View file

@ -23,12 +23,12 @@ export default function Item({ apiKey }: ItemProps) {
<div className="flex items-center gap-2">
<span className="truncate font-medium text-text-primary">{apiKey.name}</span>
{status?.state === 'expired' && (
<span className="shrink-0 rounded-full border border-red-500/20 bg-red-500/10 px-2 py-0.5 text-xs font-medium text-red-600 dark:text-red-400">
<span className="shrink-0 rounded-full border border-status-error-border bg-status-error-subtle px-2 py-0.5 text-xs font-medium text-status-error">
{localize('com_ui_api_key_expired')}
</span>
)}
{status?.state === 'expiring' && (
<span className="shrink-0 rounded-full border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-500">
<span className="shrink-0 rounded-full border border-status-warning-border bg-status-warning-subtle px-2 py-0.5 text-xs font-medium text-status-warning">
{status.days === 1
? localize('com_ui_api_key_expires_in_day')
: localize('com_ui_api_key_expires_in_days', { 0: status.days })}

View file

@ -17,7 +17,7 @@ export default function Reveal({ createdKey, onDone }: RevealProps) {
return (
<div className="min-w-0 space-y-4">
<div className="flex gap-2.5 rounded-lg border border-amber-500/20 bg-amber-500/10 p-3">
<div className="flex gap-2.5 rounded-lg border border-status-warning-border bg-status-warning-subtle p-3">
<TriangleAlert
className="mt-0.5 h-4 w-4 shrink-0 text-text-warning"
aria-hidden="true"

View file

@ -261,7 +261,7 @@ export default function CreateSkillForm({
{createSkill.error != null && (
<div
role="alert"
className="flex items-start gap-2 rounded-md border border-red-500/40 bg-red-500/5 p-3 text-sm text-text-destructive"
className="flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-subtle p-3 text-sm text-text-destructive"
>
<AlertTriangle className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
<span>{localize('com_ui_skill_create_error')}</span>

View file

@ -240,7 +240,7 @@ export default function SkillForm({ skillId }: SkillFormProps) {
{readOnly && (
<div
role="note"
className="mt-4 flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/5 p-3 text-sm text-amber-600 dark:text-amber-400"
className="mt-4 flex items-start gap-2 rounded-md border border-status-warning-border bg-status-warning-subtle p-3 text-sm text-status-warning"
>
<Info className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
<span>{localize('com_ui_skill_no_edit_permission')}</span>
@ -250,7 +250,7 @@ export default function SkillForm({ skillId }: SkillFormProps) {
{warnings && warnings.length > 0 && (
<div
role="alert"
className="mt-4 flex flex-col gap-1 rounded-md border border-amber-500/40 bg-amber-500/5 p-3 text-sm text-amber-600 dark:text-amber-400"
className="mt-4 flex flex-col gap-1 rounded-md border border-status-warning-border bg-status-warning-subtle p-3 text-sm text-status-warning"
>
<div className="flex items-center gap-2 font-semibold">
<AlertTriangle className="size-4" aria-hidden="true" />