Improve onboarding design

app/components/CityBackground.tsx

@@ -0,0 +1,28 @@
+import { Image, StyleSheet, View } from "react-native"
+
+export const CityBackground = () => {
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      <View
+        style={{
+          backgroundColor: "rgba(0,0,0,0.75)",
+          flex: 1,
+          zIndex: 1000,
+        }}
+      />
+      <Image
+        source={require("../../assets/images/city-cyan.png")}
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0,
+          width: undefined,
+          height: undefined,
+          resizeMode: "cover",
+        }}
+      />
+    </View>
+  )
+}

app/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./AutoImage"
 export * from "./Button"
 export * from "./Card"
+export * from "./CityBackground"
 export * from "./Header"
 export * from "./Icon"
 export * from "./ListItem"

app/screens/CreateAccountScreen.tsx

@@ -42,7 +42,12 @@ export const CreateAccountScreen: FC<CreateAccountScreenProps> = observer(
     }, [])
 
     return (
-      <Screen style={$root} preset="scroll" contentContainerStyle={$container}>
+      <Screen
+        style={$root}
+        safeAreaEdges={["bottom"]}
+        preset="scroll"
+        contentContainerStyle={$container}
+      >
         <Formik
           innerRef={formikRef}
           initialValues={{
@@ -54,7 +59,7 @@ export const CreateAccountScreen: FC<CreateAccountScreenProps> = observer(
         >
           {({ handleChange, handleBlur, submitForm, values }) => (
             <>
-              <Text text="Create Profile" preset="heading" size="xl" style={$title} />
+              <Text text="Create Account" preset="subheading" size="xl" style={$title} />
               <TextField
                 label="Display Name"
                 style={$input}
@@ -85,7 +90,12 @@ export const CreateAccountScreen: FC<CreateAccountScreenProps> = observer(
                 autoCapitalize="none"
                 autoFocus={false}
               />
-              <Button text="Continue" onPress={() => submitForm()} style={$button} />
+              <Button
+                text="Continue"
+                onPress={() => submitForm()}
+                style={$button}
+                pressedStyle={$button}
+              />
             </>
           )}
         </Formik>
@@ -101,13 +111,13 @@ const $root: ViewStyle = {
 const $container: ViewStyle = {
   flex: 1,
   flexDirection: "column",
-  justifyContent: "center",
   paddingHorizontal: spacing.medium,
 }
 
 const $title: TextStyle = {
   textAlign: "center",
-  marginBottom: spacing.massive,
+  marginTop: spacing.medium,
+  marginBottom: spacing.huge,
 }
 
 const $inputWrapper: ViewStyle = {
@@ -134,11 +144,10 @@ const $input: ViewStyle = {
 }
 
 const $button: ViewStyle = {
-  backgroundColor: colors.palette.cyan500,
-  borderWidth: 0,
+  backgroundColor: "transparent",
+  borderColor: colors.palette.cyan900,
   width: "100%",
-  marginTop: spacing.small,
-  marginBottom: spacing.small,
+  marginVertical: spacing.medium,
   height: 50,
   minHeight: 50,
 }

app/screens/HomeScreen.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite"
 import { TextStyle, View, ViewStyle } from "react-native"
 import { NativeStackScreenProps } from "@react-navigation/native-stack"
 import { AppStackScreenProps } from "app/navigators"
-import { Button, Screen, Spotlight, Text } from "app/components"
+import { Button, CityBackground, Screen, Spotlight, Text } from "app/components"
 import { useNavigation } from "@react-navigation/native"
 import { colors, spacing } from "app/theme"
 
@@ -19,20 +19,21 @@ export const HomeScreen: FC<HomeScreenProps> = observer(function HomeScreen() {
       safeAreaEdges={["top", "bottom"]}
       contentContainerStyle={$container}
     >
-      <Spotlight />
+      <CityBackground />
+      {/* <Spotlight /> */}
       <View>
         <Text text="arcaDE" preset="heading" style={$arcade} />
       </View>
       <View>
         <Button
-          text="Enter"
-          onPress={() => navigate("Login")}
+          text="Create Account"
+          onPress={() => navigate("CreateAccount")}
           style={$mainButton}
           pressedStyle={$mainButton}
         />
         <Button
-          text="Create Account"
-          onPress={() => navigate("CreateAccount")}
+          text="Login"
+          onPress={() => navigate("Login")}
           style={$button}
           pressedStyle={$button}
         />
@@ -66,14 +67,14 @@ const $arcade: TextStyle = {
 }
 
 const $mainButton: ViewStyle = {
-  backgroundColor: "black", // colors.palette.cyan500,
+  backgroundColor: "rgba(0,0,0,0.5)", // "black", // colors.palette.cyan500,
   borderWidth: 1,
   width: "100%",
-  marginBottom: spacing.small,
+  marginBottom: spacing.medium,
   borderColor: colors.palette.cyan500,
 }
 
 const $button: ViewStyle = {
-  backgroundColor: "black", // colors.palette.cyan900,
+  backgroundColor: "rgba(0,0,0,0.5)", // colors.palette.cyan900,
   borderColor: colors.palette.cyan900,
 }

app/screens/LoginScreen.tsx

@@ -44,9 +44,14 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen()
   }, [])
 
   return (
-    <Screen style={$root} preset="scroll" contentContainerStyle={$container}>
+    <Screen
+      style={$root}
+      safeAreaEdges={["bottom"]}
+      preset="scroll"
+      contentContainerStyle={$container}
+    >
       <View>
-        <Text text="Enter access key" preset="heading" size="xl" style={$title} />
+        <Text text="Enter access key" preset="subheading" size="xl" style={$title} />
         <TextField
           secureTextEntry={true}
           placeholder="nsec..."
@@ -58,7 +63,7 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen()
           autoCapitalize="none"
           autoFocus={true}
         />
-        <Button text="Enter" onPress={login} style={$button} />
+        <Button text="Enter" onPress={login} style={$button} pressedStyle={$button} />
       </View>
     </Screen>
   )
@@ -71,13 +76,13 @@ const $root: ViewStyle = {
 const $container: ViewStyle = {
   flex: 1,
   flexDirection: "column",
-  justifyContent: "center",
   paddingHorizontal: spacing.medium,
 }
 
 const $title: TextStyle = {
   textAlign: "center",
-  marginBottom: spacing.massive,
+  marginTop: spacing.medium,
+  marginBottom: spacing.huge,
 }
 
 const $inputWrapper: ViewStyle = {
@@ -104,11 +109,10 @@ const $input: ViewStyle = {
 }
 
 const $button: ViewStyle = {
-  backgroundColor: colors.palette.cyan500,
-  borderWidth: 0,
+  backgroundColor: "transparent",
+  borderColor: colors.palette.cyan900,
   width: "100%",
-  marginTop: spacing.small,
-  marginBottom: spacing.small,
+  marginVertical: spacing.medium,
   height: 50,
   minHeight: 50,
 }

ios/Podfile

@@ -84,6 +84,13 @@ target 'arcade' do
     __apply_Xcode_12_5_M1_post_install_workaround(installer)
     File.delete("./.xcode.env.local") if File.exist?("./.xcode.env.local")
 
+    # Fix dupe accessibilityresources error - https://stackoverflow.com/a/63503302
+    installer.pods_project.targets.each do |target|
+      if target.name == "React-Core.common-AccessibilityResources"
+        target.remove_from_project
+      end
+    end
+
     # This is necessary for Xcode 14, because it signs resource bundles by default
     # when building for devices.
     installer.target_installation_results.pod_target_installation_results

ios/Podfile.lock

@@ -791,6 +791,6 @@ SPEC CHECKSUMS:
   Yoga: d56980c8914db0b51692f55533409e844b66133c
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 6bea9a0b051b5e15bd2f5c43c9fcb4dcf4f7a8c5
+PODFILE CHECKSUM: dd7224095aa55df328773a2005164244afd423b1
 
 COCOAPODS: 1.12.1

ios/arcade/Info.plist

@@ -21,7 +21,7 @@
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleVersion</key>
-    <string>43</string>
+    <string>45</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false />
     <key>LSRequiresIPhoneOS</key>