From 893f3f7181b99fcd80d270c04cad483bbcd94a98 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Thu, 28 Dec 2023 09:38:59 +0700
Subject: [PATCH] feat(icon): update navigation icons

---
 packages/icons/index.ts            |  4 ++++
 packages/icons/src/depot.tsx       | 34 +++++++++++++++---------------
 packages/icons/src/depotFilled.tsx | 19 +++++++++++++++++
 packages/icons/src/home.tsx        | 34 +++++++++++++++---------------
 packages/icons/src/homeFilled.tsx  | 19 +++++++++++++++++
 packages/icons/src/nwc.tsx         | 34 +++++++++++++++---------------
 packages/icons/src/nwcFilled.tsx   | 19 +++++++++++++++++
 packages/icons/src/relay.tsx       | 34 +++++++++++++++---------------
 packages/icons/src/relayFilled.tsx | 17 +++++++++++++++
 packages/ui/src/navigation.tsx     | 28 ++++++++++++++++++++----
 10 files changed, 170 insertions(+), 72 deletions(-)
 create mode 100644 packages/icons/src/depotFilled.tsx
 create mode 100644 packages/icons/src/homeFilled.tsx
 create mode 100644 packages/icons/src/nwcFilled.tsx
 create mode 100644 packages/icons/src/relayFilled.tsx

diff --git a/packages/icons/index.ts b/packages/icons/index.ts
index f380c922..1acdbc82 100644
--- a/packages/icons/index.ts
+++ b/packages/icons/index.ts
@@ -92,3 +92,7 @@ export * from "./src/gossip";
 export * from "./src/userAdd";
 export * from "./src/userRemove";
 export * from "./src/pin";
+export * from "./src/homeFilled";
+export * from "./src/relayFilled";
+export * from "./src/depotFilled";
+export * from "./src/nwcFilled";
diff --git a/packages/icons/src/depot.tsx b/packages/icons/src/depot.tsx
index 45934916..7c15e544 100644
--- a/packages/icons/src/depot.tsx
+++ b/packages/icons/src/depot.tsx
@@ -1,18 +1,18 @@
-export function DepotIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M20 5.7V12m0-6.3c0 1.491-3.582 2.7-8 2.7S4 7.191 4 5.7m16 0C20 4.209 16.418 3 12 3S4 4.209 4 5.7M20 12v6.131C20 19.716 16.418 21 12 21s-8-1.284-8-2.869V12m16 0c0 1.491-3.582 2.7-8 2.7S4 13.491 4 12m0 0V5.7M16 11h.01M16 17h.01" />
-    </svg>
-  );
+export function DepotIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M7 12l2-2-2-2m5 4h3M3 11c0-2.8 0-4.2.545-5.27A5 5 0 015.73 3.545C6.8 3 8.2 3 11 3h2c2.8 0 4.2 0 5.27.545a5 5 0 012.185 2.185C21 6.8 21 8.2 21 11v2c0 2.8 0 4.2-.545 5.27a5 5 0 01-2.185 2.185C17.2 21 15.8 21 13 21h-2c-2.8 0-4.2 0-5.27-.545a5 5 0 01-2.185-2.185C3 17.2 3 15.8 3 13v-2z" />
+		</svg>
+	);
 }
diff --git a/packages/icons/src/depotFilled.tsx b/packages/icons/src/depotFilled.tsx
new file mode 100644
index 00000000..205ce941
--- /dev/null
+++ b/packages/icons/src/depotFilled.tsx
@@ -0,0 +1,19 @@
+export function DepotFilledIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+		>
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M13.044 2h-2.088c-1.363 0-2.447 0-3.321.071-.896.074-1.66.227-2.359.583a6 6 0 00-2.622 2.622c-.356.7-.51 1.463-.583 2.359C2 8.509 2 9.593 2 10.956v2.088c0 1.363 0 2.447.071 3.321.074.896.227 1.66.583 2.359a6 6 0 002.622 2.622c.7.356 1.463.51 2.359.583.874.071 1.958.071 3.321.071h2.088c1.363 0 2.447 0 3.321-.071.896-.074 1.66-.227 2.359-.583a5.999 5.999 0 002.622-2.622c.356-.7.51-1.463.583-2.359.071-.874.071-1.958.071-3.321v-2.088c0-1.363 0-2.447-.071-3.321-.074-.896-.227-1.66-.583-2.359a6 6 0 00-2.622-2.622c-.7-.356-1.463-.51-2.359-.583C15.491 2 14.407 2 13.044 2zM7.707 7.293a1 1 0 00-1.414 1.414L7.586 10l-1.293 1.293a1 1 0 101.414 1.414l2-2a1 1 0 000-1.414l-2-2zM12 11a1 1 0 100 2h3a1 1 0 100-2h-3z"
+				clipRule="evenodd"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/icons/src/home.tsx b/packages/icons/src/home.tsx
index ad97d4de..828744a9 100644
--- a/packages/icons/src/home.tsx
+++ b/packages/icons/src/home.tsx
@@ -1,18 +1,18 @@
-export function HomeIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M9 17h6M7.606 5.65l-2.6 2.456c-.74.698-1.11 1.047-1.374 1.46a4 4 0 0 0-.513 1.191C3 11.233 3 11.742 3 12.76V14.6c0 2.24 0 3.36.436 4.216a4 4 0 0 0 1.748 1.748C6.04 21 7.16 21 9.4 21h5.2c2.24 0 3.36 0 4.216-.436a4 4 0 0 0 1.748-1.748C21 17.96 21 16.84 21 14.6v-1.841c0-1.017 0-1.526-.119-2.002a4 4 0 0 0-.513-1.19c-.265-.414-.634-.763-1.374-1.461l-2.6-2.456c-1.546-1.46-2.32-2.19-3.201-2.466a4 4 0 0 0-2.386 0c-.882.275-1.655 1.006-3.201 2.466Z" />
-    </svg>
-  );
+export function HomeIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M12 17v-4M7.606 5.65l-2.6 2.456c-.74.698-1.11 1.047-1.374 1.46a4 4 0 00-.513 1.191C3 11.233 3 11.742 3 12.76V14.6c0 2.24 0 3.36.436 4.216a4 4 0 001.748 1.748C6.04 21 7.16 21 9.4 21h5.2c2.24 0 3.36 0 4.216-.436a4 4 0 001.748-1.748C21 17.96 21 16.84 21 14.6v-1.841c0-1.017 0-1.526-.119-2.002a4 4 0 00-.513-1.19c-.265-.414-.634-.763-1.374-1.461l-2.6-2.456c-1.546-1.46-2.32-2.19-3.201-2.466a4 4 0 00-2.386 0c-.882.275-1.655 1.006-3.201 2.466z" />
+		</svg>
+	);
 }
diff --git a/packages/icons/src/homeFilled.tsx b/packages/icons/src/homeFilled.tsx
new file mode 100644
index 00000000..9bb9197c
--- /dev/null
+++ b/packages/icons/src/homeFilled.tsx
@@ -0,0 +1,19 @@
+export function HomeFilledIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M10.51 2.23a5 5 0 012.98 0c.61.19 1.136.525 1.681.963.528.425 1.132.996 1.88 1.702l2.716 2.565c.657.62 1.111 1.049 1.443 1.567.293.458.51.96.642 1.488.148.598.148 1.222.148 2.125v2.003c0 1.084 0 1.958-.058 2.666-.06.729-.185 1.369-.487 1.96a5 5 0 01-2.185 2.186c-.592.302-1.232.428-1.961.487C16.6 22 15.727 22 14.643 22H9.357c-1.084 0-1.958 0-2.666-.058-.728-.06-1.369-.185-1.96-.487a5 5 0 01-2.186-2.185c-.302-.592-.428-1.232-.487-1.961C2 16.6 2 15.727 2 14.643V12.64c0-.903 0-1.527.148-2.125a5 5 0 01.642-1.488c.332-.518.786-.947 1.443-1.567l2.716-2.565c.748-.706 1.352-1.277 1.88-1.702.545-.438 1.071-.773 1.68-.964zM13 13a1 1 0 10-2 0v4a1 1 0 102 0v-4z"
+				clipRule="evenodd"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/icons/src/nwc.tsx b/packages/icons/src/nwc.tsx
index e7e99cb7..9a1394e5 100644
--- a/packages/icons/src/nwc.tsx
+++ b/packages/icons/src/nwc.tsx
@@ -1,18 +1,18 @@
-export function NwcIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M2 14.5V11c0-2.8 0-4.2.545-5.27A5 5 0 0 1 4.73 3.545C5.8 3 7.2 3 10 3h3.5c1.398 0 2.097 0 2.648.228a3 3 0 0 1 1.624 1.624c.207.5.226 1.123.228 2.28M2 14.5c0 1.33 0 2.495.38 3.413a5 5 0 0 0 2.707 2.706c.696.289 1.534.359 2.913.376M2 14.5c0-2.33 0-3.495.38-4.413A5 5 0 0 1 5.088 7.38C6.005 7 7.17 7 9.5 7h5c1.634 0 2.695 0 3.5.131M14 12h3m1-4.869c.343.056.639.136.913.25a5 5 0 0 1 2.706 2.706c.289.696.359 1.534.376 2.913m-3.03 3h.037A2.999 2.999 0 0 1 22 19c0 1.657-1.342 3-2.998 3h-.037m-3.93-6h-.037A2.999 2.999 0 0 0 12 19c0 1.657 1.342 3 2.998 3h.037m.962-3h1.999" />
-    </svg>
-  );
+export function NwcIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="25"
+			fill="none"
+			viewBox="0 0 24 25"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M2 15v-3.5c0-2.8 0-4.2.545-5.27A5 5 0 014.73 4.045C5.8 3.5 7.2 3.5 10 3.5h3.5c1.398 0 2.097 0 2.648.228a3 3 0 011.624 1.624c.207.5.226 1.123.228 2.28M2 15c0 1.33 0 2.495.38 3.413a5 5 0 002.707 2.706c.918.381 2.083.381 4.413.381h5c2.33 0 3.495 0 4.413-.38a5 5 0 002.706-2.707C22 17.495 22 16.33 22 15c0-2.33 0-3.495-.38-4.413a5 5 0 00-2.707-2.706A4.062 4.062 0 0018 7.63M2 15c0-2.33 0-3.495.38-4.413A5 5 0 015.088 7.88C6.005 7.5 7.17 7.5 9.5 7.5h5c1.634 0 2.695 0 3.5.131M14 12.5h3" />
+		</svg>
+	);
 }
diff --git a/packages/icons/src/nwcFilled.tsx b/packages/icons/src/nwcFilled.tsx
new file mode 100644
index 00000000..7d28eb6a
--- /dev/null
+++ b/packages/icons/src/nwcFilled.tsx
@@ -0,0 +1,19 @@
+export function NwcFilledIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="25"
+			fill="none"
+			viewBox="0 0 24 25"
+			{...props}
+		>
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M18.994 6.844c-.017-.728-.075-1.336-.298-1.875a4 4 0 00-2.165-2.165c-.418-.173-.852-.241-1.321-.273-.453-.031-1.006-.031-1.676-.031H9.956c-1.363 0-2.447 0-3.321.071-.896.074-1.66.227-2.359.583a6 6 0 00-2.622 2.622c-.356.7-.51 1.463-.582 2.359C1 9.009 1 10.093 1 11.456v3.666c0 1.23-.001 2.569.457 3.674a6 6 0 003.247 3.247c.602.25 1.244.356 1.992.407.732.05 1.634.05 2.768.05h5.072c1.135 0 2.037 0 2.768-.05.748-.05 1.39-.157 1.992-.407a6 6 0 003.247-3.247c.458-1.105.458-2.444.457-3.674v-.158c0-1.134 0-2.036-.05-2.768-.05-.748-.157-1.39-.407-1.992a6 6 0 00-3.247-3.247c-.1-.042-.2-.079-.302-.113zm-3.92-2.318c-.377-.025-.861-.026-1.574-.026H10c-1.417 0-2.419 0-3.202.065-.772.063-1.244.182-1.614.371a4 4 0 00-1.748 1.748c-.158.31-.267.69-.335 1.256a5.998 5.998 0 011.603-.983c.602-.25 1.244-.356 1.992-.407.732-.05 1.634-.05 2.768-.05H14.6c.93 0 1.711 0 2.379.032-.022-.415-.062-.628-.132-.797a2 2 0 00-1.083-1.083c-.133-.055-.324-.1-.692-.126zM14 11.5a1 1 0 100 2h3a1 1 0 100-2h-3z"
+				clipRule="evenodd"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/icons/src/relay.tsx b/packages/icons/src/relay.tsx
index 8b6be3c6..b2b22d40 100644
--- a/packages/icons/src/relay.tsx
+++ b/packages/icons/src/relay.tsx
@@ -1,18 +1,18 @@
-export function RelayIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M7 12h10M7 12c-.464 0-.697 0-.892.022a3.5 3.5 0 0 0-3.086 3.086C3 15.303 3 15.536 3 16s0 .697.022.892a3.5 3.5 0 0 0 3.086 3.086C6.303 20 6.536 20 7 20h10c.464 0 .697 0 .892-.022a3.5 3.5 0 0 0 3.086-3.086C21 16.697 21 16.464 21 16s0-.697-.022-.892a3.5 3.5 0 0 0-3.086-3.086C17.697 12 17.464 12 17 12M7 12c-.464 0-.697 0-.892-.022a3.5 3.5 0 0 1-3.086-3.086C3 8.697 3 8.464 3 8s0-.697.022-.892a3.5 3.5 0 0 1 3.086-3.086C6.303 4 6.536 4 7 4h10c.464 0 .697 0 .892.022a3.5 3.5 0 0 1 3.086 3.086C21 7.303 21 7.536 21 8s0 .697-.022.892a3.5 3.5 0 0 1-3.086 3.086C17.697 12 17.464 12 17 12m-4-4h.01M17 8h.01M13 16h.01M17 16h.01" />
-    </svg>
-  );
+export function RelayIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="25"
+			height="24"
+			fill="none"
+			viewBox="0 0 25 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+			{...props}
+		>
+			<path d="M12.5 20.875V17m0 3.875c-1.75 0-3.5.375-5 1.125m5-1.125c1.75 0 3.5.375 5 1.125m-5-5h7.6c.84 0 1.26 0 1.581-.163a1.5 1.5 0 00.655-.656c.164-.32.164-.74.164-1.581V4.4c0-.84 0-1.26-.163-1.581a1.5 1.5 0 00-.656-.656C21.361 2 20.941 2 20.1 2H4.9c-.84 0-1.26 0-1.581.163a1.5 1.5 0 00-.656.656c-.163.32-.163.74-.163 1.581v10.2c0 .84 0 1.26.163 1.581a1.5 1.5 0 00.656.655c.32.164.74.164 1.581.164h7.6z" />
+		</svg>
+	);
 }
diff --git a/packages/icons/src/relayFilled.tsx b/packages/icons/src/relayFilled.tsx
new file mode 100644
index 00000000..e2e8fe59
--- /dev/null
+++ b/packages/icons/src/relayFilled.tsx
@@ -0,0 +1,17 @@
+export function RelayFilledIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="25"
+			height="24"
+			fill="none"
+			viewBox="0 0 25 24"
+			{...props}
+		>
+			<path
+				fill="currentColor"
+				d="M4.864 1c-.39 0-.74 0-1.03.024a2.538 2.538 0 00-.969.248 2.5 2.5 0 00-1.093 1.093 2.538 2.538 0 00-.248.968c-.024.292-.024.642-.024 1.03v10.273c0 .39 0 .74.024 1.03.025.313.083.644.248.969a2.5 2.5 0 001.093 1.092c.325.166.656.224.968.25.292.023.642.023 1.03.023H11.5v1.913c-1.552.118-3.085.511-4.447 1.193a1 1 0 10.894 1.788c1.346-.672 2.94-1.019 4.553-1.019s3.207.347 4.553 1.02a1 1 0 10.894-1.79c-1.362-.68-2.895-1.074-4.447-1.192V18h6.636c.39 0 .74 0 1.03-.024.313-.025.644-.083.969-.248a2.5 2.5 0 001.092-1.093c.166-.325.224-.656.25-.968.023-.292.023-.642.023-1.03V4.363c0-.39 0-.74-.024-1.03a2.535 2.535 0 00-.248-.969 2.5 2.5 0 00-1.093-1.093 2.538 2.538 0 00-.968-.248C20.875 1 20.525 1 20.137 1H4.863z"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/ui/src/navigation.tsx b/packages/ui/src/navigation.tsx
index 94f02a09..ffdcaa21 100644
--- a/packages/ui/src/navigation.tsx
+++ b/packages/ui/src/navigation.tsx
@@ -1,8 +1,12 @@
 import {
+	DepotFilledIcon,
 	DepotIcon,
+	HomeFilledIcon,
 	HomeIcon,
+	NwcFilledIcon,
 	NwcIcon,
 	PlusIcon,
+	RelayFilledIcon,
 	RelayIcon,
 	SearchIcon,
 } from "@lume/icons";
@@ -29,7 +33,11 @@ export function Navigation() {
 										: "text-black/50 dark:text-neutral-400",
 								)}
 							>
-								<HomeIcon className="h-6 w-6" />
+								{isActive ? (
+									<HomeFilledIcon className="size-6 text-black dark:text-white" />
+								) : (
+									<HomeIcon className="size-6" />
+								)}
 							</div>
 							<div
 								className={twMerge(
@@ -59,7 +67,11 @@ export function Navigation() {
 										: "text-black/50 dark:text-neutral-400",
 								)}
 							>
-								<RelayIcon className="h-6 w-6" />
+								{isActive ? (
+									<RelayFilledIcon className="size-6" />
+								) : (
+									<RelayIcon className="size-6" />
+								)}
 							</div>
 							<div
 								className={twMerge(
@@ -89,7 +101,11 @@ export function Navigation() {
 										: "text-black/50 dark:text-neutral-400",
 								)}
 							>
-								<DepotIcon className="h-6 w-6" />
+								{isActive ? (
+									<DepotFilledIcon className="size-6 text-black dark:text-white" />
+								) : (
+									<DepotIcon className="size-6" />
+								)}
 							</div>
 							<div
 								className={twMerge(
@@ -119,7 +135,11 @@ export function Navigation() {
 										: "text-black/50 dark:text-neutral-400",
 								)}
 							>
-								<NwcIcon className="h-6 w-6" />
+								{isActive ? (
+									<NwcFilledIcon className="size-6 text-black dark:text-white" />
+								) : (
+									<NwcIcon className="size-6" />
+								)}
 							</div>
 							<div
 								className={twMerge(