From 348485047e39ac0946af302e6c227bbafffbc733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Colin?= <colin.remi07@gmail.com>
Date: Thu, 8 Feb 2024 10:33:35 +0100
Subject: [PATCH] adapt UI to IOS

---
 app/App.tsx                     |  9 +++-
 app/src/components/AppCard.tsx  |  2 +-
 app/src/screens/AppScreen.tsx   |  2 +-
 app/src/screens/MainScreen.tsx  |  5 +-
 app/src/screens/ProveScreen.tsx |  3 +-
 app/src/screens/ScanScreen.tsx  | 96 +++++++++++++--------------------
 app/src/utils/AppClass.ts       |  2 +-
 7 files changed, 54 insertions(+), 65 deletions(-)

diff --git a/app/App.tsx b/app/App.tsx
index b9a26cc56..f61767958 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -1,13 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import {
+  StatusBar,
+  StyleSheet,
   useColorScheme,
   NativeModules,
   DeviceEventEmitter,
+  TextInput,
   Platform,
 } from 'react-native';
 
 import {
   Colors,
+  DebugInstructions,
+  Header,
+  LearnMoreLinks,
+  ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 import Toast, { BaseToast, ErrorToast, SuccessToast, ToastProps } from 'react-native-toast-message';
 // @ts-ignore
@@ -531,7 +538,7 @@ function App(): JSX.Element {
   };
 
   return (
-    <YStack h="100%" w="100%">
+    <YStack f={1} bg="white" h="100%" w="100%">
       <YStack h="100%" w="100%">
         <MainScreen
           onStartCameraScan={startCameraScan}
diff --git a/app/src/components/AppCard.tsx b/app/src/components/AppCard.tsx
index 4452f40e3..e22c52566 100644
--- a/app/src/components/AppCard.tsx
+++ b/app/src/components/AppCard.tsx
@@ -45,7 +45,7 @@ const AppCard: React.FC<AppCardProps> = ({
                     <Card.Background
                         animation="quick"
                         borderColor={(selected) ? "#E0E0E0" : "transparent"}
-                        borderWidth={(selected) ? 4 : 0}
+                        borderWidth={(selected) ? 3 : 0}
                         borderRadius="$10"
                         bg="#F0F0F0"
 
diff --git a/app/src/screens/AppScreen.tsx b/app/src/screens/AppScreen.tsx
index 064785625..8d8bf3474 100644
--- a/app/src/screens/AppScreen.tsx
+++ b/app/src/screens/AppScreen.tsx
@@ -40,7 +40,7 @@ const AppScreen: React.FC<AppScreenProps> = ({ selectedApp, setSelectedApp }) =>
   ];
 
   return (
-    <YStack gap="$5" px="$5" pt="$12">
+    <YStack flex={1} gap="$5" px="$5" jc="center" alignItems='center' >
 
       {cardsData.map(card => (
         <AppCard
diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx
index d0acb140e..6b0ec93e4 100644
--- a/app/src/screens/MainScreen.tsx
+++ b/app/src/screens/MainScreen.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { YStack, XStack, Text, Button, Tabs, styled, Dialog, Adapt, Sheet, Label, Fieldset, Input, Switch, ThemeableStack, Separator } from 'tamagui'
-import { Scan, UserCheck, HelpCircle, XCircle, IterationCw, LayoutGrid, VenetianMask } from '@tamagui/lucide-icons';
+import { Scan, UserCheck, HelpCircle, XCircle, IterationCw, LayoutGrid, Sparkles, VenetianMask } from '@tamagui/lucide-icons';
 import ScanScreen from './ScanScreen';
 import ProveScreen from './ProveScreen';
 import { Steps } from '../utils/utils';
 import AppScreen from './AppScreen';
 import { App } from '../utils/AppClass';
 import { Keyboard } from 'react-native';
+import { Platform } from 'react-native';
 
 
 interface MainScreenProps {
@@ -108,7 +109,7 @@ const MainScreen: React.FC<MainScreenProps> = ({
   }, []);
 
   return (
-    <YStack f={1} bc="white">
+    <YStack f={1} bc="white" mt={Platform.OS === 'ios' ? "$8" : "$0"} mb={Platform.OS === 'ios' ? "$3" : "$0"}>
 
       <YStack >
         <XStack jc="space-between" ai="center" p="$2">
diff --git a/app/src/screens/ProveScreen.tsx b/app/src/screens/ProveScreen.tsx
index 8152ab3bb..e56863ead 100644
--- a/app/src/screens/ProveScreen.tsx
+++ b/app/src/screens/ProveScreen.tsx
@@ -110,13 +110,14 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
               )}
             </Button>
 
-            <Text fontSize={10} color={generatingProof ? "gray" : "white"} alignSelf='center'>This operation can take about 2 mn</Text>
+            <Text fontSize={10} color={generatingProof ? "gray" : "white"} alignSelf='center'>This operation can take up to 2 mn</Text>
             <Text fontSize={9} color={generatingProof ? "gray" : "white"} pb="$2" alignSelf='center'>The application may freeze during this time (hard work)</Text>
 
 
           </YStack>
         ) : (
           <YStack flex={1} m="$2" justifyContent='center' alignItems='center' gap="$5">
+            <XStack flex={1} />
             <ProofGrid proof={proof} />
 
             <YStack>
diff --git a/app/src/screens/ScanScreen.tsx b/app/src/screens/ScanScreen.tsx
index 7cf7d5420..d52aba5bb 100644
--- a/app/src/screens/ScanScreen.tsx
+++ b/app/src/screens/ScanScreen.tsx
@@ -10,65 +10,45 @@ interface ScanScreenProps {
 
 const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, nfcScan, step }) => {
   return (
-    <YStack f={1} p="$5" gap="$1" px="$5" pt="$14">
-      <ZStack alignSelf='center' maxWidth={50} maxHeight={50} width={50} flex={0} >
-        <Circle
-          alignSelf='center'
-          h={22}
-          w={22}
-          borderWidth={1.6}
-          p={0}
-        />
-        <Text
-          alignSelf='center'
-          h={22}
-          w={22}
-          y={1}
-          x={7}
-          color="black"
-          fow="bold"
-        >1</Text>
-      </ZStack>
-      <Text textAlign='center' mt="$5" fow={step === Steps.MRZ_SCAN ? "bold" : "normal"} >Scan the machine readable zone on the main page of your passport</Text>
-      <ZStack alignSelf='center' mt="$5" maxWidth={50} maxHeight={50} width={50} flex={0} >
-        <Circle
-          alignSelf='center'
-          h={22}
-          w={22}
-          borderWidth={1.6}
-          p={0}
-        />
-        <Text
-          alignSelf='center'
-          h={22}
-          w={22}
-          y={1}
-          x={7}
-          color="black"
-          fow="bold"
-        >2</Text>
-      </ZStack>
-      <Text textAlign='center' mt="$5" fow={(step === Steps.MRZ_SCAN_COMPLETED) || (step === Steps.NFC_SCANNING) ? "bold" : "normal"}>Hold your passport against your device to read the biometric chip</Text>
+    <YStack f={1} p="$5" gap="$1" px="$5" justifyContent='center'>
 
-      <ZStack alignSelf='center' mt="$5" maxWidth={50} maxHeight={50} width={50} flex={0} >
-        <Circle
-          alignSelf='center'
-          h={22}
-          w={22}
-          borderWidth={1.6}
-          p={0}
-        />
-        <Text
-          alignSelf='center'
-          h={22}
-          w={22}
-          y={1}
-          x={7}
-          color="black"
-          fow="bold"
-        >3</Text>
-      </ZStack>
-      <Text textAlign='center' mt="$5" fow={step >= Steps.NFC_SCAN_COMPLETED ? "bold" : "normal"}>Select App</Text>
+      <XStack
+        jc="center"
+        borderColor="black"
+        borderWidth={1.5}
+        borderRadius={10}
+        f={0}
+        w="$1"
+        alignSelf='center'>
+        <Text fow="bold">1</Text>
+      </XStack>
+      <Text textAlign='center' mt="$3" fow={step === Steps.MRZ_SCAN ? "bold" : "normal"} >Scan the machine readable zone on the main page of your passport</Text>
+
+      <XStack
+        mt="$6"
+        jc="center"
+        borderColor="black"
+        borderWidth={1.5}
+        borderRadius={10}
+        f={0}
+        w="$1"
+        alignSelf='center'>
+        <Text fow="bold">2</Text>
+      </XStack>
+      <Text textAlign='center' mt="$3" fow={(step === Steps.MRZ_SCAN_COMPLETED) || (step === Steps.NFC_SCANNING) ? "bold" : "normal"}>Hold your passport against your device to read the biometric chip</Text>
+
+      <XStack
+        mt="$6"
+        jc="center"
+        borderColor="black"
+        borderWidth={1.5}
+        borderRadius={10}
+        f={0}
+        w="$1"
+        alignSelf='center'>
+        <Text fow="bold">3</Text>
+      </XStack>
+      <Text textAlign='center' mt="$3" fow={step >= Steps.NFC_SCAN_COMPLETED ? "bold" : "normal"}>Select App</Text>
 
       <YStack ai="center">
         {
diff --git a/app/src/utils/AppClass.ts b/app/src/utils/AppClass.ts
index 0049a8c30..67ee89639 100644
--- a/app/src/utils/AppClass.ts
+++ b/app/src/utils/AppClass.ts
@@ -19,5 +19,5 @@ export class App {
 }
 
 export const gitcoin = new App("gitcoin", "Gitcoin", {}, "Add to Gitcoin passport", "Gitcoin passport doesn't require to disclosure any data.");
-export const soulbond = new App("soulbond", "Soulbond token", { nationality: false, expiry_date: false }, "Mint Soulbond token", "Disclosure the information you want and mint your SBT:");
+export const soulbond = new App("soulbond", "Soulbond token", { nationality: false, expiry_date: false }, "Mint Soulbond token", "Disclosure the information you want and mint your SBT.");
 export const zuzalu = new App("zuzalu", "Zupass", { date_of_birth: false }, "Add to Zupass", "Zupass requires the following information:");