diff --git a/.talismanrc b/.talismanrc index c41040fb..a1b1a392 100644 --- a/.talismanrc +++ b/.talismanrc @@ -2,7 +2,7 @@ fileignoreconfig: - filename: package.json checksum: 5b4fcb5ddc7cc96cc2d1733b544d56ea66e88cdab995a1052fbf9ac0e9c2dc21 - filename: package-lock.json - checksum: 1885743d6ee2727f5f5b175db599676232f549b12e3ec94efc7c050f7a61b8d7 + checksum: 0c4eec7fc90a92da92234caa4fa4828caf579d015a11daf38d9fa515c1f1f9bf - filename: lib/jsonld-signatures/suites/ed255192018/ed25519.ts checksum: 493b6e31144116cb612c24d98b97d8adcad5609c0a52c865a6847ced0a0ddc3a - filename: components/PasscodeVerify.tsx @@ -413,3 +413,9 @@ fileignoreconfig: - filename: components/VC/Views/VCDetailView.tsx checksum: 890c216a5632ac77b938f2f58f2123a669ea45b933a41931b8e7324e315f2d50 version: "1.0" + - filename: screens/Settings/SettingScreen.tsx + checksum: ce9c50ec1af107161c2a25e1481794aaa9898ff1998dff26bc7986c43a51c2fa + - filename: screens/IntroSliders/trustedDigitalWalletIntro.tsx + checksum: 4d46111af02fc8b6731f624d3e4f6ce71d6369649f4549564627a8962b136192 + - filename: components/ui/Picker.tsx + checksum: ad814e904cb990f55068281fcb566cca349872de2c4fd66432ed6372fb540ec3 diff --git a/assets/Error_Toast_Icon.svg b/assets/Error_Toast_Icon.svg new file mode 100644 index 00000000..d63b87a9 --- /dev/null +++ b/assets/Error_Toast_Icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/Expired_Status.svg b/assets/Expired_Status.svg new file mode 100644 index 00000000..d7e66e54 --- /dev/null +++ b/assets/Expired_Status.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/Icon.svg b/assets/Icon.svg new file mode 100644 index 00000000..0ba0b8eb --- /dev/null +++ b/assets/Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/Info_Toast_Icon.svg b/assets/Info_Toast_Icon.svg new file mode 100644 index 00000000..a13e8497 --- /dev/null +++ b/assets/Info_Toast_Icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/Pending_Status.svg b/assets/Pending_Status.svg new file mode 100644 index 00000000..fce240ff --- /dev/null +++ b/assets/Pending_Status.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/Receive_Card.svg b/assets/Receive_Card.svg index 446e1fad..af3bb506 100644 --- a/assets/Receive_Card.svg +++ b/assets/Receive_Card.svg @@ -8,6 +8,6 @@ - + diff --git a/assets/Revoked_Status.svg b/assets/Revoked_Status.svg new file mode 100644 index 00000000..a4513b7a --- /dev/null +++ b/assets/Revoked_Status.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/Selected_Check_Box.svg b/assets/Selected_Check_Box.svg index d6d11c13..8e3b99c6 100644 --- a/assets/Selected_Check_Box.svg +++ b/assets/Selected_Check_Box.svg @@ -1,7 +1,7 @@ - + diff --git a/assets/Success_Toast_Icon.svg b/assets/Success_Toast_Icon.svg new file mode 100644 index 00000000..6afd47c5 --- /dev/null +++ b/assets/Success_Toast_Icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/Valid_Status.svg b/assets/Valid_Status.svg new file mode 100644 index 00000000..12a0739f --- /dev/null +++ b/assets/Valid_Status.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/Warning_Toast_Icon.svg b/assets/Warning_Toast_Icon.svg new file mode 100644 index 00000000..e8795c46 --- /dev/null +++ b/assets/Warning_Toast_Icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/BannerNotification.tsx b/components/BannerNotification.tsx index d9293cb0..2a6b2785 100644 --- a/components/BannerNotification.tsx +++ b/components/BannerNotification.tsx @@ -1,30 +1,36 @@ import React from 'react'; -import {Pressable, View} from 'react-native'; +import {Pressable, StatusBar, 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 = props => { return ( - + + {props.type === BannerStatusType.SUCCESS && } + {props.type === BannerStatusType.ERROR && } + {props.type === BannerStatusType.IN_PROGRESS && } {props.message} - + - + diff --git a/components/BannerNotificationContainer.tsx b/components/BannerNotificationContainer.tsx index f3f41e43..9a933f8d 100644 --- a/components/BannerNotificationContainer.tsx +++ b/components/BannerNotificationContainer.tsx @@ -30,7 +30,7 @@ export const BannerNotificationContainer: React.FC< const verificationStatus = bannerNotificationController.verificationStatus || null; return ( - <> + {settingsScreenController.isKeyOrderSet === true && ( @@ -145,7 +145,7 @@ export const BannerNotificationContainer: React.FC< testId={'downloadingVcSuccessPopup'} /> )} - + ); }; diff --git a/components/BiometricIcon.tsx b/components/BiometricIcon.tsx new file mode 100644 index 00000000..98275045 --- /dev/null +++ b/components/BiometricIcon.tsx @@ -0,0 +1,18 @@ +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 = ({size = 66}) => { + const Icon = isIOS() + ? SvgImage.faceBiometicIcon(size) + : SvgImage.fingerprintIcon(size); + + return {Icon}; +}; + +export default BiometricIcon; diff --git a/components/KebabPopUp.tsx b/components/KebabPopUp.tsx index b6904ffe..ebb0485e 100644 --- a/components/KebabPopUp.tsx +++ b/components/KebabPopUp.tsx @@ -59,7 +59,7 @@ export const KebabPopUp: React.FC = props => { {item.icon} void; + testID?: string; +} + +const Toggle: React.FC = ({value, onToggle, testID}) => { + return ( + + 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} + /> + + ); +}; + +export default Toggle; diff --git a/components/VC/Views/VCDetailView.tsx b/components/VC/Views/VCDetailView.tsx index 1843d1c4..589edc67 100644 --- a/components/VC/Views/VCDetailView.tsx +++ b/components/VC/Views/VCDetailView.tsx @@ -302,7 +302,7 @@ export const VCDetailView: React.FC = ( = ( = ( testID="profileAuthenticated" color={Theme.Colors.statusLabel} style={{ - fontFamily: 'Inter_600SemiBold', + fontFamily: 'Montserrat_600SemiBold', fontSize: 14, }} margin={'0 18 0 0'}> @@ -379,7 +379,7 @@ export const VCDetailView: React.FC = ( style={{ color: '#007AFF', fontSize: 16, - fontFamily: 'Inter_500Medium', + fontFamily: 'Montserrat_500Medium', }}> {t('View Shareable Information')} diff --git a/components/VC/common/VCItemField.tsx b/components/VC/common/VCItemField.tsx index 3dce8cda..a485d9ff 100644 --- a/components/VC/common/VCItemField.tsx +++ b/components/VC/common/VCItemField.tsx @@ -1,13 +1,13 @@ -import { Dimensions, View } from 'react-native'; -import { Column, Row, Text } from '../../ui'; -import { CustomTooltip } from '../../ui/ToolTip'; -import { Theme } from '../../ui/styleUtils'; +import {Dimensions, View} from 'react-native'; +import {Column, Row, Text} from '../../ui'; +import {CustomTooltip} from '../../ui/ToolTip'; +import {Theme} from '../../ui/styleUtils'; import React from 'react'; -import { SvgImage } from '../../ui/svg'; -import { useTranslation } from 'react-i18next'; +import {SvgImage} from '../../ui/svg'; +import {useTranslation} from 'react-i18next'; import Icon from 'react-native-vector-icons/FontAwesome'; -import { STATUS_FIELD_NAME } from './VCUtils'; -import { StatusTooltipContent } from './VcStatustooTip'; +import {STATUS_FIELD_NAME} from './VCUtils'; +import {StatusTooltipContent} from './VcStatustooTip'; export const VCItemFieldName = ({ fieldName, @@ -20,7 +20,7 @@ export const VCItemFieldName = ({ fieldNameColor?: string; isDisclosed?: boolean; }) => { - const { t } = useTranslation('ViewVcModal'); + const {t} = useTranslation('ViewVcModal'); return ( {fieldName && ( @@ -38,14 +38,17 @@ export const VCItemFieldName = ({ width={Dimensions.get('screen').width * 0.8} height={Dimensions.get('screen').height * 0.28} triggerComponent={SvgImage.info()} - triggerComponentStyles={{ marginLeft: 2, marginTop: 2 }} - toolTipContent={ - - } + triggerComponentStyles={{marginLeft: 2, marginTop: 2}} + toolTipContent={} /> )} {isDisclosed && ( - + )} ); @@ -61,14 +64,7 @@ export const VCItemFieldValue = ({ fieldValueColor?: string; }) => { if (React.isValidElement(fieldValue)) { - - return ( - - {fieldValue} - - ); + return {fieldValue}; } return ( diff --git a/components/VCVerification.tsx b/components/VCVerification.tsx index a3a7d3a4..c4766747 100644 --- a/components/VCVerification.tsx +++ b/components/VCVerification.tsx @@ -1,20 +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 {Row, Text} from './ui'; +import {Theme} from './ui/styleUtils'; +import {useTranslation} from 'react-i18next'; +import {VCMetadata} from '../shared/VCMetadata'; export const VCVerification: React.FC = ({ vcMetadata, display, showLastChecked = true, }) => { - const { t } = useTranslation('VcDetails'); + const {t} = useTranslation('VcDetails'); let statusText: string; let statusIcon: JSX.Element; @@ -36,44 +36,48 @@ export const VCVerification: React.FC = ({ } return ( - - - {/* First Row: Status Icon + Text */} - - {statusIcon} - - {statusText} - - - - {showLastChecked && vcMetadata.lastKnownStatusTimestamp && ( - + + {/* First Row: Status Icon + Text */} + + {statusIcon} - {t('lastChecked')} - - - {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()} + style={Theme.Styles.verificationStatus}> + {statusText} - )} - -); + {showLastChecked && vcMetadata.lastKnownStatusTimestamp && ( + + + {t('lastChecked')} + + + {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()} + + + )} + + ); }; export interface VCVerificationProps { diff --git a/components/ui/Header.tsx b/components/ui/Header.tsx index 3c4303da..fbf08364 100644 --- a/components/ui/Header.tsx +++ b/components/ui/Header.tsx @@ -4,8 +4,10 @@ import {Column, Row} from './Layout'; import {Theme} from './styleUtils'; import testIDProps from '../../shared/commonUtil'; import {BackButton} from './backButton/BackButton'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; export const Header: React.FC = ({goBack, title, testID}) => { + const insets = useSafeAreaInsets(); return ( @@ -18,6 +20,7 @@ export const Header: React.FC = ({goBack, title, testID}) => { marginBottom: 22, marginVertical: 16, marginLeft: 10, + paddingTop: insets.top, }}> diff --git a/components/ui/Picker.tsx b/components/ui/Picker.tsx index 4d4af78b..40717ae4 100644 --- a/components/ui/Picker.tsx +++ b/components/ui/Picker.tsx @@ -4,6 +4,7 @@ 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> { (props: PickerProps): ReturnType; @@ -33,23 +34,41 @@ export const Picker: Picker = (props: PickerProps) => { + overlayStyle={Theme.Styles.overlay}> - {props.items.map((item, index) => ( - selectItem(index)} - key={index}> - - - {item.label} - - - {selectedIndex === index && } - - ))} + {props.items.map((item, index) => { + const isSelected = selectedIndex === index; + return ( + selectItem(index)} + containerStyle={ + isSelected + ? Theme.Styles.listItemSelectedContainer + : Theme.Styles.listItemUnselectedContainer + }> + + + + {item.label} + + + + + {isSelected && ( + + )} + + ); + })} diff --git a/components/ui/SearchBar.tsx b/components/ui/SearchBar.tsx index 8bef9ce1..556c5b41 100644 --- a/components/ui/SearchBar.tsx +++ b/components/ui/SearchBar.tsx @@ -1,44 +1,45 @@ import React from 'react'; -import {TextInput, View} from 'react-native'; +import {TextInput} 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, search, onFocus, onChangeText, onLayout, editable = true }: SearchBarProps) => { +export const SearchBar = ({ + searchIconTestID, + searchBarTestID, + placeholder, + search, + onFocus, + onChangeText, + onLayout, + editable = true, +}: SearchBarProps) => { return ( - - {isVcSearch ? ( - - {SvgImage.SearchIcon()} - - ) : ( - - )} + onChangeText(searchText)} onLayout={onLayout} editable={editable ?? true} /> + ); }; interface SearchBarProps { - isVcSearch: Boolean; searchIconTestID: string; searchBarTestID: string; search: string; diff --git a/components/ui/SetupPicker.tsx b/components/ui/SetupPicker.tsx index 17f95237..30c0cd64 100644 --- a/components/ui/SetupPicker.tsx +++ b/components/ui/SetupPicker.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useState} from 'react'; -import {Dimensions} from 'react-native'; +import {Dimensions, View} from 'react-native'; import {Icon, ListItem} from 'react-native-elements'; import {Column} from './Layout'; import {Text} from './Text'; @@ -33,30 +33,35 @@ export const SetupPicker: Picker = (props: PickerProps) => { testID={props.testID} width={Dimensions.get('window').width * 0.8} backgroundColor={Theme.Colors.whiteBackgroundColor}> - {props.items.map((item, index) => ( - selectItem(index)} - key={index}> - - - - {item.label} - - - - {selectedIndex === index ? ( - - ) : ( - - )} - - ))} + {props.items.map((item, index) => { + const isSelected = selectedIndex === index; + return ( + selectItem(index)}> + + + + {item.label} + + + + {isSelected ? ( + + ) : ( + + )} + + ); + })} ); }; diff --git a/components/ui/Timestamp.tsx b/components/ui/Timestamp.tsx index f2517bc8..131b7968 100644 --- a/components/ui/Timestamp.tsx +++ b/components/ui/Timestamp.tsx @@ -23,7 +23,7 @@ export const Timestamp: React.FC = props => { testID={`${props.testId}Time`} size="regular" style={{ - fontFamily: 'Inter_500Medium', + fontFamily: 'Montserrat_500Medium', fontWeight: '600', fontSize: 14, letterSpacing: 0, diff --git a/components/ui/svg.tsx b/components/ui/svg.tsx index fc191823..512d61ec 100644 --- a/components/ui/svg.tsx +++ b/components/ui/svg.tsx @@ -60,6 +60,7 @@ 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() { @@ -100,8 +101,8 @@ export class SvgImage { } static defaultIssuerLogo(defaultLogo: any) { - const DefaultLogo=defaultLogo - return + const DefaultLogo = defaultLogo; + return ; } static starIcon() { @@ -557,10 +558,6 @@ export class SvgImage { ); } - static SearchIcon() { - return ; - } - static settingsLanguageIcon(size) { return ( + ); + } + static abotInjiIcon() { return ( =16.0.0" } }, - "node_modules/@expo-google-fonts/inter": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@expo-google-fonts/inter/-/inter-0.2.3.tgz", - "integrity": "sha512-iHK9FI+dnE45X5c2Z5hSFwNH4zUWethizpbv3XUn0FIGw5jwvzriENz0a6wCdkI4/d+1QkurnHo5XHti7TbNJA==" + "node_modules/@expo-google-fonts/montserrat": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@expo-google-fonts/montserrat/-/montserrat-0.4.2.tgz", + "integrity": "sha512-Xyq7rKJhhZOE1Xk4wKSSVoUeOkFmQEMhtZ3pdFrgYckGZMs115Apmld1AI8Ju+yrl5GzDdfRCCqRr33dvEDYUA==" }, "node_modules/@expo/bunyan": { "version": "4.0.1", @@ -13639,6 +13640,15 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/dooboolab-welcome": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.3.2.tgz", + "integrity": "sha512-2NbMaIIURElxEf/UAoVUFlXrO+7n/FRhLCiQlk4fkbGRh9cJ3/f8VEMPveR9m4Ug2l2Zey+UCXjd6EcBqHJ5bw==", + "hasInstallScript": true, + "bin": { + "dooboolab-welcome": "bin/hello.js" + } + }, "node_modules/dot-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", @@ -25791,6 +25801,18 @@ "react-native-svg": ">=12.0.0" } }, + "node_modules/react-native-switch-toggle": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-native-switch-toggle/-/react-native-switch-toggle-2.2.1.tgz", + "integrity": "sha512-Y/RQ1Pb/KDVZhBSNjc16LKtUi7MGZb0MYxouZLj/THpiSQLsy5pUyTwbIKRjNuZDNSxmMDXyRX1QfLt+oup4Uw==", + "dependencies": { + "dooboolab-welcome": "^1.3.0" + }, + "peerDependencies": { + "react": ">=16.9", + "react-native": ">=0.58" + } + }, "node_modules/react-native-url-polyfill": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz", @@ -33132,10 +33154,10 @@ "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==", "dev": true }, - "@expo-google-fonts/inter": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@expo-google-fonts/inter/-/inter-0.2.3.tgz", - "integrity": "sha512-iHK9FI+dnE45X5c2Z5hSFwNH4zUWethizpbv3XUn0FIGw5jwvzriENz0a6wCdkI4/d+1QkurnHo5XHti7TbNJA==" + "@expo-google-fonts/montserrat": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@expo-google-fonts/montserrat/-/montserrat-0.4.2.tgz", + "integrity": "sha512-Xyq7rKJhhZOE1Xk4wKSSVoUeOkFmQEMhtZ3pdFrgYckGZMs115Apmld1AI8Ju+yrl5GzDdfRCCqRr33dvEDYUA==" }, "@expo/bunyan": { "version": "4.0.1", @@ -40836,6 +40858,11 @@ "domhandler": "^5.0.3" } }, + "dooboolab-welcome": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.3.2.tgz", + "integrity": "sha512-2NbMaIIURElxEf/UAoVUFlXrO+7n/FRhLCiQlk4fkbGRh9cJ3/f8VEMPveR9m4Ug2l2Zey+UCXjd6EcBqHJ5bw==" + }, "dot-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", @@ -49741,6 +49768,14 @@ "path-dirname": "^1.0.2" } }, + "react-native-switch-toggle": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-native-switch-toggle/-/react-native-switch-toggle-2.2.1.tgz", + "integrity": "sha512-Y/RQ1Pb/KDVZhBSNjc16LKtUi7MGZb0MYxouZLj/THpiSQLsy5pUyTwbIKRjNuZDNSxmMDXyRX1QfLt+oup4Uw==", + "requires": { + "dooboolab-welcome": "^1.3.0" + } + }, "react-native-url-polyfill": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz", diff --git a/package.json b/package.json index 1f8937ca..c6cd1288 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@digitalbazaar/rsa-signature-2018": "digitalbazaar/rsa-signature-2018#initial", "@digitalbazaar/rsa-verification-key-2018": "digitalbazaar/rsa-verification-key-2018#initial", "@digitalcredentials/vc": "^1.1.2", - "@expo-google-fonts/inter": "^0.2.3", + "@expo-google-fonts/montserrat": "^0.4.2", "@expo/metro-config": "~0.18.11", "@invertase/react-native-apple-authentication": "^2.3.0", "@iriscan/biometric-sdk-react-native": "0.2.6", @@ -100,6 +100,7 @@ "react-native-shimmer-placeholder": "^2.0.9", "react-native-spinkit": "^1.5.1", "react-native-svg": "15.2.0", + "react-native-switch-toggle": "^2.2.1", "react-native-vector-icons": "^10.0.0", "react-native-webview": "^13.13.5", "react-native-zip-archive": "^6.1.0", diff --git a/routes/main.ts b/routes/main.ts index 8ce3ac7b..141ca5cd 100644 --- a/routes/main.ts +++ b/routes/main.ts @@ -44,7 +44,7 @@ const settings: TabScreen = { options: { headerTitleStyle: { fontSize: 26, - fontFamily: 'Inter_600SemiBold', + fontFamily: 'Montserrat_600SemiBold', marginTop: 15, }, title: i18n.t('MainLayout:settings'), diff --git a/screens/AuthScreen.tsx b/screens/AuthScreen.tsx index 63c86c8c..e015773d 100644 --- a/screens/AuthScreen.tsx +++ b/screens/AuthScreen.tsx @@ -12,7 +12,7 @@ import { sendStartEvent, } from '../shared/telemetry/TelemetryUtils'; import {TelemetryConstants} from '../shared/telemetry/TelemetryConstants'; -import {SvgImage} from '../components/ui/svg'; +import BiometricIcon from '../components/BiometricIcon'; export const AuthScreen: React.FC = props => { const {t} = useTranslation('AuthScreen'); @@ -43,7 +43,7 @@ export const AuthScreen: React.FC = props => { title={controller.alertMsg} /> - {SvgImage.fingerprintIcon(66)} + = props => { const {t} = useTranslation('BiometricScreen'); @@ -39,7 +39,7 @@ export const BiometricScreen: React.FC = props => { backgroundColor={Theme.Colors.whiteBackgroundColor}> - {SvgImage.fingerprintIcon(180)} + diff --git a/screens/Home/MyVcsTab.tsx b/screens/Home/MyVcsTab.tsx index 60e0d0bd..26adb05b 100644 --- a/screens/Home/MyVcsTab.tsx +++ b/screens/Home/MyVcsTab.tsx @@ -259,7 +259,6 @@ const [highlightCardLayout, setHighlightCardLayout] = useState filterVcs('')} /> - {clearSearchIcon && ( - - - - )} {numberOfCardsAvailable > 0 && ( - + {cardsAvailableText} )} @@ -355,7 +341,7 @@ const [highlightCardLayout, setHighlightCardLayout] = useState {t('noCardsTitle')} @@ -365,7 +351,7 @@ const [highlightCardLayout, setHighlightCardLayout] = useState {t('noCardsDescription')} diff --git a/screens/HomeScreenLayout.tsx b/screens/HomeScreenLayout.tsx index 7b663dcf..6179e846 100644 --- a/screens/HomeScreenLayout.tsx +++ b/screens/HomeScreenLayout.tsx @@ -29,7 +29,7 @@ export const HomeScreenLayout: React.FC = props => { tabBarActiveTintColor: Theme.Colors.IconBg, tabBarLabelStyle: { fontSize: 12, - fontFamily: 'Inter_600SemiBold', + fontFamily: 'Montserrat_600SemiBold', }, tabBarStyle: { height: 75, diff --git a/screens/IntroSliders/biometricIntro.tsx b/screens/IntroSliders/biometricIntro.tsx index 34ed8717..0b556ef0 100644 --- a/screens/IntroSliders/biometricIntro.tsx +++ b/screens/IntroSliders/biometricIntro.tsx @@ -2,8 +2,8 @@ import React from 'react'; import {useTranslation} from 'react-i18next'; import {Column, Text, Button} from '../../components/ui'; import {Theme} from '../../components/ui/styleUtils'; -import {SvgImage} from '../../components/ui/svg'; -import { View, ScrollView } from 'react-native'; +import {View, ScrollView} from 'react-native'; +import BiometricIcon from '../../components/BiometricIcon'; export const StaticAuthScreen: React.FC = () => { const {t} = useTranslation('AuthScreen'); @@ -13,16 +13,15 @@ export const StaticAuthScreen: React.FC = () => { fill padding={[0, 5, 0, 5]} backgroundColor={Theme.Colors.whiteBackgroundColor} - style={Theme.IntroSliderStyles.biometricIntroOuterColumn} - > - + - + { overflow: 'hidden', }}> - {SvgImage.fingerprintIcon(66)} + { - + {/* height increased to enable force scroll */} - + diff --git a/screens/IntroSliders/trustedDigitalWalletIntro.tsx b/screens/IntroSliders/trustedDigitalWalletIntro.tsx index b95ce28f..33d897ae 100644 --- a/screens/IntroSliders/trustedDigitalWalletIntro.tsx +++ b/screens/IntroSliders/trustedDigitalWalletIntro.tsx @@ -1,144 +1,163 @@ import React from 'react'; -import { Column, Row, Text } from '../../components/ui'; -import { Theme } from '../../components/ui/styleUtils'; -import { SvgImage } from '../../components/ui/svg'; -import { LinearGradient } from 'react-native-linear-gradient'; -import { Image, Icon } from 'react-native-elements'; -import { ScrollView, View } from 'react-native'; -import { HelpScreen } from '../../components/HelpScreen'; -import { useTranslation } from 'react-i18next'; -import { SearchBar } from '../../components/ui/SearchBar'; +import {Column, Row, Text} from '../../components/ui'; +import {Theme} from '../../components/ui/styleUtils'; +import {SvgImage} from '../../components/ui/svg'; +import LinearGradient from 'react-native-linear-gradient'; +import {Image, Icon} from 'react-native-elements'; +import {ScrollView, View} from 'react-native'; +import {HelpScreen} from '../../components/HelpScreen'; +import {useTranslation} from 'react-i18next'; +import {SearchBar} from '../../components/ui/SearchBar'; export const StaticHomeScreen: React.FC = () => { - const { t } = useTranslation(); - const cards = [ - { id: 1, name: 'Abigail', status: 'valid', pin: false, face: require("../../assets/faceImage2.png") }, - { id: 2, name: 'Patricia', status: 'valid', pin: false, face: require("../../assets/faceImage1.png") }, - { id: 3, name: 'Timara', status: 'pending', pin: false, face: require("../../assets/faceImage2.png") }, - { id: 4, name: 'Abishek', status: 'valid', pin: false, face: require("../../assets/faceImage1.png") }, - ]; + const {t} = useTranslation(); + const cards = [ + { + id: 1, + name: 'Abigail', + status: 'valid', + pin: false, + face: require('../../assets/faceImage2.png'), + }, + { + id: 2, + name: 'Patricia', + status: 'valid', + pin: false, + face: require('../../assets/faceImage1.png'), + }, + { + id: 3, + name: 'Timara', + status: 'pending', + pin: false, + face: require('../../assets/faceImage2.png'), + }, + { + id: 4, + name: 'Abishek', + status: 'valid', + pin: false, + face: require('../../assets/faceImage1.png'), + }, + ]; - return ( - - + return ( + + - - {SvgImage.InjiLogo({ height: 60, width: 120 })} - - - - - {SvgImage.coloredInfo()} - - - {t('IssuersScreen:help')} - - - - - } - /> - - - - - - 4 {t('common:cards')} - + + {SvgImage.InjiLogo({height: 60, width: 120})} + + + + + {SvgImage.coloredInfo()} + + + {t('IssuersScreen:help')} + + + + } + /> + + + + + + 4 {t('common:cards')} + + - {cards.map(card => ( - - {card.pin && SvgImage.pinIcon()} - - - - {card.name} - - - - {t("VcDetails:" + card.status)} - - - + {cards.map(card => ( + + {card.pin && SvgImage.pinIcon()} + + + + {card.name} + + + + {t('VcDetails:' + card.status)} + + + - {card.status === 'valid' && SvgImage.walletActivatedIcon()} - {card.status === 'pending' && SvgImage.walletUnActivatedIcon()} - - - ))} - {/* height increased to enable force scroll */} - - - - ); + {card.status === 'valid' && SvgImage.walletActivatedIcon()} + {card.status === 'pending' && SvgImage.walletUnActivatedIcon()} + + + ))} + {/* height increased to enable force scroll */} + + + + ); }; diff --git a/screens/Issuers/TransactionCodeScreen.tsx b/screens/Issuers/TransactionCodeScreen.tsx index 0f24d1fb..5329af15 100644 --- a/screens/Issuers/TransactionCodeScreen.tsx +++ b/screens/Issuers/TransactionCodeScreen.tsx @@ -1,25 +1,27 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Button, Column, Text } from '../../components/ui'; -import { Theme } from '../../components/ui/styleUtils'; +import React, {useState} from 'react'; +import {useTranslation} from 'react-i18next'; +import {Button, Column, Text} from '../../components/ui'; +import {Theme} from '../../components/ui/styleUtils'; import { Dimensions, Keyboard, - KeyboardAvoidingView, TouchableWithoutFeedback, + KeyboardAvoidingView, + TouchableWithoutFeedback, View, - ModalProps + ModalProps, } from 'react-native'; -import { isIOS } from '../../shared/constants'; -import { SvgImage } from '../../components/ui/svg'; -import { getScreenHeight } from '../../shared/commonUtil'; -import { PinInput } from '../../components/PinInput'; -import { Modal } from '../../components/ui/Modal'; -import { CancelDownloadModal } from './ConfirmationModal'; -import { Icon, Input } from 'react-native-elements'; +import {isIOS} from '../../shared/constants'; +import {SvgImage} from '../../components/ui/svg'; +import {getScreenHeight} from '../../shared/commonUtil'; +import {PinInput} from '../../components/PinInput'; +import {Modal} from '../../components/ui/Modal'; +import {CancelDownloadModal} from './ConfirmationModal'; +import {Icon, Input} from 'react-native-elements'; +import LinearGradient from 'react-native-linear-gradient'; export const TransactionCodeModal: React.FC = props => { - const { t } = useTranslation('transactionCodeScreen'); - const { isSmallScreen, screenHeight } = getScreenHeight(); + const {t} = useTranslation('transactionCodeScreen'); + const {isSmallScreen, screenHeight} = getScreenHeight(); const [transactionCode, setTransactionCode] = useState(''); const [errorMessage, setErrorMessage] = useState(''); const [showCancelConfirm, setShowCancelConfirm] = useState(false); @@ -29,7 +31,6 @@ export const TransactionCodeModal: React.FC = props => { const [textLineCount, setTextLineCount] = useState(0); const maxLines = 2; - const validateCode = (code: string): string => { if (!code.trim()) return t('emptyCodeError'); if (!/^[a-zA-Z0-9]+$/.test(code)) return t('invalidCharacters'); @@ -47,41 +48,47 @@ export const TransactionCodeModal: React.FC = props => { }; const handleChange = (text: string) => { - if (!touched) - setTouched(true); + if (!touched) setTouched(true); setTransactionCode(text); let error; - if (touched) - error = validateCode(text); + if (touched) error = validateCode(text); setErrorMessage(error); }; return ( <> {showCancelConfirm ? ( - setShowCancelConfirm(false)} onConfirm={props.onDismiss ?? (() => { })} visible={showCancelConfirm} /> + setShowCancelConfirm(false)} + onConfirm={props.onDismiss ?? (() => {})} + visible={showCancelConfirm} + /> ) : ( - setShowCancelConfirm(true)}> + setShowCancelConfirm(true)}> - - + + {SvgImage.OtpVerificationIcon()} @@ -93,39 +100,37 @@ export const TransactionCodeModal: React.FC = props => { {t('TransactionCode')} { + onTextLayout={e => { if (textLineCount !== e.nativeEvent.lines.length) { setTextLineCount(e.nativeEvent.lines.length); } - }} - > - {t( - `${props.description || - t('description') - }`, - )} + }}> + {props.description + ? t(props.description) + : t('description')} - {textLineCount > maxLines && setShowFullDescription(prev => !prev)} - style={Theme.TransactionCodeScreenStyle.showMoreButton} - > - {showFullDescription ? t('Show less ↑') : t('Show more ↓')} - } - + {textLineCount > maxLines && ( + setShowFullDescription(prev => !prev)} + style={ + Theme.TransactionCodeScreenStyle.showMoreButton + }> + {showFullDescription ? t('showLess') : t('showMore')} + + )} + {(props.error || errorMessage) && ( - + = props => { )} - - {((!props.inputMode || + + {(!props.inputMode || (props.inputMode && props.inputMode === 'numeric')) && - props.length && - props.length <= 6) ? ( + props.length && + props.length <= 6 ? ( <> = props => { props.onDismiss?.(); }} /> - + ) : ( <> - @@ -202,7 +252,6 @@ export const TransactionCodeModal: React.FC = props => { )} ); - }; interface ExtendedModalProps extends ModalProps { diff --git a/screens/QrLogin/QrConsent.tsx b/screens/QrLogin/QrConsent.tsx index 2ad1d735..054c0d74 100644 --- a/screens/QrLogin/QrConsent.tsx +++ b/screens/QrLogin/QrConsent.tsx @@ -3,12 +3,13 @@ import {useTranslation} from 'react-i18next'; import {Button, Column, Row, Text} from '../../components/ui'; import {Theme} from '../../components/ui/styleUtils'; import {useQrLogin} from './QrLoginController'; -import {Image} from 'react-native'; -import {ListItem, Switch} from 'react-native-elements'; +import {Image, View} from 'react-native'; +import {ListItem} from 'react-native-elements'; import {Modal} from '../../components/ui/Modal'; import {QrLoginRef} from '../../machines/QrLogin/QrLoginMachine'; import {ScrollView} from 'react-native'; import {getClientNameForCurrentLanguage} from '../../i18n'; +import Toggle from '../../components/Toggle'; export const QrConsent: React.FC = props => { const {t} = useTranslation('QrLogin'); @@ -100,15 +101,10 @@ export const QrConsent: React.FC = props => { - - controller.SELECT_CONSENT( - controller.isShare[claim], - claim, - ) - } - color={Theme.Colors.Icon} + onToggle={value => controller.SELECT_CONSENT(value, claim)} + testID="voluntaryClaimToggle" /> ))} diff --git a/screens/Scan/SendVPScreen.tsx b/screens/Scan/SendVPScreen.tsx index e5773d1a..db2db47f 100644 --- a/screens/Scan/SendVPScreen.tsx +++ b/screens/Scan/SendVPScreen.tsx @@ -340,7 +340,7 @@ export const SendVPScreen: React.FC = props => { { const {t} = useTranslation('SettingScreen'); @@ -73,150 +76,144 @@ export const SettingScreen: React.FC< }; return ( - - - {props.triggerComponent} - - - - - - {t('injiAsVerifierApp')} - - - - - {SvgImage.ReceiveCard()} - - {t('receiveCard')} - - - + + + {props.triggerComponent} + + + + + + {t('injiAsVerifierApp')} + + + + + {SvgImage.ReceiveCard()} + + {t('receiveCard')} + + + - - + + - - {t('basicSettings')} - - - - + {t('basicSettings')} + + + + + + + + + + + + + {t('bioUnlock')} + + + + { + handleBiometricToggle(!value); + }} + testID="biometricToggle" /> + - + - - {SvgImage.fingerprintIcon(24)} - - - - {t('bioUnlock')} - - - - - + + - + {CREDENTIAL_REGISTRY_EDIT === 'true' && ( + + )} - - + controller.INJI_TOUR_GUIDE()}> + {SvgImage.coloredInfo()} + + + + {t('injiTourGuide')} + + + + - {CREDENTIAL_REGISTRY_EDIT === 'true' && ( - - )} - - controller.INJI_TOUR_GUIDE()}> - {SvgImage.coloredInfo()} - - - - {t('injiTourGuide')} - - - - - - - {SvgImage.logOutIcon()} - - - - {t('logout')} - - - - - - - + + {SvgImage.logOutIcon()} + + + + {t('logout')} + + + + + + + ); }; diff --git a/shared/hooks/useFont.ts b/shared/hooks/useFont.ts index f6c3cf03..af842935 100644 --- a/shared/hooks/useFont.ts +++ b/shared/hooks/useFont.ts @@ -1,17 +1,17 @@ import { - Inter_400Regular, - Inter_500Medium, - Inter_600SemiBold, - Inter_700Bold, + Montserrat_400Regular, + Montserrat_500Medium, + Montserrat_600SemiBold, + Montserrat_700Bold, useFonts, -} from '@expo-google-fonts/inter'; +} from '@expo-google-fonts/montserrat'; export function useFont() { const [hasFontsLoaded] = useFonts({ - Inter_400Regular, - Inter_500Medium, - Inter_600SemiBold, - Inter_700Bold, + Montserrat_400Regular, + Montserrat_500Medium, + Montserrat_600SemiBold, + Montserrat_700Bold, }); return hasFontsLoaded;