changing Vcitem and Vcdetails layout

components/VcDetails.tsx

@@ -2,13 +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';
+import QRCode from 'react-native-qrcode-svg';
 
 const VerifiedIcon: React.FC = () => {
   return (
@@ -38,33 +39,29 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
         borderRadius={10}
         style={Theme.Styles.openCardBgContainer}
         source={Theme.OpenCard}>
-        <Row style={Theme.Styles.openDetailsHeader}>
-          <Column margin={'0 0 0 10'}>
-            <Text
-              weight="bold"
-              size="smaller"
-              color={Theme.Colors.DetailsLabel}>
-              {t('idType')}
-            </Text>
-            <Text weight="bold" size="smaller" color={Theme.Colors.Details}>
-              {t('nationalCard')}
-            </Text>
+        <Row align="space-between">
+          <Column align="space-evenly" crossAlign="center">
+            <Image
+              source={
+                props.vc?.credential.biometrics?.face
+                  ? { uri: props.vc?.credential.biometrics.face }
+                  : Theme.ProfileIcon
+              }
+              style={Theme.Styles.openCardImage}
+            />
+            <Column margin="20 0 0 0">
+              <Image source={Theme.MosipLogo} style={Theme.Styles.logo} />
+            </Column>
+            <Column margin="20 0 0 0">
+              <QRCode
+                size={90}
+                value={String(props.vc.credential)}
+                backgroundColor={Theme.Colors.QRCodeBackgroundColor}
+              />
+            </Column>
           </Column>
-          <Image source={Theme.MosipLogo} style={Theme.Styles.logo} />
-        </Row>
-
-        <Row style={Theme.Styles.openDetailsContainer}>
-          <Image
-            source={
-              props.vc?.credential.biometrics?.face
-                ? { uri: props.vc?.credential.biometrics.face }
-                : Theme.ProfileIcon
-            }
-            style={Theme.Styles.openCardImage}
-          />
-
-          <Column style={Theme.Styles.labelPartContainer}>
-            <Column fill>
+          <Column align="space-evenly">
+            <Column>
               <Text
                 weight="bold"
                 size="smaller"
@@ -80,173 +77,190 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 )}
               </Text>
             </Column>
+            <Row>
+              <Column>
+                <Column>
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    color={Theme.Colors.DetailsLabel}>
+                    {t('idType')}
+                  </Text>
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    color={Theme.Colors.Details}>
+                    {t('nationalCard')}
+                  </Text>
+                </Column>
+                {uin ? (
+                  <Column margin="20 0 0 0">
+                    <Text
+                      weight="bold"
+                      size="smaller"
+                      color={Theme.Colors.DetailsLabel}>
+                      {t('uin')}
+                    </Text>
+                    <Text
+                      weight="semibold"
+                      size="smaller"
+                      color={Theme.Colors.Details}>
+                      {uin}
+                    </Text>
+                  </Column>
+                ) : null}
 
-            {uin ? (
-              <Column fill style={Theme.Styles.labelPart}>
-                <Text
-                  weight="bold"
-                  size="smaller"
-                  color={Theme.Colors.DetailsLabel}>
-                  {t('uin')}
-                </Text>
-                <Text
-                  weight="semibold"
-                  size="smaller"
-                  color={Theme.Colors.Details}>
-                  {uin}
-                </Text>
+                {vid ? (
+                  <Column margin="20 0 0 0">
+                    <Text
+                      weight="bold"
+                      size="smaller"
+                      color={Theme.Colors.DetailsLabel}>
+                      {t('vid')}
+                    </Text>
+                    <Text
+                      weight="semibold"
+                      size="smaller"
+                      color={Theme.Colors.Details}>
+                      {vid}
+                    </Text>
+                  </Column>
+                ) : null}
+                <Column margin="20 0 0 0">
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    color={Theme.Colors.DetailsLabel}>
+                    {t('dateOfBirth')}
+                  </Text>
+                  <Text
+                    weight="semibold"
+                    size="smaller"
+                    color={Theme.Colors.Details}>
+                    {new Date(
+                      getLocalizedField(
+                        props.vc?.verifiableCredential.credentialSubject
+                          .dateOfBirth
+                      )
+                    ).toLocaleDateString()}
+                  </Text>
+                </Column>
               </Column>
-            ) : null}
-
-            {vid ? (
-              <Column fill style={Theme.Styles.labelPart}>
-                <Text
-                  weight="bold"
-                  size="smaller"
-                  color={Theme.Colors.DetailsLabel}>
-                  {t('vid')}
-                </Text>
-                <Text
-                  weight="semibold"
-                  size="smaller"
-                  color={Theme.Colors.Details}>
-                  {vid}
-                </Text>
+              <Column margin="0 0 0 40">
+                <Column>
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    color={Theme.Colors.DetailsLabel}>
+                    {t('gender')}
+                  </Text>
+                  <Text
+                    weight="semibold"
+                    size="smaller"
+                    color={Theme.Colors.Details}>
+                    {getLocalizedField(
+                      props.vc?.verifiableCredential.credentialSubject.gender
+                    )}
+                  </Text>
+                </Column>
+                <Column margin="20 0 0 0">
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    color={Theme.Colors.DetailsLabel}>
+                    {t('generatedOn')}
+                  </Text>
+                  <Text
+                    weight="semibold"
+                    size="smaller"
+                    color={Theme.Colors.Details}>
+                    {new Date(props.vc?.generatedOn).toLocaleDateString()}
+                  </Text>
+                </Column>
+                <Column margin="20 0 0 0">
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    color={Theme.Colors.DetailsLabel}>
+                    {t('status')}
+                  </Text>
+                  <Row>
+                    <Text
+                      weight="semibold"
+                      size="smaller"
+                      color={Theme.Colors.Details}>
+                      {t('valid')}
+                    </Text>
+                    {props.vc?.isVerified && <VerifiedIcon />}
+                  </Row>
+                </Column>
+                <Column margin="20 0 0 0">
+                  <Text
+                    weight="bold"
+                    size="smaller"
+                    color={Theme.Colors.DetailsLabel}>
+                    {t('phoneNumber')}
+                  </Text>
+                  <Text
+                    weight="semibold"
+                    size="smaller"
+                    color={Theme.Colors.Details}>
+                    {getLocalizedField(
+                      props.vc?.verifiableCredential.credentialSubject.phone
+                    )}
+                  </Text>
+                </Column>
               </Column>
-            ) : null}
-
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                weight="bold"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('generatedOn')}
-              </Text>
-              <Text
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {new Date(props.vc?.generatedOn).toLocaleDateString()}
-              </Text>
-            </Column>
-
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                weight="bold"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('status')}
-              </Text>
-              <Row>
-                <Text
-                  weight="semibold"
-                  size="smaller"
-                  color={Theme.Colors.Details}>
-                  {t('valid')}
-                </Text>
-                {props.vc?.isVerified && <VerifiedIcon />}
-              </Row>
-            </Column>
-
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                weight="bold"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('gender')}
-              </Text>
-              <Text
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {getLocalizedField(
-                  props.vc?.verifiableCredential.credentialSubject.gender
-                )}
-              </Text>
-            </Column>
-
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                weight="bold"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('dateOfBirth')}
-              </Text>
-              <Text
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {new Date(
-                  getLocalizedField(
-                    props.vc?.verifiableCredential.credentialSubject.dateOfBirth
-                  )
-                ).toLocaleDateString()}
-              </Text>
-            </Column>
-
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                weight="bold"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('phoneNumber')}
-              </Text>
-              <Text
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {getLocalizedField(
-                  props.vc?.verifiableCredential.credentialSubject.phone
-                )}
-              </Text>
-            </Column>
-
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                weight="bold"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('email')}
-              </Text>
-              <Row>
-                <Text
-                  style={
-                    props.vc?.verifiableCredential.credentialSubject.email
-                      .length > 25
-                      ? { flex: 1 }
-                      : { flex: 0 }
-                  }
-                  weight="semibold"
-                  size="smaller"
-                  color={Theme.Colors.Details}>
-                  {getLocalizedField(
-                    props.vc?.verifiableCredential.credentialSubject.email
-                  )}
-                </Text>
-              </Row>
-            </Column>
-
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                weight="bold"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('address')}
-              </Text>
-              <Row>
-                <Text
-                  style={{ flex: 1 }}
-                  weight="semibold"
-                  size="smaller"
-                  color={Theme.Colors.Details}>
-                  {getFullAddress(
-                    props.vc?.verifiableCredential.credentialSubject
-                  )}
-                </Text>
-              </Row>
-            </Column>
+            </Row>
           </Column>
         </Row>
+        <View style={Theme.Styles.hrLine}></View>
+        <Column>
+          <Column fill style={Theme.Styles.labelPart}>
+            <Text
+              weight="bold"
+              size="smaller"
+              color={Theme.Colors.DetailsLabel}>
+              {t('email')}
+            </Text>
+            <Row>
+              <Text
+                style={
+                  props.vc?.verifiableCredential.credentialSubject.email
+                    .length > 25
+                    ? { flex: 1 }
+                    : { flex: 0 }
+                }
+                weight="semibold"
+                size="smaller"
+                color={Theme.Colors.Details}>
+                {getLocalizedField(
+                  props.vc?.verifiableCredential.credentialSubject.email
+                )}
+              </Text>
+            </Row>
+          </Column>
+
+          <Column style={Theme.Styles.labelPart}>
+            <Text
+              weight="bold"
+              size="smaller"
+              color={Theme.Colors.DetailsLabel}>
+              {t('address')}
+            </Text>
+            <Row>
+              <Text
+                style={{ flex: 1 }}
+                weight="semibold"
+                size="smaller"
+                color={Theme.Colors.Details}>
+                {getFullAddress(
+                  props.vc?.verifiableCredential.credentialSubject
+                )}
+              </Text>
+            </Row>
+          </Column>
+        </Column>
         <VcItemTags tag={props.vc?.tag} />
       </ImageBackground>
 

components/VcItem.tsx

@@ -61,6 +61,33 @@ const getDetails = (arg1, arg2, verifiableCredential) => {
         </Row>
       </Column>
     );
+  } else if (arg1 === 'Full name') {
+    return (
+      <Column padding="0 200 0 0" margin="0 10 0 0">
+        <Text
+          color={
+            !verifiableCredential
+              ? Theme.Colors.LoadingDetailsLabel
+              : Theme.Colors.DetailsLabel
+          }
+          weight="bold"
+          size="smaller">
+          {arg1}
+        </Text>
+        <Text
+          numLines={4}
+          color={Theme.Colors.Details}
+          weight="bold"
+          size="smaller"
+          style={
+            !verifiableCredential
+              ? Theme.Styles.loadingTitle
+              : Theme.Styles.subtitle
+          }>
+          {!verifiableCredential ? '' : arg2}
+        </Text>
+      </Column>
+    );
   } else {
     return (
       <Column>
@@ -167,84 +194,74 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
             ? Theme.Styles.vertloadingContainer
             : Theme.Styles.backgroundImageContainer
         }>
-        <Column>
-          <Row align="space-between">
-            <Row>
-              <Image
-                source={
-                  !verifiableCredential
-                    ? Theme.ProfileIcon
-                    : { uri: context.credential.biometrics.face }
-                }
-                style={Theme.Styles.closeCardImage}
-              />
-              <Column margin="0 0 0 10">
-                {getDetails(t('fullName'), fullName, verifiableCredential)}
+        {!verifiableCredential ? (
+          <Column align="space-between" crossAlign="center" padding="50">
+            <RotatingIcon name="sync" color={Theme.Colors.Icon} />
+            <Text margin="20 0 0 0">{t('downloading')}</Text>
+          </Column>
+        ) : (
+          <Column>
+            <Row align="space-between">
+              <Row>
+                <Image
+                  source={{ uri: context.credential.biometrics.face }}
+                  style={Theme.Styles.closeCardImage}
+                />
+                <Column margin="0 0 0 10">
+                  {getDetails(t('fullName'), fullName, verifiableCredential)}
 
-                <Column margin="10 0 0 0">
-                  <Text
-                    color={
-                      !verifiableCredential
-                        ? Theme.Colors.LoadingDetailsLabel
-                        : Theme.Colors.DetailsLabel
-                    }
-                    weight="bold"
-                    size="smaller"
-                    align="left">
-                    {t('idType')}
-                  </Text>
-                  <Text
-                    weight="bold"
-                    color={Theme.Colors.Details}
-                    size="smaller"
-                    style={
-                      !verifiableCredential
-                        ? Theme.Styles.loadingTitle
-                        : Theme.Styles.subtitle
-                    }>
-                    {t('nationalCard')}
-                  </Text>
+                  <Column margin="10 0 0 0">
+                    <Text
+                      color={Theme.Colors.DetailsLabel}
+                      weight="bold"
+                      size="smaller"
+                      align="left">
+                      {t('idType')}
+                    </Text>
+                    <Text
+                      weight="bold"
+                      color={Theme.Colors.Details}
+                      size="smaller"
+                      style={Theme.Styles.subtitle}>
+                      {t('nationalCard')}
+                    </Text>
+                  </Column>
                 </Column>
+              </Row>
+
+              <Column>
+                {verifiableCredential ? (
+                  selectableOrCheck
+                ) : (
+                  <RotatingIcon name="sync" color={Theme.Colors.rotatingIcon} />
+                )}
               </Column>
             </Row>
 
-            <Column>
-              {verifiableCredential ? (
-                selectableOrCheck
-              ) : (
-                <RotatingIcon name="sync" color={Theme.Colors.rotatingIcon} />
-              )}
-            </Column>
-          </Row>
+            <Row align="space-between" margin="5 0 0 0">
+              <Column>
+                {uin ? getDetails(t('uin'), uin, verifiableCredential) : null}
+                {vid ? getDetails(t('vid'), vid, verifiableCredential) : null}
+                {getDetails(
+                  t('generatedOn'),
+                  generatedOn,
+                  verifiableCredential
+                )}
+              </Column>
+              <Column>
+                {getDetails(t('status'), isvalid, verifiableCredential)}
+              </Column>
+              <Column style={Theme.Styles.closecardMosipLogo}>
+                <Image
+                  source={Theme.MosipLogo}
+                  style={Theme.Styles.logo}
+                  resizeMethod="auto"
+                />
+              </Column>
+            </Row>
+          </Column>
+        )}
 
-          <Row
-            align="space-between"
-            margin="5 0 0 0"
-            style={
-              !verifiableCredential ? Theme.Styles.loadingContainer : null
-            }>
-            <Column>
-              {uin ? getDetails(t('uin'), uin, verifiableCredential) : null}
-              {vid ? getDetails(t('vid'), vid, verifiableCredential) : null}
-              {!verifiableCredential
-                ? getDetails(t('id'), uin || vid, verifiableCredential)
-                : null}
-              {getDetails(t('generatedOn'), generatedOn, verifiableCredential)}
-            </Column>
-            <Column>
-              {verifiableCredential
-                ? getDetails(t('status'), isvalid, verifiableCredential)
-                : null}
-            </Column>
-            <Column style={Theme.Styles.closecardMosipLogo}>
-              <Image
-                source={Theme.MosipLogo}
-                style={Theme.Styles.logo}
-                resizeMethod="auto"
-              />
-            </Column>
-          </Row>
-        </Column>
         <VcItemTags tag={tag} />
       </ImageBackground>
       <Row>

components/ui/themes/DefaultTheme.ts

@@ -198,8 +198,8 @@ export const DefaultTheme = {
       justifyContent: 'space-between',
     },
     logo: {
-      height: 36,
-      width: 30,
+      height: 46,
+      width: 40,
     },
     homeCloseCardDetailsHeader: {
       flex: 1,
@@ -285,6 +285,11 @@ export const DefaultTheme = {
     placeholder: {
       fontFamily: 'Poppins_400Regular',
     },
+    hrLine: {
+      borderBottomColor: 'black',
+      borderBottomWidth: 1,
+      marginTop: 10,
+    },
   }),
   PinInputStyle: StyleSheet.create({
     input: {

components/ui/themes/PurpleTheme.ts

@@ -159,8 +159,8 @@ export const PurpleTheme = {
       justifyContent: 'space-between',
     },
     logo: {
-      height: 36,
-      width: 36,
+      height: 46,
+      width: 40,
     },
     homeCloseCardDetailsHeader: {
       flex: 1,
@@ -229,6 +229,11 @@ export const PurpleTheme = {
     placeholder: {
       fontFamily: 'Poppins_400Regular',
     },
+    hrLine: {
+      borderBottomColor: 'black',
+      borderBottomWidth: 1,
+      marginTop: 10,
+    },
   }),
   PinInputStyle: StyleSheet.create({
     input: {

locales/en.json

@@ -41,7 +41,7 @@
     "gender": "Gender",
     "dateOfBirth": "Date of birth",
     "phoneNumber": "Phone number",
-    "email": "Email",
+    "email": "Email Address",
     "address": "Address",
     "reasonForSharing": "Reason for sharing",
     "idType": "ID type",
@@ -59,7 +59,8 @@
     "yes_confirm": "Yes, I Confirm",
     "no": "No",
     "Alert": "Alert",
-    "ok": "Okay"
+    "ok": "Okay",
+    "downloading":"Downloading Your Card"
   },
   "AuthScreen": {
     "header": "Would you like to use biometrics to unlock the application?",
@@ -145,6 +146,7 @@
     "noReceivedVcsText": "Tap on Request below to receive {{vcLabel}}"
   },
   "ViewVcModal": {
+    "title":"ID Details",
     "cancel": "Cancel",
     "lock": "Lock",
     "unlock": "Unlock",

screens/Home/ViewVcModal.tsx

@@ -35,19 +35,8 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
     <Modal
       isVisible={props.isVisible}
       onDismiss={props.onDismiss}
-      headerTitle={
-        controller.vc.verifiableCredential.credentialSubject.UIN
-          ? controller.vc.verifiableCredential.credentialSubject.UIN
-          : controller.vc.verifiableCredential.credentialSubject.VID
-      }
-      headerElevation={2}
-      headerRight={
-        <DropdownIcon
-          icon="dots-vertical"
-          idType={controller.vc.idType}
-          items={DATA}
-        />
-      }>
+      headerTitle={t('title')}
+      headerElevation={2}>
       <Column scroll>
         <Column fill>
           <VcDetails