Improve basic family tree

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