bro-js/code-review-agent
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fix light theme elements on Tasks page - apply dark theme colors

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-10-13 01:08:01 +03:00
parent 256d69ec0f
commit 3981bdb1b3
1 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/pages/Tasks.tsx
View File

@ -74,15 +74,15 @@ export default function Tasks() {
const getStatusColor = (status: TaskStatus) => {
switch (status) {
case 'pending':
return 'bg-yellow-100 text-yellow-800';
return 'bg-yellow-900/30 text-yellow-400 border border-yellow-700';
case 'in_progress':
return 'bg-blue-100 text-blue-800';
return 'bg-blue-900/30 text-blue-400 border border-blue-700';
case 'completed':
return 'bg-green-100 text-green-800';
return 'bg-green-900/30 text-green-400 border border-green-700';
case 'failed':
return 'bg-red-100 text-red-800';
return 'bg-red-900/30 text-red-400 border border-red-700';
default:
return 'bg-gray-100 text-gray-800';
return 'bg-dark-card text-dark-text-muted border border-dark-border';
}
};
@ -104,20 +104,20 @@ export default function Tasks() {
const getPriorityColor = (priority: string) => {
switch (priority) {
case 'high':
return 'bg-red-100 text-red-800';
return 'bg-red-900/30 text-red-400 border border-red-700';
case 'normal':
return 'bg-gray-100 text-gray-800';
return 'bg-dark-card text-dark-text-secondary border border-dark-border';
case 'low':
return 'bg-green-100 text-green-800';
return 'bg-green-900/30 text-green-400 border border-green-700';
default:
return 'bg-gray-100 text-gray-800';
return 'bg-dark-card text-dark-text-muted border border-dark-border';
}
};
if (isLoading) {
return (
<div className="flex items-center justify-center h-64">
<div className="text-gray-500">Загрузка...</div>
<div className="text-dark-text-muted">Загрузка...</div>
</div>
);
}
@ -126,23 +126,23 @@ export default function Tasks() {
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-gray-900">Очередь задач</h1>
<p className="text-gray-600 mt-1">
<h1 className="text-3xl font-bold text-dark-text-primary">Очередь задач</h1>
<p className="text-dark-text-secondary mt-1">
Мониторинг и управление задачами на review
</p>
</div>
{/* Worker Status */}
{workerStatus && (
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
<div className="bg-dark-card rounded-lg shadow-sm border border-dark-border p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className={`w-3 h-3 rounded-full ${workerStatus.running ? 'bg-green-500 animate-pulse' : 'bg-gray-400'}`} />
<span className="font-medium">
<div className={`w-3 h-3 rounded-full ${workerStatus.running ? 'bg-green-500 animate-pulse' : 'bg-dark-text-muted'}`} />
<span className="font-medium text-dark-text-primary">
{workerStatus.running ? '🚀 Worker активен' : '⏹️ Worker остановлен'}
</span>
</div>
<div className="text-sm text-gray-600">
<div className="text-sm text-dark-text-secondary">
{workerStatus.current_task_id && (
<span>Обрабатывается задача #{workerStatus.current_task_id}</span>
)}
@ -158,49 +158,49 @@ export default function Tasks() {
{tasksData && (
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
<div
className={`bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow ${
statusFilter === undefined ? 'ring-2 ring-indigo-500' : ''
className={`bg-dark-card rounded-lg shadow-sm border border-dark-border p-4 cursor-pointer hover:bg-dark-hover transition-all ${
statusFilter === undefined ? 'ring-2 ring-blue-500' : ''
}`}
onClick={() => setStatusFilter(undefined)}
>
<div className="text-2xl font-bold text-gray-900">{tasksData.total}</div>
<div className="text-sm text-gray-600">Всего</div>
<div className="text-2xl font-bold text-dark-text-primary">{tasksData.total}</div>
<div className="text-sm text-dark-text-secondary">Всего</div>
</div>
<div
className={`bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow ${
className={`bg-dark-card rounded-lg shadow-sm border border-dark-border p-4 cursor-pointer hover:bg-dark-hover transition-all ${
statusFilter === 'pending' ? 'ring-2 ring-yellow-500' : ''
}`}
onClick={() => setStatusFilter('pending')}
>
<div className="text-2xl font-bold text-yellow-600">{tasksData.pending}</div>
<div className="text-sm text-gray-600">Ожидает</div>
<div className="text-2xl font-bold text-yellow-400">{tasksData.pending}</div>
<div className="text-sm text-dark-text-secondary">Ожидает</div>
</div>
<div
className={`bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow ${
className={`bg-dark-card rounded-lg shadow-sm border border-dark-border p-4 cursor-pointer hover:bg-dark-hover transition-all ${
statusFilter === 'in_progress' ? 'ring-2 ring-blue-500' : ''
}`}
onClick={() => setStatusFilter('in_progress')}
>
<div className="text-2xl font-bold text-blue-600">{tasksData.in_progress}</div>
<div className="text-sm text-gray-600">Выполняется</div>
<div className="text-2xl font-bold text-blue-400">{tasksData.in_progress}</div>
<div className="text-sm text-dark-text-secondary">Выполняется</div>
</div>
<div
className={`bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow ${
className={`bg-dark-card rounded-lg shadow-sm border border-dark-border p-4 cursor-pointer hover:bg-dark-hover transition-all ${
statusFilter === 'completed' ? 'ring-2 ring-green-500' : ''
}`}
onClick={() => setStatusFilter('completed')}
>
<div className="text-2xl font-bold text-green-600">{tasksData.completed}</div>
<div className="text-sm text-gray-600">Завершено</div>
<div className="text-2xl font-bold text-green-400">{tasksData.completed}</div>
<div className="text-sm text-dark-text-secondary">Завершено</div>
</div>
<div
className={`bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow ${
className={`bg-dark-card rounded-lg shadow-sm border border-dark-border p-4 cursor-pointer hover:bg-dark-hover transition-all ${
statusFilter === 'failed' ? 'ring-2 ring-red-500' : ''
}`}
onClick={() => setStatusFilter('failed')}
>
<div className="text-2xl font-bold text-red-600">{tasksData.failed}</div>
<div className="text-sm text-gray-600">Ошибок</div>
<div className="text-2xl font-bold text-red-400">{tasksData.failed}</div>
<div className="text-sm text-dark-text-secondary">Ошибок</div>
</div>
</div>
)}
@ -210,12 +210,12 @@ export default function Tasks() {
{tasksData?.items.map((task) => (
<div
key={task.id}
className="bg-white rounded-lg shadow-sm border border-gray-200 p-4"
className="bg-dark-card rounded-lg shadow-sm border border-dark-border p-4"
>
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-3">
<span className="text-lg font-mono font-semibold text-gray-900">
<span className="text-lg font-mono font-semibold text-dark-text-primary">
#{task.id}
</span>
<span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(task.status)}`}>
@ -230,12 +230,12 @@ export default function Tasks() {
<div className="mt-2 space-y-1">
<div className="text-sm">
<span className="text-gray-600">PR:</span>{' '}
<span className="font-medium">#{task.pr_number}</span>{' '}
<span className="text-gray-700">{task.pr_title}</span>
<span className="text-dark-text-secondary">PR:</span>{' '}
<span className="font-medium text-dark-text-primary">#{task.pr_number}</span>{' '}
<span className="text-dark-text-primary">{task.pr_title}</span>
</div>
<div className="flex gap-4 text-xs text-gray-500">
<div className="flex gap-4 text-xs text-dark-text-muted">
<span>
Создано: {formatDistanceToNow(new Date(task.created_at), { addSuffix: true, locale: ru })}
</span>
@ -252,13 +252,13 @@ export default function Tasks() {
</div>
{task.error_message && (
<div className="mt-2 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-700">
<div className="mt-2 p-2 bg-red-900/30 border border-red-700 rounded text-xs text-red-400">
<strong>Ошибка:</strong> {task.error_message}
</div>
)}
{task.retry_count > 0 && (
<div className="text-xs text-gray-500">
<div className="text-xs text-dark-text-muted">
Попыток: {task.retry_count} / {task.max_retries}
</div>
)}
@ -270,7 +270,7 @@ export default function Tasks() {
<button
onClick={() => handleRetry(task.id)}
disabled={retryMutation.isPending}
className="px-3 py-1.5 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors disabled:opacity-50"
className="px-3 py-1.5 text-sm bg-blue-900/30 text-blue-400 rounded hover:bg-blue-900/50 transition-colors disabled:opacity-50 border border-blue-700"
>
🔄 Повторить
</button>
@ -279,7 +279,7 @@ export default function Tasks() {
<button
onClick={() => handleDelete(task.id)}
disabled={deleteMutation.isPending}
className="px-3 py-1.5 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors disabled:opacity-50"
className="px-3 py-1.5 text-sm bg-red-900/30 text-red-400 rounded hover:bg-red-900/50 transition-colors disabled:opacity-50 border border-red-700"
>
🗑️ Удалить
</button>
@ -291,8 +291,8 @@ export default function Tasks() {
</div>
{tasksData?.items.length === 0 && (
<div className="text-center py-12 bg-gray-50 rounded-lg">
<p className="text-gray-500">
<div className="text-center py-12 bg-dark-card rounded-lg border border-dark-border">
<p className="text-dark-text-muted">
{statusFilter ? `Нет задач со статусом "${statusFilter}"` : 'Нет задач в очереди'}
</p>
</div>
@ -305,7 +305,7 @@ export default function Tasks() {
title={modalMessage.includes('❌') ? 'Ошибка' : modalMessage.includes('✅') ? 'Успешно' : 'Уведомление'}
type={modalMessage.includes('❌') ? 'error' : modalMessage.includes('✅') ? 'success' : 'info'}
>
<p className="text-gray-700 whitespace-pre-line">{modalMessage}</p>
<p className="text-dark-text-primary whitespace-pre-line">{modalMessage}</p>
</Modal>
<ConfirmModal
isOpen={showConfirm}