Added magnifier zoom icon

components/QrCodeOverlay.tsx

@@ -4,7 +4,7 @@ import { Icon, Overlay } from 'react-native-elements';
 import { Centered, Column, Row, Text } from './ui';
 import QRCode from 'react-native-qrcode-svg';
 import { Theme } from './ui/styleUtils';
-import { t } from 'i18next';
+import { Image } from 'react-native';
 import { useTranslation } from 'react-i18next';
 
 export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = (props) => {
@@ -23,6 +23,12 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = (props) => {
             backgroundColor={Theme.Colors.QRCodeBackgroundColor}
           />
         </Row>
+        <Row
+          align="flex-end"
+          margin="-30 0 0 60"
+          style={Theme.QrCodeStyles.magnifierZoom}>
+          <Image source={Theme.MagnifierZoom} />
+        </Row>
       </Pressable>
       <Overlay
         isVisible={isQrOverlayVisible}

components/VcDetails.tsx

@@ -49,10 +49,11 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
               }
               style={Theme.Styles.openCardImage}
             />
+
+            <QrCodeOverlay qrCodeDetailes={String(props.vc.credential)} />
             <Column margin="20 0 0 0">
               <Image source={Theme.MosipLogo} style={Theme.Styles.logo} />
             </Column>
-            <QrCodeOverlay qrCodeDetailes={String(props.vc.credential)} />
           </Column>
           <Column align="space-evenly">
             <Column>

components/ui/themes/DefaultTheme.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import { Dimensions, StyleSheet, ViewStyle } from 'react-native';
 import { Spacing } from '../styleUtils';
+import { colors } from 'react-native-elements';
 
 const Colors = {
   Black: '#000000',
@@ -272,7 +273,7 @@ export const DefaultTheme = {
       justifyContent: 'space-between',
     },
     logo: {
-      height: 46,
+      height: 48,
       width: 40,
     },
     homeCloseCardDetailsHeader: {
@@ -384,12 +385,14 @@ export const DefaultTheme = {
     },
   }),
   QrCodeStyles: StyleSheet.create({
-    magnifierIcon: {
-      position: 'relative',
-      alignSelf: 'flex-end',
+    magnifierZoom: {
       backgroundColor: Colors.White,
-      width: 36,
-      height: 36,
+      width: 30,
+      height: 30,
+      alignItems: 'center',
+      padding: 5,
+      borderTopLeftRadius: 11,
+      elevation: 4,
     },
     expandedQrCode: {
       backgroundColor: Colors.White,
@@ -915,6 +918,7 @@ export const DefaultTheme = {
   InjiProgressingLogo: require('../../../assets/progressing-logo.png'),
   LockIcon: require('../../../assets/lock-icon.png'),
   InjiHomeLogo: require('../../../assets/inji-home-logo.png'),
+  MagnifierZoom: require('../../../assets/magnifier-zoom.png'),
   HelpIcon: require('../../../assets/help-icon.png'),
   sharingIntro: require('../../../assets/Secure-Sharing.png'),
   walletIntro: require('../../../assets/intro-wallet-binding.png'),