From fd4550d444dd861744ae1d113adf4f8cbd4560b0 Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Wed, 18 Feb 2026 20:36:31 +0100
Subject: [PATCH] code-review-fix task 12.3: fix dark theme on annotation-types
 and span-label-types pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/annotation-types/page.tsx | 68 +++++++++++++++----------------
 src/app/span-label-types/page.tsx | 68 +++++++++++++++----------------
 2 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/app/annotation-types/page.tsx b/src/app/annotation-types/page.tsx
index ef61c7f..4486242 100644
--- a/src/app/annotation-types/page.tsx
+++ b/src/app/annotation-types/page.tsx
@@ -158,7 +158,7 @@ export default function AnnotationTypesPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 p-8">
+      <div className="min-h-screen bg-background p-8">
         <div className="max-w-6xl mx-auto">
           <p>Loading...</p>
         </div>
@@ -167,12 +167,12 @@ export default function AnnotationTypesPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 p-8">
+    <div className="min-h-screen bg-background p-8">
       <div className="max-w-6xl mx-auto">
         <div className="flex justify-between items-center mb-6">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">Annotation Types</h1>
-            <p className="text-gray-600 mt-1">Manage annotation types for your charts</p>
+            <h1 className="text-3xl font-bold text-foreground">Annotation Types</h1>
+            <p className="text-muted-foreground mt-1">Manage annotation types for your charts</p>
           </div>
           <div className="flex gap-2">
             <Button onClick={() => window.location.href = '/'} variant="outline">
@@ -192,14 +192,14 @@ export default function AnnotationTypesPage() {
         </div>
 
         {showAddForm && (
-          <div className="bg-white p-6 rounded-lg shadow mb-6">
+          <div className="bg-background border border-border p-6 rounded-lg shadow mb-6">
             <h2 className="text-xl font-semibold mb-4">
               {editingId !== null ? 'Edit Annotation Type' : 'Add New Annotation Type'}
             </h2>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Internal Name *
                   </label>
                   <Input
@@ -210,13 +210,13 @@ export default function AnnotationTypesPage() {
                     required
                     disabled={editingId !== null}
                   />
-                  <p className="text-xs text-gray-500 mt-1">
+                  <p className="text-xs text-muted-foreground mt-1">
                     Used internally (cannot be changed after creation)
                   </p>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Display Name *
                   </label>
                   <Input
@@ -229,7 +229,7 @@ export default function AnnotationTypesPage() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Color *
                   </label>
                   <div className="flex gap-2">
@@ -250,13 +250,13 @@ export default function AnnotationTypesPage() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Category *
                   </label>
                   <select
                     value={formData.category}
                     onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                    className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground"
                     required
                   >
                     <option value="marker">Marker</option>
@@ -265,7 +265,7 @@ export default function AnnotationTypesPage() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Icon
                   </label>
                   <Input
@@ -289,72 +289,72 @@ export default function AnnotationTypesPage() {
           </div>
         )}
 
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="bg-background border border-border rounded-lg shadow overflow-hidden">
+          <table className="min-w-full divide-y divide-border">
+            <thead className="bg-muted">
               <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Name
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Display Name
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Color
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Category
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Icon
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Status
                 </th>
-                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-right text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Actions
                 </th>
               </tr>
             </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
+            <tbody className="bg-background divide-y divide-border">
               {types.length === 0 ? (
                 <tr>
-                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">
+                  <td colSpan={7} className="px-6 py-8 text-center text-muted-foreground">
                     No annotation types found. Click "Seed Default Types" to get started.
                   </td>
                 </tr>
               ) : (
                 types.map((type) => (
-                  <tr key={type.id} className="hover:bg-gray-50">
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                  <tr key={type.id} className="hover:bg-muted/50">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                       {type.name}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
                       {type.display_name}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                       <div className="flex items-center gap-2">
                         <div
-                          className="w-6 h-6 rounded border border-gray-300"
+                          className="w-6 h-6 rounded border border-border"
                           style={{ backgroundColor: type.color }}
                         />
-                        <span className="text-gray-600">{type.color}</span>
+                        <span className="text-muted-foreground">{type.color}</span>
                       </div>
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                      <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
+                      <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                         {type.category}
                       </span>
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                       {type.icon || '-'}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                       <span
                         className={`px-2 py-1 text-xs font-medium rounded-full ${
                           type.is_active
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-gray-100 text-gray-800'
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+                            : 'bg-muted text-muted-foreground'
                         }`}
                       >
                         {type.is_active ? 'Active' : 'Inactive'}
diff --git a/src/app/span-label-types/page.tsx b/src/app/span-label-types/page.tsx
index 3b5c17d..9cdd8fc 100644
--- a/src/app/span-label-types/page.tsx
+++ b/src/app/span-label-types/page.tsx
@@ -167,7 +167,7 @@ export default function SpanLabelTypesPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 p-8">
+      <div className="min-h-screen bg-background p-8">
         <div className="max-w-6xl mx-auto">
           <p>Loading...</p>
         </div>
@@ -176,12 +176,12 @@ export default function SpanLabelTypesPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 p-8">
+    <div className="min-h-screen bg-background p-8">
       <div className="max-w-6xl mx-auto">
         <div className="flex justify-between items-center mb-6">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">Span Label Types</h1>
-            <p className="text-gray-600 mt-1">Manage pattern labels for span annotations</p>
+            <h1 className="text-3xl font-bold text-foreground">Span Label Types</h1>
+            <p className="text-muted-foreground mt-1">Manage pattern labels for span annotations</p>
           </div>
           <div className="flex gap-2">
             <Button onClick={() => window.location.href = '/'} variant="outline">
@@ -201,14 +201,14 @@ export default function SpanLabelTypesPage() {
         </div>
 
         {showAddForm && (
-          <div className="bg-white p-6 rounded-lg shadow mb-6">
+          <div className="bg-background border border-border p-6 rounded-lg shadow mb-6">
             <h2 className="text-xl font-semibold mb-4">
               {editingId !== null ? 'Edit Span Label Type' : 'Add New Span Label Type'}
             </h2>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Internal Name *
                   </label>
                   <Input
@@ -219,13 +219,13 @@ export default function SpanLabelTypesPage() {
                     required
                     disabled={editingId !== null}
                   />
-                  <p className="text-xs text-gray-500 mt-1">
+                  <p className="text-xs text-muted-foreground mt-1">
                     Used internally (cannot be changed after creation)
                   </p>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Display Name *
                   </label>
                   <Input
@@ -238,7 +238,7 @@ export default function SpanLabelTypesPage() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Color *
                   </label>
                   <div className="flex gap-2">
@@ -259,7 +259,7 @@ export default function SpanLabelTypesPage() {
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Hotkey
                   </label>
                   <Input
@@ -269,13 +269,13 @@ export default function SpanLabelTypesPage() {
                     placeholder="e.g., 1, 2, 3"
                     maxLength={1}
                   />
-                  <p className="text-xs text-gray-500 mt-1">
+                  <p className="text-xs text-muted-foreground mt-1">
                     Single key for quick assignment (optional)
                   </p>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="block text-sm font-medium text-foreground mb-1">
                     Sort Order
                   </label>
                   <Input
@@ -284,7 +284,7 @@ export default function SpanLabelTypesPage() {
                     onChange={(e) => setFormData({ ...formData, sort_order: parseInt(e.target.value) || 0 })}
                     placeholder="0"
                   />
-                  <p className="text-xs text-gray-500 mt-1">
+                  <p className="text-xs text-muted-foreground mt-1">
                     Lower numbers appear first
                   </p>
                 </div>
@@ -302,70 +302,70 @@ export default function SpanLabelTypesPage() {
           </div>
         )}
 
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="bg-background border border-border rounded-lg shadow overflow-hidden">
+          <table className="min-w-full divide-y divide-border">
+            <thead className="bg-muted">
               <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Name
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Display Name
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Color
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Hotkey
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Sort Order
                 </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Status
                 </th>
-                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <th className="px-6 py-3 text-right text-xs font-medium text-muted-foreground uppercase tracking-wider">
                   Actions
                 </th>
               </tr>
             </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
+            <tbody className="bg-background divide-y divide-border">
               {types.length === 0 ? (
                 <tr>
-                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">
+                  <td colSpan={7} className="px-6 py-8 text-center text-muted-foreground">
                     No span label types found. Click "Seed Default Types" to get started.
                   </td>
                 </tr>
               ) : (
                 types.map((type) => (
-                  <tr key={type.id} className="hover:bg-gray-50">
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                  <tr key={type.id} className="hover:bg-muted/50">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                       {type.name}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
                       {type.display_name}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                       <div className="flex items-center gap-2">
                         <div
-                          className="w-6 h-6 rounded border border-gray-300"
+                          className="w-6 h-6 rounded border border-border"
                           style={{ backgroundColor: type.color }}
                         />
-                        <span className="text-gray-600">{type.color}</span>
+                        <span className="text-muted-foreground">{type.color}</span>
                       </div>
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 font-mono">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground font-mono">
                       {type.hotkey || '-'}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                       {type.sort_order}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                       <span
                         className={`px-2 py-1 text-xs font-medium rounded-full ${
                           type.is_active
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-gray-100 text-gray-800'
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+                            : 'bg-muted text-muted-foreground'
                         }`}
                       >
                         {type.is_active ? 'Active' : 'Inactive'}