Merge pull request #33 from credebl/localization-changes

localization,home,onboarding image change

app/src/HomeContentviewstyle.ts

@@ -1,9 +1,12 @@
 import { StyleSheet } from 'react-native'
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen'
 
 const offset = 25
 
 export const styles = StyleSheet.create({
   container: {
+    height: hp('100%'),
+    width: wp('100%'),
     paddingHorizontal: offset,
     paddingBottom: 25 * 3,
   },
@@ -20,39 +23,36 @@ export const styles = StyleSheet.create({
   feedbackIcon: {
     paddingRight: 10,
   },
-  homebadage: { width: 29, height: 28, flexShrink: 0, justifyContent: 'space-between' },
-  homebadageview: {
+  homebadge: { width: 29, height: 28, flexShrink: 0, justifyContent: 'space-between' },
+  homebadgeview: {
     flexDirection: 'row',
     marginTop: 30,
     justifyContent: 'center',
     alignSelf: 'center',
-    marginLeft: 20,
   },
-  badageview: {
+  badgeview: {
     flexDirection: 'row',
-    marginLeft: 40,
+    justifyContent: 'center',
+    alignSelf: 'center',
   },
-  badagecontainer: {
-    height: 200,
-    width: 100,
+  badgecontainer: {
+    height: hp('30%'),
+    width: wp('30%'),
     alignSelf: 'center',
-    marginRight: 20,
   },
-  badageText: {
+  badgeText: {
     fontSize: 14,
     color: '#1F4EAD',
     textAlign: 'center',
     fontWeight: 'bold',
     marginTop: 5,
-    marginLeft: 5,
   },
-  badageCount: {
-    fontSize: 17,
+  badgeCount: {
+    fontSize: 15,
     color: '#1F4EAD',
     textAlign: 'center',
     fontWeight: 'bold',
     marginTop: 5,
-    marginLeft: 10,
   },
   homeImage: {
     width: 300.236,

app/src/components/HomeContentView.tsx

@@ -3,7 +3,7 @@ import { useCredentialByState, useConnections, useProofByState } from '@aries-fr
 import { useStore, Button, ButtonType, testIdWithKey, useTheme } from 'aries-bifold'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { View, Text, Image } from 'react-native'
+import { View, Text, Image, ScrollView } from 'react-native'
 import { SvgProps } from 'react-native-svg'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
@@ -25,8 +25,8 @@ const HomeContentView: React.FC<HomeContentViewProps> = ({ children }) => {
     ...useCredentialByState(CredentialState.CredentialReceived),
     ...useCredentialByState(CredentialState.Done),
   ]
-  const contactscount = useConnections.length
-  const requestcount = useProofByState(ProofState.RequestReceived).length
+  const contactscount = useConnections?.length
+  const requestcount = useProofByState(ProofState.RequestReceived)?.length
 
   const notifications = useNotifications()
   const { ColorPallet } = useTheme()
@@ -35,7 +35,7 @@ const HomeContentView: React.FC<HomeContentViewProps> = ({ children }) => {
   const [store] = useStore<BCState>()
 
   const toggleSurveyVisibility = () => setSurveyVisible(!surveyVisible)
-  const homebadage: {
+  const homebadge: {
     image: React.FC<SvgProps>
     title: string
     count: number
@@ -48,7 +48,7 @@ const HomeContentView: React.FC<HomeContentViewProps> = ({ children }) => {
     {
       image: credentialImage,
       title: 'CREDENTIALS',
-      count: credentials.length,
+      count: credentials?.length,
     },
     {
       image: request,
@@ -62,7 +62,7 @@ const HomeContentView: React.FC<HomeContentViewProps> = ({ children }) => {
   }
 
   return (
-    <View style={[styles.feedbackContainer]}>
+    <ScrollView style={[styles.feedbackContainer]}>
       {store.preferences.developerModeEnabled ? (
         <>
           <Button
@@ -93,22 +93,22 @@ const HomeContentView: React.FC<HomeContentViewProps> = ({ children }) => {
         </View>
       )}
 
-      <View style={styles.homebadageview}>
-        {homebadage.map((g) => (
-          <View style={styles.badagecontainer}>
-            <Text style={styles.badageText}>{g.count}</Text>
+      <View style={styles.homebadgeview}>
+        {homebadge.map((g) => (
+          <View style={styles.badgecontainer}>
+            <Text style={styles.badgeText}>{g.count}</Text>
             <Image source={require('../assets/img/Line.png')} style={styles.line} />
-            <View style={styles.badageview}>
-              <View style={styles.homebadage}>{g.image(imageDisplayOptions)}</View>
+            <View style={styles.badgeview}>
+              <View style={styles.homebadge}>{g.image(imageDisplayOptions)}</View>
             </View>
             <View>
-              <Text style={styles.badageText}>{g.title}</Text>
+              <Text style={styles.badgeText}>{g.title}</Text>
             </View>
           </View>
         ))}
       </View>
       {children}
-    </View>
+    </ScrollView>
   )
 }
 

app/src/localization/en/index.ts

@@ -4,6 +4,9 @@ const translation = {
     "GetID": "Get BCID",
     "GetDigitalID": "Get your Person credential",
   },
+  "PINCreate": { 
+    "PINDisclaimer": "If you forget it, you may need to set up your wallet again and re-add your credentials.",
+  },
   "Error": {
     "Title2020": "Unable to parse invitation",
     "Message2020": "There was a problem parsing the connection invitation.",
@@ -26,16 +29,16 @@ const translation = {
   },
   "Biometry": {
     "Toggle": "Toggle Biometrics",
-    "EnabledText1": "Log in with your phone's biometrics instead of your wallet PIN.",
+    "EnabledText1": "Use your phone's biometrics to log in rather than your wallet's PIN.",
     "EnabledText1Bold": "you will need to use biometrics to open your ADEYA Wallet.",
-    "EnabledText2": "This means all fingerprint and facial data added on this phone can be used to access your ADEYA Wallet.",
+    "EnabledText2": "Because of this, your ADEYA wallet may be accessed using any fingerprint or face data you upload to this phone. Make sure you are the only one who can access your wallet.",
     "EnabledText3": "Anyone who can access your phone with biometrics can access your ADEYA Wallet.",
     "EnabledText3Bold": "Ensure only you have access to your wallet.",
     "Warning": "Ensure only you have access to your wallet.",
     "UseToUnlock": "Use biometrics to unlock wallet?",
-    "NotEnabledText1":"Use your phone's biometrics to log in rather than your wallet's PIN.",
-    "NotEnabledText2":"Because of this, your ADEYA wallet may be accessed using any fingerprint or face data you upload to this phone. Make sure you are the only one who can access your wallet.",
-  },
+    "NotEnabledText1": "Biometrics is not currently setup on this device and therefore cannot be enabled.",
+    "NotEnabledText2": "If you wish to enable this feature turn biometrics on in the device settings and then return to this screen.",
+      },
   "Credentials": {
     "AddCredential": "Add Credential",
     "EmptyList": "Your wallet is empty.",

app/src/localization/fr/index.ts

@@ -4,6 +4,9 @@ const translation = {
     "GetID": "Get BCID (FR)",
     "GetDigitalID": "Get your Person credential (FR)",
   },
+  "PINCreate": { 
+    "PINDisclaimer": "Si vous l'oubliez, vous devrez peut-être reconfigurer votre portefeuille et rajouter vos informations d'identification.",
+  },
   "Error": {
     "Title2020": "Unable to parse invitation (FR)",
     "Message2020": "There was a problem parsing the connection invitation. (FR)",
@@ -26,15 +29,15 @@ const translation = {
   },
   "Biometry": {
     "Toggle": "Toggle Biometrics (FR)",
-    "EnabledText1": "Log in with your phone's biometrics instead of your wallet PIN. (FR)",
+    "EnabledText1": "Utilisez les données biométriques de votre téléphone pour vous connecter plutôt que le code PIN de votre portefeuille. (FR)",
     "EnabledText1Bold": "you will need to use biometrics to open your ADEYA Wallet. (FR)",
-    "EnabledText2": "This means all fingerprint and facial data added on this phone can be used to access your ADEYA Wallet. (FR)",
+    "EnabledText2": "Pour cette raison, votre portefeuille ADEYA peut être consulté à l'aide de n'importe quelle empreinte digitale ou données faciales que vous téléchargez sur ce téléphone. Assurez-vous que vous êtes le seul à pouvoir accéder à votre portefeuille. (FR)",
     "EnabledText3": "Anyone who can access your phone with biometrics can access your ADEYA Wallet. (FR)",
     "EnabledText3Bold": "Ensure only you have access to your wallet. (FR)",
     "Warning": "Ensure only you have access to your wallet. (FR)",
     "UseToUnlock": "Use biometrics to unlock wallet? (FR)",
     "NotEnabledText1":"Utilisez les données biométriques de votre téléphone pour vous connecter plutôt que le code PIN de votre portefeuille.",
-    "NotEnabledText2":"Pour cette raison, votre portefeuille ADEYA peut être consulté à l'aide de n'importe quelle empreinte digitale ou données faciales que vous téléchargez sur ce téléphone. Assurez-vous que vous êtes le seul à pouvoir accéder à votre portefeuille.",
+    "NotEnabledText2":"Si vous souhaitez activer cette fonctionnalité, activez la biométrie dans les paramètres de l'appareil, puis revenez à cet écran.",
   },
   "Credentials": {
     "AddCredential": "Add Credential (FR)",

app/src/localization/pt-br/index.ts

@@ -4,6 +4,9 @@ const translation = {
     "GetID": "Get BCID (PT-BR)",
     "GetDigitalID": "Get your Person credential (PT-BR)",
   },
+  "PINCreate": { 
+    "PINDisclaimer": "Se você esquecer, pode ser necessário configurar sua carteira novamente e adicionar novamente suas credenciais.",
+  },
   "Error": {
     "Title2020": "Unable to parse invitation (PT-BR)",
     "Message2020": "There was a problem parsing the connection invitation. (PT-BR)",
@@ -16,6 +19,7 @@ const translation = {
     "Title2026": "Oops! Something went wrong (PT-BR)",
     "Message2026": "The app has encountered a problem. Try restarting the app. (PT-BR)",
     "NoMessage": "No Message (PT-BR)",
+
   },
   "CameraDisclosure": {
     "AllowCameraUse": "Allow camera use (PT-BR)",
@@ -26,15 +30,15 @@ const translation = {
   },
   "Biometry": {
     "Toggle": "Toggle Biometrics (PT-BR)",
-    "EnabledText1": "Log in with your phone's biometrics instead of your wallet PIN. (PT-BR)",
+    "EnabledText1": "Use a biometria do seu telefone para fazer login em vez do PIN da sua carteira. (PT-BR)",
     "EnabledText1Bold": "you will need to use biometrics to open your ADEYA Wallet. (PT-BR)",
-    "EnabledText2": "This means all fingerprint and facial data added on this phone can be used to access your ADEYA Wallet. (PT-BR)",
+    "EnabledText2": "Por causa disso, sua carteira ADYA pode ser acessada usando qualquer impressão digital ou dados faciais que você enviar para este telefone. Certifique-se de que você é o único que pode acessar sua carteira. (PT-BR)",
     "EnabledText3": "Anyone who can access your phone with biometrics can access your ADEYA Wallet. (PT-BR)",
     "EnabledText3Bold": "Ensure only you have access to your wallet. (PT-BR)",
     "Warning": "Ensure only you have access to your wallet. (PT-BR)",
     "UseToUnlock": "Use biometrics to unlock wallet? (PT-BR)",
-    "NotEnabledText1":"Use a biometria do seu telefone para fazer login em vez do PIN da sua carteira.",
-    "NotEnabledText2":"Because of this, your ADEYA wallet may be accessed using any fingerprint or face data you upload to this phone. Make sure you are the only one who can access your wallet.",
+    'NotEnabledText2':"Se você deseja ativar esse recurso, ative a biometria nas configurações do dispositivo e retorne a esta tela.(PT-BR)",
+    'NotEnabledText1':"A biometria não está configurada neste dispositivo e, portanto, não pode ser ativada.(PT-BR)"
   },
   "Credentials": {
     "AddCredential": "Add Credential (PT-BR)",

app/src/onBordingstyle.ts

@@ -1,19 +1,25 @@
 import { StyleSheet } from 'react-native'
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen'
 
 export const styles = StyleSheet.create({
   container: {
-    padding: 20,
-    paddingTop: 50,
+    height: hp('100%'),
+    width: wp('100%'),
+    padding: wp('5%'),
+    paddingTop: hp('5%'),
   },
   headerText: {
     alignSelf: 'center',
-    marginBottom: 25,
+    marginBottom: hp('2.5%'),
+    justifyContent: 'center',
+    color: '#1F4EAD',
   },
   backgroundImage: {
     height: 245,
     width: 343,
     alignSelf: 'center',
   },
+
   Image: {
     width: 78,
     height: 78,
@@ -25,27 +31,32 @@ export const styles = StyleSheet.create({
     bottom: 0,
   },
   qrImage: {
-    width: 81,
-    height: 82,
+    width: wp('21%'),
+    height: wp('21%'),
     flexShrink: 0,
     position: 'absolute',
-    right: 100,
-    top: 100,
-    left: 170,
+    right: wp('20%'),
+    top: hp('12.5%'),
+    left: wp('37.5%'),
   },
   bodyText: {
-    marginTop: 25,
+    marginTop: hp('2.5%'),
     display: 'flex',
-    width: 345,
+    width: wp('80%'),
     flexDirection: 'column',
     flexShrink: 0,
-    fontSize: 18,
+    fontSize: hp('2%'),
     textAlign: 'center',
     color: '#2289F7',
   },
-  descriptiionText: { alignSelf: 'center', marginHorizontal: 20 },
+  descriptiionText: {
+    alignSelf: 'center',
+    marginHorizontal: wp('1%'),
+  },
   startedButtonconatiner: {
-    margin: 25,
+    margin: wp('5%'),
+  },
+  guideimages: {
+    alignItems: 'center',
   },
-  guideimages: { alignItems: 'center' },
 })

app/src/screens/OnboardingPages.tsx

@@ -18,9 +18,7 @@ const EndPage = (onTutorialCompleted: GenericFn, theme: ITheme['OnboardingTheme'
     <>
       <ScrollView style={styles.container} contentContainerStyle={{ justifyContent: 'center' }}>
         <Text style={[defaultStyle.headerText, styles.headerText]}>Share Securely</Text>
-        <ImageBackground source={require('../assets/img/sharesecure.png')} style={styles.backgroundImage}>
-          <Image source={require('../assets/img/qr-code.png')} style={styles.qrImage} />
-        </ImageBackground>
+        <Image source={require('../assets/img/sharesecure.png')} style={styles.backgroundImage} />
         <View style={styles.descriptiionText}>
           <Text style={[styles.bodyText]}>
             Take complete control over your data. Securely connect with people and organizations to share necessary
@@ -48,7 +46,7 @@ const StartPages = (theme: ITheme) => {
   return (
     <ScrollView style={styles.container}>
       <Text style={[defaultStyle.headerText, styles.headerText]}>Welcome!</Text>
-      <ImageBackground source={require('../assets/img/onBoardingfirst.png')} style={styles.backgroundImage}>
+      <ImageBackground source={require('../assets/img/onBoardingfirst1.png')} style={styles.backgroundImage}>
         <Image source={require('../assets/img/face-scan.png')} style={styles.Image} />
       </ImageBackground>
 

app/src/theme.ts

@@ -97,7 +97,7 @@ export const TextTheme: ITextTheme = {
     color: ColorPallet.grayscale.darkGrey,
   },
   headingTwo: {
-    fontSize: 32,
+    fontSize: 30,
     fontWeight: 'bold',
     color: '#2289F7',
   },
@@ -113,7 +113,7 @@ export const TextTheme: ITextTheme = {
   },
   normal: {
     fontSize: 18,
-    fontWeight: 'normal',
+    fontWeight: '400',
     // color: '#1F4EAD',
     color: ColorPallet.grayscale.darkGrey,
   },
@@ -614,7 +614,8 @@ export const OnboardingTheme = {
   headerTintColor: ColorPallet.grayscale.white,
   headerText: {
     ...TextTheme.headingTwo,
-    color: ColorPallet.notification.infoText,
+    // color: ColorPallet.notification.infoText,
+    color: '#1F4EAD',
   },
   bodyText: {
     ...TextTheme.normal,