From 2ad11142ad8afa588027be1a8681269f3a35a887 Mon Sep 17 00:00:00 2001
From: Primakov Alexandr Alexandrovich <primakov.pro@yandex.ru>
Date: Mon, 13 Oct 2025 00:52:59 +0300
Subject: [PATCH] UI: Implement unified dark theme across all components

---
 frontend/src/App.tsx              | 16 +++---
 frontend/src/components/Modal.tsx | 36 +++++++-------
 frontend/src/index.css            | 82 +++++++++++++++++++++++++++++--
 frontend/tailwind.config.js       | 17 ++++++-
 4 files changed, 121 insertions(+), 30 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 59f6ce1..c2ec20d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -29,13 +29,13 @@ function Navigation() {
   ];
 
   return (
-    <nav className="bg-gray-900 border-b border-gray-800">
+    <nav className="bg-dark-card border-b border-dark-border shadow-lg">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center gap-8">
-            <Link to="/" className="flex items-center gap-2">
+            <Link to="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
               <span className="text-2xl">🤖</span>
-              <span className="text-xl font-bold text-white">AI Review Agent</span>
+              <span className="text-xl font-bold text-dark-text-primary">AI Review Agent</span>
             </Link>
 
             <div className="flex gap-2">
@@ -43,14 +43,14 @@ function Navigation() {
                 <Link
                   key={link.path}
                   to={link.path}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
+                  className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 ${
                     location.pathname === link.path
-                      ? 'bg-gray-800 text-white'
-                      : 'text-gray-400 hover:text-white hover:bg-gray-800'
+                      ? 'bg-dark-hover text-dark-text-primary shadow-sm'
+                      : 'text-dark-text-secondary hover:text-dark-text-primary hover:bg-dark-hover/50'
                   }`}
                 >
                   <span>{link.icon}</span>
-                  <span>{link.label}</span>
+                  <span className="font-medium">{link.label}</span>
                 </Link>
               ))}
             </div>
@@ -65,7 +65,7 @@ function Navigation() {
 
 function AppContent() {
   return (
-    <div className="min-h-screen bg-gray-900">
+    <div className="min-h-screen bg-dark-bg">
       <Navigation />
       
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index b7394e3..dba1776 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -31,13 +31,13 @@ export const Modal: React.FC<ModalProps> = ({
   const getIconAndColor = () => {
     switch (type) {
       case 'success':
-        return { icon: '✅', color: 'text-green-600', bgColor: 'bg-green-50' };
+        return { icon: '✅', color: 'text-green-400', bgColor: 'bg-green-900/30 border-green-700' };
       case 'error':
-        return { icon: '❌', color: 'text-red-600', bgColor: 'bg-red-50' };
+        return { icon: '❌', color: 'text-red-400', bgColor: 'bg-red-900/30 border-red-700' };
       case 'warning':
-        return { icon: '⚠️', color: 'text-yellow-600', bgColor: 'bg-yellow-50' };
+        return { icon: '⚠️', color: 'text-yellow-400', bgColor: 'bg-yellow-900/30 border-yellow-700' };
       default:
-        return { icon: 'ℹ️', color: 'text-blue-600', bgColor: 'bg-blue-50' };
+        return { icon: 'ℹ️', color: 'text-blue-400', bgColor: 'bg-blue-900/30 border-blue-700' };
     }
   };
 
@@ -45,11 +45,11 @@ export const Modal: React.FC<ModalProps> = ({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70"
       onClick={onClose}
     >
       <div
-        className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 animate-scale-in"
+        className="bg-dark-card rounded-lg shadow-2xl max-w-md w-full mx-4 animate-scale-in border border-dark-border"
         onClick={(e) => e.stopPropagation()}
       >
         <div className={`${bgColor} px-6 py-4 rounded-t-lg border-b`}>
@@ -58,13 +58,13 @@ export const Modal: React.FC<ModalProps> = ({
             {title}
           </h3>
         </div>
-        <div className="px-6 py-4">
+        <div className="px-6 py-4 text-dark-text-primary">
           {children}
         </div>
-        <div className="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
+        <div className="px-6 py-4 bg-dark-bg/50 rounded-b-lg flex justify-end border-t border-dark-border">
           <button
             onClick={onClose}
-            className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+            className="px-4 py-2 bg-dark-hover text-dark-text-primary rounded-lg hover:bg-dark-hover/80 transition-colors font-medium"
           >
             Закрыть
           </button>
@@ -102,11 +102,11 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({
   const getIconAndColor = () => {
     switch (type) {
       case 'error':
-        return { icon: '❌', color: 'text-red-600', bgColor: 'bg-red-50', btnColor: 'bg-red-600 hover:bg-red-700' };
+        return { icon: '❌', color: 'text-red-400', bgColor: 'bg-red-900/30 border-red-700', btnColor: 'bg-red-600 hover:bg-red-700' };
       case 'info':
-        return { icon: 'ℹ️', color: 'text-blue-600', bgColor: 'bg-blue-50', btnColor: 'bg-blue-600 hover:bg-blue-700' };
+        return { icon: 'ℹ️', color: 'text-blue-400', bgColor: 'bg-blue-900/30 border-blue-700', btnColor: 'bg-blue-600 hover:bg-blue-700' };
       default:
-        return { icon: '⚠️', color: 'text-yellow-600', bgColor: 'bg-yellow-50', btnColor: 'bg-yellow-600 hover:bg-yellow-700' };
+        return { icon: '⚠️', color: 'text-yellow-400', bgColor: 'bg-yellow-900/30 border-yellow-700', btnColor: 'bg-yellow-600 hover:bg-yellow-700' };
     }
   };
 
@@ -114,11 +114,11 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70"
       onClick={isLoading ? undefined : onClose}
     >
       <div
-        className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 animate-scale-in"
+        className="bg-dark-card rounded-lg shadow-2xl max-w-md w-full mx-4 animate-scale-in border border-dark-border"
         onClick={(e) => e.stopPropagation()}
       >
         <div className={`${bgColor} px-6 py-4 rounded-t-lg border-b`}>
@@ -128,20 +128,20 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({
           </h3>
         </div>
         <div className="px-6 py-4">
-          <p className="text-gray-700">{message}</p>
+          <p className="text-dark-text-primary">{message}</p>
         </div>
-        <div className="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end gap-3">
+        <div className="px-6 py-4 bg-dark-bg/50 rounded-b-lg flex justify-end gap-3 border-t border-dark-border">
           <button
             onClick={onClose}
             disabled={isLoading}
-            className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-4 py-2 bg-dark-hover text-dark-text-secondary rounded-lg hover:bg-dark-hover/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
           >
             {cancelText}
           </button>
           <button
             onClick={onConfirm}
             disabled={isLoading}
-            className={`px-4 py-2 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${btnColor}`}
+            className={`px-4 py-2 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium ${btnColor}`}
           >
             {isLoading ? '⏳ Загрузка...' : confirmText}
           </button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0b7023c..7a9521c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -22,9 +22,9 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: dark;
+  color: #F1F5F9;
+  background-color: #0F172A;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -36,9 +36,85 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  background-color: #0F172A;
+  color: #F1F5F9;
 }
 
 #root {
   min-height: 100vh;
+  background-color: #0F172A;
+}
+
+/* Темная тема для всех элементов */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #475569 #1E293B;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #1E293B;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #475569;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #64748B;
+}
+
+/* Убрать светлые элементы из браузера */
+input, textarea, select {
+  color-scheme: dark;
+}
+
+/* Темная тема для всех форм */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="url"],
+input[type="number"],
+textarea,
+select {
+  @apply bg-dark-card border-dark-border text-dark-text-primary;
+  @apply focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20;
+}
+
+input[type="text"]:disabled,
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="url"]:disabled,
+input[type="number"]:disabled,
+textarea:disabled,
+select:disabled {
+  @apply bg-dark-bg/50 text-dark-text-muted cursor-not-allowed;
+}
+
+input::placeholder,
+textarea::placeholder {
+  @apply text-dark-text-muted;
+}
+
+/* Темная тема для checkbox и radio */
+input[type="checkbox"],
+input[type="radio"] {
+  @apply bg-dark-card border-dark-border;
+  @apply checked:bg-blue-600 checked:border-blue-600;
+}
+
+/* Темная тема для кнопок */
+button {
+  @apply transition-colors duration-200;
+}
+
+/* Темная тема для ссылок */
+a {
+  @apply transition-colors duration-200;
 }
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index d37737f..a8caa3b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,8 +4,23 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        dark: {
+          bg: '#0F172A',      // Основной фон
+          card: '#1E293B',    // Карточки
+          border: '#334155',  // Границы
+          hover: '#475569',   // Hover эффекты
+          text: {
+            primary: '#F1F5F9',   // Основной текст
+            secondary: '#94A3B8', // Вторичный текст
+            muted: '#64748B',     // Приглушенный текст
+          }
+        }
+      }
+    },
   },
   plugins: [],
 }