From 205cedc1ce1f870315c4ac7794cbc4f16b6604b9 Mon Sep 17 00:00:00 2001 From: Connor Johnston Date: Tue, 26 Nov 2024 13:37:58 -0500 Subject: [PATCH 01/14] Adds button variants and updates linkButton in mobile app --- packages/mobile-app/app/(tabs)/ui.tsx | 17 +++- packages/mobile-app/app/onboarding/index.tsx | 36 ++++--- packages/mobile-app/assets/logo-with-text.svg | 11 +++ packages/mobile-app/components/LinkButton.tsx | 32 ++----- .../lib/components/Button/Button.tsx | 95 ++++++++++++++----- .../lib/components/TextInput/TextInput.tsx | 2 +- packages/tackle-box/lib/vars/colors.stylex.ts | 91 ++++++++++-------- packages/tackle-box/tsconfig.app.tsbuildinfo | 2 +- 8 files changed, 175 insertions(+), 111 deletions(-) create mode 100644 packages/mobile-app/assets/logo-with-text.svg diff --git a/packages/mobile-app/app/(tabs)/ui.tsx b/packages/mobile-app/app/(tabs)/ui.tsx index 4ed7c53..c488418 100644 --- a/packages/mobile-app/app/(tabs)/ui.tsx +++ b/packages/mobile-app/app/(tabs)/ui.tsx @@ -21,13 +21,22 @@ export default function UiKit() { style={{ gap: 10, padding: 10, - backgroundColor: scheme === "dark" ? "#333" : "#fff", + backgroundColor: scheme === "dark" ? "#101010" : "#fff", }} > Count: {count} - ); diff --git a/packages/tackle-box/lib/components/Button/Button.tsx b/packages/tackle-box/lib/components/Button/Button.tsx index c18d5b3..8503c0d 100644 --- a/packages/tackle-box/lib/components/Button/Button.tsx +++ b/packages/tackle-box/lib/components/Button/Button.tsx @@ -3,15 +3,20 @@ import { HStack, Text } from "@/index"; import { Icon, type IconName } from "@/components/Icon/Icon"; import { type OnClick, styles } from "./shared"; -type Props = { +type BaseProps = { disabled?: boolean; - title: string; variant?: "solid" | "outline" | "ghost"; onClick?: OnClick; rightIcon?: IconName; borderRadius?: number; }; +type Props = BaseProps & + ( + | { title: string; children?: never } + | { title?: never; children: React.ReactNode } + ); + export function Button({ title, disabled, @@ -19,6 +24,7 @@ export function Button({ rightIcon, variant = "solid", borderRadius, + children, }: Props) { const borderRadiusStyle = borderRadius ? styles.borderRadius(borderRadius) @@ -40,11 +46,11 @@ export function Button({ onClick(e); }} > - + {title ? : children} ) : ( - + {title ? : children} ); } diff --git a/packages/tackle-box/lib/components/Icon/Icon.tsx b/packages/tackle-box/lib/components/Icon/Icon.tsx index e96d154..27a3240 100644 --- a/packages/tackle-box/lib/components/Icon/Icon.tsx +++ b/packages/tackle-box/lib/components/Icon/Icon.tsx @@ -3,13 +3,19 @@ import ArrowSend from "./svg/arrow-send.svg?react"; import ArrowsBridge from "./svg/arrows-bridge.svg?react"; import Gear from "./svg/gear.svg?react"; import HamburgerMenu from "./svg/hamburger-menu.svg?react"; +import FaceId from "./svg/face-id.svg?react"; +import ChevronRight from "./svg/chevron-right.svg?react"; +import NumberPadOrchid from "./svg/number-pad--orchid.svg?react"; const ICONS = { "arrow-receive": ArrowReceive, "arrow-send": ArrowSend, "arrows-bridge": ArrowsBridge, + "chevron-right": ChevronRight, + "face-id": FaceId, gear: Gear, "hamburger-menu": HamburgerMenu, + "number-pad-orchid": NumberPadOrchid, } as const; export type IconName = keyof typeof ICONS; diff --git a/packages/tackle-box/lib/components/Icon/svg/chevron-right.svg b/packages/tackle-box/lib/components/Icon/svg/chevron-right.svg new file mode 100644 index 0000000..bf7ff4d --- /dev/null +++ b/packages/tackle-box/lib/components/Icon/svg/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/tackle-box/lib/components/Icon/svg/face-id.svg b/packages/tackle-box/lib/components/Icon/svg/face-id.svg new file mode 100644 index 0000000..5bcbe19 --- /dev/null +++ b/packages/tackle-box/lib/components/Icon/svg/face-id.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/tackle-box/lib/components/Icon/svg/number-pad--orchid.svg b/packages/tackle-box/lib/components/Icon/svg/number-pad--orchid.svg new file mode 100644 index 0000000..cd843bb --- /dev/null +++ b/packages/tackle-box/lib/components/Icon/svg/number-pad--orchid.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + From 81b9ed59be52c6f67e5c52aad88a4a04bc1ab089 Mon Sep 17 00:00:00 2001 From: Connor Johnston Date: Wed, 4 Dec 2024 22:15:16 -0600 Subject: [PATCH 10/14] tweaks --- packages/mobile-app/app/(tabs)/_layout.tsx | 2 +- packages/mobile-app/app/_layout.tsx | 1 - packages/mobile-app/app/onboarding/create.tsx | 7 +- packages/mobile-app/app/onboarding/index.tsx | 101 ++++++++++-------- packages/mobile-app/assets/icons/back.png | Bin 414 -> 0 bytes packages/mobile-app/components/LinkButton.tsx | 28 ++--- .../lib/components/Button/Button.tsx | 25 ++--- 7 files changed, 81 insertions(+), 83 deletions(-) delete mode 100644 packages/mobile-app/assets/icons/back.png diff --git a/packages/mobile-app/app/(tabs)/_layout.tsx b/packages/mobile-app/app/(tabs)/_layout.tsx index f255586..3a8fdbb 100644 --- a/packages/mobile-app/app/(tabs)/_layout.tsx +++ b/packages/mobile-app/app/(tabs)/_layout.tsx @@ -21,7 +21,7 @@ export default function Layout() { ( - - - - - Let's Make Web3 Private - - - + + - - - - - - - - + + + + + + Let's Make Web3 Private + + + + + + + + + + + + + {/* + * For setting the bottom safe area color + * https://medium.com/@calebmackdaven/setting-background-color-with-safeareaview-in-react-native-1ca621ccd9a + */} + + ); } diff --git a/packages/mobile-app/assets/icons/back.png b/packages/mobile-app/assets/icons/back.png deleted file mode 100644 index 18f24c9d1f3778c1e836e754cd2c8bffe0ca8864..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 414 zcmV;P0b%}$P)p7-Lqu4vo#oi4Ah}y4m!BikMf}Q?E9v__MMHOpzCCUV@mQ9n zc7rDg!*CB3jlAMG-qQkvDhMiIC3UE5Bc<#}gUMls!S;p$m%&Xe%ld4ZCMOM)O=g*% z>^*6s48StOGfB7(o-Cua12D+`l`Yhjk_PAe2Rx>8y7FIq0b<-~^0*PV9{>OV07*qo IM6N<$g7tBy1ONa4 diff --git a/packages/mobile-app/components/LinkButton.tsx b/packages/mobile-app/components/LinkButton.tsx index 0553916..3e61fab 100644 --- a/packages/mobile-app/components/LinkButton.tsx +++ b/packages/mobile-app/components/LinkButton.tsx @@ -2,31 +2,21 @@ import { Link } from "expo-router"; import { GestureResponderEvent, Pressable } from "react-native"; import { Button } from "@ironfish/tackle-box"; -/** - * A button that navigates to `href` when pressed. - */ -export function LinkButton({ - title, - href, - onPress, - variant = "solid", - borderRadius, - children, -}: { - title?: string; - href?: string; +type LinkButtonProps = { + href: string; onPress?: (event: GestureResponderEvent) => void; + disabled?: boolean; variant?: "solid" | "outline" | "ghost"; borderRadius?: number; + title?: string; children?: React.ReactNode; -}) { - const titleProp = title && !children ? { title } : {}; +}; + +export function LinkButton({ href, onPress, ...buttonProps }: LinkButtonProps) { return ( - + - +