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

18
frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
View File

@@ -132,7 +132,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder={isIngredient ? "Ej: Harina de trigo" : "Ej: Baguette tradicional"}
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>
@@ -143,7 +143,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
<select
value={formData.category}
onChange={(e) => setFormData({ ...formData, category: 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>
{isIngredient ? (
@@ -173,7 +173,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
<select
value={formData.unit}
onChange={(e) => setFormData({ ...formData, unit: 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="kg">Kilogramos (kg)</option>
@@ -191,7 +191,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
<select
value={formData.storage}
onChange={(e) => setFormData({ ...formData, storage: 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="dry">Seco</option>
<option value="refrigerated">Refrigerado</option>
@@ -208,7 +208,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
value={formData.reorderPoint}
onChange={(e) => setFormData({ ...formData, reorderPoint: e.target.value })}
placeholder="Cantidad mínima"
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)]"
min="0"
/>
</div>
@@ -281,7 +281,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
value={lotData.quantity}
onChange={(e) => setLotData({ ...lotData, quantity: e.target.value })}
placeholder="100"
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)]"
min="0"
/>
</div>
@@ -295,7 +295,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
value={lotData.batchNumber}
onChange={(e) => setLotData({ ...lotData, batchNumber: e.target.value })}
placeholder="LOT-2025-001"
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>
@@ -307,7 +307,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
type="date"
value={lotData.expiryDate}
onChange={(e) => setLotData({ ...lotData, expiryDate: 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)]"
/>
</div>
@@ -320,7 +320,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
value={lotData.costPerUnit}
onChange={(e) => setLotData({ ...lotData, costPerUnit: e.target.value })}
placeholder="1.50"
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)]"
min="0"
step="0.01"
/>