make the scan-qr-button snug to bottom (#88)

app/src/Navigation.tsx

@@ -120,6 +120,7 @@ const AppNavigation = createNativeStackNavigator({
   initialRouteName: 'Splash',
   screenOptions: {
     header: DefaultNavBar,
+    navigationBarColor: white,
   },
   layout: ({ children }) => <SafeAreaProvider>{children}</SafeAreaProvider>,
   screens: {
@@ -189,6 +190,7 @@ const AppNavigation = createNativeStackNavigator({
       options: {
         title: 'Self',
         header: HomeNavBar,
+        navigationBarColor: black,
       },
     },
     Disclaimer: {
@@ -232,6 +234,7 @@ const AppNavigation = createNativeStackNavigator({
         headerTitleStyle: {
           color: black,
         },
+        navigationBarColor: black,
       },
       config: {
         screens: {},

app/src/layouts/ExpandableBottomLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StatusBar, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import { View, ViewProps } from 'tamagui';
 
 import { black, white } from '../utils/colors';
@@ -65,9 +66,8 @@ const BottomSection: React.FC<BottomSectionProps> = ({
   const { bottom } = useSafeAreaInsets();
   const incomingBottom = props.paddingBottom ?? props.pb ?? 0;
 
-  const totalBottom = typeof incomingBottom === 'number'
-    ? bottom + incomingBottom
-    : bottom;
+  const totalBottom =
+    typeof incomingBottom === 'number' ? bottom + incomingBottom : bottom;
   return (
     <View {...props} style={styles.bottomSection} paddingBottom={totalBottom}>
       {children}

app/src/screens/HomeScreen.tsx

@@ -34,10 +34,10 @@ const HomeScreen: React.FC = () => {
     <YStack
       bg={black}
       gap={20}
-      jc="space-around"
+      jc="space-between"
       flex={1}
       paddingHorizontal={20}
-      paddingBottom={bottom + 20}
+      paddingBottom={bottom}
     >
       <YStack ai="center" gap={20} justifyContent="flex-start">
         <SelfCard width="100%" />
@@ -51,19 +51,14 @@ const HomeScreen: React.FC = () => {
         </Caption>
         <PrivacyNote />
       </YStack>
-      <YStack
-        ai="center"
-        gap={20}
-        justifyContent="center"
-        paddingBottom={20}
-        hitSlop={50}
-      >
-        <ScanButton onPress={onScanButtonPress}>
+      <YStack ai="center" gap={20} justifyContent="flex-end">
+        <ScanButton onPress={onScanButtonPress} hitSlop={50}>
           <ScanIcon color={amber500} />
         </ScanButton>
         <Caption
           color={amber500}
           textTransform="uppercase"
+          hitSlop={50}
           onPress={onScanButtonPress}
         >
           Prove your SELF

app/src/screens/LaunchScreen.tsx

@@ -4,9 +4,9 @@ import { StyleSheet, View } from 'react-native';
 import { Anchor, Text, XStack, YStack } from 'tamagui';
 
 import { PrimaryButton } from '../components/buttons/PrimaryButton';
-import { privacyUrl, termsUrl } from '../consts/links';
 import { BodyText } from '../components/typography/BodyText';
 import { Caption } from '../components/typography/Caption';
+import { privacyUrl, termsUrl } from '../consts/links';
 import useHapticNavigation from '../hooks/useHapticNavigation';
 import GetStartedCard from '../images/card-style-2.svg';
 import Logo from '../images/logo.svg';
@@ -44,28 +44,26 @@ const LaunchScreen: React.FC<LaunchScreenProps> = ({}) => {
           </YStack>
         </YStack>
       </ExpandableBottomLayout.TopSection>
-      <ExpandableBottomLayout.BottomSection backgroundColor={white} justifyContent="flex-end">
-          <BodyText style={styles.subheader}>
-            The simplest way to verify identity for safety and trust wherever
-            you are.
-          </BodyText>
-          <Caption style={styles.notice} size={'small'}>
-            By continuing, you agree to the&nbsp;
-            <Anchor
-              style={styles.link}
-              href={termsUrl}
-            >
-              User Terms and Conditions
-            </Anchor>
-            &nbsp;and acknowledge the&nbsp;
-            <Anchor style={styles.link} href={privacyUrl}>
-              Privacy notice
-            </Anchor>
-            &nbsp;of Self provided by Self Inc.
-          </Caption>
-          <PrimaryButton onPress={onStartPress}>
-            Get Started
-          </PrimaryButton>
+      <ExpandableBottomLayout.BottomSection
+        backgroundColor={white}
+        justifyContent="flex-end"
+      >
+        <BodyText style={styles.subheader}>
+          The simplest way to verify identity for safety and trust wherever you
+          are.
+        </BodyText>
+        <Caption style={styles.notice} size={'small'}>
+          By continuing, you agree to the&nbsp;
+          <Anchor style={styles.link} href={termsUrl}>
+            User Terms and Conditions
+          </Anchor>
+          &nbsp;and acknowledge the&nbsp;
+          <Anchor style={styles.link} href={privacyUrl}>
+            Privacy notice
+          </Anchor>
+          &nbsp;of Self provided by Self Inc.
+        </Caption>
+        <PrimaryButton onPress={onStartPress}>Get Started</PrimaryButton>
       </ExpandableBottomLayout.BottomSection>
     </ExpandableBottomLayout.Layout>
   );

app/src/screens/SettingsScreen.tsx

@@ -6,7 +6,7 @@ import { SvgProps } from 'react-native-svg';
 
 import { useNavigation } from '@react-navigation/native';
 import { Bug } from '@tamagui/lucide-icons';
-import { Button, View, ScrollView, XStack, YStack } from 'tamagui';
+import { Button, ScrollView, View, XStack, YStack } from 'tamagui';
 
 import { version } from '../../package.json';
 import { BodyText } from '../components/typography/BodyText';
@@ -154,28 +154,28 @@ ${deviceInfo.map(([k, v]) => `${k}=${v}`).join('; ')}
   const { bottom } = useSafeAreaInsets();
   return (
     <View backgroundColor={white}>
-    <YStack
-      bg={black}
-      gap={20}
-      jc="space-between"
-      height={'100%'}
-      padding={20}
-      borderTopLeftRadius={30}
-      borderTopRightRadius={30}
-    >
-      <ScrollView>
-        <YStack ai="flex-start" justifyContent="flex-start" width="100%">
-          {routes.map(([Icon, menuText, menuRoute]) => (
-            <MenuButton
-              key={menuRoute}
-              Icon={Icon}
-              onPress={onMenuPress(menuRoute)}
-            >
-              {menuText}
-            </MenuButton>
-          ))}
-        </YStack>
-      </ScrollView>
+      <YStack
+        bg={black}
+        gap={20}
+        jc="space-between"
+        height={'100%'}
+        padding={20}
+        borderTopLeftRadius={30}
+        borderTopRightRadius={30}
+      >
+        <ScrollView>
+          <YStack ai="flex-start" justifyContent="flex-start" width="100%">
+            {routes.map(([Icon, menuText, menuRoute]) => (
+              <MenuButton
+                key={menuRoute}
+                Icon={Icon}
+                onPress={onMenuPress(menuRoute)}
+              >
+                {menuText}
+              </MenuButton>
+            ))}
+          </YStack>
+        </ScrollView>
         <YStack ai="center" gap={20} justifyContent="center" paddingBottom={50}>
           <Button
             unstyled