From 7f7aa2ebe798ad8531ef01802e0d527e79f55a60 Mon Sep 17 00:00:00 2001
From: turnoffthiscomputer <colin.remi07@gmail.com>
Date: Fri, 23 Aug 2024 10:26:47 +0100
Subject: [PATCH] update UI

---
 app/src/components/Carousel.tsx  |  4 +--
 app/src/screens/CameraScreen.tsx | 52 +++++++++++++++++++++++++++++---
 app/src/screens/MainScreen.tsx   |  2 +-
 app/src/utils/colors.ts          |  3 +-
 4 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/app/src/components/Carousel.tsx b/app/src/components/Carousel.tsx
index faa48a4f8..dd95caeb0 100644
--- a/app/src/components/Carousel.tsx
+++ b/app/src/components/Carousel.tsx
@@ -99,10 +99,10 @@ export function Carousel({ images, height = 300, onSlideChange, handleNfcScan }:
                 <Text color={textBlack} fontSize="$5" mt="$2" textAlign='center' style={{ opacity: 0.7 }} fontStyle='italic'>{currentSlide.subtitle}</Text>
             </YStack>
 
-            <XStack justifyContent='center' alignItems='center' gap="$1.5" position="absolute" style={{ bottom: 120, left: 0, right: 0 }}>
+            {/* <XStack justifyContent='center' alignItems='center' gap="$1.5" position="absolute" style={{ bottom: 120, left: 0, right: 0 }}>
                 <ShieldCheck color={textBlack} size={14} />
                 <Text color={textBlack} fontSize="$4" >private and secured</Text>
-            </XStack>
+            </XStack> */}
             <XStack f={1} />
 
             <CustomButton
diff --git a/app/src/screens/CameraScreen.tsx b/app/src/screens/CameraScreen.tsx
index 4f6bd8c96..d65be1287 100644
--- a/app/src/screens/CameraScreen.tsx
+++ b/app/src/screens/CameraScreen.tsx
@@ -1,17 +1,60 @@
 import React from 'react';
 import { YStack, Button, Image, Text, ScrollView, XStack, Separator } from 'tamagui';
-import { Camera, ShieldCheck, SquarePen, X } from '@tamagui/lucide-icons';
+import { Camera, ShieldCheck, SquarePen, VenetianMask, X } from '@tamagui/lucide-icons';
 import { bgColor, bgGreen, borderColor, componentBgColor, componentBgColor2, separatorColor, textBlack, textColor1, textColor2 } from '../utils/colors';
 import SCANHelp from '../images/scan_help.png'
 import { startCameraScan } from '../utils/cameraScanner';
 import CustomButton from '../components/CustomButton';
-
+import useUserStore from '../stores/userStore';
+import useNavigationStore from '../stores/navigationStore';
+import { mockPassportData_sha256_rsa_65537 } from '../../../common/src/constants/mockPassportData';
+import { Steps } from '../utils/utils';
 interface CameraScreenProps {
   sheetIsOpen: boolean
   setSheetIsOpen: (value: boolean) => void
 }
 
 const CameraScreen: React.FC<CameraScreenProps> = ({ sheetIsOpen, setSheetIsOpen }) => {
+  const {
+    showWarningModal,
+    update: updateNavigationStore,
+    step,
+    setStep,
+    selectedTab,
+    setSelectedTab,
+    hideData,
+    toast,
+    showRegistrationErrorSheet,
+    registrationErrorMessage,
+    nfcSheetIsOpen,
+    setNfcSheetIsOpen,
+  } = useNavigationStore();
+
+  const {
+    passportNumber,
+    dateOfBirth,
+    dateOfExpiry,
+    deleteMrzFields,
+    update,
+    clearPassportDataFromStorage,
+    clearSecretFromStorage,
+    clearProofsFromStorage,
+    passportData,
+    registered,
+    setRegistered,
+    cscaProof,
+    localProof,
+  } = useUserStore()
+  const handleSkip = () => {
+    update({
+      passportData: mockPassportData_sha256_rsa_65537
+    })
+    setStep(Steps.REGISTERED);
+    setRegistered(true);
+    setSelectedTab("app");
+    deleteMrzFields();
+    toast.show("Using mock passport data!", { type: "info" })
+  }
   return (
     <YStack f={1} p="$3">
       <YStack f={1} mt="$16">
@@ -20,10 +63,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({ sheetIsOpen, setSheetIsOpen
         <Text ml="$2" mt="$2" fontSize="$8" color={textBlack} style={{ opacity: 0.7 }}>Your data never leaves your device.</Text>
         <XStack f={1} />
 
-        <XStack justifyContent='center' alignItems='center' gap="$1.5">
+        {/* <XStack justifyContent='center' alignItems='center' gap="$1.5">
           <ShieldCheck color={textBlack} size={14} />
           <Text color={textBlack} fontSize="$4">private and secured</Text>
-        </XStack>
+        </XStack> */}
       </YStack>
       {/* <Image borderRadius="$5"
           w="full"
@@ -32,6 +75,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({ sheetIsOpen, setSheetIsOpen
         /> */}
 
       <YStack gap="$2.5" mt="$5" >
+        <CustomButton text="Use mocke Passport Data" onPress={handleSkip} Icon={<VenetianMask color={textBlack} size={24} />} />
         <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>
diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx
index 6a860e232..5dd4cee75 100644
--- a/app/src/screens/MainScreen.tsx
+++ b/app/src/screens/MainScreen.tsx
@@ -120,7 +120,7 @@ const MainScreen: React.FC = () => {
     update({
       passportData: mockPassportData_sha256_rsa_65537
     })
-    setStep(Steps.NEXT_SCREEN);
+    setStep(Steps.REGISTERED);
     deleteMrzFields();
 
     // const n_dsc = 121;
diff --git a/app/src/utils/colors.ts b/app/src/utils/colors.ts
index 9ebbdd674..715e6427e 100644
--- a/app/src/utils/colors.ts
+++ b/app/src/utils/colors.ts
@@ -15,6 +15,7 @@ export const yellowColorDark = "#2d2200"
 export const yellowColorLight = "#f5d90a"
 export const bgWhite = "#F5F5F5"
 export const textBlack = "#333333"
-export const bgGreen = "#94FBAB"
+// export const bgGreen = "#94FBAB"
+export const bgGreen = "#AEECEF"
 export const bgBlue = "#69DFFF"
 export const separatorColor = "#E0E0E0"
\ No newline at end of file