From 19a018195575d226ac1ca38bb21fb81a0d48b796 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Tue, 23 Jul 2024 14:21:25 +0200
Subject: [PATCH] Improve FamilyTree dark mode

---
 components/family-tree.vue     | 39 +++++++++++++++++++++++++---------
 public/assets/icons/reduce.svg |  2 +-
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/components/family-tree.vue b/components/family-tree.vue
index 02142f4..5d5a80c 100644
--- a/components/family-tree.vue
+++ b/components/family-tree.vue
@@ -83,10 +83,10 @@ function drawChildConnections() {
 			overlays.push({
 				type: "Custom",
 				options: {
-					location: 8,
+					location: 12,
 					create() {
 						const d = document.createElement("button");
-						d.innerHTML = `<img src="/assets/icons/reduce.svg" class="size-4 ml-6" title="${t("FamilyTree.collapse-children")}"/><span class="sr-only">${t("FamilyTree.collapse-children")}</span>`;
+						d.innerHTML = `<img src="/assets/icons/reduce.svg" class="size-4 ml-7 dark:invert" title="${t("FamilyTree.collapse-children")}"/><span class="sr-only">${t("FamilyTree.collapse-children")}</span>`;
 						d.onclick = toggleShowAllChildren;
 						return d;
 					},
@@ -141,7 +141,7 @@ onMounted(() => {
 							location: siblings.value.length > 1 ? 12 : 0.5,
 							create() {
 								const d = document.createElement("div");
-								d.innerHTML = `<img src="/assets/icons/users.svg" class="size-4 mb-5" title="${t("FamilyTree.siblings")}"/><span class="sr-only">${t("FamilyTree.siblings")}</span>`;
+								d.innerHTML = `<img src="/assets/icons/users.svg" class="size-4 mb-5 dark:invert" title="${t("FamilyTree.siblings")}"/><span class="sr-only">${t("FamilyTree.siblings")}</span>`;
 								return d;
 							},
 						},
@@ -158,7 +158,7 @@ onMounted(() => {
 							location: partners.value.length > 1 ? 12 : 0.5,
 							create() {
 								const d = document.createElement("div");
-								d.innerHTML = `<img src="/assets/icons/marriage.svg" class="size-4 mb-4" title="${t("FamilyTree.partner")}"/><span class="sr-only">${t("FamilyTree.partner")}</span>`;
+								d.innerHTML = `<img src="/assets/icons/marriage.svg" class="size-4 mb-4 dark:invert" title="${t("FamilyTree.partner")}"/><span class="sr-only">${t("FamilyTree.partner")}</span>`;
 								return d;
 							},
 						},
@@ -201,9 +201,14 @@ function toggleShowAllChildren() {
 	<div ref="familyTreeContainer" class="relative text-sm">
 		<Menu as="div" class="absolute left-0 z-20 inline-block text-left">
 			<div>
-				<MenuButton class="inline-flex w-full justify-center text-xs font-medium text-neutral-700">
+				<MenuButton
+					class="inline-flex w-full justify-center text-xs font-medium text-neutral-700 dark:text-neutral-300"
+				>
 					{{ t("FamilyTree.legend") }}
-					<ChevronDown class="ml-1 size-3 self-center text-neutral-700" aria-hidden="true" />
+					<ChevronDown
+						class="ml-1 size-3 self-center text-neutral-700 dark:text-neutral-300"
+						aria-hidden="true"
+					/>
 				</MenuButton>
 			</div>
 
@@ -216,12 +221,16 @@ function toggleShowAllChildren() {
 				leave-to-class="transform scale-95 opacity-0"
 			>
 				<MenuItems
-					class="absolute left-0 mt-2 w-max origin-top-left rounded-md bg-white/90 shadow-lg ring-1 ring-black/5 focus:outline-none"
+					class="absolute left-0 mt-2 w-max origin-top-left rounded-md bg-white/90 shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-neutral-900/95"
 				>
 					<div class="p-1">
 						<MenuItem>
 							<div class="group flex items-center gap-2 rounded-md p-2 text-sm">
-								<img src="/assets/icons/users.svg" class="size-4" :alt="t('FamilyTree.siblings')" />
+								<img
+									src="/assets/icons/users.svg"
+									class="size-4 dark:invert"
+									:alt="t('FamilyTree.siblings')"
+								/>
 								<div>{{ t("FamilyTree.siblings") }}</div>
 							</div>
 						</MenuItem>
@@ -229,7 +238,7 @@ function toggleShowAllChildren() {
 							<div class="group flex items-center gap-2 rounded-md p-2 text-sm">
 								<img
 									src="/assets/icons/marriage.svg"
-									class="size-4"
+									class="size-4 dark:invert"
 									:alt="t('FamilyTree.partner')"
 								/>
 								<div>{{ t("FamilyTree.partner") }}</div>
@@ -239,12 +248,22 @@ function toggleShowAllChildren() {
 							<div class="group flex items-center gap-2 rounded-md p-2 text-sm">
 								<img
 									src="/assets/icons/arrow.svg"
-									class="size-4 rotate-90"
+									class="size-4 rotate-90 dark:invert"
 									:alt="t('FamilyTree.is-descendant-of')"
 								/>
 								<div>{{ t("FamilyTree.is-descendant-of") }}</div>
 							</div>
 						</MenuItem>
+						<MenuItem v-if="showAllChilldren">
+							<div class="group flex items-center gap-2 rounded-md p-2 text-sm">
+								<img
+									src="/assets/icons/reduce.svg"
+									class="size-4 dark:invert"
+									:alt="t('FamilyTree.collapse-children')"
+								/>
+								<div>{{ t("FamilyTree.collapse-children") }}</div>
+							</div>
+						</MenuItem>
 					</div>
 				</MenuItems>
 			</Transition>
diff --git a/public/assets/icons/reduce.svg b/public/assets/icons/reduce.svg
index a9ab42c..0ef0126 100644
--- a/public/assets/icons/reduce.svg
+++ b/public/assets/icons/reduce.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-minus"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8m7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0m-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0z"/></svg>