Mobile home screen (#70)

iron-fish · Nov 27, 2024 · e262516 · e262516
1 parent d479b66
commit e262516
Show file tree

Hide file tree

Showing 12 changed files with 400 additions and 128 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mobile-app/app/(tabs)/ui.tsx b/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
+          variant="outline"
+          title="Press me - outlined"
+          onClick={() => setCount(count + 1)}
+        />
+        <Button
+          variant="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)} />

diff --git a/packages/mobile-app/app/onboarding/index.tsx b/packages/mobile-app/app/onboarding/index.tsx
@@ -1,27 +1,56 @@
-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: {
+    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={[StyleSheet.absoluteFillObject, styles.background]}
       />
-      <StatusBar style="auto" />
+      <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>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});