From 2b62160c9564866e7e6d34e693884d8de1b628c0 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Mar 2026 07:50:30 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Polish=20settings=20pages=20=E2=80=94=20?=
 =?UTF-8?q?display=20font,=20status=20tokens,=20spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply font-display to headings across settings layout and health page.
Replace text-destructive with text-status-error-fg for consistency with
the design system status tokens. Increase projects page section spacing
from space-y-4 to space-y-6.
---
 apps/web/src/routes/settings.tsx          |  2 +-
 apps/web/src/routes/settings/health.tsx   | 12 ++++++------
 apps/web/src/routes/settings/projects.tsx |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 824b2ee..804a76b 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -13,7 +13,7 @@ function SettingsLayout() {
   return (
     <div className="mx-auto max-w-4xl space-y-4">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
+        <h1 className="font-display text-2xl font-bold tracking-tight">Settings</h1>
       </div>
       <nav className="flex gap-1 border-b border-border">
         {settingsTabs.map((tab) => (
diff --git a/apps/web/src/routes/settings/health.tsx b/apps/web/src/routes/settings/health.tsx
index 0fb8e42..ca62c0f 100644
--- a/apps/web/src/routes/settings/health.tsx
+++ b/apps/web/src/routes/settings/health.tsx
@@ -65,8 +65,8 @@ function HealthCheckPage() {
   if (isError) {
     return (
       <div className="flex flex-col items-center justify-center gap-4 py-12">
-        <XCircle className="h-8 w-8 text-destructive" />
-        <p className="text-sm text-destructive">
+        <XCircle className="h-8 w-8 text-status-error-fg" />
+        <p className="text-sm text-status-error-fg">
           Failed to load health check: {error?.message ?? 'Unknown error'}
         </p>
         <Button variant="outline" size="sm" onClick={() => void refetch()}>
@@ -97,7 +97,7 @@ function HealthCheckPage() {
       {/* Server Status */}
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-lg">
+          <CardTitle className="flex items-center gap-2 font-display text-lg">
             <Server className="h-5 w-5" />
             Server Status
           </CardTitle>
@@ -124,7 +124,7 @@ function HealthCheckPage() {
 
       {/* Accounts */}
       <div className="space-y-3">
-        <h2 className="text-lg font-semibold">Accounts</h2>
+        <h2 className="font-display text-lg font-semibold">Accounts</h2>
         {accounts.length === 0 ? (
           <Card>
             <CardContent className="py-6">
@@ -154,7 +154,7 @@ function HealthCheckPage() {
 
       {/* Projects */}
       <div className="space-y-3">
-        <h2 className="text-lg font-semibold">Projects</h2>
+        <h2 className="font-display text-lg font-semibold">Projects</h2>
         {projects.length === 0 ? (
           <Card>
             <CardContent className="py-6">
@@ -170,7 +170,7 @@ function HealthCheckPage() {
                 {project.repoExists ? (
                   <CheckCircle2 className="h-5 w-5 shrink-0 text-status-success-dot" />
                 ) : (
-                  <XCircle className="h-5 w-5 shrink-0 text-destructive" />
+                  <XCircle className="h-5 w-5 shrink-0 text-status-error-fg" />
                 )}
                 <div className="min-w-0 flex-1">
                   <p className="text-sm font-medium">{project.name}</p>
diff --git a/apps/web/src/routes/settings/projects.tsx b/apps/web/src/routes/settings/projects.tsx
index 2d2c332..a5dded0 100644
--- a/apps/web/src/routes/settings/projects.tsx
+++ b/apps/web/src/routes/settings/projects.tsx
@@ -33,7 +33,7 @@ function ProjectsSettingsPage() {
 
   if (isLoading) {
     return (
-      <div className="space-y-4">
+      <div className="space-y-6">
         <Skeleton className="h-9 w-36" />
         <Skeleton className="h-24 w-full" />
         <Skeleton className="h-24 w-full" />
@@ -42,7 +42,7 @@ function ProjectsSettingsPage() {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       <div className="flex justify-end">
         <Button size="sm" onClick={() => setRegisterOpen(true)}>
           <Plus className="mr-2 h-4 w-4" />