fix(INJI-289): Modified the face authentication layout as per wire-frame (#802)

* fix(INJI-289): Adjusted face authentication layout as per UI/UX * Replaced capture-icon from theme styles to provides png images
2026-01-08 21:18:14 -05:00 · 2023-09-11 12:58:24 +05:30
parent 0417a2523f
commit d0887bc211
13 changed files with 102 additions and 50 deletions
--- a/assets/camera-flip-icon.png
+++ b/assets/camera-flip-icon.png
--- a/assets/capture-button.png
+++ b/assets/capture-button.png
--- 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<FaceScannerProps> = (props) => {
  }

  return (
-    <Column crossAlign="center">
-      <Column style={[styles.scannerContainer]}>
+    <View>
+      <View style={Theme.Styles.scannerContainer}>
        <Camera
-          ratio="4:3"
-          style={styles.scanner}
+          style={Theme.Styles.scanner}
          type={whichCamera}
          ref={setCameraRef}
        />
-      </Column>
+      </View>
+      <Text
+        align="center"
+        weight="semibold"
+        style={Theme.TextStyles.base}
+        margin="50 57 0 57">
+        {t('imageCaptureGuide')}
+      </Text>
      <Centered margin="24 0">
        {isCapturing || isVerifying ? (
          <RotatingIcon name="sync" size={64} />
        ) : (
-          <Row crossAlign="center">
-            <Icon
-              name="flip-camera-ios"
-              color={Theme.Colors.flipCameraIcon}
-              size={64}
-              onPress={() => service.send(FaceScannerEvents.FLIP_CAMERA())}
-              style={{ margin: 8, marginEnd: 32 }}
-            />
-            <Icon
-              name="photo-camera"
-              color={Theme.Colors.flipCameraIcon}
-              size={64}
-              onPress={() => service.send(FaceScannerEvents.CAPTURE())}
-              style={{ margin: 8, marginTop: 12, marginStart: 32 }}
-            />
+          <Row align="center" style={{ marginTop: 42 }}>
+            <Centered style={Theme.Styles.imageCaptureButton}>
+              <TouchableOpacity
+                onPress={() => service.send(FaceScannerEvents.CAPTURE())}>
+                <Image source={Theme.ImageCaptureButton} />
+              </TouchableOpacity>
+              <Text size="small" weight="semibold" margin="8">
+                {t('capture')}
+              </Text>
+            </Centered>
+
+            <Centered>
+              <TouchableOpacity
+                onPress={() => service.send(FaceScannerEvents.FLIP_CAMERA())}>
+                <Image
+                  source={Theme.CameraFlipIcon}
+                  style={Theme.Styles.cameraFlipIcon}
+                />
+              </TouchableOpacity>
+              <Text size="smaller" weight="semibold" margin="8">
+                {t('flipCamera')}
+              </Text>
+            </Centered>
          </Row>
        )}
        {/* TODO: remove warning when iOS SDK is ready */}
@@ -117,7 +136,7 @@ export const FaceScanner: React.FC<FaceScannerProps> = (props) => {
          </Text>
        )}
      </Centered>
-    </Column>
+    </View>
  );
 };

@@ -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',
-  },
-});
--- a/components/QrScanner.tsx
+++ b/components/QrScanner.tsx
@@ -109,9 +109,12 @@ export const QrScanner: React.FC<QrScannerProps> = (props) => {
                : Camera.Constants.Type.back
            );
          }}>
-          <Image source={Theme.CameraFlipIcon} />
+          <Image
+            source={Theme.CameraFlipIcon}
+            style={Theme.Styles.cameraFlipIcon}
+          />
        </TouchableOpacity>
-        <Text align="center" weight="semibold" margin="9 0">
+        <Text size="small" weight="semibold" margin="8">
          {t('flipCamera')}
        </Text>
      </Column>
--- 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'),
--- 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'),
--- a/locales/ara.json
+++ b/locales/ara.json
@@ -24,7 +24,11 @@
    "Verifier": "المدقق",
    "Wallet": "محفظة"
  },
-  "FaceScanner": {},
+  "FaceScanner": {
+    "imageCaptureGuide": "أمسك الهاتف بثبات وحافظ على تركيز وجهك في المنتصف",
+    "capture": "يأسر",
+    "flipCamera": "فليب الكاميرا"
+  },
  "OIDcAuth": {
    "title": "مصادقة OIDC",
    "text": "ليتم استبداله بموفر واجهة مستخدم OIDC",
--- 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",
--- 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",
--- 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 के साथ प्रतिस्थापित करने के लिए",
--- 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 ನೊಂದಿಗೆ ಬದಲಾಯಿಸಲು",
--- 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",
--- 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 உடன் மாற்றப்பட வேண்டும்",