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