Mobile home screen

packages/mobile-app/app/(tabs)/ui.tsx

@@ -20,13 +20,22 @@ export default function UiKit() {
       style={{
         gap: 10,
         padding: 10,
-        backgroundColor: scheme === "dark" ? "#333" : "#fff",
+        backgroundColor: scheme === "dark" ? "#101010" : "#fff",
       }}
     >
       <Text size="lg">Count: {count}</Text>
-      <Button title="Press me" onClick={() => setCount(count + 1)} />
-      <Box height="auto" bg="pink" borderWidth={2} borderColor="gray">
-        <Button title="Press me" onClick={() => setCount(count + 1)} />
+      <Button title="Press me - filled" onClick={() => setCount(count + 1)} />
+      <Box height="auto" bg="pink" borderWidth={2} borderColor="gray900">
+        <Button
+          styleVariant="outline"
+          title="Press me - outlined"
+          onClick={() => setCount(count + 1)}
+        />
+        <Button
+          styleVariant="ghost"
+          title="Press me - ghost"
+          onClick={() => setCount(count + 1)}
+        />
         <Button disabled title="Press me" onClick={() => setCount(count + 1)} />
       </Box>
       <Text>Input value: {inputValue}</Text>
@@ -52,7 +61,7 @@ export default function UiKit() {
         height="auto"
         bg="pink"
         borderWidth={8}
-        borderColor="gray"
+        borderColor="gray900"
       >
         <Button title="Press me" onClick={() => setCount(count + 1)} />
         <Button disabled title="Press me" onClick={() => setCount(count + 1)} />

packages/mobile-app/app/onboarding/index.tsx

@@ -1,27 +1,61 @@
-import { StatusBar } from "expo-status-bar";
-import { StyleSheet, View, Text } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { LinkButton } from "../../components/LinkButton";
+import { VStack, Text } from "@ironfish/tackle-box";
+import { LinearGradient } from "expo-linear-gradient";
+
+import LogoWithText from "../../assets/images/logo-with-text.svg";
+import KeyPlantOrchid from "../../assets/images/key-plant--orchid.svg";
+
+const styles = StyleSheet.create({
+  background: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+  },
+});
 
 export default function Onboarding() {
   return (
-    <View style={styles.container}>
-      <Text>Welcome to Iron Fish</Text>
-      <Text>Let's Make Web3 Private</Text>
-      <LinkButton title="Create Account" href="/onboarding/create/" />
-      <LinkButton
-        title="I already have an account"
-        href="/onboarding/import-encoded/"
+    <View style={{ padding: 24, flex: 1 }}>
+      <LinearGradient
+        colors={["#FFF4E0", "#DE83F0"]}
+        locations={[0, 1]}
+        style={styles.background}
       />
-      <StatusBar style="auto" />
+      <VStack align="center" gap={8}>
+        <LogoWithText height={18} />
+        <Text textAlign="center" size="3xl">
+          Let's Make Web3 Private
+        </Text>
+      </VStack>
+      <View
+        style={{
+          flex: 1,
+          alignItems: "center",
+        }}
+      >
+        <KeyPlantOrchid style={{ aspectRatio: 0.5 }} />
+      </View>
+      <VStack gap={4}>
+        <LinkButton
+          styleVariant="outline"
+          title="I have an account"
+          href="/onboarding/import-encoded/"
+        />
+        <LinkButton
+          styleVariant="solid"
+          title="Create an account"
+          href="/onboarding/create/"
+        />
+        <LinkButton
+          styleVariant="ghost"
+          title="Language preferences"
+          href="/onboarding/language/"
+        />
+      </VStack>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

packages/mobile-app/components/LinkButton.tsx

@@ -1,47 +1,26 @@
 import { Link } from "expo-router";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-} from "react-native";
+import { GestureResponderEvent, Pressable } from "react-native";
+import { Button } from "@ironfish/tackle-box";
 
 /**
- * A button that navigates to `href` when pressed. May be removed or replaced when
- * ui-kit has a pattern for this.
+ * A button that navigates to `href` when pressed.
  */
 export function LinkButton({
   title,
   href,
   onPress,
+  styleVariant = "solid",
 }: {
   title: string;
   href: string;
   onPress?: (event: GestureResponderEvent) => void;
+  styleVariant?: "solid" | "outline" | "ghost";
 }) {
   return (
     <Link href={href} asChild>
-      <Pressable style={styles.button} onPress={onPress}>
-        <Text style={styles.text}>{title}</Text>
+      <Pressable onPress={onPress}>
+        <Button styleVariant={styleVariant} title={title} />
       </Pressable>
     </Link>
   );
 }
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 12,
-    paddingHorizontal: 32,
-    borderRadius: 4,
-    elevation: 3,
-    backgroundColor: "blue",
-  },
-  text: {
-    lineHeight: 21,
-    fontWeight: "bold",
-    letterSpacing: 0.25,
-    color: "white",
-  },
-});

packages/mobile-app/package.json

@@ -16,6 +16,7 @@
     "data-facade": "*",
     "expo": "~51.0.39",
     "expo-constants": "~16.0.2",
+    "expo-font": "~12.0.10",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.24",
     "expo-secure-store": "13.0.2",
@@ -30,13 +31,13 @@
     "protobufjs": "^7.3.0",
     "react": "18.2.0",
     "react-native": "0.75.4",
+    "react-native-gesture-handler": "~2.18.1",
+    "react-native-reanimated": "~3.15.0",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "~3.34.0",
     "react-native-svg": "15.9.0",
     "zod": "^3.22.4",
-    "react-native-reanimated": "~3.15.0",
-    "react-native-gesture-handler": "~2.18.1",
-    "expo-font": "~12.0.10"
+    "expo-linear-gradient": "~13.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

packages/tackle-box/lib/components/Button/Button.tsx

@@ -2,24 +2,14 @@ import { html, css } from "react-strict-dom";
 import { ComponentProps } from "react";
 import { HStack, Text } from "@/index";
 import { Icon, type IconName } from "@/components/Icon/Icon";
-
-const colors = css.defineVars({
-  black: "#000",
-  white: "#fff",
-  grayLight: "#DEDFE2",
-  grayMedium: "#989898",
-  grayDark: "#353535",
-});
+import { colors } from "@/vars/index.stylex";
 
 const styles = css.create({
   base: {
-    backgroundColor: {
-      default: colors.black,
-      ":active": colors.grayDark,
-    },
-    borderWidth: 0,
     boxSizing: "border-box",
-    color: colors.white,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     textAlign: "center",
     paddingTop: 14,
     paddingBottom: 14,
@@ -28,9 +18,37 @@ const styles = css.create({
     fontSize: 20,
     borderRadius: 9999,
   },
+  solid: {
+    backgroundColor: {
+      default: colors.backgroundInverse,
+      ":active": colors.backgroundHoverInverse,
+    },
+    borderWidth: 0,
+    color: colors.textPrimaryInverse,
+  },
+  outline: {
+    backgroundColor: {
+      default: "rgba(0, 0, 0, 0.0)",
+      ":active": "rgba(0, 0, 0, 0.05)",
+    },
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    color: colors.textPrimary,
+  },
+  ghost: {
+    backgroundColor: {
+      default: "rgba(0, 0, 0, 0.0)",
+      ":active": "rgba(0, 0, 0, 0.05)",
+    },
+    borderWidth: 0,
+    borderColor: "transparent",
+    color: colors.textPrimary,
+  },
   disabled: {
-    backgroundColor: colors.grayLight,
-    color: colors.grayMedium,
+    backgroundColor: colors.backgroundDisabled,
+    borderColor: "transparent",
+    color: colors.textDisabled,
   },
   icon: {
     width: 17,
@@ -40,25 +58,56 @@ const styles = css.create({
 
 type ButtonProps = ComponentProps<typeof html.button>;
 
-type Props = Pick<ButtonProps, "onClick"> & {
+type Props = {
   disabled?: boolean;
   title: string;
+  styleVariant?: "solid" | "outline" | "ghost";
+  onClick?: ButtonProps["onClick"];
   rightIcon?: IconName;
 };
 
-export function Button({ title, disabled, onClick, rightIcon }: Props) {
-  return (
+export function Button({
+  title,
+  disabled,
+  onClick,
+  rightIcon,
+  styleVariant = "solid",
+}: Props) {
+  const computedStyles = [
+    styles.base,
+    styleVariant === "solid" && styles.solid,
+    styleVariant === "outline" && styles.outline,
+    styleVariant === "ghost" && styles.ghost,
+    disabled && styles.disabled,
+  ];
+
+  return onClick ? (
     <html.button
-      style={[styles.base, disabled && styles.disabled]}
+      style={computedStyles}
       onClick={(e) => {
         if (disabled) return;
         onClick?.(e);
       }}
     >
-      <HStack gap={8}>
-        <Text>{title}</Text>
-        {rightIcon && <Icon name={rightIcon} />}
-      </HStack>
+      <ButtonContent title={title} rightIcon={rightIcon} />
     </html.button>
+  ) : (
+    <html.div style={computedStyles}>
+      <ButtonContent title={title} rightIcon={rightIcon} />
+    </html.div>
+  );
+}
+function ButtonContent({
+  title,
+  rightIcon,
+}: {
+  title: string;
+  rightIcon?: IconName;
+}) {
+  return (
+    <HStack gap={8} justify="center">
+      <Text>{title}</Text>
+      {rightIcon && <Icon name={rightIcon} />}
+    </HStack>
   );
 }