[INJIMOB-2525]: Fix help button design consistentcy across different screens

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>
+  );
+};

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',

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',

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

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 />

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}>