fix(mood): full-saturate the time-of-day chart and mood calendar

The v1.19.0 saturation fix missed two surfaces: the mood-by-time-of-day
bars and the mood calendar still rendered populated values at 0.55
opacity, reading as a dimmed glitch. Drop the dimming on populated bars
and cells (and the legend swatches); keep the quiet tint only on the
no-data empty state.
This commit is contained in:
Marc-André Bombeck committed 2026-06-21 14:01:37 +02:00
1 parent c67bd942a2
commit bbff6ab143
2 files changed
+13 -7

No files matched your search

+5 -2
View File
@@ -271,7 +271,10 @@ export function MoodHeatmap({
height={cellSize}
rx={2}
fill={cell.color}
fillOpacity={cell.cell ? 0.55 : 1}
// v1.19.1 — populated days render at full saturation so the
// mood band reads clearly; only the no-entry cells stay the
// quiet `--secondary` empty-state tint.
fillOpacity={1}
className="cursor-pointer"
onPointerEnter={(e) => {
if (e.pointerType === "touch") return;
@@ -331,7 +334,7 @@ export function MoodHeatmap({
<span key={label} className="flex items-center gap-1">
<div
className="h-3 w-3 rounded-sm"
style={{ backgroundColor: color, opacity: 0.55 }}
style={{ backgroundColor: color }}
/>
{label}
</span>
@@ -84,10 +84,9 @@ export function MoodTimeOfDayChart({
data={data}
margin={{ top: 8, right: 12, bottom: 8, left: 0 }}
>
{/* Muted chart language — same treatment as the weekday/distribution
siblings: `--muted-foreground` axis ticks, a quiet comment-grey
target guide, and 0.55 bar fill so the level hues inform without
shouting. */}
{/* Quiet chart language — `--muted-foreground` axis ticks and a
comment-grey target guide. The bars themselves render at full
saturation (v1.19.1) so the mood level hues read clearly. */}
<XAxis
dataKey="label"
tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
@@ -130,7 +129,10 @@ export function MoodTimeOfDayChart({
];
}}
/>
<Bar dataKey="value" radius={[3, 3, 0, 0]} fillOpacity={0.55}>
{/* v1.19.1 — populated buckets render at full saturation so the
level hues read clearly; only the no-data buckets keep the quiet
`--secondary` empty-state tint. */}
<Bar dataKey="value" radius={[3, 3, 0, 0]}>
{data.map((row) => (
<Cell
key={row.bucket}
@@ -139,6 +141,7 @@ export function MoodTimeOfDayChart({
? "var(--secondary)"
: colorForScore(row.avgScore)
}
fillOpacity={row.avgScore == null ? 0.55 : 1}
/>
))}
</Bar>