[Release 09-03-2023] Purple theme support and UI enhancements

.env

@@ -4,5 +4,7 @@
 MIMOTO_HOST=https://api.qa-1201-b2.mosip.net
 #MIMOTO_HOST=http://mock.mimoto.newlogic.dev
 GOOGLE_NEARBY_MESSAGES_API_KEY=
+#Application Theme can be ( orange | purple )
+APPLICATION_THEME=orange
 
 USE_BLE_SHARE=true

.github/workflows/android-custom-build.yml

@@ -11,6 +11,14 @@ on:
         required: true
         default: 'https://api.qa-121.mosip.net/residentmobileapp'
         type: string
+      theme:
+        description: 'Application Theme'
+        required: true
+        default: 'orange'
+        type: choice
+        options:
+          - orange
+          - purple
 
 jobs:
   build-android:
@@ -44,13 +52,13 @@ jobs:
         run: |
           echo "${{ secrets.ENV_FILE }}" > .env.local > android/local.properties
 
-      - name: Setup branch and env 
+      - name: Setup branch and env
         run: |
           # Strip git ref prefix from version
           echo "BRANCH_NAME=$(echo ${{ github.ref }} | sed -e 's,.*/\(.*\),\1,')" >> $GITHUB_ENV
           echo "GPG_TTY=$(tty)" >> $GITHUB_ENV   
 
-      - name: Setup branch and GPG public key 
+      - name: Setup branch and GPG public key
         run: |
           # Strip git ref prefix from version
 
@@ -69,6 +77,7 @@ jobs:
         env:
           MIMOTO_HOST: ${{ github.event.inputs.backendServiceUrl }}
           FIREBASE_SECRET: ${{ secrets.GPG_SECRET }}
+          APPLICATION_THEME: ${{ github.event.inputs.theme }}
       - name: Upload Artifact
         uses: actions/[email protected]
         with:

android/app/build.gradle

@@ -252,6 +252,7 @@ dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"// From node_modules
+    implementation 'com.facebook.soloader:soloader:0.10.1+'
 
     def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
     def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";

android/build.gradle

@@ -34,6 +34,11 @@ allprojects {
             // Android JSC is installed from npm
             url(new File(["node", "--print", "require.resolve('jsc-android/package.json')"].execute(null, rootDir).text.trim(), "../dist"))
         }
+        configurations.all {
+            resolutionStrategy {
+                force "com.facebook.soloader:soloader:0.10.1"
+            }
+        }
 
         google()
         gradlePluginPortal()

android/gradle.properties

@@ -38,4 +38,7 @@ expo.gif.enabled=true
 expo.webp.enabled=true
 # Enable animated webp support (~3.4 MB increase)
 # Disabled by default because iOS doesn't support animated webp
-expo.webp.animated=false
+expo.webp.animated=false
+
+# If the AsyncStorage_db_size_in_MB is not configured, Default DB_MAX_SIZE is 6MB in Android
+AsyncStorage_db_size_in_MB=30

components/EditableListItem.tsx

@@ -11,7 +11,10 @@ export const EditableListItem: React.FC<EditableListItemProps> = (props) => {
   const [newValue, setNewValue] = useState(props.value);
 
   return (
-    <ListItem bottomDivider onPress={() => setIsEditing(true)}>
+    <ListItem
+      bottomDivider
+      onPress={() => setIsEditing(true)}
+      style={{ display: props.display }}>
       <Icon
         name={props.Icon}
         type="antdesign"
@@ -64,4 +67,5 @@ interface EditableListItemProps {
   value: string;
   Icon: string;
   onEdit: (newValue: string) => void;
+  display?: 'none' | 'flex';
 }

components/SingleVcItem.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { useInterpret, useSelector } from '@xstate/react';
-import { Image, ImageBackground, Pressable } from 'react-native';
+import { Image, ImageBackground, Pressable, View } from 'react-native';
 import { CheckBox, Icon } from 'react-native-elements';
 import { ActorRefFrom } from 'xstate';
 import {
@@ -16,17 +16,7 @@ import { Theme } from './ui/styleUtils';
 import { GlobalContext } from '../shared/GlobalContext';
 import { RotatingIcon } from './RotatingIcon';
 import { useTranslation } from 'react-i18next';
-
-const VerifiedIcon: React.FC = () => {
-  return (
-    <Icon
-      name="check-circle"
-      color={Theme.Colors.VerifiedIcon}
-      size={14}
-      containerStyle={{ marginStart: 4, bottom: 1 }}
-    />
-  );
-};
+import VerifiedIcon from './VerifiedIcon';
 
 const getDetails = (arg1, arg2, verifiableCredential) => {
   if (arg1 === 'Status') {

components/VcDetails.tsx

@@ -2,24 +2,14 @@ import { formatDistanceToNow } from 'date-fns';
 import React from 'react';
 import * as DateFnsLocale from '../lib/date-fns/locale';
 import { useTranslation } from 'react-i18next';
-import { Image, ImageBackground } from 'react-native';
+import { Image, ImageBackground, View } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { VC, CredentialSubject, LocalizedField } from '../types/vc';
 import { Button, Column, Row, Text } from './ui';
 import { Theme } from './ui/styleUtils';
 import { TextItem } from './ui/TextItem';
 import { VcItemTags } from './VcItemTags';
-
-const VerifiedIcon: React.FC = () => {
-  return (
-    <Icon
-      name="check-circle"
-      color={Theme.Colors.VerifiedIcon}
-      size={14}
-      containerStyle={{ marginStart: 4, bottom: 1 }}
-    />
-  );
-};
+import VerifiedIcon from './VerifiedIcon';
 
 export const VcDetails: React.FC<VcDetailsProps> = (props) => {
   const { t, i18n } = useTranslation('VcDetails');
@@ -271,29 +261,28 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
       {props.activeTab !== 1 ? (
         props.isBindingPending ? (
           <Column style={Theme.Styles.openCardBgContainer}>
-            <Row margin={'0 0 5 0'}>
+            <Row margin={'0 0 5 0'} crossAlign={'center'}>
               <Icon
                 name="shield-alert"
                 color={Theme.Colors.Icon}
                 size={30}
                 type="material-community"
               />
+              <Text
+                style={{ flex: 1 }}
+                weight="semibold"
+                size="small"
+                margin={'0 0 5 0'}
+                color={Theme.Colors.statusLabel}>
+                {t('offlineAuthDisabledHeader')}
+              </Text>
             </Row>
-
-            <Text
-              style={{ flex: 1 }}
-              weight="semibold"
-              size="small"
-              margin={'0 0 5 0'}
-              color={Theme.Colors.Details}>
-              {t('offlineAuthDisabledHeader')}
-            </Text>
             <Text
               style={{ flex: 1 }}
               weight="regular"
               size="small"
               margin={'0 0 5 0'}
-              color={Theme.Colors.Details}>
+              color={Theme.Colors.statusLabel}>
               {t('offlineAuthDisabledMessage')}
             </Text>
 
@@ -314,7 +303,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
               />
               <Text
                 numLines={1}
-                color={Theme.Colors.Details}
+                color={Theme.Colors.statusLabel}
                 weight="bold"
                 size="smaller"
                 margin="10 10 10 10"

components/VcItem.tsx

@@ -1,6 +1,12 @@
 import React, { useContext, useRef } from 'react';
 import { useInterpret, useSelector } from '@xstate/react';
-import { Pressable, Image, ImageBackground, Dimensions } from 'react-native';
+import {
+  Pressable,
+  Image,
+  ImageBackground,
+  Dimensions,
+  View,
+} from 'react-native';
 import { CheckBox, Icon } from 'react-native-elements';
 import { ActorRefFrom } from 'xstate';
 import {
@@ -17,19 +23,9 @@ import { Theme } from './ui/styleUtils';
 import { RotatingIcon } from './RotatingIcon';
 import { GlobalContext } from '../shared/GlobalContext';
 import { useTranslation } from 'react-i18next';
-
-const VerifiedIcon: React.FC = () => {
-  return (
-    <Icon
-      name="check-circle"
-      color={Theme.Colors.VerifiedIcon}
-      size={14}
-      containerStyle={{ marginStart: 4, bottom: 1 }}
-    />
-  );
-};
 import { LocalizedField } from '../types/vc';
 import { VcItemTags } from './VcItemTags';
+import VerifiedIcon from './VerifiedIcon';
 
 const getDetails = (arg1, arg2, verifiableCredential) => {
   if (arg1 === 'Status') {
@@ -71,8 +67,9 @@ const getDetails = (arg1, arg2, verifiableCredential) => {
               ? Theme.Colors.LoadingDetailsLabel
               : Theme.Colors.DetailsLabel
           }
-          weight="bold"
-          size="smaller">
+          size="smaller"
+          weight={'bold'}
+          style={Theme.Styles.vcItemLabelHeader}>
           {arg1}
         </Text>
         <Text
@@ -243,7 +240,7 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
                   style={
                     !verifiableCredential
                       ? Theme.Styles.loadingTitle
-                      : Theme.Styles.subtitle
+                      : Theme.Styles.statusLabel
                   }
                   children={t('offlineAuthDisabledHeader')}></Text>
               </Row>
@@ -264,7 +261,7 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
               <Row crossAlign="center" style={{ flex: 1 }}>
                 <WalletVerified />
                 <Text
-                  color={Theme.Colors.Details}
+                  color={Theme.Colors.statusLabel}
                   weight="semibold"
                   size="smaller"
                   margin="10 10 10 10"

components/VerifiedIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { Theme } from './ui/styleUtils';
+
+const VerifiedIcon: React.FC = () => {
+  return (
+    <View style={Theme.Styles.verifiedIconContainer}>
+      <View style={Theme.Styles.verifiedIconInner}>
+        <Icon name="check-circle" color={Theme.Colors.VerifiedIcon} size={14} />
+      </View>
+    </View>
+  );
+};
+
+export default VerifiedIcon;

components/ui/styleUtils.ts

@@ -1,8 +1,10 @@
 import { DefaultTheme } from './themes/DefaultTheme';
+import { PurpleTheme } from './themes/PurpleTheme';
+import { APPLICATION_THEME } from 'react-native-dotenv';
 
 // To change the theme, CSS theme file has to import and assign it to Theme in line no 6
-
-export const Theme = DefaultTheme;
+export const Theme =
+  APPLICATION_THEME.toLowerCase() === 'purple' ? PurpleTheme : DefaultTheme;
 
 type SpacingXY = [number, number];
 type SpacingFull = [number, number, number, number];

components/ui/themes/DefaultTheme.ts

@@ -78,6 +78,19 @@ export const DefaultTheme = {
       backgroundColor: Colors.Grey,
       borderRadius: 4,
     },
+    statusLabel: {
+      color: Colors.Black,
+    },
+    verifiedIconContainer: {
+      marginLeft: 5,
+    },
+    verifiedIconInner: {
+      backgroundColor: 'white',
+      borderRadius: 10,
+    },
+    vcItemLabelHeader: {
+      color: Colors.Orange,
+    },
     closeDetails: {
       flex: 1,
       flexDirection: 'row',
@@ -175,8 +188,6 @@ export const DefaultTheme = {
     backgroundImageContainer: {
       flex: 1,
       padding: 10,
-      borderBottomColor: Colors.Grey,
-      borderBottomWidth: 1,
     },
     successTag: {
       backgroundColor: Colors.Green,

components/ui/themes/PurpleTheme.ts

@@ -13,6 +13,7 @@ const Colors = {
   Red: '#EB5757',
   Green: '#219653',
   Purple: '#70308C',
+  Purple2: '#AEA7FF',
   Transparent: 'transparent',
   Warning: '#f0ad4e',
 };
@@ -23,8 +24,9 @@ export const PurpleTheme = {
   Colors: {
     TabItemText: Colors.Purple,
     Details: Colors.White,
-    DetailsLabel: Colors.White,
+    DetailsLabel: Colors.Purple2,
     LoadingDetailsLabel: Colors.Black,
+    statusLabel: Colors.Black,
     AddIdBtnBg: Colors.Purple,
     AddIdBtnTxt: Colors.Purple,
     ClearAddIdBtnBg: 'transparent',
@@ -77,6 +79,19 @@ export const PurpleTheme = {
       backgroundColor: Colors.Grey,
       borderRadius: 4,
     },
+    statusLabel: {
+      color: Colors.Black,
+    },
+    verifiedIconContainer: {
+      marginLeft: 5,
+    },
+    verifiedIconInner: {
+      backgroundColor: 'white',
+      borderRadius: 10,
+    },
+    vcItemLabelHeader: {
+      color: Colors.Purple2,
+    },
     closeDetails: {
       flex: 1,
       flexDirection: 'row',
@@ -136,8 +151,6 @@ export const PurpleTheme = {
     backgroundImageContainer: {
       flex: 1,
       padding: 10,
-      borderBottomColor: Colors.Grey,
-      borderBottomWidth: 1,
     },
     successTag: {
       backgroundColor: Colors.Green,
@@ -334,7 +347,7 @@ export const PurpleTheme = {
     radius: {
       flex: 1,
       borderRadius: 10,
-      backgroundColor: Colors.Orange,
+      backgroundColor: Colors.Purple,
     },
   }),
   OIDCAuthStyles: StyleSheet.create({

ios/Podfile.lock

@@ -274,7 +274,7 @@ PODS:
   - React-jsinspector (0.64.4)
   - react-native-netinfo (7.1.3):
     - React-Core
-  - react-native-openid4vp-ble (0.3.5):
+  - react-native-openid4vp-ble (0.3.7):
     - CrcSwift (~> 0.0.3)
     - GzipSwift
     - React-Core
@@ -665,7 +665,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 8c077bef1c64430b6034f27df1000d194551e2eb
   React-jsinspector: d4f6973dd474357dbaaf6f52f31ffc713bf3e766
   react-native-netinfo: 42c0965fca99069b92e3f7360ab2d425985e5104
-  react-native-openid4vp-ble: d689ca3519866229745df2148ce4f4e4c8f54dff
+  react-native-openid4vp-ble: b478fc7f3214e99aaf38e527390958ec0bd59876
   react-native-restart: 45c8dca02491980f2958595333cbccd6877cb57e
   react-native-rsa-native: 12132eb627797529fdb1f0d22fd0f8f9678df64a
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057