fix: improve connection error message contrast in dark mode (#155)

## Summary

- Uses `text-destructive-foreground` in dark mode for the connection
error icon and message text, replacing `text-destructive` which was too
dim against the dark background.
This commit is contained in:
Víctor Falcón 2026-02-25 13:56:26 +01:00 committed by GitHub
parent 690be20f21
commit e718f5df5c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 4 deletions

View File

@ -278,9 +278,9 @@ export default function ConnectionsPage({ connections }: Props) {
{connection.status === 'error' && (
<div className="mt-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 dark:bg-destructive/10">
<div className="flex items-start gap-2">
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive dark:text-destructive-foreground" />
<div className="space-y-2">
<p className="text-sm text-destructive">
<p className="text-sm text-destructive dark:text-foreground">
{connection.error_message ??
__(
'An unexpected error occurred during sync.',
@ -291,7 +291,7 @@ export default function ConnectionsPage({ connections }: Props) {
connection,
) && (
<Button
variant="outline"
variant="secondary"
size="sm"
className="h-7 text-xs"
onClick={() =>
@ -307,7 +307,7 @@ export default function ConnectionsPage({ connections }: Props) {
</Button>
)}
<Button
variant="outline"
variant="secondary"
size="sm"
className="h-7 text-xs"
onClick={() =>