fix(settings): add icon to notification-status-card heading for cross-section parity

Both heading variants (empty-state at line 126, header at line 139) now
follow the convention used by 21 other Settings sections: a Bell icon
(text-primary h-5 w-5) preceding the h2 in a flex container with
gap-2 items-center. Brings the only two violators in
src/components/settings/* into alignment with the icon-heading pattern
established in telegram-card.tsx, ntfy-card.tsx, web-push-card.tsx.
This commit is contained in:
Marc-André Bombeck committed 2026-05-14 15:07:11 +02:00
1 parent ca3c225a07
commit 00105e25f7
1 file changed
+13 -6
@@ -21,6 +21,7 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
AlertCircle,
Bell,
CheckCircle2,
Clock,
Loader2,
@@ -123,9 +124,12 @@ export function NotificationStatusCard() {
className="bg-card border-border rounded-xl border p-6"
data-testid="notification-status-empty"
>
<h2 className="text-lg font-semibold">
{t("settings.notificationStatus.title")}
</h2>
<div className="flex items-center gap-2">
<Bell className="text-primary h-5 w-5" />
<h2 className="text-lg font-semibold">
{t("settings.notificationStatus.title")}
</h2>
</div>
<p className="text-muted-foreground mt-1 text-sm">
{t("settings.notificationStatus.emptyDescription")}
</p>
@@ -136,9 +140,12 @@ export function NotificationStatusCard() {
return (
<div className="bg-card border-border rounded-xl border p-6">
<header className="mb-4">
<h2 className="text-lg font-semibold">
{t("settings.notificationStatus.title")}
</h2>
<div className="flex items-center gap-2">
<Bell className="text-primary h-5 w-5" />
<h2 className="text-lg font-semibold">
{t("settings.notificationStatus.title")}
</h2>
</div>
<p className="text-muted-foreground text-xs">
{t("settings.notificationStatus.description")}
</p>