feat(INJI-134): [Bhargavi] update card logo with new logo

Issue Link https://mosip.atlassian.net/browse/INJI-134

components/VcItemContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Image, ImageBackground } from 'react-native';
+import { Image, ImageBackground, View } from 'react-native';
 import { getLocalizedField } from '../i18n';
 import { VerifiableCredential } from '../types/vc';
 import { RotatingIcon } from './RotatingIcon';
@@ -95,7 +95,12 @@ export const VcItemContent: React.FC<VcItemContentProps> = ({
           ? Theme.Styles.vertloadingContainer
           : Theme.Styles.backgroundImageContainer
       }>
-      <Row style={Theme.Styles.homeCloseCardDetailsHeader}>
+      <Row
+        style={
+          !verifiableCredential
+            ? Theme.Styles.loadingCardDetailsHeader
+            : Theme.Styles.cardDetailsHeader
+        }>
         <Column>
           <Text
             color={
@@ -119,16 +124,22 @@ export const VcItemContent: React.FC<VcItemContentProps> = ({
             {t('nationalCard')}
           </Text>
         </Column>
-        <Image
-          source={Theme.MosipLogo}
-          style={Theme.Styles.logo}
-          resizeMethod="auto"
-        />
+        <View style={Theme.Styles.mosipLogoContainer}>
+          <Image
+            source={Theme.MosipLogo}
+            style={Theme.Styles.logo}
+            resizeMethod="auto"
+          />
+        </View>
       </Row>
       <Row
         crossAlign="center"
         margin="5 0 0 0"
-        style={!verifiableCredential ? Theme.Styles.loadingContainer : null}>
+        style={
+          !verifiableCredential
+            ? Theme.Styles.loadingCardDetailsContainer
+            : Theme.Styles.cardDetailsContainer
+        }>
         <Column
           style={
             !verifiableCredential

components/ui/themes/DefaultTheme.ts

@@ -110,6 +110,13 @@ export const DefaultTheme = {
       backgroundColor: Colors.Grey6,
       borderRadius: 4,
     },
+    loadingCardDetailsContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      backgroundColor: Colors.Grey6,
+      borderRadius: 4,
+    },
+    cardDetailsContainer: {},
     vertloadingContainer: {
       flex: 1,
       backgroundColor: Colors.Grey6,
@@ -217,13 +224,18 @@ export const DefaultTheme = {
       justifyContent: 'space-between',
     },
     logo: {
-      height: 36,
-      width: 30,
+      height: 35,
+      width: 90,
     },
-    homeCloseCardDetailsHeader: {
+    loadingCardDetailsHeader: {
       flex: 1,
       justifyContent: 'space-between',
     },
+    cardDetailsHeader: {
+      flex: 1,
+      justifyContent: 'space-between',
+    },
+    mosipLogoContainer: {},
     details: {
       width: 290,
       marginLeft: 110,

components/ui/themes/PurpleTheme.ts

@@ -111,11 +111,22 @@ export const PurpleTheme = {
       backgroundColor: Colors.Grey6,
       borderRadius: 4,
     },
+    loadingCardDetailsContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      backgroundColor: Colors.Grey6,
+      borderRadius: 4,
+      padding: 5,
+      paddingTop: 0,
+    },
+    cardDetailsContainer: {
+      padding: 10,
+      paddingTop: 0,
+    },
     vertloadingContainer: {
       flex: 1,
       backgroundColor: Colors.Grey6,
       borderRadius: 4,
-      padding: 5,
     },
     closeDetailsContainer: {
       flex: 1,
@@ -164,7 +175,6 @@ export const PurpleTheme = {
     },
     backgroundImageContainer: {
       flex: 1,
-      padding: 10,
     },
     successTag: {
       backgroundColor: Colors.Green,
@@ -186,12 +196,30 @@ export const PurpleTheme = {
       justifyContent: 'space-between',
     },
     logo: {
-      height: 36,
-      width: 36,
+      height: 33,
+      width: 90,
     },
-    homeCloseCardDetailsHeader: {
+    loadingCardDetailsHeader: {
       flex: 1,
       justifyContent: 'space-between',
+      padding: 5,
+      paddingRight: 0,
+      paddingBottom: 0,
+    },
+    cardDetailsHeader: {
+      flex: 1,
+      justifyContent: 'space-between',
+      padding: 10,
+      paddingRight: 0,
+      paddingBottom: 0,
+    },
+    mosipLogoContainer: {
+      backgroundColor: 'white',
+      borderBottomLeftRadius: 50,
+      borderTopLeftRadius: 50,
+      padding: 2,
+      alignItems: 'center',
+      justifyContent: 'center',
     },
     details: {
       width: 290,

screens/WelcomeScreen.tsx

@@ -17,7 +17,6 @@ export const WelcomeScreen: React.FC<RootRouteProps> = (props) => {
       backgroundColor={Theme.Colors.whiteBackgroundColor}>
       <Centered fill>
         <Logo height={182} />
-        <Text margin="16 0 0 0">{t('title')}</Text>
       </Centered>
       <Button
         margin="0 0 32"