Merge branch 'develop' into new-error-overlay-for-sql-full-error

tw-mosip · Mar 14, 2023 · 5121dc3 · 5121dc3
2 parents 4194b4f + 573ce4b
commit 5121dc3
Show file tree

Hide file tree

Showing 48 changed files with 320 additions and 214 deletions.
diff --git a/.env b/.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
diff --git a/.github/workflows/android-custom-build.yml b/.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:

diff --git a/components/EditableListItem.tsx b/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"
@@ -35,6 +38,7 @@ export const EditableListItem: React.FC<EditableListItemProps> = (props) => {
             autoFocus
             value={newValue}
             onChangeText={setNewValue}
+            selectionColor={Theme.Colors.Cursor}
             inputStyle={{
               textAlign: I18nManager.isRTL ? 'right' : 'left',
             }}
@@ -64,4 +68,5 @@ interface EditableListItemProps {
   value: string;
   Icon: string;
   onEdit: (newValue: string) => void;
+  display?: 'none' | 'flex';
 }
diff --git a/components/QrScanner.tsx b/components/QrScanner.tsx
@@ -46,7 +46,7 @@ export const QrScanner: React.FC<QrScannerProps> = (props) => {
   if (hasPermission === false) {
     return (
       <Column fill align="space-between">
-        <Text align="center" color={Theme.Colors.errorMessage}>
+        <Text align="center" margin="0 16" color={Theme.Colors.errorMessage}>
           {t('missingPermissionText')}
         </Text>
         <Button title={t('allowCameraButton')} onPress={openSettings} />

diff --git a/components/SingleVcItem.tsx b/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') {

diff --git a/components/TextEditOverlay.tsx b/components/TextEditOverlay.tsx
@@ -18,7 +18,12 @@ export const TextEditOverlay: React.FC<EditOverlayProps> = (props) => {
           <Text weight="semibold" margin="0 0 16 0">
             {props.label}
           </Text>
-          <Input autoFocus value={value} onChangeText={setValue} />
+          <Input
+            autoFocus
+            value={value}
+            selectionColor={Theme.Colors.Cursor}
+            onChangeText={setValue}
+          />
           <Row>
             <Button
               fill

diff --git a/components/VcDetails.tsx b/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"

diff --git a/components/VcItem.tsx b/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"

diff --git a/components/VerifiedIcon.tsx b/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;
diff --git a/components/ui/styleUtils.ts b/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];

diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -60,6 +60,7 @@ export const DefaultTheme = {
     OnboardingCloseIcon: Colors.White,
     WarningIcon: Colors.Warning,
     ProfileIconBg: Colors.LightOrange,
+    Cursor: Colors.Orange,
   },
   Styles: StyleSheet.create({
     title: {
@@ -78,6 +79,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 +189,6 @@ export const DefaultTheme = {
     backgroundImageContainer: {
       flex: 1,
       padding: 10,
-      borderBottomColor: Colors.Grey,
-      borderBottomWidth: 1,
     },
     successTag: {
       backgroundColor: Colors.Green,