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>
This commit is contained in:
Marko Djordjevic
parent
6a194e81ac
commit
fd4550d444
2 changed files with 68 additions and 68 deletions
|
|
@ -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'}
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue