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),