fixes

frontend/src/index.css

@@ -7,14 +7,32 @@
   --glass-bg: rgba(255, 255, 255, 0.8);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #8b5cf6;
+  --category-to: #3b82f6;
+  --btn-primary-from: #8b5cf6;
+  --btn-primary-to: #6366f1;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #ec4899;
+  --card-bg: rgba(255, 255, 255, 0.8);
 }
 
 [data-theme="dark"] {
-  --gradient-start: #1f2937;
-  --gradient-end: #111827;
-  --glass-bg: rgba(31, 41, 55, 0.9);
+  --gradient-start: #000000;
+  --gradient-end: #000000;
+  --glass-bg: rgba(17, 17, 17, 0.95);
   --text-primary: #f9fafb;
   --text-secondary: #d1d5db;
+  --category-from: #6366f1;
+  --category-to: #8b5cf6;
+  --btn-primary-from: #6366f1;
+  --btn-primary-to: #8b5cf6;
+  --btn-success-from: #059669;
+  --btn-success-to: #10b981;
+  --btn-danger-from: #dc2626;
+  --btn-danger-to: #be185d;
+  --card-bg: rgba(31, 31, 31, 0.9);
 }
 
 [data-theme="sunset"] {
@@ -23,6 +41,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #f97316;
+  --category-to: #ec4899;
+  --btn-primary-from: #f97316;
+  --btn-primary-to: #ea580c;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 [data-theme="ocean"] {
@@ -31,6 +58,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #3b82f6;
+  --category-to: #06b6d4;
+  --btn-primary-from: #3b82f6;
+  --btn-primary-to: #2563eb;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 [data-theme="forest"] {
@@ -39,6 +75,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #22c55e;
+  --category-to: #14b8a6;
+  --btn-primary-from: #22c55e;
+  --btn-primary-to: #16a34a;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 [data-theme="purple"] {
@@ -47,6 +92,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #8b5cf6;
+  --category-to: #ec4899;
+  --btn-primary-from: #8b5cf6;
+  --btn-primary-to: #7c3aed;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 .gradient-bg {
@@ -67,10 +121,66 @@
 }
 
 .glass-effect {
-  background: rgb(255 255 255 / 0.8);
+  background: var(--glass-bg);
   backdrop-filter: blur(12px);
 }
 
+.category-icon {
+  background: linear-gradient(135deg, var(--category-from) 0%, var(--category-to) 100%);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--btn-primary-from) 0%, var(--btn-primary-to) 100%);
+}
+
+.btn-success {
+  background: linear-gradient(135deg, var(--btn-success-from) 0%, var(--btn-success-to) 100%);
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, var(--btn-danger-from) 0%, var(--btn-danger-to) 100%);
+}
+
+[data-theme="dark"] .glass-effect {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .text-gray-800,
+[data-theme="dark"] .text-gray-900 {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .text-gray-600,
+[data-theme="dark"] .text-gray-500 {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .bg-gray-100,
+[data-theme="dark"] .bg-gray-50 {
+  background-color: rgba(55, 55, 55, 0.5);
+}
+
+[data-theme="dark"] .bg-gray-200 {
+  background-color: rgba(75, 75, 75, 0.5);
+}
+
+[data-theme="dark"] .border-gray-200,
+[data-theme="dark"] .border-gray-300 {
+  border-color: rgba(75, 75, 75, 0.8);
+}
+
+[data-theme="dark"] input,
+[data-theme="dark"] textarea {
+  background-color: rgba(40, 40, 40, 0.9);
+  color: var(--text-primary);
+  border-color: rgba(75, 75, 75, 0.8);
+}
+
+[data-theme="dark"] input::placeholder,
+[data-theme="dark"] textarea::placeholder {
+  color: var(--text-secondary);
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.2s ease-in-out;
 }