From 0b126cb6766114b60d9efe8890809589f9f1fc4a Mon Sep 17 00:00:00 2001
From: Talal Sharabi <code14devops@gmail.com>
Date: Wed, 11 Feb 2026 23:21:01 +0400
Subject: [PATCH] Critical fix: Comprehensive input field text visibility

- Fixed all text input visibility issues across the platform
- Added explicit color styles for all input types (text, email, password, etc.)
- Added -webkit-text-fill-color for Safari/Chrome compatibility
- Fixed placeholder text visibility
- Added proper focus and disabled states
- Fixed autocomplete color overrides
- Created reusable Input/Textarea components
- All inputs now have white background with dark text guaranteed
- Resolves issues where users could only type 1-2 letters or see nothing

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/app/globals.css      | 59 +++++++++++++++----
 frontend/src/components/Input.tsx | 98 +++++++++++++++++++++++++++++++
 2 files changed, 145 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/Input.tsx

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 32fb093..6b84d8d 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -8,27 +8,62 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: rgb(var(--background-rgb));
+  color: rgb(17, 24, 39);
+  background: rgb(255, 255, 255);
   min-height: 100vh;
 }
 
-/* Force dark text for all text elements */
-* {
-  color: inherit;
-}
-
-input,
+/* Input Fields - Comprehensive Fix */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="tel"],
+input[type="number"],
+input[type="search"],
+input[type="url"],
+input[type="date"],
+input[type="time"],
 textarea,
 select {
-  color: rgb(17, 24, 39) !important;
+  color: #111827 !important;
+  background-color: #ffffff !important;
+  -webkit-text-fill-color: #111827 !important;
+  opacity: 1 !important;
 }
 
-/* Ensure placeholder text is visible */
+/* Input focus states */
+input:focus,
+textarea:focus,
+select:focus {
+  color: #111827 !important;
+  -webkit-text-fill-color: #111827 !important;
+}
+
+/* Placeholder text */
 input::placeholder,
 textarea::placeholder {
-  color: rgb(156, 163, 175) !important;
-  opacity: 1;
+  color: #9CA3AF !important;
+  -webkit-text-fill-color: #9CA3AF !important;
+  opacity: 1 !important;
+}
+
+/* Disabled inputs */
+input:disabled,
+textarea:disabled,
+select:disabled {
+  color: #6B7280 !important;
+  background-color: #F3F4F6 !important;
+  -webkit-text-fill-color: #6B7280 !important;
+}
+
+/* Ensure autocomplete doesn't override colors */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: #111827 !important;
+  -webkit-box-shadow: 0 0 0 1000px white inset !important;
+  transition: background-color 5000s ease-in-out 0s;
 }
 
 /* Font Families */
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
new file mode 100644
index 0000000..facdedf
--- /dev/null
+++ b/frontend/src/components/Input.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  required?: boolean
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  required,
+  className = '',
+  ...props
+}) => {
+  const inputClasses = `
+    w-full px-3 py-2 
+    border border-gray-300 rounded-lg 
+    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+    text-gray-900 bg-white
+    placeholder-gray-400
+    disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed
+    ${error ? 'border-red-500 focus:ring-red-500' : ''}
+    ${className}
+  `.trim()
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+          {required && <span className="text-red-500 mr-1">*</span>}
+        </label>
+      )}
+      <input
+        {...props}
+        className={inputClasses}
+        style={{
+          color: '#111827',
+          backgroundColor: '#ffffff',
+          WebkitTextFillColor: '#111827',
+        }}
+      />
+      {error && (
+        <p className="text-red-500 text-xs mt-1">{error}</p>
+      )}
+    </div>
+  )
+}
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string
+  error?: string
+  required?: boolean
+}
+
+export const Textarea: React.FC<TextareaProps> = ({
+  label,
+  error,
+  required,
+  className = '',
+  ...props
+}) => {
+  const textareaClasses = `
+    w-full px-3 py-2 
+    border border-gray-300 rounded-lg 
+    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+    text-gray-900 bg-white
+    placeholder-gray-400
+    disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed
+    resize-vertical
+    ${error ? 'border-red-500 focus:ring-red-500' : ''}
+    ${className}
+  `.trim()
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+          {required && <span className="text-red-500 mr-1">*</span>}
+        </label>
+      )}
+      <textarea
+        {...props}
+        className={textareaClasses}
+        style={{
+          color: '#111827',
+          backgroundColor: '#ffffff',
+          WebkitTextFillColor: '#111827',
+        }}
+      />
+      {error && (
+        <p className="text-red-500 text-xs mt-1">{error}</p>
+      )}
+    </div>
+  )
+}