mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 13:55:23 +02:00
fix: apply dark theme to all form inputs in Experiments create view
Replace undefined input-field CSS class with explicit Tailwind dark theme classes (bg-slate-800, border-slate-700, text-slate-200) to prevent white background on form fields. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
4935112a55
commit
eba6628325
@@ -943,7 +943,7 @@ const ExperimentCreateView: React.FC<{
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
placeholder="e.g. Price reduction test - Premium Line"
|
||||
className="input-field"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Description">
|
||||
@@ -952,19 +952,19 @@ const ExperimentCreateView: React.FC<{
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
placeholder="Brief description of the experiment..."
|
||||
className="input-field resize-y"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y"
|
||||
/>
|
||||
</FormField>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<FormField label="Type">
|
||||
<select value={type} onChange={e => setType(e.target.value as ExperimentType)} className="input-field">
|
||||
<select value={type} onChange={e => setType(e.target.value as ExperimentType)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
|
||||
{TYPE_OPTIONS.map(t => (
|
||||
<option key={t} value={t}>{getExperimentIcon(t)} {t.charAt(0).toUpperCase() + t.slice(1)}</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label="Marketplace">
|
||||
<select value={marketplace} onChange={e => setMarketplace(e.target.value)} className="input-field">
|
||||
<select value={marketplace} onChange={e => setMarketplace(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
|
||||
{MARKETPLACE_OPTIONS.map(m => (
|
||||
<option key={m} value={m}>{m}</option>
|
||||
))}
|
||||
@@ -972,7 +972,7 @@ const ExperimentCreateView: React.FC<{
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label="Primary Metric">
|
||||
<select value={primaryMetric} onChange={e => setPrimaryMetric(e.target.value as ExperimentMetric)} className="input-field">
|
||||
<select value={primaryMetric} onChange={e => setPrimaryMetric(e.target.value as ExperimentMetric)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
|
||||
{METRIC_OPTIONS.map(m => (
|
||||
<option key={m.value} value={m.value}>{m.label}</option>
|
||||
))}
|
||||
@@ -984,7 +984,7 @@ const ExperimentCreateView: React.FC<{
|
||||
value={owner}
|
||||
onChange={e => setOwner(e.target.value)}
|
||||
placeholder="Your name"
|
||||
className="input-field"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
@@ -998,7 +998,7 @@ const ExperimentCreateView: React.FC<{
|
||||
onChange={e => setHypothesis(e.target.value)}
|
||||
rows={3}
|
||||
placeholder="What do you expect to happen? e.g. 'Reducing price by 12% will increase units sold by at least 20% while maintaining net margin'"
|
||||
className="input-field resize-y"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
@@ -1013,14 +1013,14 @@ const ExperimentCreateView: React.FC<{
|
||||
value={c.field}
|
||||
onChange={e => updateChange(i, 'field', e.target.value)}
|
||||
placeholder="Field (e.g. Price)"
|
||||
className="input-field w-32"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 w-32"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={c.before_value}
|
||||
onChange={e => updateChange(i, 'before_value', e.target.value)}
|
||||
placeholder="Before"
|
||||
className="input-field flex-1"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 flex-1"
|
||||
/>
|
||||
<svg className="w-4 h-4 text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
@@ -1030,7 +1030,7 @@ const ExperimentCreateView: React.FC<{
|
||||
value={c.after_value}
|
||||
onChange={e => updateChange(i, 'after_value', e.target.value)}
|
||||
placeholder="After"
|
||||
className="input-field flex-1"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 flex-1"
|
||||
/>
|
||||
{changes.length > 1 && (
|
||||
<button onClick={() => removeChange(i)} className="p-1.5 text-slate-500 hover:text-red-400 transition-colors shrink-0">
|
||||
@@ -1060,7 +1060,7 @@ const ExperimentCreateView: React.FC<{
|
||||
onChange={e => setTreatmentAsins(e.target.value)}
|
||||
rows={3}
|
||||
placeholder="B09ABC1234, B09DEF5678 or LINE:PREMIUM_COLLECTION"
|
||||
className="input-field resize-y font-mono text-xs"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y font-mono text-xs"
|
||||
/>
|
||||
{treatmentAsins && (
|
||||
<div className="mt-2 text-xs text-slate-500">{parseAsins(treatmentAsins).length} ASINs detected</div>
|
||||
@@ -1077,7 +1077,7 @@ const ExperimentCreateView: React.FC<{
|
||||
onChange={e => setControlAsins(e.target.value)}
|
||||
rows={3}
|
||||
placeholder="B09GHI9012, B09JKL3456"
|
||||
className="input-field resize-y font-mono text-xs"
|
||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y font-mono text-xs"
|
||||
/>
|
||||
{controlAsins && (
|
||||
<div className="mt-2 text-xs text-slate-500">{parseAsins(controlAsins).length} control ASINs detected</div>
|
||||
@@ -1088,10 +1088,10 @@ const ExperimentCreateView: React.FC<{
|
||||
<Card title="Timeline">
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<FormField label="Start Date" required>
|
||||
<input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="input-field" />
|
||||
<input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
|
||||
</FormField>
|
||||
<FormField label="End Date">
|
||||
<input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="input-field" />
|
||||
<input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
@@ -1112,10 +1112,10 @@ const ExperimentCreateView: React.FC<{
|
||||
Instead of dynamically looking right before the start date, specify an exact previous period (like year-over-year).
|
||||
</div>
|
||||
<FormField label="Baseline Start Date">
|
||||
<input type="date" value={baselineStartDate} onChange={e => setBaselineStartDate(e.target.value)} className="input-field" />
|
||||
<input type="date" value={baselineStartDate} onChange={e => setBaselineStartDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
|
||||
</FormField>
|
||||
<FormField label="Baseline End Date">
|
||||
<input type="date" value={baselineEndDate} onChange={e => setBaselineEndDate(e.target.value)} className="input-field" />
|
||||
<input type="date" value={baselineEndDate} onChange={e => setBaselineEndDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
|
||||
</FormField>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user