arnaudne/Grow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(diaper): use dark-mode-aware backgrounds for stool color picker

Browse Source 
Light pastel bg colors were unreadable on dark backgrounds. Add darkBg
variants for each stool color and a MutationObserver-based isDark hook
to switch between them at runtime.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arnaud Nelissen
2026-06-25 23:45:40 +02:00
parent bdf53980c0
commit 4abee45877
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/event-modal.tsx
+18 -10
View File
@@ -69,12 +69,12 @@ interface MilkStock {
} }
const STOOL_COLORS = [ const STOOL_COLORS = [
{ value: "jaune", label: "Jaune", bg: "#fef3c7", dot: "#f59e0b" }, { value: "jaune", label: "Jaune", bg: "#fef3c7", darkBg: "#451a03", dot: "#f59e0b" },
{ value: "vert", label: "Vert", bg: "#d1fae5", dot: "#10b981" }, { value: "vert", label: "Vert", bg: "#d1fae5", darkBg: "#022c22", dot: "#10b981" },
{ value: "marron", label: "Marron", bg: "#fef3c7", dot: "#92400e" }, { value: "marron", label: "Marron", bg: "#fef3c7", darkBg: "#1c0a00", dot: "#92400e" },
{ value: "orange", label: "Orange", bg: "#ffedd5", dot: "#f97316" }, { value: "orange", label: "Orange", bg: "#ffedd5", darkBg: "#431407", dot: "#f97316" },
{ value: "noir", label: "Méconium", bg: "#f1f5f9", dot: "#1e293b" }, { value: "noir", label: "Méconium", bg: "#f1f5f9", darkBg: "#0f172a", dot: "#1e293b" },
{ value: "rouge", label: "Rouge", bg: "#fee2e2", dot: "#ef4444" }, { value: "rouge", label: "Rouge", bg: "#fee2e2", darkBg: "#450a0a", dot: "#ef4444" },
]; ];
function localNowString() { function localNowString() {
@@ -139,6 +139,14 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
// Milk stock state (BOTTLE type) // Milk stock state (BOTTLE type)
const [milkStocks, setMilkStocks] = useState<MilkStock[]>([]); const [milkStocks, setMilkStocks] = useState<MilkStock[]>([]);
const [selectedStockId, setSelectedStockId] = useState<string | null>(null); const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
const [isDark, setIsDark] = useState(false);
useEffect(() => {
const check = () => setIsDark(document.documentElement.classList.contains("dark"));
check();
const obs = new MutationObserver(check);
obs.observe(document.documentElement, { attributeFilter: ["class"] });
return () => obs.disconnect();
}, []);
// Combined diaper toggle // Combined diaper toggle
const [diaperBoth, setDiaperBoth] = useState(false); const [diaperBoth, setDiaperBoth] = useState(false);
@@ -633,11 +641,11 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
<div> <div>
<label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">Couleur</label> <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">Couleur</label>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
{STOOL_COLORS.map(({ value, label, bg, dot }) => ( {STOOL_COLORS.map(({ value, label, bg, darkBg, dot }) => (
<button key={value} type="button" onClick={() => setForm((f) => ({ ...f, stoolColor: value }))} <button key={value} type="button" onClick={() => setForm((f) => ({ ...f, stoolColor: value }))}
className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-xs font-medium transition ${ className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-xs font-medium transition ${
form.stoolColor === value ? "border-indigo-500 ring-1 ring-indigo-300" : "border-slate-200 dark:border-slate-600 hover:border-slate-300" form.stoolColor === value ? "border-indigo-500 ring-1 ring-indigo-300" : "border-slate-200 dark:border-slate-600 hover:border-slate-300"
}`} style={{ background: bg }}> }`} style={{ background: isDark ? darkBg : bg }}>
<span className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: dot }} /> <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: dot }} />
{label} {label}
</button> </button>
@@ -676,11 +684,11 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
<div> <div>
<label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">Couleur des selles</label> <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">Couleur des selles</label>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
{STOOL_COLORS.map(({ value, label, bg, dot }) => ( {STOOL_COLORS.map(({ value, label, bg, darkBg, dot }) => (
<button key={value} type="button" onClick={() => setForm((f) => ({ ...f, stoolColor: value }))} <button key={value} type="button" onClick={() => setForm((f) => ({ ...f, stoolColor: value }))}
className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-xs font-medium text-slate-800 transition ${ className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-xs font-medium text-slate-800 transition ${
form.stoolColor === value ? "border-indigo-500 ring-1 ring-indigo-300" : "border-slate-200 dark:border-slate-600 hover:border-slate-300" form.stoolColor === value ? "border-indigo-500 ring-1 ring-indigo-300" : "border-slate-200 dark:border-slate-600 hover:border-slate-300"
}`} style={{ background: bg }}> }`} style={{ background: isDark ? darkBg : bg }}>
<span className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: dot }} /> <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: dot }} />
{label} {label}
</button> </button>