From ea73f05b653ad252e9d63ecbb892b9a744a03f98 Mon Sep 17 00:00:00 2001
From: anil_majji <majjianilkumar050@gmail.com>
Date: Fri, 2 Jun 2023 19:00:25 +0530
Subject: [PATCH] Added magnifier zoom icon

---
 assets/magnifier-zoom.png            | Bin 0 -> 325 bytes
 components/QrCodeOverlay.tsx         |   8 +++++++-
 components/VcDetails.tsx             |   3 ++-
 components/ui/themes/DefaultTheme.ts |  16 ++++++++++------
 4 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 assets/magnifier-zoom.png

diff --git a/assets/magnifier-zoom.png b/assets/magnifier-zoom.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbbc2153b9e56507f682839c9741c066563ec52e
GIT binary patch
literal 325
zcmV-L0lNN)P)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H00004b3#c}2nYxW
zd<bNS0002|Nkl<ZC{vY^?G?d55JjZ}B~XE=03GN+R6qxGfC{7pDnJEvkf=a9;N6^=
zwb_5!bKcp_&fNLhWP|^j>$s7Yc2#RHrIXY|e(f={i$eQZx=I%bh(KGZk`^fph{H`<
zTZTCJP#<^cV{otml7ZzVdLXYRm+dJ{rI(W!zfm@ziFC9|-r8#eNU%>qdY~jkdB6{;
zG`Xz<5)lW#Br838sU%^l3<|$?VFchA#^x~6UPOTa@Zml@3!qQVdkq7yEIaKy6T!mr
za)4=mCIJ$eY5LSxI(MEc?t^GJ$A1pN2tqb~kN~G(TupkW*Mq}-KmwIkRo)i_W**HC
XiQ_#F^JM#h00000NkvXXu0mjf`^<lb

literal 0
HcmV?d00001

diff --git a/components/QrCodeOverlay.tsx b/components/QrCodeOverlay.tsx
index d610ddea..1af9814d 100644
--- a/components/QrCodeOverlay.tsx
+++ b/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}
diff --git a/components/VcDetails.tsx b/components/VcDetails.tsx
index ca58157b..7819c3ab 100644
--- a/components/VcDetails.tsx
+++ b/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>
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
index ec119147..31a73c79 100644
--- a/components/ui/themes/DefaultTheme.ts
+++ b/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'),