From 07944e329e43e6a4c2b2ae3d1f62a0622b56ee1c Mon Sep 17 00:00:00 2001 From: Justin Paul Date: Thu, 11 Jun 2026 10:37:25 -0400 Subject: [PATCH] Tree cards: render unset-sex / redacted "Living person" in gray, not blue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The chart mapped gender as `=== "female" ? "F" : "M"`, so anything non-female — including null — became "M" (blue). On the public site, redacted living people (whose gender the privacy engine nulls) all showed blue regardless of real sex, and anywhere a person's sex was simply unset they also showed blue (misleading). Map male→"M", female→"F", and everything else→null, which family-chart renders as `card-genderless`. So living/redacted people render gray (and never imply a sex), and unset-sex people render gray instead of defaulting to male/blue. Applied to both the member tree (tree/page.tsx) and the public chart (public-tree-chart.tsx), which share chart.css. Also bumped the genderless color from the library's washed-out `lightgray` to a warm mid-gray that matches the muted male/female tones and the brand palette. Privacy note: `_redact` already nulls gender, so this is purely the client color mapping — no sex leak, just a correct neutral rendering. Signed-off-by: Justin Paul --- frontend/app/trees/[id]/tree/chart.css | 5 ++++- frontend/app/trees/[id]/tree/page.tsx | 4 +++- frontend/components/public-tree-chart.tsx | 5 ++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/app/trees/[id]/tree/chart.css b/frontend/app/trees/[id]/tree/chart.css index 8ed16cf..2398fd9 100644 --- a/frontend/app/trees/[id]/tree/chart.css +++ b/frontend/app/trees/[id]/tree/chart.css @@ -1,7 +1,10 @@ .f3 { --female-color: rgb(196, 138, 146); --male-color: rgb(120, 159, 172); - --genderless-color: lightgray; + /* Warm mid-gray for unset-sex / redacted "Living person" cards — matches the + muted male/female tone weight and the brand palette, instead of the library's + washed-out lightgray. */ + --genderless-color: rgb(156, 150, 143); --background-color: rgb(33, 33, 33); --text-color: #fff; diff --git a/frontend/app/trees/[id]/tree/page.tsx b/frontend/app/trees/[id]/tree/page.tsx index 12bd82d..13a1612 100644 --- a/frontend/app/trees/[id]/tree/page.tsx +++ b/frontend/app/trees/[id]/tree/page.tsx @@ -185,7 +185,9 @@ export default function TreePage() { "first name": fn || "Unnamed", "last name": ln, birthday: years.get(pp.id) ?? "", - gender: pp.gender === "female" ? "F" : "M", + // male → blue, female → pink, unset → genderless (gray). Unset sex no + // longer defaults to male/blue (which was misleading). + gender: pp.gender === "male" ? "M" : pp.gender === "female" ? "F" : null, }, rels: { spouses: ok(partnersOf(pp.id), pp.id), diff --git a/frontend/components/public-tree-chart.tsx b/frontend/components/public-tree-chart.tsx index d7533f6..502d2a5 100644 --- a/frontend/components/public-tree-chart.tsx +++ b/frontend/components/public-tree-chart.tsx @@ -120,7 +120,10 @@ export function PublicTreeChart({ "first name": fn || "Unnamed", "last name": ln, birthday: years.get(pp.id) ?? "", - gender: pp.gender === "female" ? "F" : "M", + // male → blue, female → pink, unset/redacted → genderless (gray). + // Redacted living people have null gender, so they render gray rather + // than defaulting to male/blue (and never imply a real person's sex). + gender: pp.gender === "male" ? "M" : pp.gender === "female" ? "F" : null, }, rels: { spouses: ok(partnersOf(pp.id), pp.id),