diff --git a/assets/camera-flip-icon.png b/assets/camera-flip-icon.png index de7a69df..5203a4f5 100644 Binary files a/assets/camera-flip-icon.png and b/assets/camera-flip-icon.png differ diff --git a/assets/capture-button.png b/assets/capture-button.png new file mode 100644 index 00000000..823b47e1 Binary files /dev/null and b/assets/capture-button.png differ diff --git a/components/FaceScanner.tsx b/components/FaceScanner.tsx index 4b69b47c..762331d6 100644 --- a/components/FaceScanner.tsx +++ b/components/FaceScanner.tsx @@ -1,7 +1,12 @@ import React, { useCallback, useContext, useEffect, useRef } from 'react'; -import Icon from 'react-native-vector-icons/MaterialIcons'; import { Camera } from 'expo-camera'; -import { Platform, StyleSheet } from 'react-native'; +import { + Platform, + StyleSheet, + TouchableOpacity, + View, + Image, +} from 'react-native'; import { Button, Centered, Column, Row, Text } from './ui'; import { useInterpret, useSelector } from '@xstate/react'; import { useTranslation } from 'react-i18next'; @@ -80,34 +85,48 @@ export const FaceScanner: React.FC = (props) => { } return ( - - + + - + + + {t('imageCaptureGuide')} + {isCapturing || isVerifying ? ( ) : ( - - service.send(FaceScannerEvents.FLIP_CAMERA())} - style={{ margin: 8, marginEnd: 32 }} - /> - service.send(FaceScannerEvents.CAPTURE())} - style={{ margin: 8, marginTop: 12, marginStart: 32 }} - /> + + + service.send(FaceScannerEvents.CAPTURE())}> + + + + {t('capture')} + + + + + service.send(FaceScannerEvents.FLIP_CAMERA())}> + + + + {t('flipCamera')} + + )} {/* TODO: remove warning when iOS SDK is ready */} @@ -117,7 +136,7 @@ export const FaceScanner: React.FC = (props) => { )} - + ); }; @@ -126,21 +145,3 @@ interface FaceScannerProps { onValid: () => void; onInvalid: () => void; } - -const styles = StyleSheet.create({ - scannerContainer: { - borderWidth: 4, - borderColor: Theme.Colors.textValue, - borderRadius: 32, - justifyContent: 'center', - height: 400, - width: 300, - overflow: 'hidden', - }, - - scanner: { - height: '100%', - width: '100%', - margin: 'auto', - }, -}); diff --git a/components/QrScanner.tsx b/components/QrScanner.tsx index 7f6f7003..92912a8c 100644 --- a/components/QrScanner.tsx +++ b/components/QrScanner.tsx @@ -109,9 +109,12 @@ export const QrScanner: React.FC = (props) => { : Camera.Constants.Type.back ); }}> - + - + {t('flipCamera')} diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts index 0c40c46b..cd578d84 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -27,6 +27,7 @@ const Colors = { LightOrange: '#FDF1E6', GradientColors: ['#F59B4B', '#E86E04'], DisabledColors: ['#C7C7C7', '#C7C7C7'], + captureIconBorder: '#F59B4B', TimeoutHintBoxColor: '#FFF7E5', TimoutHintText: '#8B6105', resendCodeTimer: '#555555', @@ -322,6 +323,14 @@ export const DefaultTheme = { borderRadius: 10, backgroundColor: Colors.LightOrange, }, + cameraFlipIcon: { + height: 42, + width: 42, + }, + imageCaptureButton: { + marginLeft: 130, + marginRight: 50, + }, settingsIconBg: { padding: 6, width: 36, @@ -972,6 +981,7 @@ export const DefaultTheme = { MosipSplashLogo: require('../../../assets/icon.png'), MosipLogo: require('../../../assets/mosip-logo.png'), CameraFlipIcon: require('../../../assets/camera-flip-icon.png'), + ImageCaptureButton: require('../../../assets/capture-button.png'), DomainWarningLogo: require('../../../assets/domain-warning.png'), WarningLogo: require('../../../assets/warningLogo.png'), OtpLogo: require('../../../assets/otp-mobile-logo.png'), diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts index f3273469..a2158004 100644 --- a/components/ui/themes/PurpleTheme.ts +++ b/components/ui/themes/PurpleTheme.ts @@ -27,6 +27,7 @@ const Colors = { walletbindingLabel: '#000000', GradientColors: ['#373086', '#70308C'], DisabledColors: ['#C7C7C7', '#C7C7C7'], + captureIconBorder: '#F59B4B', Purple: '#70308C', LightPurple: '#AEA7FF', TimeoutHintBoxColor: '#FFF7E5', @@ -324,6 +325,14 @@ export const PurpleTheme = { borderRadius: 10, backgroundColor: Colors.LightPurple, }, + cameraFlipIcon: { + height: 42, + width: 42, + }, + imageCaptureButton: { + marginLeft: 130, + marginRight: 50, + }, settingsIconBg: { padding: 6, width: 36, @@ -974,6 +983,7 @@ export const PurpleTheme = { MosipSplashLogo: require('../../../assets/icon.png'), MosipLogo: require('../../../assets/mosip-logo.png'), CameraFlipIcon: require('../../../assets/camera-flip-icon.png'), + ImageCaptureButton: require('../../../assets/capture-button.png'), DomainWarningLogo: require('../../../assets/domain-warning.png'), WarningLogo: require('../../../assets/warningLogo.png'), OtpLogo: require('../../../purpleAssets/otp-mobile-logo.png'), diff --git a/locales/ara.json b/locales/ara.json index a0a98d39..de499ffb 100644 --- a/locales/ara.json +++ b/locales/ara.json @@ -24,7 +24,11 @@ "Verifier": "المدقق", "Wallet": "محفظة" }, - "FaceScanner": {}, + "FaceScanner": { + "imageCaptureGuide": "أمسك الهاتف بثبات وحافظ على تركيز وجهك في المنتصف", + "capture": "يأسر", + "flipCamera": "فليب الكاميرا" + }, "OIDcAuth": { "title": "مصادقة OIDC", "text": "ليتم استبداله بموفر واجهة مستخدم OIDC", diff --git a/locales/en.json b/locales/en.json index d3301e7f..98a45979 100644 --- a/locales/en.json +++ b/locales/en.json @@ -24,7 +24,11 @@ "Verifier": "Verifier", "Wallet": "Wallet" }, - "FaceScanner": {}, + "FaceScanner": { + "imageCaptureGuide": "Hold the phone steady and keep your face focused in the centre", + "capture": "Capture", + "flipCamera": "Flip Camera" + }, "OIDcAuth": { "title": "OIDC Authentication", "text": "To be replaced with the OIDC provider UI", diff --git a/locales/fil.json b/locales/fil.json index 8b50bc7b..389730e5 100644 --- a/locales/fil.json +++ b/locales/fil.json @@ -27,7 +27,11 @@ "PasscodeVerify": { "passcodeMismatchError": "Hindi tumugma ang passcode." }, - "FaceScanner": {}, + "FaceScanner": { + "imageCaptureGuide": "Hawakan nang matatag ang telepono at panatilihing nakatutok ang iyong mukha sa gitna", + "capture": "Kunin", + "flipCamera": "I-flip ang Camera" + }, "OIDcAuth": { "title": "OIDC Authentication", "text": "Papalitan ng OIDC service provider UI", diff --git a/locales/hin.json b/locales/hin.json index 49544de4..867b027d 100644 --- a/locales/hin.json +++ b/locales/hin.json @@ -27,7 +27,11 @@ "PasscodeVerify": { "passcodeMismatchError": "पासकोड का मिलान नहीं हुआ।" }, - "FaceScanner": {}, + "FaceScanner": { + "imageCaptureGuide": "फ़ोन को स्थिर रखें और अपना चेहरा केंद्र में केंद्रित रखें", + "capture": "कब्जा", + "flipCamera": "कैमरा पलटें" + }, "OIDcAuth": { "title": "OIDC प्रमाणीकरण", "text": "OIDC प्रदाता UI के साथ प्रतिस्थापित करने के लिए", diff --git a/locales/kan.json b/locales/kan.json index d0f9032c..1fc733a6 100644 --- a/locales/kan.json +++ b/locales/kan.json @@ -27,7 +27,11 @@ "PasscodeVerify": { "passcodeMismatchError": "ಪಾಸ್ಕೋಡ್ ಹೊಂದಿಕೆಯಾಗಲಿಲ್ಲ." }, - "FaceScanner": {}, + "FaceScanner": { + "imageCaptureGuide": "ಫೋನ್ ಅನ್ನು ಸ್ಥಿರವಾಗಿ ಹಿಡಿದುಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಮುಖವನ್ನು ಮಧ್ಯದಲ್ಲಿ ಕೇಂದ್ರೀಕರಿಸಿ", + "capture": "ಸೆರೆಹಿಡಿಯಿರಿ", + "flipCamera": "ಫ್ಲಿಪ್ ಕ್ಯಾಮೆರಾ" + }, "OIDcAuth": { "title": "OIDC ದೃಢೀಕರಣ", "text": "OIDC ಪೂರೈಕೆದಾರ UI ನೊಂದಿಗೆ ಬದಲಾಯಿಸಲು", diff --git a/locales/spa.json b/locales/spa.json index 7df5c65a..8fbc3bf3 100644 --- a/locales/spa.json +++ b/locales/spa.json @@ -24,7 +24,11 @@ "Verifier": "Verificador", "Wallet": "Billetera" }, - "FaceScanner": {}, + "FaceScanner": { + "imageCaptureGuide": "Sostén el teléfono con firmeza y mantén tu rostro enfocado en el centro.", + "capture": "Captura", + "flipCamera": "Voltear cámara" + }, "OIDcAuth": { "title": "Autenticación OIDC", "text": "Se reemplazará con la interfaz de usuario del proveedor OIDC", diff --git a/locales/tam.json b/locales/tam.json index fac30924..6d45c8a6 100644 --- a/locales/tam.json +++ b/locales/tam.json @@ -27,7 +27,11 @@ "PasscodeVerify": { "passcodeMismatchError": "கடவுக்குறியீடு பொருந்தவில்லை." }, - "FaceScanner": {}, + "FaceScanner": { + "imageCaptureGuide": "மொபைலை நிலையாகப் பிடித்து, உங்கள் முகத்தை மையமாக வைத்துக்கொள்ளவும்", + "capture": "பிடிப்பு", + "flipCamera": "ஃபிளிப் கேமரா" + }, "OIDcAuth": { "title": "OIDC அங்கீகாரம்", "text": "OIDC வழங்குநர் UI உடன் மாற்றப்பட வேண்டும்",