bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Add dark mode support to all wizard input fields

Browse Source 
- Added bg-[var(--bg-primary)] and text-[var(--text-primary)] CSS variables
- Fixes white background + white text issue in dark mode
- Applied to all input, select, and textarea elements across 8 wizards

Wizards fixed:
- InventoryWizard
- CustomerWizard
- SupplierWizard
- RecipeWizard
- EquipmentWizard
- QualityTemplateWizard
- TeamMemberWizard
- CustomerOrderWizard

(SalesEntryWizard was already fixed in previous commit)

This completes the dark mode UI improvements (High Priority item).
All form inputs now properly support dark mode with correct contrast.
This commit is contained in:
Claude
2025-11-09 21:25:36 +00:00
parent 9adc9725fd
commit 89e672cb4f
8 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx
View File

@@ -49,7 +49,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.name}
onChange={(e) => setSupplierData({ ...supplierData, name: e.target.value })}
placeholder="Ej: Harinas Premium S.L."
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -62,7 +62,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.contactPerson}
onChange={(e) => setSupplierData({ ...supplierData, contactPerson: e.target.value })}
placeholder="Nombre del contacto"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -76,7 +76,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.phone}
onChange={(e) => setSupplierData({ ...supplierData, phone: e.target.value })}
placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -90,7 +90,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.email}
onChange={(e) => setSupplierData({ ...supplierData, email: e.target.value })}
placeholder="contacto@proveedor.com"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -103,7 +103,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.address}
onChange={(e) => setSupplierData({ ...supplierData, address: e.target.value })}
placeholder="Calle, Ciudad, País"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -118,7 +118,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
onChange={(e) => setSupplierData({ ...supplierData, leadTimeDays: e.target.value })}
placeholder="Ej: 7"
min="0"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -129,7 +129,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
<select
value={supplierData.paymentTerms}
onChange={(e) => setSupplierData({ ...supplierData, paymentTerms: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="">Seleccionar...</option>
<option value="immediate">Inmediato</option>
@@ -148,7 +148,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
onChange={(e) => setSupplierData({ ...supplierData, notes: e.target.value })}
placeholder="Información adicional sobre el proveedor..."
rows={3}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
</div>