improve UI on start and camera screen

app/src/components/CustomButton.tsx

@@ -15,7 +15,7 @@ interface CustomButtonProps {
 
 const CustomButton: React.FC<CustomButtonProps> = ({ text, onPress, Icon, bgColor, h, isDisabled, disabledOnPress, blueVariant }) => {
     return (
-        <Button bg={bgColor ? bgColor : blueVariant ? bgBlue : bgGreen} h={blueVariant ? "$8" : "$4.5"} borderRadius="$10" mx="$3" onPress={isDisabled ? disabledOnPress : onPress}>
+        <Button bg={bgColor ? bgColor : blueVariant ? bgBlue : bgGreen} h={blueVariant ? "$8" : "$5"} borderRadius="$10" onPress={isDisabled ? disabledOnPress : onPress}>
             {Icon && <Button.Icon>{Icon}</Button.Icon>}
             <Text textAlign='center' fontSize={blueVariant ? "$6" : "$5"} fontWeight="bold" color={textBlack}>
                 {text}

app/src/components/StepOneStepTwo.tsx

@@ -10,7 +10,7 @@ const StepOneStepTwo = ({ variable, step1, step2 }: StepOneStepTwoProps) => {
     const isVisible = variable === step1 || variable === step2;
 
     return (
-        <XStack px="$4" mt="$4" gap="$3" style={{ opacity: isVisible ? 1 : 0 }}>
+        <XStack px="$6" gap="$3" style={{ opacity: isVisible ? 1 : 0 }}>
             <XStack h="$0.25" f={1} bg={textBlack} borderRadius={100} style={{ opacity: variable === step1 ? 1 : 0.2 }} />
             <XStack h="$0.25" f={1} bg={textBlack} borderRadius={100} style={{ opacity: variable === step2 ? 1 : 0.2 }} />
         </XStack>

app/src/screens/CameraScreen.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { YStack, Text, XStack } from 'tamagui';
-import { Camera, SquarePen } from '@tamagui/lucide-icons';
+import { YStack, Text, XStack, Image } from 'tamagui';
+import { Camera, ShieldCheck, SquarePen } from '@tamagui/lucide-icons';
 import { bgGreen, blueColor, textBlack } from '../utils/colors';
 import { startCameraScan } from '../utils/cameraScanner';
 import CustomButton from '../components/CustomButton';
 import useNavigationStore from '../stores/navigationStore';
+import PASSPORT_DRAWING from '../images/passport_drawing.png'
 interface CameraScreenProps {
   setSheetIsOpen: (value: boolean) => void
 }
@@ -15,25 +16,24 @@ const CameraScreen: React.FC<CameraScreenProps> = ({ setSheetIsOpen }) => {
   } = useNavigationStore();
 
   return (
-    <YStack f={1} p="$3">
-      <YStack f={1} mt="$10">
-        <Text ml="$1" fontSize={34} color={textBlack}><Text style={{ textDecorationLine: 'underline', textDecorationColor: bgGreen }}>Scan</Text> or type your passport ID</Text>
-        <Text ml="$2" mt="$8" fontSize="$8" color={textBlack}>Open your passport on the <Text style={{ textDecorationLine: 'underline', textDecorationColor: bgGreen }}>main page</Text> to scan it.</Text>
-        <Text ml="$2" mt="$3" fontSize="$8" color={textBlack} style={{ opacity: 0.7 }}>Your data never leaves your device.</Text>
-        <XStack f={1} />
+    <YStack f={1}>
+      <YStack f={1} my="$6" jc="space-evenly" ai="center">
+        <Text textAlign='center' fontSize="$9" color={textBlack}><Text style={{ textDecorationLine: 'underline', textDecorationColor: bgGreen }}>Scan</Text> or type your passport ID</Text>
+        <Text textAlign='center' mt="$4" fontSize="$6" color={textBlack}>Open your passport on the <Text style={{ textDecorationLine: 'underline', textDecorationColor: bgGreen }}>main page</Text> to scan it.</Text>
+        <Image src={PASSPORT_DRAWING} style={{ width: 200, height: 250 }} />
       </YStack>
-      <XStack p="$3" onPress={() => setSelectedTab("mock")} ai="center" jc="center">
-        <Text mt="$5" fontSize="$3" alignSelf='center' w="80%" ai="center" textAlign="center" color={textBlack}>
-          You can also <Text color={blueColor} style={{ textDecorationLine: 'underline', textDecorationColor: blueColor }}>use mock passport data</Text> and skip this step.
-        </Text>
-      </XStack>
-
+      <Text textAlign='center' mb="$2" fontSize="$4" color={textBlack}>The application is not taking a picture, only reading some fields.</Text>
       <YStack gap="$2.5"  >
         <CustomButton text="Open Camera" onPress={startCameraScan} Icon={<Camera color={textBlack} size={24} />} />
         <CustomButton bgColor='#ffff' text="Manual Input" onPress={() => setSheetIsOpen(true)} Icon={<SquarePen color={textBlack} size={24} />} />
       </YStack>
 
-    </YStack>
+      <XStack mt="$3.5" justifyContent='center' alignItems='center' gap="$1.5">
+        <ShieldCheck color={textBlack} size={12} />
+        <Text color={textBlack} fontSize="$3">private and secured</Text>
+      </XStack>
+
+    </YStack >
   );
 };
 

app/src/screens/MainScreen.tsx

@@ -37,6 +37,7 @@ import SplashScreen from './SplashScreen';
 import ValidProofScreen from './ValidProofScreen';
 import WrongProofScreen from './WrongProofScreen';
 import MockDataScreen from './MockDataScreen';
+import OPENPASSPORT_LOGO from '../images/openpassport.png'
 
 const emitter = (Platform.OS === 'android')
   ? new NativeEventEmitter(NativeModules.nativeModule)
@@ -169,6 +170,23 @@ const MainScreen: React.FC = () => {
   //   }
   // }, [modalProofStep]);
 
+  const decrementStep = () => {
+    if (selectedTab === "scan") {
+      setSelectedTab("start");
+    }
+    else if (selectedTab === "nfc") {
+      setSelectedTab("scan");
+    }
+    else if (selectedTab === "mock") {
+      setSelectedTab("start");
+    }
+    else if (selectedTab === "next") {
+      setSelectedTab("nfc");
+    }
+    else if (selectedTab === "app") {
+      setSelectedTab("next");
+    }
+  }
 
   useEffect(() => {
     setIsFormComplete(passportNumber?.length >= 3 && dateOfBirth?.length >= 6 && dateOfExpiry?.length >= 6);
@@ -181,36 +199,36 @@ const MainScreen: React.FC = () => {
     <YStack f={1}>
       <ToastViewport portalToRoot flexDirection="column-reverse" top={85} right={0} left={0} />
       <ToastMessage />
-      <YStack f={1} mt={Platform.OS === 'ios' ? "$8" : "$0"} mb={Platform.OS === 'ios' ? "$4" : "$2"}>
+      <YStack f={1} mt={Platform.OS === 'ios' ? "$8" : "$2"} mb={Platform.OS === 'ios' ? "$6" : "$3"}>
         <YStack >
-          <StepOneStepTwo variable={selectedTab} step1="scan" step2="nfc" />
-          {selectedTab !== ("app") && selectedTab !== ("splash") && <XStack onPress={() => setSelectedTab("app")} px="$4" py="$2" mt="$3" alignSelf='flex-end'><X size={28} color={textBlack} /></XStack>}
-          {selectedTab === "app" &&
-            <XStack px="$4" py="$2" mt="$0" ai="center">
-              <Text fontSize="$9"  >OpenPassport</Text>
-              <XStack f={1} />
-
-              <XStack onPress={() => setHelpIsOpen(true)}><HelpCircle size={28} color={textBlack} /></XStack>
-              <XStack p="$2" onPress={() => setSettingsIsOpen(true)}><Cog size={24} color={textBlack} /></XStack>
+          <XStack mt="$2" h="$5" jc="space-between" ai="center" mb="$2">
+            <Button
+              p="$4"
+              unstyled
+              onPress={decrementStep}
+              opacity={selectedTab !== "start" && selectedTab !== "app" ? 1 : 0}
+              pointerEvents={selectedTab !== "start" && selectedTab !== "app" ? "auto" : "none"}
+            >
+              <ChevronLeft color={textBlack} size={24} />
+            </Button>
+            <XStack jc="center" ai="center">
+              <Image src={OPENPASSPORT_LOGO} style={{ width: 50, height: 50 }} />
+              <Text fontWeight="bold" fontSize="$5">OpenPassport</Text>
             </XStack>
-          }
+            <Button
+              p="$4"
+              unstyled
+              onPress={() => setHelpIsOpen(true)}
+              opacity={selectedTab === "app" ? 1 : 0}
+              pointerEvents={selectedTab === "app" ? "auto" : "none"}
+            >
+              <HelpCircle size={28} color={textBlack} />
+            </Button>
+          </XStack>
 
-          {/* {selectedTab !== "start" && selectedTab !== "scan" && selectedTab !== "nfc" && selectedTab !== "next" && selectedTab !== "register" && (
-            <YStack>
-              <XStack jc="space-between" ai="center" px="$3">
-                <Button p="$2" py="$3" unstyled onPress={decrementStep}><ChevronLeft color={(selectedTab === "start") ? "transparent" : "#a0a0a0"} /></Button>
 
-                <Text fontSize="$6" color="#a0a0a0">
-                  {selectedTab === "scan" ? "Scan" : (selectedTab === "app" ? "Apps" : "Prove")}
-                </Text>
-                <XStack>
-                  <Button p="$2" py="$3" unstyled onPress={() => setSettingsIsOpen(true)}><Cog color="#a0a0a0" /></Button>
-                  <Button p="$2" py="$3" unstyled onPress={() => setHelpIsOpen(true)}><HelpCircle color="#a0a0a0" /></Button>
-                </XStack>
-              </XStack>
-              <Separator borderColor={separatorColor} />
-            </YStack>
-          )} */}
+          <StepOneStepTwo variable={selectedTab} step1="scan" step2="nfc" />
+
           <Sheet open={nfcSheetIsOpen} onOpenChange={setNfcSheetIsOpen} dismissOnSnapToBottom modal dismissOnOverlayPress={false} disableDrag animation="medium" snapPoints={[35]}>
             <Sheet.Overlay />
             <Sheet.Frame>
@@ -653,6 +671,7 @@ const MainScreen: React.FC = () => {
         </YStack>
 
         <Tabs f={1} orientation="horizontal" flexDirection="column" defaultValue={"splash"}
+          px="$5"
           value={selectedTab}
           onValueChange={(value) => updateNavigationStore({ selectedTab: value })}
         >

app/src/screens/StartScreen.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import { YStack, Text } from 'tamagui';
-import { ArrowRight } from '@tamagui/lucide-icons';
-import { bgGreen, textBlack } from '../utils/colors';
+import { View } from 'react-native';
+import { YStack, Text, XStack, Image } from 'tamagui';
+import { ArrowRight, ShieldCheck } from '@tamagui/lucide-icons';
+import { bgGreen, bgWhite, textBlack } from '../utils/colors';
+import OPENPASSPORT_LOGO from '../images/openpassport.png';
 import CustomButton from '../components/CustomButton';
 import useNavigationStore from '../stores/navigationStore';
 
+
+
 const StartScreen: React.FC = () => {
 
     const {
@@ -12,19 +16,29 @@ const StartScreen: React.FC = () => {
     } = useNavigationStore();
 
     return (
-        <YStack f={1} p="$3">
-            <YStack f={1} mt="$12">
-                <YStack gap="$0.5" mb="$14">
-                    <Text fontSize="$9" >Welcome to OpenPassport 👋</Text>
-                    <Text fontSize="$8" mt="$6" color={textBlack}>OpenPassport allows you to scan your passport, and to prove your identity in a
-                        <Text fontSize="$8" color={textBlack} style={{ textDecorationLine: 'underline', textDecorationColor: bgGreen }}> secure </Text>way.
-                    </Text>
-                </YStack>
+        <YStack f={1} >
+
+            <YStack f={1} mt="$6" mb="$2.5" gap="$0" ai="center" jc="space-between" >
+
+                <Text fontSize={38} color={textBlack} textAlign='center'>Welcome to OpenPassport.</Text>
+                <Image src={OPENPASSPORT_LOGO} width={400} height={300} />
+                <Text textAlign='center' fontSize="$4" color={textBlack}>No information will be shared without your explicit consent.</Text>
 
             </YStack>
-            <CustomButton Icon={<ArrowRight />} text="Let's start" onPress={() => {
-                setSelectedTab("scan");
-            }} />
+
+            <YStack gap="$2.5" mb="$3.5">
+                <CustomButton Icon={<ArrowRight />} text="Use my passport" onPress={() => {
+                    setSelectedTab("scan");
+                }} />
+                <CustomButton bgColor="white" Icon={<ArrowRight />} text="Use a fake passport" onPress={() => {
+                    setSelectedTab("mock");
+                }} />
+
+            </YStack>
+            <XStack justifyContent='center' alignItems='center' gap="$1.5">
+                <ShieldCheck color={textBlack} size={12} />
+                <Text color={textBlack} fontSize="$3">private and secured</Text>
+            </XStack>
         </YStack >
     );
 };

app/src/utils/cameraScanner.ts

@@ -20,7 +20,7 @@ export const startCameraScan = async () => {
       })
 
       setSelectedTab("nfc");
-      toast.show("✅", {
+      toast.show("✔︎", {
         message: 'Scan successful',
         customData: {
           type: "success",
@@ -43,7 +43,7 @@ export const startCameraScan = async () => {
           })
 
           setSelectedTab("nfc");
-          toast.show("✅", {
+          toast.show("✔︎", {
             message: 'Scan successful',
             customData: {
               type: "success",