From 3981bdb1b3d02e23f5c0994b697f54eb4466f117 Mon Sep 17 00:00:00 2001
From: Primakov Alexandr Alexandrovich <primakov.pro@yandex.ru>
Date: Mon, 13 Oct 2025 01:08:01 +0300
Subject: [PATCH] UI: Fix light theme elements on Tasks page - apply dark theme
 colors

---
 frontend/src/pages/Tasks.tsx | 90 ++++++++++++++++++------------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/frontend/src/pages/Tasks.tsx b/frontend/src/pages/Tasks.tsx
index aab6fc7..c7ce02d 100644
--- a/frontend/src/pages/Tasks.tsx
+++ b/frontend/src/pages/Tasks.tsx
@@ -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}