tweaks

iron-fish · Dec 5, 2024 · 81b9ed5 · 81b9ed5
1 parent d3686aa
commit 81b9ed5
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 83 deletions.
diff --git a/packages/mobile-app/app/(tabs)/_layout.tsx b/packages/mobile-app/app/(tabs)/_layout.tsx
@@ -21,7 +21,7 @@ export default function Layout() {
       <Tabs.Screen
         name="balances"
         options={{
-          title: "Balances",
+          headerShown: false,
           tabBarIcon: ({ focused, color, size }) => (
             <Ionicons
               name={focused ? "wallet" : "wallet-outline"}

diff --git a/packages/mobile-app/app/_layout.tsx b/packages/mobile-app/app/_layout.tsx
@@ -80,7 +80,6 @@ export default function Layout() {
                 name="(tabs)"
                 options={{
                   headerShown: false,
-                  headerTitle: "",
                 }}
               />
               <Stack.Screen

diff --git a/packages/mobile-app/app/onboarding/create.tsx b/packages/mobile-app/app/onboarding/create.tsx
@@ -5,16 +5,15 @@ import SecureOctopus from "@/assets/images/secure-octopus.svg";
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: "#fff",
     alignItems: "center",
+    backgroundColor: "#fff",
+    flex: 1,
     justifyContent: "center",
     paddingBottom: 48,
   },
   content: {
-    display: "flex",
-    flex: 1,
     alignItems: "center",
+    flex: 1,
     justifyContent: "space-around",
     paddingHorizontal: 16,
   },

diff --git a/packages/mobile-app/app/onboarding/index.tsx b/packages/mobile-app/app/onboarding/index.tsx
@@ -1,11 +1,11 @@
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, StatusBar } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 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";
-import { Stack } from "expo-router";
 
 const styles = StyleSheet.create({
   background: {
@@ -15,50 +15,59 @@ const styles = StyleSheet.create({
 
 export default function Onboarding() {
   return (
-    <View
-      style={{
-        paddingTop: 80,
-        paddingBottom: 24,
-        paddingHorizontal: 24,
-        flex: 1,
-      }}
-    >
-      <LinearGradient
-        colors={["#FFF4E0", "#DE83F0"]}
-        locations={[0, 1]}
-        style={[StyleSheet.absoluteFillObject, styles.background]}
-      />
-      <VStack alignItems="center" gap={8}>
-        <LogoWithText height={18} />
-        <Text textAlign="center" size="3xl">
-          Let's Make Web3 Private
-        </Text>
-      </VStack>
-      <View
-        style={{
-          flex: 1,
-          alignItems: "center",
-        }}
+    <>
+      <StatusBar barStyle="default" />
+      <SafeAreaView
+        edges={["top"]}
+        style={{ flex: 1, backgroundColor: "#FFF4E0" }}
       >
-        <KeyPlantOrchid style={{ aspectRatio: 0.5 }} />
-      </View>
-      <VStack gap={4}>
-        <LinkButton
-          variant="outline"
-          title="I have an account"
-          href="/onboarding/import-encoded/"
-        />
-        <LinkButton
-          variant="solid"
-          title="Create an account"
-          href="/onboarding/create/"
-        />
-        <LinkButton
-          variant="ghost"
-          title="Language preferences"
-          href="/onboarding/language/"
-        />
-      </VStack>
-    </View>
+        <View style={{ flex: 1, paddingHorizontal: 24, paddingVertical: 16 }}>
+          <LinearGradient
+            colors={["#FFF4E0", "#DE83F0"]}
+            locations={[0, 1]}
+            style={[StyleSheet.absoluteFillObject, styles.background]}
+          />
+          <VStack alignItems="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
+              variant="outline"
+              title="I have an account"
+              href="/onboarding/import-encoded/"
+            />
+            <LinkButton
+              variant="solid"
+              title="Create an account"
+              href="/onboarding/create/"
+            />
+            <LinkButton
+              variant="ghost"
+              title="Language preferences"
+              href="/onboarding/language/"
+            />
+          </VStack>
+        </View>
+      </SafeAreaView>
+      {/*
+       * For setting the bottom safe area color
+       * https://medium.com/@calebmackdaven/setting-background-color-with-safeareaview-in-react-native-1ca621ccd9a
+       */}
+      <SafeAreaView
+        edges={["bottom"]}
+        style={{ flex: 0, backgroundColor: "#DE83F0" }}
+      />
+    </>
   );
 }
diff --git a/packages/mobile-app/assets/icons/back.png b/packages/mobile-app/assets/icons/back.png
diff --git 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 (
-    <Link href={href ?? undefined} asChild>
+    <Link href={href} asChild>
       <Pressable onPress={onPress}>
-        <Button variant={variant} {...titleProp} borderRadius={borderRadius}>
-          {children}
-        </Button>
+        <Button {...buttonProps} />
       </Pressable>
     </Link>
   );

diff --git a/packages/tackle-box/lib/components/Button/Button.tsx b/packages/tackle-box/lib/components/Button/Button.tsx
@@ -3,20 +3,16 @@ import { HStack, Text } from "@/index";
 import { Icon, type IconName } from "@/components/Icon/Icon";
 import { type OnClick, styles } from "./shared";
 
-type BaseProps = {
+type ButtonProps = {
   disabled?: boolean;
   variant?: "solid" | "outline" | "ghost";
   onClick?: OnClick;
   rightIcon?: IconName;
   borderRadius?: number;
+  title?: string;
+  children?: React.ReactNode;
 };
 
-type Props = BaseProps &
-  (
-    | { title: string; children?: never }
-    | { title?: never; children: React.ReactNode }
-  );
-
 export function Button({
   title,
   disabled,
@@ -25,7 +21,7 @@ export function Button({
   variant = "solid",
   borderRadius,
   children,
-}: Props) {
+}: ButtonProps) {
   const borderRadiusStyle = borderRadius
     ? styles.borderRadius(borderRadius)
     : {};
@@ -38,6 +34,12 @@ export function Button({
     borderRadiusStyle,
   ];
 
+  const content = title ? (
+    <ButtonContent title={title} rightIcon={rightIcon} />
+  ) : (
+    children
+  );
+
   return onClick ? (
     <html.button
       style={computedStyles}
@@ -46,14 +48,13 @@ export function Button({
         onClick(e);
       }}
     >
-      {title ? <ButtonContent title={title} rightIcon={rightIcon} /> : children}
+      {content}
     </html.button>
   ) : (
-    <html.div style={computedStyles}>
-      {title ? <ButtonContent title={title} rightIcon={rightIcon} /> : children}
-    </html.div>
+    <html.div style={computedStyles}>{content}</html.div>
   );
 }
+
 function ButtonContent({
   title,
   rightIcon,