From 365b71ba2d31b0c996ff0e30fd20cbe6ec88e76d Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Tue, 22 Aug 2023 11:51:17 +0200
Subject: [PATCH] Improve basic family tree

---
 geneit_app/src/widgets/BasicFamilyTree.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/geneit_app/src/widgets/BasicFamilyTree.tsx b/geneit_app/src/widgets/BasicFamilyTree.tsx
index a31a6d9..fa86411 100644
--- a/geneit_app/src/widgets/BasicFamilyTree.tsx
+++ b/geneit_app/src/widgets/BasicFamilyTree.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import { MemberPhoto } from "./MemberPhoto";
 import { Member, fmtDate } from "../api/MemberApi";
 import Icon from "@mdi/react";
-import { mdiCross } from "@mdi/js";
+import { mdiBabyCarriage, mdiCross } from "@mdi/js";
 
 export function BasicFamilyTree(p: {
   tree: FamilyTreeNode;
@@ -72,9 +72,23 @@ function BasicFamilyMemberItem(p: {
           {p.member.fullName}{" "}
           {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
         </span>
-        {(p.member.dateOfBirth || p.member.dateOfDeath) &&
-          fmtDate(p.member.dateOfBirth) +
-            (p.member.dateOfDeath ? " - " + fmtDate(p.member.dateOfDeath) : "")}
+        <span style={{ display: "inline-flex", alignItems: "center" }}>
+          {p.member.dateOfBirth && (
+            <>
+              <Icon path={mdiBabyCarriage} size={"1rem"} />{" "}
+              {fmtDate(p.member.dateOfBirth)}
+            </>
+          )}
+
+          <span style={{ width: "10px" }}></span>
+
+          {p.member.dateOfDeath && (
+            <>
+              <Icon path={mdiCross} size={"1rem"} />
+              {fmtDate(p.member.dateOfDeath)}
+            </>
+          )}
+        </span>
       </div>
     </div>
   );