From 60fec928ee18d91aaaeff3dcffc55d4a106ca64b Mon Sep 17 00:00:00 2001
From: Sairam Girirao <105053210+Sairam-g9162@users.noreply.github.com>
Date: Fri, 24 Jan 2025 12:20:55 +0530
Subject: [PATCH] [INJIMOB-2525]: Fix help button design consistentcy across
 different screens (#1753)

* [INJIMOB-2525]:Changed Helpscreen button in keymanagement page and backupandrestore and also changed style in homescreenlayout to fix overlapping of Inji logo with help button

Signed-off-by: sairam-girirao_infosys <sairam.girirao@infosys.com>

* Fix help icon style consistency across pages

Signed-off-by: sairam-girirao_infosys <sairam.girirao@infosys.com>

* Fix help Icon consistency across pages

Signed-off-by: sairam-girirao_infosys <sairam.girirao@infosys.com>

* Fix Code for HelpICon is Redundant across the code

Signed-off-by: sairam-girirao_infosys <sairam.girirao@infosys.com>

---------

Signed-off-by: sairam-girirao_infosys <sairam.girirao@infosys.com>
---
 components/ui/HelpIcon.tsx                    | 18 ++++++++++++++
 components/ui/themes/DefaultTheme.ts          | 10 ++++----
 components/ui/themes/PurpleTheme.ts           | 10 ++++----
 screens/Home/ViewVcModal.tsx                  | 15 +++---------
 screens/Settings/KeyManagementScreen.tsx      | 15 ++++--------
 .../BackupAndRestoreScreen.tsx                | 24 ++-----------------
 6 files changed, 37 insertions(+), 55 deletions(-)
 create mode 100644 components/ui/HelpIcon.tsx

diff --git a/components/ui/HelpIcon.tsx b/components/ui/HelpIcon.tsx
new file mode 100644
index 00000000..396c2785
--- /dev/null
+++ b/components/ui/HelpIcon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { Theme } from './styleUtils';
+import { SvgImage } from './svg';
+
+export const HelpIcon = () => {
+  return (  
+    <LinearGradient
+      style={{borderRadius: 8, marginRight: 4}}
+      colors={Theme.Colors.GradientColorsLight}
+      start={Theme.LinearGradientDirection.start}
+      end={Theme.LinearGradientDirection.end}>
+      <View testID="help"></View>
+      <View style={Theme.Styles.IconContainer}>{SvgImage.questionIcon()}</View>
+    </LinearGradient>
+  );
+};
\ No newline at end of file
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
index 581e233f..4a759d02 100644
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -477,7 +477,7 @@ export const DefaultTheme = {
       padding: 6,
       width: 25,
       marginRight: 4,
-      marginLeft: 10,
+      marginLeft: 4,
       alignItems: 'center',
       justifyContent: 'center',
       height: 36,
@@ -1597,10 +1597,10 @@ export const DefaultTheme = {
       borderRadius: 8,
       justifyContent: 'center',
       alignItems: 'center',
-      paddingLeft: 16,
-      paddingRight: 16,
-      paddingBottom: 10,
-      paddingTop: 10,
+      paddingLeft: 7,
+      paddingRight: 7,
+      paddingBottom: 7,
+      paddingTop: 7,
     },
     rowStyle: {
       justifyContent: 'space-between',
diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
index 2d7ad2db..0828f209 100644
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -484,7 +484,7 @@ export const PurpleTheme = {
       alignItems: 'center',
       justifyContent: 'center',
       marginRight: 4,
-      marginLeft: 10,
+      marginLeft: 4,
       height: 36,
       borderRadius: 10,
       backgroundColor: Colors.LightPurple,
@@ -1605,10 +1605,10 @@ export const PurpleTheme = {
       backgroundColor: Colors.LightPurple,
       justifyContent: 'center',
       alignItems: 'center',
-      paddingLeft: 16,
-      paddingRight: 16,
-      paddingBottom: 10,
-      paddingTop: 10,
+      paddingLeft: 7,
+      paddingRight: 7,
+      paddingBottom: 7,
+      paddingTop: 7,
     },
     rowStyle: {
       justifyContent: 'space-between',
diff --git a/screens/Home/ViewVcModal.tsx b/screens/Home/ViewVcModal.tsx
index d02e9453..62688af8 100644
--- a/screens/Home/ViewVcModal.tsx
+++ b/screens/Home/ViewVcModal.tsx
@@ -34,6 +34,7 @@ import {
   BannerStatus,
 } from '../../components/BannerNotification';
 import {VCProcessor} from '../../components/VC/common/VCProcessor';
+import { HelpIcon } from '../../components/ui/HelpIcon';
 
 export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
   const {t} = useTranslation('ViewVcModal');
@@ -90,18 +91,8 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
     return flow === 'downloadedVc' ? (
       <Row align="space-between">
         <HelpScreen
-          triggerComponent={
-            <LinearGradient
-              style={{borderRadius: 8, marginRight: 4}}
-              colors={Theme.Colors.GradientColorsLight}
-              start={Theme.LinearGradientDirection.start}
-              end={Theme.LinearGradientDirection.end}>
-              <View testID="help"></View>
-              <View style={Theme.Styles.IconContainer}>
-                {SvgImage.questionIcon()}
-              </View>
-            </LinearGradient>
-          }
+          source={'Inji'}
+          triggerComponent={HelpIcon()}
         />
         {isVCLoaded(verifiableCredential, fields) ? (
           <Pressable
diff --git a/screens/Settings/KeyManagementScreen.tsx b/screens/Settings/KeyManagementScreen.tsx
index 55cedec4..893fa91d 100644
--- a/screens/Settings/KeyManagementScreen.tsx
+++ b/screens/Settings/KeyManagementScreen.tsx
@@ -19,6 +19,9 @@ import {
 } from '../../shared/telemetry/TelemetryUtils';
 import {TelemetryConstants} from '../../shared/telemetry/TelemetryConstants';
 import {SUPPORTED_KEY_TYPES} from '../../shared/constants';
+import {SvgImage} from '../../components/ui/svg';
+import LinearGradient from 'react-native-linear-gradient';
+import { HelpIcon } from '../../components/ui/HelpIcon';
 
 const {RNSecureKeystoreModule} = NativeModules;
 
@@ -128,17 +131,7 @@ export const KeyManagementScreen: React.FC<KeyManagementScreenProps> = () => {
         </Text>
         <HelpScreen
           source={'keyManagement'}
-          triggerComponent={
-            <Icon
-              testID="keyManagementHelpIcon"
-              accessible={true}
-              name="question"
-              type="font-awesome"
-              size={21}
-              style={Theme.Styles.IconContainer}
-              color={Theme.Colors.Icon}
-            />
-          }
+          triggerComponent={ HelpIcon() }
         />
       </View>
       <BannerNotificationContainer />
diff --git a/screens/backupAndRestore/BackupAndRestoreScreen.tsx b/screens/backupAndRestore/BackupAndRestoreScreen.tsx
index 0faa0c0f..9fd2df96 100644
--- a/screens/backupAndRestore/BackupAndRestoreScreen.tsx
+++ b/screens/backupAndRestore/BackupAndRestoreScreen.tsx
@@ -21,6 +21,7 @@ import testIDProps, {
 import {HelpScreen} from '../../components/HelpScreen';
 import {isAndroid, isIOS} from '../../shared/constants';
 import LinearGradient from 'react-native-linear-gradient';
+import { HelpIcon } from '../../components/ui/HelpIcon';
 
 const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
   const backupController = useBackupScreen();
@@ -211,28 +212,7 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
       headerRight={
         <HelpScreen
           source={'BackUp'}
-          triggerComponent={
-            <LinearGradient
-              style={{borderRadius: 8}}
-              colors={Theme.Colors.GradientColorsLight}
-              start={Theme.LinearGradientDirection.start}
-              end={Theme.LinearGradientDirection.end}>
-              <View testID="help" style={Theme.HelpScreenStyle.viewStyle}>
-                <Row crossAlign="center" style={Theme.HelpScreenStyle.rowStyle}>
-                  <View
-                    testID="helpIcon"
-                    style={Theme.HelpScreenStyle.iconStyle}>
-                    {SvgImage.info()}
-                  </View>
-                  <Text
-                    testID="helpText"
-                    style={Theme.HelpScreenStyle.labelStyle}>
-                    {t('help')}
-                  </Text>
-                </Row>
-              </View>
-            </LinearGradient>
-          }
+          triggerComponent={HelpIcon()}
         />
       }
       onDismiss={props.onBackPress}>