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-3651: revert all the branding changes (#2151)

Browse Source 
* Revert "[INJIMOB-3622] Fix alignment in history screen  (#2140)"

This reverts commit a0b08914e5.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* Revert "Injimob [3622] [3627] - BANNER ISSUE AND BRANDING CHANGES ISSUES  (#2130)"

This reverts commit 522104811c.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* Revert "[INJIMOB-3633][INJIMOB-3636] fix icon bg color across app (#2134)"

This reverts commit d8d718693d.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* Revert "[INJIMOB-3633] fix search bar clear icon not apperaing (#2133)"

This reverts commit 6a202b11af.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* [INJIMOB-3651]: revert all the branding changes

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* [INJIMOB-3651]: update all the snapshot

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

---------

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>
This commit is contained in:
jaswanthkumartw
2025-11-28 18:59:15 +05:30
committed by GitHub
parent 5589ceb848
commit 0e667bd46d
86 changed files with 1720 additions and 2499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/BannerNotification.tsx
View File

@@ -1,36 +1,30 @@
import React from 'react';
import {Pressable, StatusBar, View} from 'react-native';
import {Pressable, View} from 'react-native';
import {Column, Row, Text} from './ui';
import {Theme} from './ui/styleUtils';
import {Icon} from 'react-native-elements';
import testIDProps from '../shared/commonUtil';
import ErrorToastIcon from '../assets/Error_Toast_Icon.svg';
import InfoToastIcon from '../assets/Info_Toast_Icon.svg';
import SuccessToastIcon from '../assets/Success_Toast_Icon.svg';
export const BannerNotification: React.FC<BannerNotificationProps> = props => {
return (
<View {...testIDProps(props.testId)} style={Theme.BannerStyles.wrapper}>
<View {...testIDProps(props.testId)}>
<Row
style={[Theme.BannerStyles.container, Theme.BannerStyles[props.type]]}>
<Row fill>
{props.type === BannerStatusType.SUCCESS && <SuccessToastIcon />}
{props.type === BannerStatusType.ERROR && <ErrorToastIcon />}
{props.type === BannerStatusType.IN_PROGRESS && <InfoToastIcon />}
<Column fill>
<Text
testID={`${props.testId}Text`}
color={Theme.Colors.PopupText}
color={Theme.Colors.whiteText}
weight="semibold"
style={Theme.BannerStyles.text}>
{props.message}
</Text>
</Row>
</Column>
<Column>
<Pressable
style={Theme.BannerStyles.dismiss}
{...testIDProps('close')}
onPress={props.onClosePress}>
<Icon name="close" color={Theme.Colors.PopupText} size={19} />
<Icon name="close" color={Theme.Colors.whiteText} size={19} />
</Pressable>
</Column>
</Row>

14
components/BannerNotificationContainer.tsx
View File

@@ -33,11 +33,11 @@ export const BannerNotificationContainer: React.FC<
bannerNotificationController.verificationStatus || null;
return (
<View style={Theme.BannerStyles.bannerStackContainer}>
<>
<BackupAndRestoreBannerNotification />
{settingsScreenController.isKeyOrderSet === true && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={t('keyPreferenceSuccess')}
@@ -49,7 +49,7 @@ export const BannerNotificationContainer: React.FC<
)}
{settingsScreenController.isKeyOrderSet === false && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.ERROR}
message={t('keyPreferenceError')}
@@ -61,7 +61,7 @@ export const BannerNotificationContainer: React.FC<
)}
{WalletBindingSuccess && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={t('activated')}
@@ -75,7 +75,7 @@ export const BannerNotificationContainer: React.FC<
)}
{reverificationSuccessObject.status && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={t(
@@ -92,7 +92,7 @@ export const BannerNotificationContainer: React.FC<
)}
{showQuickShareSuccessBanner && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={rt('status.accepted.message')}
@@ -156,7 +156,7 @@ export const BannerNotificationContainer: React.FC<
testId={'downloadingVcSuccessPopup'}
/>
)}
</View>
</>
);
};

18
components/BiometricIcon.tsx
View File

@@ -1,18 +0,0 @@
import React from 'react';
import {isIOS} from '../shared/constants';
import {SvgImage} from './ui/svg';
import {View} from 'react-native';
interface BiometricIconProps {
size?: number;
}
const BiometricIcon: React.FC<BiometricIconProps> = ({size = 66}) => {
const Icon = isIOS()
? SvgImage.faceBiometicIcon(size)
: SvgImage.fingerprintIcon(size);
return <View>{Icon}</View>;
};
export default BiometricIcon;

7
components/HelpScreen.tsx
View File

@@ -1,12 +1,11 @@
import React, {useEffect, useRef, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {FlatList, Linking, Pressable, View} from 'react-native';
import {FlatList, Linking, Pressable, SafeAreaView, View} from 'react-native';
import {Modal} from './ui/Modal';
import {Column, Text} from './ui';
import {Theme} from './ui/styleUtils';
import {BannerNotificationContainer} from './BannerNotificationContainer';
import getAllConfigurations from '../shared/api';
import {SafeAreaView} from "react-native-safe-area-context";
export const HelpScreen: React.FC<HelpScreenProps> = props => {
const {t} = useTranslation('HelpScreen');
@@ -363,8 +362,8 @@ export const HelpScreen: React.FC<HelpScreenProps> = props => {
onDismiss={() => {
setShowHelpPage(!showHelpPage);
}}>
<SafeAreaView style={{flex: 1, position: "relative"}}>
<BannerNotificationContainer />
<BannerNotificationContainer />
<SafeAreaView style={{flex: 1}}>
<Column fill padding="10" align="space-between">
<FlatList
ref={listingRef}

40
components/KebabPopUp.tsx
View File

@@ -1,20 +1,20 @@
import React from 'react';
import { Icon, ListItem, Overlay } from 'react-native-elements';
import { Theme } from '../components/ui/styleUtils';
import { Column, Row, Text } from '../components/ui';
import { View } from 'react-native';
import { useKebabPopUp } from './KebabPopUpController';
import { ActorRefFrom } from 'xstate';
import { useTranslation } from 'react-i18next';
import { FlatList } from 'react-native-gesture-handler';
import { VCMetadata } from '../shared/VCMetadata';
import {Icon, ListItem, Overlay} from 'react-native-elements';
import {Theme} from '../components/ui/styleUtils';
import {Column, Row, Text} from '../components/ui';
import {View} from 'react-native';
import {useKebabPopUp} from './KebabPopUpController';
import {ActorRefFrom} from 'xstate';
import {useTranslation} from 'react-i18next';
import {FlatList} from 'react-native-gesture-handler';
import {VCMetadata} from '../shared/VCMetadata';
import testIDProps from '../shared/commonUtil';
import { getKebabMenuOptions } from './kebabMenuUtils';
import { VCItemMachine } from '../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
import {getKebabMenuOptions} from './kebabMenuUtils';
import {VCItemMachine} from '../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
const controller = useKebabPopUp(props);
const { t } = useTranslation('HomeScreenKebabPopUp');
const {t} = useTranslation('HomeScreenKebabPopUp');
return (
<Column>
@@ -52,14 +52,14 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
<FlatList
data={getKebabMenuOptions(props)}
renderItem={({ item }) => (
renderItem={({item}) => (
<ListItem topDivider onPress={item.onPress}>
<Row crossAlign="center" style={{ flex: 1 }}>
<View style={{ width: 25, alignItems: 'center' }}>
<Row crossAlign="center" style={{flex: 1}}>
<View style={{width: 25, alignItems: 'center'}}>
{item.icon}
</View>
<Text
style={{fontFamily: 'Montserrat_600SemiBold'}}
style={{fontFamily: 'Inter_600SemiBold'}}
color={
item.testID === 'removeFromWallet'
? Theme.Colors.warningText
@@ -69,7 +69,13 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
margin="0 0 0 10">
{item.label}
</Text>
{item.label === t('reverify') && (<View style={Theme.KebabPopUpStyles.new}><Text color='white' weight='bold' style={{ fontSize: 10 }}>{t('new')}</Text></View>)}
{item.label === t('reverify') && (
<View style={Theme.KebabPopUpStyles.new}>
<Text color="white" weight="bold" style={{fontSize: 10}}>
{t('new')}
</Text>
</View>
)}
</Row>
</ListItem>
)}

40
components/Toggle.tsx
View File

@@ -1,40 +0,0 @@
import React from 'react';
import {View} from 'react-native';
import SwitchToggle from 'react-native-switch-toggle';
import {Theme} from './ui/styleUtils';
import testIDProps from '../shared/commonUtil';
interface ShareToggleProps {
value: boolean;
onToggle: (value: boolean) => void;
testID?: string;
}
const Toggle: React.FC<ShareToggleProps> = ({value, onToggle, testID}) => {
return (
<View
style={[
Theme.Styles.wrapper,
{
borderColor: value ? 'transparent' : Theme.Colors.switchHead,
backgroundColor: value
? Theme.Colors.switchHead
: Theme.Colors.switchCircleOff,
},
]}>
<SwitchToggle
{...testIDProps(testID || 'shareToggle')}
switchOn={value}
onPress={() => onToggle(value)}
circleColorOff={Theme.Colors.switchHead}
circleColorOn={Theme.Colors.switchCircleOff}
backgroundColorOn={Theme.Colors.switchHead}
backgroundColorOff={Theme.Colors.whiteBackgroundColor}
containerStyle={Theme.Styles.container}
circleStyle={Theme.Styles.circle}
/>
</View>
);
};
export default Toggle;

8
components/VC/Views/VCDetailView.tsx
View File

@@ -302,7 +302,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
<Text
testID="offlineAuthDisabledHeader"
style={{
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
}}
color={Theme.Colors.statusLabel}
@@ -312,7 +312,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
<Text
testID="offlineAuthDisabledMessage"
style={{
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 12,
}}
color={Theme.Colors.statusMessage}
@@ -345,7 +345,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
testID="profileAuthenticated"
color={Theme.Colors.statusLabel}
style={{
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
}}
margin={'0 18 0 0'}>
@@ -379,7 +379,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
style={{
color: '#007AFF',
fontSize: 16,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
}}>
{t('View Shareable Information')}
</Text>

2
components/VC/common/VCItemField.tsx
View File

@@ -35,6 +35,8 @@ export const VCItemFieldName = ({
{fieldName == STATUS_FIELD_NAME && (
<CustomTooltip
testID="statusToolTip"
width={Dimensions.get('screen').width * 0.8}
height={Dimensions.get('screen').height * 0.28}
triggerComponent={SvgImage.info()}
triggerComponentStyles={{marginLeft: 2, marginTop: 2}}
toolTipContent={<StatusTooltipContent />}

82
components/VC/common/VcStatustooTip.tsx
View File

@@ -1,56 +1,30 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {View} from 'react-native';
import {Column, Row} from '../../ui';
import {Theme} from '../../ui/styleUtils';
import {Text} from '../../ui';
import {VC_STATUS_KEYS} from './VCUtils';
import ExpiredStatus from '../../../assets/Expired_Status.svg';
import RevokedStatus from '../../../assets/Revoked_Status.svg';
import ValidStatus from '../../../assets/Valid_Status.svg';
import PendingStatus from '../../../assets/Pending_Status.svg';
const statusIcons: Record<string, React.FC<any>> = {
valid: ValidStatus,
pending: PendingStatus,
expired: ExpiredStatus,
revoked: RevokedStatus,
};
import React from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { Column } from "../../ui";
import { Theme } from "../../ui/styleUtils";
import { Text } from "../../ui";
import { VC_STATUS_KEYS } from "./VCUtils";
export const StatusTooltipContent = () => {
const {t} = useTranslation('ViewVcModal');
return (
<Column>
{VC_STATUS_KEYS.map((key, index) => {
const IconComponent = statusIcons[key];
const isLast = index === VC_STATUS_KEYS.length - 1;
return (
<Row key={key} style={{width: '100%'}}>
<View style={{marginRight: 6}}>
<IconComponent width={20} height={20} />
</View>
<View
style={{
marginBottom: isLast ? 0 : 15,
marginTop: 1,
flexShrink: 1,
}}>
<Text weight="semibold" style={Theme.Styles.tooltipContentTitle}>
{t(`statusToolTipContent.${key}.title`)}
</Text>
<Text
weight="regular"
style={[
Theme.Styles.tooltipContentDescription,
{marginTop: 3},
]}>
{t(`statusToolTipContent.${key}.description`)}
</Text>
</View>
</Row>
);
})}
</Column>
);
};
const { t } = useTranslation('ViewVcModal');
return (
<Column align="center" style={{marginTop:20}}>
{VC_STATUS_KEYS.map(key => (
<View key={key} style={{ marginBottom: 20 }}>
<Text weight="semibold">{t(`statusToolTipContent.${key}.title`)}</Text>
<Text
weight="regular"
style={[
Theme.Styles.tooltipContentDescription,
{ marginTop: 3 },
]}>
{t(`statusToolTipContent.${key}.description`)}
</Text>
</View>
))}
</Column>
);
};

25
components/VCVerification.tsx
View File

@@ -1,21 +1,20 @@
import React from 'react';
import { View } from 'react-native';
import {View} from 'react-native';
import testIDProps from '../shared/commonUtil';
import { Display } from './VC/common/VCUtils';
import {Display} from './VC/common/VCUtils';
import VerifiedIcon from './VerifiedIcon';
import PendingIcon from './PendingIcon';
import { Row, Text } from './ui';
import { Theme } from './ui/styleUtils';
import { useTranslation } from 'react-i18next';
import { VCMetadata } from '../shared/VCMetadata';
import { formattedDate } from '../shared/openId4VCI/Utils';
import {Row, Text} from './ui';
import {Theme} from './ui/styleUtils';
import {useTranslation} from 'react-i18next';
import {VCMetadata} from '../shared/VCMetadata';
export const VCVerification: React.FC<VCVerificationProps> = ({
vcMetadata,
display,
showLastChecked = true,
}) => {
const { t } = useTranslation('VcDetails');
const {t} = useTranslation('VcDetails');
let statusText: string;
let statusIcon: JSX.Element;
@@ -45,7 +44,7 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
paddingVertical: 6,
}}>
{/* First Row: Status Icon + Text */}
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{statusIcon}
<Text
testID="verificationStatus"
@@ -56,13 +55,13 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
</View>
{showLastChecked && vcMetadata.lastKnownStatusTimestamp && (
<View style={{ marginTop: 4 }}>
<View style={{marginTop: 4}}>
<Text
testID="lastCheckedLabel"
color={display.getTextColor(Theme.Colors.Details)}
style={[
Theme.Styles.verificationStatus,
{ fontFamily: 'Montserrat_400Regular' },
{fontFamily: 'Inter_400'},
]}>
{t('lastChecked')}
</Text>
@@ -71,9 +70,9 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
color={display.getTextColor(Theme.Colors.Details)}
style={[
Theme.Styles.verificationStatus,
{fontFamily: 'Montserrat_400Regular'},
{fontFamily: 'Inter_400'},
]}>
{formattedDate(vcMetadata.lastKnownStatusTimestamp)}
{new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()}
</Text>
</View>
)}

16
components/__snapshots__/AccountInformation.test.tsx.snap
View File

@@ -129,7 +129,7 @@ exports[`AccountInformation Component should match snapshot with different email
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -182,7 +182,7 @@ exports[`AccountInformation Component should match snapshot with different email
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -334,7 +334,7 @@ exports[`AccountInformation Component should match snapshot with different pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -387,7 +387,7 @@ exports[`AccountInformation Component should match snapshot with different pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -539,7 +539,7 @@ exports[`AccountInformation Component should match snapshot with email and pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -592,7 +592,7 @@ exports[`AccountInformation Component should match snapshot with email and pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -744,7 +744,7 @@ exports[`AccountInformation Component should match snapshot with long email 1`]
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -797,7 +797,7 @@ exports[`AccountInformation Component should match snapshot with long email 1`]
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,

125
components/__snapshots__/BannerNotification.test.tsx.snap
View File

@@ -4,12 +4,6 @@ exports[`BannerNotification Component should match snapshot with different testI
<View
accessibilityLabel="customBanner"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -31,11 +25,9 @@ exports[`BannerNotification Component should match snapshot with different testI
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -44,8 +36,7 @@ exports[`BannerNotification Component should match snapshot with different testI
"width": "100%",
},
{
"backgroundColor": "#9DCFBB",
"color": "#384455",
"backgroundColor": "#4B9D20",
},
],
null,
@@ -59,7 +50,7 @@ exports[`BannerNotification Component should match snapshot with different testI
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -79,7 +70,6 @@ exports[`BannerNotification Component should match snapshot with different testI
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="customBannerText"
style={
@@ -90,11 +80,11 @@ exports[`BannerNotification Component should match snapshot with different testI
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -102,10 +92,9 @@ exports[`BannerNotification Component should match snapshot with different testI
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -185,12 +174,6 @@ exports[`BannerNotification Component should match snapshot with error status 1`
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -212,11 +195,9 @@ exports[`BannerNotification Component should match snapshot with error status 1`
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -225,8 +206,7 @@ exports[`BannerNotification Component should match snapshot with error status 1`
"width": "100%",
},
{
"backgroundColor": "#EFB3B5",
"color": "#384455",
"backgroundColor": "#DB2E2E",
},
],
null,
@@ -240,7 +220,7 @@ exports[`BannerNotification Component should match snapshot with error status 1`
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -260,7 +240,6 @@ exports[`BannerNotification Component should match snapshot with error status 1`
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -271,11 +250,11 @@ exports[`BannerNotification Component should match snapshot with error status 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -283,10 +262,9 @@ exports[`BannerNotification Component should match snapshot with error status 1`
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -366,12 +344,6 @@ exports[`BannerNotification Component should match snapshot with in progress sta
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -393,11 +365,9 @@ exports[`BannerNotification Component should match snapshot with in progress sta
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -406,8 +376,7 @@ exports[`BannerNotification Component should match snapshot with in progress sta
"width": "100%",
},
{
"backgroundColor": "#FFE799",
"color": "#384455",
"backgroundColor": "#D9822B",
},
],
null,
@@ -421,7 +390,7 @@ exports[`BannerNotification Component should match snapshot with in progress sta
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -441,7 +410,6 @@ exports[`BannerNotification Component should match snapshot with in progress sta
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -452,11 +420,11 @@ exports[`BannerNotification Component should match snapshot with in progress sta
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -464,10 +432,9 @@ exports[`BannerNotification Component should match snapshot with in progress sta
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -547,12 +514,6 @@ exports[`BannerNotification Component should match snapshot with long message 1`
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -574,11 +535,9 @@ exports[`BannerNotification Component should match snapshot with long message 1`
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -587,8 +546,7 @@ exports[`BannerNotification Component should match snapshot with long message 1`
"width": "100%",
},
{
"backgroundColor": "#9DCFBB",
"color": "#384455",
"backgroundColor": "#4B9D20",
},
],
null,
@@ -602,7 +560,7 @@ exports[`BannerNotification Component should match snapshot with long message 1`
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -622,7 +580,6 @@ exports[`BannerNotification Component should match snapshot with long message 1`
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -633,11 +590,11 @@ exports[`BannerNotification Component should match snapshot with long message 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -645,10 +602,9 @@ exports[`BannerNotification Component should match snapshot with long message 1`
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -728,12 +684,6 @@ exports[`BannerNotification Component should match snapshot with success status
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -755,11 +705,9 @@ exports[`BannerNotification Component should match snapshot with success status
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -768,8 +716,7 @@ exports[`BannerNotification Component should match snapshot with success status
"width": "100%",
},
{
"backgroundColor": "#9DCFBB",
"color": "#384455",
"backgroundColor": "#4B9D20",
},
],
null,
@@ -783,7 +730,7 @@ exports[`BannerNotification Component should match snapshot with success status
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -803,7 +750,6 @@ exports[`BannerNotification Component should match snapshot with success status
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -814,11 +760,11 @@ exports[`BannerNotification Component should match snapshot with success status
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -826,10 +772,9 @@ exports[`BannerNotification Component should match snapshot with success status
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},

39
components/__snapshots__/BannerNotificationContainer.test.tsx.snap
View File

@@ -1,40 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BannerNotificationContainer Component should match snapshot with no banners visible 1`] = `
<View
style={
{
"alignItems": "center",
"position": "absolute",
"width": "100%",
"zIndex": 100,
}
}
/>
`;
exports[`BannerNotificationContainer Component should match snapshot with no banners visible 1`] = `null`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner disabled 1`] = `
<View
style={
{
"alignItems": "center",
"position": "absolute",
"width": "100%",
"zIndex": 100,
}
}
/>
`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner disabled 1`] = `null`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner enabled 1`] = `
<View
style={
{
"alignItems": "center",
"position": "absolute",
"width": "100%",
"zIndex": 100,
}
}
/>
`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner enabled 1`] = `null`;

6
components/__snapshots__/CopyButton.test.tsx.snap
View File

@@ -67,7 +67,7 @@ exports[`CopyButton Component should match snapshot with default props 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
null,
@@ -156,7 +156,7 @@ exports[`CopyButton Component should match snapshot with long content 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
null,
@@ -245,7 +245,7 @@ exports[`CopyButton Component should match snapshot with special characters 1`]
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
null,

8
components/__snapshots__/DualMessageOverlay.test.tsx.snap
View File

@@ -13,7 +13,7 @@ exports[`DualMessageOverlay Component should match snapshot with both buttons 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -42,7 +42,7 @@ exports[`DualMessageOverlay Component should match snapshot with both buttons 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -103,7 +103,7 @@ exports[`DualMessageOverlay Component should match snapshot with only ignore but
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -139,7 +139,7 @@ exports[`DualMessageOverlay Component should match snapshot with only try again
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},

884
components/__snapshots__/HelpScreen.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

60
components/__snapshots__/KebabPopUp.test.tsx.snap
View File

@@ -51,7 +51,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -69,7 +69,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -132,7 +132,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -147,7 +147,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -201,7 +201,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -218,7 +218,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -280,7 +280,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -298,7 +298,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -361,7 +361,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -376,7 +376,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -430,7 +430,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -447,7 +447,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -509,7 +509,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -527,7 +527,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -590,7 +590,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -605,7 +605,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -659,7 +659,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -676,7 +676,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -741,7 +741,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -759,7 +759,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -822,7 +822,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -837,7 +837,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -891,7 +891,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -908,7 +908,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -970,7 +970,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -988,7 +988,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -1051,7 +1051,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -1066,7 +1066,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -1120,7 +1120,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -1137,7 +1137,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}

16
components/__snapshots__/Passcode.test.tsx.snap
View File

@@ -85,7 +85,7 @@ exports[`Passcode Component should match snapshot with both message and error 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -136,7 +136,7 @@ exports[`Passcode Component should match snapshot with both message and error 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -243,7 +243,7 @@ exports[`Passcode Component should match snapshot with custom message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -294,7 +294,7 @@ exports[`Passcode Component should match snapshot with custom message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -399,7 +399,7 @@ exports[`Passcode Component should match snapshot with default props 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -450,7 +450,7 @@ exports[`Passcode Component should match snapshot with default props 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -555,7 +555,7 @@ exports[`Passcode Component should match snapshot with error message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -606,7 +606,7 @@ exports[`Passcode Component should match snapshot with error message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{

98
components/__snapshots__/PinInput.test.tsx.snap
View File

@@ -36,14 +36,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -61,14 +61,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -87,14 +87,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -113,14 +113,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -169,14 +169,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -194,14 +194,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -220,14 +220,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -246,14 +246,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -272,14 +272,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -298,14 +298,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -355,14 +355,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -380,14 +380,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -406,14 +406,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -432,14 +432,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -488,14 +488,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -513,14 +513,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -539,14 +539,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -565,14 +565,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -621,14 +621,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -646,14 +646,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -672,14 +672,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -698,14 +698,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,

2
components/__snapshots__/ProgressingModal.test.tsx.snap
View File

@@ -10,7 +10,7 @@ exports[`ProgressingModal Component should match snapshot with hint visible 1`]
exports[`ProgressingModal Component should match snapshot with progress spinner 1`] = `
<Spinner
color="#F37321"
color="#951F6F"
style={
{
"marginLeft": 6,

47
components/ui/Picker.tsx
View File

@@ -4,7 +4,6 @@ import {Icon, ListItem, Overlay} from 'react-native-elements';
import {Column} from './Layout';
import {Text} from './Text';
import testIDProps from '../../shared/commonUtil';
import {Theme} from './styleUtils';
interface Picker extends React.VFC<PickerProps<unknown>> {
<T>(props: PickerProps<T>): ReturnType<React.FC>;
@@ -34,41 +33,23 @@ export const Picker: Picker = (props: PickerProps<unknown>) => {
<Overlay
isVisible={isContentVisible}
onBackdropPress={toggleContent}
overlayStyle={Theme.Styles.overlay}>
overlayStyle={{padding: 1}}>
<Column
testID={props.testID}
width={Dimensions.get('window').width * 0.8}>
{props.items.map((item, index) => {
const isSelected = selectedIndex === index;
return (
<ListItem
key={String(item.value ?? index)}
topDivider={index !== 0}
onPress={() => selectItem(index)}
containerStyle={
isSelected
? Theme.Styles.listItemSelectedContainer
: Theme.Styles.listItemUnselectedContainer
}>
<ListItem.Content>
<ListItem.Title {...testIDProps(item.value as string)}>
<Text
style={
isSelected
? Theme.Styles.listItemSelectedText
: Theme.Styles.listItemUnselectedText
}>
{item.label}
</Text>
</ListItem.Title>
</ListItem.Content>
{isSelected && (
<Icon name="check" color={Theme.Colors.ListSelectedIcon} />
)}
</ListItem>
);
})}
{props.items.map((item, index) => (
<ListItem
topDivider={index !== 0}
onPress={() => selectItem(index)}
key={index}>
<ListItem.Content>
<ListItem.Title {...testIDProps(item.value as string)}>
<Text>{item.label}</Text>
</ListItem.Title>
</ListItem.Content>
{selectedIndex === index && <Icon name="check" />}
</ListItem>
))}
</Column>
</Overlay>
</React.Fragment>

51
components/ui/SearchBar.tsx
View File

@@ -1,10 +1,12 @@
import React from 'react';
import { TextInput, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
import { Row } from './Layout';
import { Theme } from './styleUtils';
import {TextInput, View} from 'react-native';
import {Icon} from 'react-native-elements';
import {Row} from './Layout';
import {Theme} from './styleUtils';
import {SvgImage} from './svg';
export const SearchBar = ({
isVcSearch = false,
searchIconTestID,
searchBarTestID,
placeholder,
@@ -15,45 +17,38 @@ export const SearchBar = ({
editable = true,
}: SearchBarProps) => {
return (
<Row style={Theme.SearchBarStyles.innerSearchBarContainer}>
<Row>
{isVcSearch ? (
<View
testID={searchIconTestID}
style={Theme.SearchBarStyles.vcSearchIcon}>
{SvgImage.SearchIcon()}
</View>
) : (
<Icon
testID={searchIconTestID}
name="search"
color={Theme.Colors.Icon}
size={27}
style={Theme.SearchBarStyles.searchIcon}
/>
)}
<TextInput
testID={searchBarTestID}
style={Theme.SearchBarStyles.searchBar}
placeholder={placeholder}
placeholderTextColor={Theme.Colors.SearchBarPlaceholderColor}
value={search}
onFocus={onFocus}
onChangeText={searchText => onChangeText(searchText)}
onLayout={onLayout}
editable={editable ?? true}
/>
{search?.length > 0 && (
<TouchableOpacity
onPress={() => onChangeText('')}
style={Theme.SearchBarStyles.clearIcon}>
<Icon
testID='clearingIssuerSearchIcon'
name="close"
type="material"
color={Theme.Colors.SearchIcon}
size={22}
/>
</TouchableOpacity>
)}
<Icon
testID={searchIconTestID}
name="search"
type="material"
color={Theme.Colors.SearchIcon}
size={27}
style={Theme.SearchBarStyles.searchIcon}
/>
</Row>
);
};
interface SearchBarProps {
isVcSearch: Boolean;
searchIconTestID: string;
searchBarTestID: string;
search: string;

55
components/ui/SetupPicker.tsx
View File

@@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react';
import {Dimensions, View} from 'react-native';
import {Dimensions} from 'react-native';
import {Icon, ListItem} from 'react-native-elements';
import {Column} from './Layout';
import {Text} from './Text';
@@ -33,35 +33,30 @@ export const SetupPicker: Picker = (props: PickerProps<unknown>) => {
testID={props.testID}
width={Dimensions.get('window').width * 0.8}
backgroundColor={Theme.Colors.whiteBackgroundColor}>
{props.items.map((item, index) => {
const isSelected = selectedIndex === index;
return (
<ListItem
bottomDivider
topDivider={index !== 0}
onPress={() => selectItem(index)}>
<ListItem.Content>
<ListItem.Title
{...testIDProps(item.value)}
style={{paddingTop: 3}}>
<Text
color={isSelected ? Theme.Colors.Icon : null}
weight={isSelected ? 'semibold' : 'regular'}>
{item.label}
</Text>
</ListItem.Title>
</ListItem.Content>
{isSelected ? (
<View style={Theme.Styles.listItemSelectedCircle} />
) : (
<Icon
name="radio-button-unchecked"
color={Theme.Colors.GrayIcon}
/>
)}
</ListItem>
);
})}
{props.items.map((item, index) => (
<ListItem
bottomDivider
topDivider={index !== 0}
onPress={() => selectItem(index)}
key={index}>
<ListItem.Content>
<ListItem.Title
{...testIDProps(item.value)}
style={{paddingTop: 3}}>
<Text
color={selectedIndex === index ? Theme.Colors.Icon : null}
weight={selectedIndex === index ? 'semibold' : 'regular'}>
{item.label}
</Text>
</ListItem.Title>
</ListItem.Content>
{selectedIndex === index ? (
<Icon name="radio-button-checked" color={Theme.Colors.Icon} />
) : (
<Icon name="radio-button-unchecked" color={Theme.Colors.GrayIcon} />
)}
</ListItem>
))}
</Column>
);
};

4
components/ui/Timestamp.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import {View} from 'react-native';
import {Text} from '../ui/Text';
import { formattedDate } from '../../shared/openId4VCI/Utils';
import {formattedDate} from '../../shared/openId4VCI/Utils';
export const Timestamp: React.FC<TimestampProps> = props => {
return (
@@ -10,7 +10,7 @@ export const Timestamp: React.FC<TimestampProps> = props => {
testID={`${props.testId}Time`}
size="regular"
style={{
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontWeight: '600',
fontSize: 14,
letterSpacing: 0,

157
components/ui/ToolTip.tsx
View File

@@ -1,132 +1,35 @@
import React, {useRef, useState} from 'react';
import {
Modal,
View,
ScrollView,
TouchableOpacity,
Pressable,
Dimensions,
findNodeHandle,
UIManager,
} from 'react-native';
import {Tooltip} from 'react-native-elements';
import {Centered} from './Layout';
import React from 'react';
import {Theme} from './styleUtils';
import testIDProps from '../../shared/commonUtil';
import {StyleProp} from 'react-native';
import {ViewStyle} from 'react-native';
interface CustomTooltipProps {
triggerComponent: React.ReactNode;
toolTipContent: React.ReactNode;
width?: number;
maxHeight?: number;
}
export const TOOLTIP_MARGIN = 6;
export const SCREEN_PADDING = 10;
export const POINTER_SIZE = 12;
export const CustomTooltip = ({
triggerComponent,
toolTipContent,
width = 275,
maxHeight = 300,
}: CustomTooltipProps) => {
const [visible, setVisible] = useState(false);
const [position, setPosition] = useState({x: 0, y: 0});
const [pointerLeft, setPointerLeft] = useState(20);
const [showAbove, setShowAbove] = useState(false);
const iconRef = useRef<View>(null);
const screen = Dimensions.get('window');
const showTooltip = () => {
if (!iconRef.current) return;
const handle = findNodeHandle(iconRef.current);
if (!handle) return;
try {
UIManager.measureInWindow(handle, (x, y, w, h) => {
if (w === 0 && h === 0) return;
let tooltipX = x;
let tooltipY = y + h + TOOLTIP_MARGIN;
let showAboveTooltip = false;
const iconCenterX = x + w / 2;
if (tooltipX + width > screen.width) {
tooltipX = screen.width - width - SCREEN_PADDING;
}
if (tooltipX < SCREEN_PADDING) {
tooltipX = SCREEN_PADDING;
}
if (tooltipY + maxHeight > screen.height) {
tooltipY = y - maxHeight - TOOLTIP_MARGIN * 2;
showAboveTooltip = true;
}
if (tooltipY < SCREEN_PADDING) {
tooltipY = SCREEN_PADDING;
showAboveTooltip = false;
}
const calculatedPointerLeft = iconCenterX - tooltipX - POINTER_SIZE / 2;
setPointerLeft(
Math.min(
Math.max(calculatedPointerLeft, SCREEN_PADDING),
width - SCREEN_PADDING,
),
);
setShowAbove(showAboveTooltip);
setPosition({x: tooltipX, y: tooltipY});
setVisible(true);
});
} catch (e) {
console.warn('Tooltip positioning failed:', e);
}
};
export const CustomTooltip: React.FC<CustomTooltipProps> = props => {
return (
<>
<View ref={iconRef} collapsable={false}>
<TouchableOpacity onPress={showTooltip} style={{marginLeft: 5}}>
{triggerComponent}
</TouchableOpacity>
</View>
{visible && (
<Modal
transparent
visible={visible}
animationType="fade"
hardwareAccelerated
onRequestClose={() => setVisible(false)}>
<Pressable
style={Theme.Styles.tooltipOverlay}
onPress={() => setVisible(false)}
/>
<View
style={[
Theme.Styles.tooltip,
{width, top: position.y, left: position.x},
]}>
<View
style={[
Theme.Styles.pointer,
{
left: pointerLeft,
top: showAbove ? undefined : -POINTER_SIZE / 2,
bottom: showAbove ? -POINTER_SIZE / 2 : undefined,
transform: [{rotate: showAbove ? '180deg' : '0deg'}],
},
]}
/>
<ScrollView
nestedScrollEnabled
keyboardShouldPersistTaps="handled"
style={{maxHeight, overflow: 'hidden'}}
contentContainerStyle={{padding: 15}}>
{toolTipContent}
</ScrollView>
</View>
</Modal>
)}
</>
<Tooltip
{...testIDProps(props.testID)}
popover={props.toolTipContent}
width={props.width}
height={props.height}
withPointer={true}
withOverlay={false}
skipAndroidStatusBar={true}
pointerColor={Theme.Colors.toolTipPointerColor}
containerStyle={Theme.Styles.tooltipContainerStyle}>
<Centered style={props.triggerComponentStyles} fill>
{props.triggerComponent}
</Centered>
</Tooltip>
);
};
interface CustomTooltipProps {
width: number;
height: number;
triggerComponent: React.ReactElement;
triggerComponentStyles: StyleProp<ViewStyle>;
testID: string;
toolTipContent?: React.ReactElement;
}

2
components/ui/__snapshots__/Text.generated.test.tsx.snap
View File

@@ -10,7 +10,7 @@ exports[`<Text /> Testing the Text component 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,

20
components/ui/svg.tsx
View File

@@ -60,7 +60,6 @@ import QuestionIcon from '../../assets/questionIcon.svg';
import CopyIcon from '../../assets/file_copy.svg';
import StarIcon from '../../assets/credentialRegestryStar.svg';
import SelectedCheckBox from '../../assets/Selected_Check_Box.svg';
import FaceBiometric from '../../assets/Icon.svg';
import ReverifyIcon from '../../assets/Reverify.svg';
export class SvgImage {
static selectedCheckBox() {
@@ -251,9 +250,7 @@ export class SvgImage {
}
static ReverifyIcon() {
return (
<ReverifyIcon/>
)
return <ReverifyIcon />;
}
static OutlinedPinIcon() {
@@ -558,6 +555,10 @@ export class SvgImage {
);
}
static SearchIcon() {
return <Search {...testIDProps('searchIcon')} />;
}
static settingsLanguageIcon(size) {
return (
<SettingsLanguage
@@ -580,17 +581,6 @@ export class SvgImage {
);
}
static faceBiometicIcon(size?: number | undefined) {
return (
<FaceBiometric
height={size}
width={size}
color1={Theme.Colors.linearIconGradientStart}
color2={Theme.Colors.linearIconGradientEnd}
/>
);
}
static abotInjiIcon() {
return (
<SettingsAboutInji

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

@@ -12,7 +12,6 @@ import Constants from 'expo-constants';
import HomeScreenLogo from '../../../assets/InjiHomeLogo.svg';
import InjiLogoSmall from '../../../assets/InjiLogo.svg';
import i18next from '../../../i18n';
import {POINTER_SIZE} from '../ToolTip';
const Colors = {
Black: '#000000',
Zambezi: '#5F5F5F',
@@ -32,8 +31,7 @@ const Colors = {
DimGray: '#737373',
DarkGray: '#A5A5A5',
platinumGrey: '#EDEDED',
Orange: '#F37321',
DarkMagenta: '#951F6F',
Orange: '#951F6F',
OrangeBrown: '#D9822B',
Blue: '#0000FF',
LightGrey: '#F8F8F8',
@@ -47,13 +45,12 @@ const Colors = {
Warning: '#f0ad4e',
GrayText: '#6F6F6F',
mediumLightGrayText: '#A7A7A7',
veryLightBluishGray: '#D9E1E7',
dorColor: '#CBCBCB',
plainText: '#FFFFFF',
walletbindingLabel: '#000000',
LightOrange: '#F7EDF3',
GradientColors: ['#FF5300', '#5B03AD'],
GradientColorsLight: ['#FF5300' + 14, '#FF5300' + 14],
GradientColorsLight: ['#FF5300' + 14, '#5B03AD' + 14],
DisabledColors: ['#C7C7C7', '#C7C7C7'],
TimeoutHintBoxColor: '#FFF7E5',
TimeoutHintBoxBorder: '#FFF2D6',
@@ -71,16 +68,6 @@ const Colors = {
Mercury: '#E6E6E6',
Yellow: '#E8A94F',
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
brandPrimary: '#F37321',
brandPrimaryLight: '#FCEFE6',
brandPrimaryDark: '#D65F17',
DeepPurple: '#290B45',
RoyalPurple: '#451691',
LightMintGreen: '#9DCFBB',
CharcoalBlue: '#384455',
LightRose: '#EFB3B5',
LightYellow: '#FFE799',
SteelBlue: '#809FB8',
};
export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -94,7 +81,7 @@ export const DefaultTheme = {
DetailsLabel: Colors.Gray40,
LoadingDetailsLabel: Colors.Gray40,
AddIdBtnBg: Colors.Orange,
AddIdBtnTxt: Colors.DarkMagenta,
AddIdBtnTxt: Colors.Orange,
DownloadIdBtnTxt: Colors.White,
Loading: Colors.Orange,
Cursor: Colors.Orange,
@@ -102,7 +89,6 @@ export const DefaultTheme = {
IconBg: Colors.Orange,
popUp: Colors.Green,
Icon: Colors.Orange,
SearchIcon: Colors.veryLightBluishGray,
GrayIcon: Colors.Gray50,
helpText: Colors.Gray44,
borderBottomColor: Colors.Grey6,
@@ -112,7 +98,6 @@ export const DefaultTheme = {
switchHead: Colors.Orange,
switchTrackTrue: Colors.LightOrange,
switchTrackFalse: Colors.Grey,
switchCircleOff: Colors.White,
overlayBackgroundColor: Colors.White,
rotatingIcon: Colors.Grey5,
loadingLabel: Colors.Grey6,
@@ -154,10 +139,10 @@ export const DefaultTheme = {
uncheckedIcon: Colors.uncheckedIcon,
settingsLabel: Colors.Black,
chevronRightColor: Colors.Grey,
linearGradientStart: Colors.brandPrimary,
linearGradientEnd: Colors.brandPrimary,
linearIconGradientStart: Colors.brandPrimary,
linearIconGradientEnd: Colors.brandPrimary,
linearGradientStart: Colors.startColor,
linearGradientEnd: Colors.endColor,
linearIconGradientStart: Colors.startColor,
linearIconGradientEnd: Colors.endColor,
LinearGradientStroke: Colors.stroke,
warningLogoBgColor: Colors.warningLogoBg,
tooltipIcon: Colors.toolTip,
@@ -166,16 +151,6 @@ export const DefaultTheme = {
warningText: Colors.Red,
PendingIcon: Colors.Yellow,
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
ListSelectedBackground: Colors.brandPrimaryLight,
ListSelectedText: Colors.brandPrimary,
ListSelectedIcon: Colors.brandPrimary,
ListUnselectedBackground: Colors.White,
ListUnselectedText: Colors.Black,
SearchBarPlaceholderColor: Colors.veryLightBluishGray,
PopupText: Colors.CharcoalBlue,
TransactionCodeBackgroundColor: Colors.White,
TransactionCodeBorderColor: Colors.veryLightBluishGray,
TransactionCodePlaceholderColor: Colors.SteelBlue,
},
Styles: StyleSheet.create({
title: {
@@ -194,12 +169,12 @@ export const DefaultTheme = {
fieldItemTitle: {
backgroundColor: Colors.Transparent,
fontSize: 11,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
fieldItemValue: {
backgroundColor: Colors.Transparent,
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: 3,
},
loadingSubtitle: {
@@ -208,7 +183,7 @@ export const DefaultTheme = {
},
verificationStatus: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
statusLabel: {
color: Colors.Gray30,
@@ -500,9 +475,6 @@ export const DefaultTheme = {
ProfileIconPinnedStyle: {
position: 'absolute',
},
BackButtonBgGradient: {
borderRadius: 10,
},
IconContainer: {
padding: 6,
width: 25,
@@ -602,7 +574,7 @@ export const DefaultTheme = {
detailsText: {
fontWeight: 'bold',
fontSize: 15,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
idInputContainer: {
width: Dimensions.get('window').width * 0.86,
@@ -615,51 +587,9 @@ export const DefaultTheme = {
height: isIOS() ? 100 : 'auto',
},
picker: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
},
overlay: {
padding: 1,
borderRadius: 12,
overflow: 'hidden',
},
listItemSelectedText: {
color: Colors.brandPrimary,
fontWeight: '600',
fontFamily: 'Montserrat_500Medium',
},
listItemUnselectedText: {
color: Colors.Black,
fontWeight: '400',
fontFamily: 'Montserrat_500Medium',
},
listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
listItemUnselectedContainer: {backgroundColor: Colors.White},
listItemSelectedCircle: {
width: 22,
height: 22,
borderRadius: 11,
borderWidth: 7,
borderColor: Colors.brandPrimary,
backgroundColor: Colors.White,
},
wrapper: {
borderWidth: 2,
borderRadius: 16,
padding: 2,
},
container: {
width: 48,
height: 22,
borderRadius: 16,
padding: 3,
},
circle: {
width: 18,
height: 18,
borderRadius: 9,
elevation: 2,
},
idInputBottom: {
position: 'relative',
bottom: 18,
@@ -678,7 +608,7 @@ export const DefaultTheme = {
marginVertical: 6,
},
placeholder: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
hrLine: {
borderBottomColor: Colors.Gray44,
@@ -726,46 +656,14 @@ export const DefaultTheme = {
},
boxShadow: generateBoxShadowStyle(),
tooltipContainerStyle: {
backgroundColor: '#EBE6F3',
borderWidth: 2,
borderColor: '#E0E0E0',
maxWidth: '90%',
},
tooltipContentTitle: {
color: Colors.DeepPurple,
},
tooltipContentDescription: {
color: Colors.RoyalPurple,
marginTop: 10,
},
tooltipOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'transparent',
},
tooltip: {
position: 'absolute',
backgroundColor: '#EBE6F3',
borderRadius: 8,
elevation: 6,
shadowColor: '#000',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
backgroundColor: '#FAFAFA',
borderWidth: 1,
borderColor: '#E0E0E0',
zIndex: 999,
marginLeft: 15,
},
pointer: {
position: 'absolute',
width: 0,
height: 0,
borderLeftWidth: POINTER_SIZE / 2,
borderRightWidth: POINTER_SIZE / 2,
borderBottomWidth: POINTER_SIZE / 2,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#EBE6F3',
zIndex: 1000,
tooltipContentDescription: {
color: Colors.toolTipContent,
marginTop: 10,
},
tooltipHrLine: {
borderBottomColor: Colors.Grey5,
@@ -800,7 +698,7 @@ export const DefaultTheme = {
maxHeight: 20,
borderRadius: 4,
fontSize: 10,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
lineHeight: 12,
},
scanLayoutHeaderContainer: {
@@ -811,7 +709,7 @@ export const DefaultTheme = {
},
scanLayoutHeaderTitle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: isIOS() ? 10 : 20,
paddingBottom: 10,
},
@@ -828,18 +726,18 @@ export const DefaultTheme = {
},
sendVPHeaderTitle: {
fontSize: 18,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
sendVPHeaderSubTitle: {
fontSize: 13,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: Colors.Orange,
maxWidth: '80%',
overflow: 'hidden',
},
HistoryHeaderTitleStyle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: isIOS() ? 5 : 15,
},
tabBarIconCopilot: {
@@ -876,7 +774,7 @@ export const DefaultTheme = {
backgroundColor: '#DADADA',
},
disclosureTitle: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
color: Colors.Black,
},
@@ -887,32 +785,20 @@ export const DefaultTheme = {
},
disclosureSelectButton: {
fontSize: 14,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
BannerStyles: StyleSheet.create({
bannerStackContainer: {
position: 'absolute',
width: '100%',
alignItems: 'center',
zIndex: 100,
},
wrapper: {
width: '100%',
alignSelf: 'center',
},
container: {
alignItems: 'center',
alignItems: 'flex-start',
justifyContent: 'space-between',
backgroundColor: '#DB2E2E',
width: '100%',
height: 70,
position: 'relative',
paddingHorizontal: 18,
paddingVertical: 12,
marginVertical: 1,
columnGap: 7,
borderRadius: 10,
},
topBanner: {
marginTop: 10,
@@ -920,24 +806,20 @@ export const DefaultTheme = {
},
text: {
textAlignVertical: 'center',
fontSize: 14,
fontSize: 12,
lineHeight: 15,
padding: 1,
marginHorizontal: 8,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
dismiss: {paddingLeft: 9},
inProgress: {
backgroundColor: Colors.LightYellow,
color: Colors.CharcoalBlue,
backgroundColor: Colors.OrangeBrown,
},
success: {
backgroundColor: Colors.LightMintGreen,
color: Colors.CharcoalBlue,
backgroundColor: Colors.Green,
},
error: {
backgroundColor: Colors.LightRose,
color: Colors.CharcoalBlue,
backgroundColor: Colors.LightRed,
},
}),
QrCodeStyles: StyleSheet.create({
@@ -963,7 +845,7 @@ export const DefaultTheme = {
borderTopLeftRadius: 21,
borderTopRightRadius: 21,
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
paddingBottom: 10,
paddingRight: 15,
paddingLeft: 130,
@@ -999,7 +881,7 @@ export const DefaultTheme = {
color: Colors.Black,
flex: 1,
fontSize: 33,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
height: 50,
lineHeight: 28,
margin: 8,
@@ -1010,7 +892,7 @@ export const DefaultTheme = {
borderColor: Colors.Orange,
color: Colors.Black,
flex: 1,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 29,
height: 50,
margin: 8,
@@ -1020,33 +902,33 @@ export const DefaultTheme = {
TextStyles: StyleSheet.create({
header: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
},
subHeader: {
color: Colors.mediumLightGrayText,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 19,
fontSize: 13,
paddingTop: 4,
},
semiBoldHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
},
retrieveIdLabel: {
color: Colors.ShadeOfGrey,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 18,
},
helpHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
@@ -1055,11 +937,11 @@ export const DefaultTheme = {
helpDetails: {
margin: 5,
color: Colors.Gray44,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
urlLinkText: {
color: Colors.Orange,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
aboutDetails: {
color: Colors.Black,
@@ -1072,7 +954,7 @@ export const DefaultTheme = {
top: 65,
left: 5,
color: Colors.Red,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 12,
minWidth: 200,
},
@@ -1082,21 +964,21 @@ export const DefaultTheme = {
lineHeight: 18,
},
regular: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
},
regularGrey: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 15,
lineHeight: 19,
color: Colors.ShadeOfGrey,
},
semibold: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
bold: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
justifyContent: 'center',
},
@@ -1170,27 +1052,23 @@ export const DefaultTheme = {
},
}),
SearchBarStyles: StyleSheet.create({
idleSearchBarBottomLine: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Gray40,
},
searchBarContainer: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Orange,
},
clearIcon: {
position: 'absolute',
right: 45,
width: 40,
justifyContent: 'center',
vcSearchBarContainer: {
alignItems: 'center',
},
vcSearchBarContainer: {},
innerSearchBarContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
borderBottomWidth: 0.5,
borderTopWidth: 0.5,
borderColor: Colors.DimGray,
width: Dimensions.get('window').width,
backgroundColor: Colors.White,
borderColor: Colors.veryLightBluishGray,
borderRadius: 18,
borderWidth: 2,
marginTop: 10,
paddingHorizontal: 20,
},
vcSearchIcon: {
justifyContent: 'center',
@@ -1199,17 +1077,17 @@ export const DefaultTheme = {
paddingLeft: 15,
},
searchIcon: {
width: 25,
justifyContent: 'center',
alignItems: 'center',
height: Dimensions.get('window').height * 0.055,
width: Dimensions.get('window').width * 0.1,
},
searchBar: {
textAlign: I18nManager.isRTL ? 'right' : 'left',
height: Dimensions.get('window').height * 0.055,
flex: 1,
fontFamily: 'Montserrat_500Medium',
fontSize: 17,
marginRight: 40,
width: Dimensions.get('window').width * 0.75,
},
clearSearch: {
padding: 10,
},
}),
ButtonStyles: StyleSheet.create({
@@ -1290,7 +1168,7 @@ export const DefaultTheme = {
backgroundColor: Colors.White,
borderWidth: 0,
marginTop: -15,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
padding: 0,
},
timeoutHintContainer: {
@@ -1393,7 +1271,7 @@ export const DefaultTheme = {
}),
BackupAndRestoreStyles: StyleSheet.create({
backupProgressText: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
color: Colors.Gray44,
},
@@ -1403,7 +1281,7 @@ export const DefaultTheme = {
textAlign: 'center',
lineHeight: 22,
fontSize: 17,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginHorizontal: 30,
},
actionOrLoaderContainer: {
@@ -1420,7 +1298,7 @@ export const DefaultTheme = {
paddingHorizontal: 10,
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontSize: 14,
letterSpacing: 0,
lineHeight: 17,
@@ -1438,7 +1316,7 @@ export const DefaultTheme = {
headerText: {
justifyContent: 'center',
paddingLeft: 12,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontWeight: '600',
fontSize: 14,
letterSpacing: 0,
@@ -1499,7 +1377,7 @@ export const DefaultTheme = {
},
kebabHeaderStyle: {
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
MessageOverlayStyles: StyleSheet.create({
@@ -1519,7 +1397,6 @@ export const DefaultTheme = {
button: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
fontSize: 16,
},
halfButton: {
borderRadius: 8,
@@ -1598,7 +1475,7 @@ export const DefaultTheme = {
sliderTitle: {
color: Colors.White,
marginBottom: 20,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
text: {
color: Colors.White,
@@ -1679,7 +1556,7 @@ export const DefaultTheme = {
marginHorizontal: 9,
},
issuerHeading: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
paddingHorizontal: 3,
marginBottom: 2,
@@ -1705,7 +1582,7 @@ export const DefaultTheme = {
image: {marginTop: -60, paddingBottom: 26},
title: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1714,7 +1591,7 @@ export const DefaultTheme = {
},
message: {
textAlign: 'center',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
lineHeight: 20,
marginTop: 6,
@@ -1724,7 +1601,7 @@ export const DefaultTheme = {
},
additionalMessage: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1760,16 +1637,16 @@ export const DefaultTheme = {
paddingHorizontal: 15,
paddingBottom: 10,
backgroundColor: '#fff',
elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 4}, // only downward shadow
shadowOpacity: 0.1,
elevation: 5, // For Android
shadowColor: '#000', // For iOS
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
zIndex: 1,
},
heading: {
color: 'black',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
padding: 10,
@@ -1916,16 +1793,16 @@ export const DefaultTheme = {
purposeText: {
fontSize: 13,
position: 'relative',
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
},
cardsSelectedText: {
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
color: '#000000',
fontSize: 14,
},
selectIDText: {
position: 'relative',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 16,
},
}),
@@ -1945,11 +1822,11 @@ export const DefaultTheme = {
justifyContent: 'space-between',
},
bannerTitle: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
bannerGuide: {
opacity: 0.8,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
bannerEnablePermissionContainer: {
marginTop: 15,
@@ -1957,7 +1834,7 @@ export const DefaultTheme = {
bannerEnablePermission: {
borderBottomWidth: 1.5,
borderBottomColor: Colors.White,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
scannerContainer: {
borderRadius: 24,
@@ -2012,18 +1889,14 @@ export const DefaultTheme = {
},
holdPhoneSteadyText: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
cameraFlipIcon: {
height: 50,
width: 50,
},
iconText: {
fontFamily: 'Montserrat_600SemiBold',
fontSize: 12,
marginTop: 6,
},
iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
}),
BottomTabBarStyle: StyleSheet.create({
@@ -2031,7 +1904,7 @@ export const DefaultTheme = {
headerLeftContainerStyle: {paddingEnd: 13},
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
tabBarStyle: {
display: 'flex',
@@ -2127,26 +2000,6 @@ export const DefaultTheme = {
marginTop: 10,
width: '80%',
},
transactionGradientContainer: {
width: Dimensions.get('window').width - 100,
alignSelf: 'center',
borderRadius: 18,
padding: 2,
marginTop: 10,
marginBottom: 25,
},
inputContainer: {
borderBottomWidth: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
backgroundColor: Colors.White,
borderRadius: 18,
paddingHorizontal: 20,
overflow: 'hidden',
height: 60,
},
inputStyle: {
fontSize: 20,
fontWeight: '500',
@@ -2309,7 +2162,7 @@ export const DefaultTheme = {
titleText: {
fontSize: 17,
textAlign: 'left',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: 20,
},
titleDescription: {
@@ -2320,14 +2173,14 @@ export const DefaultTheme = {
},
noteTitleText: {
fontSize: 14,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: '#973C00',
marginBottom: 5,
},
noteDescriptionText: {
fontSize: 13,
color: '#973C00',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
lineHeight: 18,
textAlign: 'left',
marginLeft: -25,
@@ -2346,7 +2199,7 @@ export const DefaultTheme = {
},
text: {
fontSize: 14,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
color: 'black',
flex: 1,
},

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

@@ -12,7 +12,6 @@ import Constants from 'expo-constants';
import HomeScreenLogo from '../../../assets/Inji_Home_Logo.svg';
import InjiLogoSmall from '../../../assets/InjiLogo.svg';
import i18next from '../../../i18n';
import {POINTER_SIZE} from '../ToolTip';
const Colors = {
Black: '#231F20',
@@ -46,7 +45,6 @@ const Colors = {
Warning: '#f0ad4e',
GrayText: '#6F6F6F',
mediumLightGrayText: '#A7A7A7',
veryLightBluishGray: '#D9E1E7',
dorColor: '#CBCBCB',
plainText: '#F3E2FF',
walletbindingLabel: '#000000',
@@ -72,16 +70,6 @@ const Colors = {
Mercury: '#E6E6E6',
Yellow: '#E8A94F',
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
brandPrimary: '#5B03AD',
brandPrimaryLight: '#F2E6FA',
brandPrimaryDark: '#4A028F',
DeepPurple: '#290B45',
RoyalPurple: '#451691',
LightMintGreen: '#9DCFBB',
CharcoalBlue: '#384455',
LightRose: '#EFB3B5',
LightYellow: '#FFE799',
SteelBlue: '#809FB8',
};
export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -103,7 +91,6 @@ export const PurpleTheme = {
IconBg: Colors.Purple,
popUp: Colors.Green,
Icon: Colors.Purple,
SearchIcon: Colors.veryLightBluishGray,
GrayIcon: Colors.Gray50,
helpText: Colors.Gray44,
borderBottomColor: Colors.Grey6,
@@ -114,7 +101,6 @@ export const PurpleTheme = {
switchHead: Colors.Purple,
switchTrackTrue: Colors.LightPurple,
switchTrackFalse: Colors.Grey,
switchCircleOff: Colors.White,
overlayBackgroundColor: Colors.White,
rotatingIcon: Colors.Grey5,
loadingLabel: Colors.Grey6,
@@ -156,10 +142,10 @@ export const PurpleTheme = {
uncheckedIcon: Colors.uncheckedIcon,
settingsLabel: Colors.Black,
chevronRightColor: Colors.Grey,
linearGradientStart: Colors.brandPrimary,
linearGradientEnd: Colors.brandPrimary,
linearIconGradientStart: Colors.brandPrimary,
linearIconGradientEnd: Colors.brandPrimary,
linearGradientStart: Colors.startColor,
linearGradientEnd: Colors.endColor,
linearIconGradientStart: Colors.startColor,
linearIconGradientEnd: Colors.startColor,
LinearGradientStroke: Colors.stroke,
warningLogoBgColor: Colors.warningLogoBg,
tooltipIcon: Colors.tooltip,
@@ -167,16 +153,6 @@ export const PurpleTheme = {
urlLink: Colors.Purple,
warningText: Colors.Red,
PendingIcon: Colors.Yellow,
ListSelectedBackground: Colors.brandPrimaryLight,
ListSelectedText: Colors.brandPrimary,
ListSelectedIcon: Colors.brandPrimary,
ListUnselectedBackground: Colors.White,
ListUnselectedText: Colors.Black,
SearchBarPlaceholderColor: Colors.veryLightBluishGray,
PopupText: Colors.CharcoalBlue,
TransactionCodeBackgroundColor: Colors.White,
TransactionCodeBorderColor: Colors.veryLightBluishGray,
TransactionCodePlaceholderColor: Colors.SteelBlue,
},
Styles: StyleSheet.create({
title: {
@@ -195,12 +171,12 @@ export const PurpleTheme = {
fieldItemTitle: {
backgroundColor: Colors.Transparent,
fontSize: 11,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
fieldItemValue: {
backgroundColor: Colors.Transparent,
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: 3,
},
loadingSubtitle: {
@@ -209,7 +185,7 @@ export const PurpleTheme = {
},
verificationStatus: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
statusLabel: {
color: Colors.Gray30,
@@ -513,9 +489,6 @@ export const PurpleTheme = {
borderRadius: 10,
backgroundColor: Colors.LightPurple,
},
BackButtonBgGradient: {
borderRadius: 10,
},
imageCaptureButton: {
marginLeft: 130,
marginRight: 50,
@@ -607,7 +580,7 @@ export const PurpleTheme = {
detailsText: {
fontWeight: 'bold',
fontSize: 15,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
idInputContainer: {
width: Dimensions.get('window').width * 0.86,
@@ -620,51 +593,9 @@ export const PurpleTheme = {
height: isIOS() ? 100 : 'auto',
},
picker: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
},
overlay: {
padding: 1,
borderRadius: 12,
overflow: 'hidden',
},
listItemSelectedText: {
color: Colors.brandPrimary,
fontWeight: '600',
fontFamily: 'Montserrat_500Medium',
},
listItemUnselectedText: {
color: Colors.Black,
fontWeight: '400',
fontFamily: 'Montserrat_500Medium',
},
listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
listItemUnselectedContainer: {backgroundColor: Colors.White},
listItemSelectedCircle: {
width: 22,
height: 22,
borderRadius: 11,
borderWidth: 7,
borderColor: Colors.brandPrimary,
backgroundColor: Colors.White,
},
wrapper: {
borderWidth: 2,
borderRadius: 16,
padding: 2,
},
container: {
width: 48,
height: 22,
borderRadius: 16,
padding: 3,
},
circle: {
width: 18,
height: 18,
borderRadius: 9,
elevation: 2,
},
idInputBottom: {
position: 'relative',
bottom: 18,
@@ -683,7 +614,7 @@ export const PurpleTheme = {
marginVertical: 6,
},
placeholder: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
hrLine: {
borderBottomColor: Colors.Gray44,
@@ -731,45 +662,13 @@ export const PurpleTheme = {
},
boxShadow: generateBoxShadowStyle(),
tooltipContainerStyle: {
backgroundColor: '#EBE6F3',
borderWidth: 2,
borderColor: '#E0E0E0',
maxWidth: '90%',
},
tooltipOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'transparent',
},
tooltip: {
position: 'absolute',
backgroundColor: '#EBE6F3',
borderRadius: 8,
elevation: 6,
shadowColor: '#000',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
backgroundColor: '#FAFAFA',
borderWidth: 1,
borderColor: '#E0E0E0',
zIndex: 999,
},
pointer: {
position: 'absolute',
width: 0,
height: 0,
borderLeftWidth: POINTER_SIZE / 2,
borderRightWidth: POINTER_SIZE / 2,
borderBottomWidth: POINTER_SIZE / 2,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#EBE6F3',
zIndex: 1000,
},
tooltipContentTitle: {
color: Colors.DeepPurple,
marginLeft: 15,
},
tooltipContentDescription: {
color: Colors.RoyalPurple,
color: Colors.toolTipContent,
marginTop: 10,
},
tooltipHrLine: {
@@ -807,7 +706,7 @@ export const PurpleTheme = {
marginTop: 10,
borderRadius: 4,
fontSize: 10,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
lineHeight: 12,
},
scanLayoutHeaderContainer: {
@@ -818,7 +717,7 @@ export const PurpleTheme = {
},
scanLayoutHeaderTitle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: isIOS() ? 10 : 20,
paddingBottom: 10,
},
@@ -835,18 +734,18 @@ export const PurpleTheme = {
},
sendVPHeaderTitle: {
fontSize: 18,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
sendVPHeaderSubTitle: {
fontSize: 13,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: Colors.LightPurple,
maxWidth: '80%',
overflow: 'hidden',
},
HistoryHeaderTitleStyle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: isIOS() ? 5 : 15,
},
tabBarIconCopilot: {
@@ -884,7 +783,7 @@ export const PurpleTheme = {
marginBottom: 12,
},
disclosureTitle: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
color: Colors.Black,
},
@@ -895,57 +794,41 @@ export const PurpleTheme = {
},
disclosureSelectButton: {
fontSize: 14,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
BannerStyles: StyleSheet.create({
bannerStackContainer: {
position: 'absolute',
width: '100%',
alignItems: 'center',
zIndex: 100,
},
wrapper: {
width: '100%',
alignSelf: 'center',
},
container: {
alignItems: 'center',
alignItems: 'flex-start',
justifyContent: 'space-between',
backgroundColor: '#DB2E2E',
width: '100%',
height: 70,
position: 'relative',
paddingHorizontal: 18,
paddingVertical: 12,
marginVertical: 1,
columnGap: 7,
borderRadius: 10,
},
text: {
textAlignVertical: 'center',
fontSize: 12,
lineHeight: 15,
padding: 1,
fontFamily: 'Inter_600SemiBold',
},
topBanner: {
marginTop: 10,
marginBottom: 10,
},
text: {
textAlignVertical: 'center',
fontSize: 14,
lineHeight: 15,
padding: 1,
marginHorizontal: 8,
fontFamily: 'Montserrat_600SemiBold',
},
dismiss: {paddingLeft: 9},
inProgress: {
backgroundColor: Colors.LightYellow,
color: Colors.CharcoalBlue,
backgroundColor: Colors.OrangeBrown,
},
success: {
backgroundColor: Colors.LightMintGreen,
color: Colors.CharcoalBlue,
backgroundColor: Colors.Green,
},
error: {
backgroundColor: Colors.LightRose,
color: Colors.CharcoalBlue,
backgroundColor: Colors.LightRed,
},
}),
QrCodeStyles: StyleSheet.create({
@@ -971,7 +854,7 @@ export const PurpleTheme = {
borderTopLeftRadius: 21,
borderTopRightRadius: 21,
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
paddingBottom: 10,
paddingRight: 15,
paddingLeft: 130,
@@ -1007,7 +890,7 @@ export const PurpleTheme = {
color: Colors.Black,
flex: 1,
fontSize: 33,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
height: 40,
lineHeight: 28,
margin: 8,
@@ -1018,7 +901,7 @@ export const PurpleTheme = {
borderColor: Colors.Purple,
color: Colors.Black,
flex: 1,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 29,
height: 40,
margin: 8,
@@ -1028,33 +911,33 @@ export const PurpleTheme = {
TextStyles: StyleSheet.create({
header: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
},
subHeader: {
color: Colors.mediumLightGrayText,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 19,
fontSize: 13,
paddingTop: 4,
},
semiBoldHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
},
retrieveIdLabel: {
color: Colors.ShadeOfGrey,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 18,
},
helpHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
@@ -1063,11 +946,11 @@ export const PurpleTheme = {
helpDetails: {
margin: 5,
color: Colors.Gray44,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
urlLinkText: {
color: Colors.Purple,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
aboutDetails: {
color: Colors.Black,
@@ -1080,7 +963,7 @@ export const PurpleTheme = {
top: 65,
left: 5,
color: Colors.Red,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 12,
minWidth: 200,
},
@@ -1090,21 +973,21 @@ export const PurpleTheme = {
lineHeight: 18,
},
regular: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
},
regularGrey: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 15,
lineHeight: 19,
color: Colors.ShadeOfGrey,
},
semibold: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
bold: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
justifyContent: 'center',
},
@@ -1178,27 +1061,23 @@ export const PurpleTheme = {
},
}),
SearchBarStyles: StyleSheet.create({
idleSearchBarBottomLine: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Gray40,
},
searchBarContainer: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Purple,
},
clearIcon: {
position: 'absolute',
right: 45,
width: 40,
justifyContent: 'center',
vcSearchBarContainer: {
alignItems: 'center',
},
vcSearchBarContainer: {},
innerSearchBarContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
borderBottomWidth: 0.5,
borderTopWidth: 0.5,
borderColor: Colors.DimGray,
width: Dimensions.get('window').width,
backgroundColor: Colors.White,
borderColor: Colors.veryLightBluishGray,
borderRadius: 18,
borderWidth: 2,
marginTop: 10,
paddingHorizontal: 20,
},
vcSearchIcon: {
justifyContent: 'center',
@@ -1207,17 +1086,17 @@ export const PurpleTheme = {
paddingLeft: 15,
},
searchIcon: {
width: 25,
justifyContent: 'center',
alignItems: 'center',
height: Dimensions.get('window').height * 0.055,
width: Dimensions.get('window').width * 0.1,
},
searchBar: {
textAlign: I18nManager.isRTL ? 'right' : 'left',
height: Dimensions.get('window').height * 0.055,
flex: 1,
fontFamily: 'Montserrat_500Medium',
fontSize: 17,
marginRight: 40,
width: Dimensions.get('window').width * 0.75,
},
clearSearch: {
padding: 10,
},
}),
ButtonStyles: StyleSheet.create({
@@ -1295,7 +1174,7 @@ export const PurpleTheme = {
backgroundColor: Colors.White,
borderWidth: 0,
marginTop: -15,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
padding: 0,
},
timeoutHintContainer: {
@@ -1398,7 +1277,7 @@ export const PurpleTheme = {
}),
BackupAndRestoreStyles: StyleSheet.create({
backupProgressText: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
color: Colors.Gray44,
},
@@ -1412,7 +1291,7 @@ export const PurpleTheme = {
textAlign: 'center',
lineHeight: 22,
fontSize: 17,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginHorizontal: 30,
},
cloudInfo: {
@@ -1425,7 +1304,7 @@ export const PurpleTheme = {
paddingHorizontal: 10,
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontSize: 14,
letterSpacing: 0,
lineHeight: 17,
@@ -1443,7 +1322,7 @@ export const PurpleTheme = {
headerText: {
justifyContent: 'center',
paddingLeft: 12,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontWeight: '600',
fontSize: 14,
letterSpacing: 0,
@@ -1504,7 +1383,7 @@ export const PurpleTheme = {
},
kebabHeaderStyle: {
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
MessageOverlayStyles: StyleSheet.create({
@@ -1603,7 +1482,7 @@ export const PurpleTheme = {
sliderTitle: {
color: Colors.White,
marginBottom: 20,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
text: {
color: Colors.White,
@@ -1685,7 +1564,7 @@ export const PurpleTheme = {
marginHorizontal: 9,
},
issuerHeading: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
paddingHorizontal: 3,
marginBottom: 2,
@@ -1709,7 +1588,7 @@ export const PurpleTheme = {
image: {marginTop: -60, paddingBottom: 26},
title: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1718,7 +1597,7 @@ export const PurpleTheme = {
},
message: {
textAlign: 'center',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
lineHeight: 20,
marginTop: 6,
@@ -1728,7 +1607,7 @@ export const PurpleTheme = {
},
additionalMessage: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1768,16 +1647,16 @@ export const PurpleTheme = {
paddingHorizontal: 15,
paddingBottom: 10,
backgroundColor: '#fff',
elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 4}, // only downward shadow
shadowOpacity: 0.1,
elevation: 5, // For Android
shadowColor: '#000', // For iOS
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
zIndex: 1,
},
heading: {
color: 'black',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
padding: 10,
@@ -1921,16 +1800,16 @@ export const PurpleTheme = {
purposeText: {
fontSize: 13,
position: 'relative',
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
},
cardsSelectedText: {
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
color: '#000000',
fontSize: 14,
},
selectIDText: {
position: 'relative',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 16,
},
}),
@@ -1950,11 +1829,11 @@ export const PurpleTheme = {
justifyContent: 'space-between',
},
bannerTitle: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
bannerGuide: {
opacity: 0.8,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
bannerEnablePermissionContainer: {
marginTop: 15,
@@ -1962,7 +1841,7 @@ export const PurpleTheme = {
bannerEnablePermission: {
borderBottomWidth: 1.5,
borderBottomColor: Colors.White,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
scannerContainer: {
borderRadius: 24,
@@ -2016,25 +1895,21 @@ export const PurpleTheme = {
},
holdPhoneSteadyText: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
cameraFlipIcon: {
height: 50,
width: 50,
},
iconText: {
fontFamily: 'Montserrat_600SemiBold',
fontSize: 12,
marginTop: 6,
},
iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
}),
BottomTabBarStyle: StyleSheet.create({
headerRightContainerStyle: {paddingEnd: 13},
headerLeftContainerStyle: {paddingEnd: 13},
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
tabBarStyle: {
display: 'flex',
@@ -2129,26 +2004,6 @@ export const PurpleTheme = {
marginTop: 10,
width: '80%',
},
transactionGradientContainer: {
width: Dimensions.get('window').width - 100,
alignSelf: 'center',
borderRadius: 18,
padding: 2,
marginTop: 10,
marginBottom: 25,
},
inputContainer: {
borderBottomWidth: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
backgroundColor: Colors.White,
borderRadius: 18,
paddingHorizontal: 20,
overflow: 'hidden',
height: 60,
},
inputStyle: {
fontSize: 20,
fontWeight: '500',
@@ -2309,7 +2164,7 @@ export const PurpleTheme = {
titleText: {
fontSize: 17,
textAlign: 'left',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: 20,
},
titleDescription: {
@@ -2320,14 +2175,14 @@ export const PurpleTheme = {
},
noteTitleText: {
fontSize: 14,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: '#973C00',
marginBottom: 5,
},
noteDescriptionText: {
fontSize: 13,
color: '#973C00',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
lineHeight: 18,
textAlign: 'left',
marginLeft: -25,
@@ -2346,7 +2201,7 @@ export const PurpleTheme = {
},
text: {
fontSize: 14,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
color: 'black',
flex: 1,
},