github/inji-wallet
1
1
Fork 0
mirror of https://github.com/mosip/inji-wallet.git synced 2026-01-09 05:27:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

[INJIMOB-2525]: Fix help button design consistentcy across different screens (#1753)

Browse Source 
* [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>
This commit is contained in:
Sairam Girirao
2025-01-24 12:20:55 +05:30
committed by GitHub
parent 06770cdb25
commit 60fec928ee
6 changed files with 37 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/ui/HelpIcon.tsx Normal file
View File

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

10
components/ui/themes/DefaultTheme.ts
View File

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

10
components/ui/themes/PurpleTheme.ts
View File

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

15
screens/Home/ViewVcModal.tsx
View File

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

15
screens/Settings/KeyManagementScreen.tsx
View File

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

24
screens/backupAndRestore/BackupAndRestoreScreen.tsx
View File

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