From ec083c3c77fefa93bfc204e18da3ade36c33b7ec Mon Sep 17 00:00:00 2001
From: Kenneth <kenneth@nym.sh>
Date: Sat, 14 Mar 2026 00:39:59 +0000
Subject: [PATCH] feat(client): add Button.Icon subcomponent (#70)

Introduce Button.Icon to enforce consistent icon styling
(size, theme-aware color) instead of hardcoding Feather
props at each call site. Update showcase and json-render
registry to use it.

Co-authored-by: Ona <no-reply@ona.com>
---
 .../src/components/ui/button.showcase.tsx         |  9 ++++-----
 apps/aelis-client/src/components/ui/button.tsx    | 15 ++++++++++++++-
 apps/aelis-client/src/json-render/registry.tsx    | 10 +++-------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/apps/aelis-client/src/components/ui/button.showcase.tsx b/apps/aelis-client/src/components/ui/button.showcase.tsx
index de21a2f..d4fe563 100644
--- a/apps/aelis-client/src/components/ui/button.showcase.tsx
+++ b/apps/aelis-client/src/components/ui/button.showcase.tsx
@@ -1,4 +1,3 @@
-import Feather from "@expo/vector-icons/Feather"
 import { View } from "react-native"
 import tw from "twrnc"
 
@@ -15,22 +14,22 @@ function ButtonShowcase() {
 				<Button
 					style={tw`self-start`}
 					label="Add item"
-					leadingIcon={<Feather name="plus" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="plus" />}
 				/>
 			</Section>
 			<Section title="Trailing icon">
 				<Button
 					style={tw`self-start`}
 					label="Next"
-					trailingIcon={<Feather name="arrow-right" size={18} color="#e7e5e4" />}
+					trailingIcon={<Button.Icon name="arrow-right" />}
 				/>
 			</Section>
 			<Section title="Both icons">
 				<Button
 					style={tw`self-start`}
 					label="Download"
-					leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
-					trailingIcon={<Feather name="chevron-down" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="download" />}
+					trailingIcon={<Button.Icon name="chevron-down" />}
 				/>
 			</Section>
 		</View>
diff --git a/apps/aelis-client/src/components/ui/button.tsx b/apps/aelis-client/src/components/ui/button.tsx
index c1f4f15..58f4a68 100644
--- a/apps/aelis-client/src/components/ui/button.tsx
+++ b/apps/aelis-client/src/components/ui/button.tsx
@@ -1,8 +1,19 @@
+import Feather from "@expo/vector-icons/Feather"
 import { type PressableProps, Pressable, View } from "react-native"
 import tw from "twrnc"
 
 import { SansSerifText } from "./sans-serif-text"
 
+type FeatherIconName = React.ComponentProps<typeof Feather>["name"]
+
+type ButtonIconProps = {
+	name: FeatherIconName
+}
+
+function ButtonIcon({ name }: ButtonIconProps) {
+	return <Feather name={name} size={18} color={tw.color("text-stone-100 dark:text-stone-200")} />
+}
+
 type ButtonProps = Omit<PressableProps, "children"> & {
 	label: string
 	leadingIcon?: React.ReactNode
@@ -12,7 +23,7 @@ type ButtonProps = Omit<PressableProps, "children"> & {
 export function Button({ style, label, leadingIcon, trailingIcon, ...props }: ButtonProps) {
 	const hasIcons = leadingIcon != null || trailingIcon != null
 
-	const textElement = <SansSerifText style={tw`text-stone-200 font-medium`}>{label}</SansSerifText>
+	const textElement = <SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>{label}</SansSerifText>
 
 	return (
 		<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>
@@ -28,3 +39,5 @@ export function Button({ style, label, leadingIcon, trailingIcon, ...props }: Bu
 		</Pressable>
 	)
 }
+
+Button.Icon = ButtonIcon
diff --git a/apps/aelis-client/src/json-render/registry.tsx b/apps/aelis-client/src/json-render/registry.tsx
index 41a9f98..3cf0778 100644
--- a/apps/aelis-client/src/json-render/registry.tsx
+++ b/apps/aelis-client/src/json-render/registry.tsx
@@ -1,4 +1,3 @@
-import Feather from "@expo/vector-icons/Feather"
 import { defineRegistry } from "@json-render/react-native"
 import { View } from "react-native"
 import tw from "twrnc"
@@ -11,10 +10,7 @@ import { SerifText } from "@/components/ui/serif-text"
 
 import { catalog } from "./catalog"
 
-function featherIcon(name: string | null | undefined) {
-	if (!name) return undefined
-	return <Feather name={name as React.ComponentProps<typeof Feather>["name"]} size={18} color="#e7e5e4" />
-}
+type ButtonIconName = React.ComponentProps<typeof Button.Icon>["name"]
 
 export const { registry } = defineRegistry(catalog, {
 	components: {
@@ -22,8 +18,8 @@ export const { registry } = defineRegistry(catalog, {
 		Button: ({ props, emit }) => (
 			<Button
 				label={props.label}
-				leadingIcon={featherIcon(props.leadingIcon)}
-				trailingIcon={featherIcon(props.trailingIcon)}
+				leadingIcon={props.leadingIcon ? <Button.Icon name={props.leadingIcon as ButtonIconName} /> : undefined}
+				trailingIcon={props.trailingIcon ? <Button.Icon name={props.trailingIcon as ButtonIconName} /> : undefined}
 				onPress={() => emit("press")}
 			/>
 		),