diff --git a/assets/images/simple-illustrations/simple-illustration__lightbulb.svg b/assets/images/simple-illustrations/simple-illustration__lightbulb.svg new file mode 100644 index 000000000000..1dc359764147 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__lightbulb.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 9271c417ac33..b639b2efdd26 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -55,6 +55,7 @@ import HotDogStand from '@assets/images/simple-illustrations/simple-illustration import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg'; import House from '@assets/images/simple-illustrations/simple-illustration__house.svg'; import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg'; +import Lightbulb from '@assets/images/simple-illustrations/simple-illustration__lightbulb.svg'; import LockClosed from '@assets/images/simple-illustrations/simple-illustration__lockclosed.svg'; import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg'; import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg'; @@ -172,4 +173,5 @@ export { Pencil, Tag, CarIce, + Lightbulb, }; diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 93a2e91639a6..848761c9e982 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -70,6 +70,9 @@ type SectionProps = ChildrenProps & { /** Overlay content to display on top of animation */ overlayContent?: () => ReactNode; + + /** The component to display in the title of the section */ + renderSubtitle?: () => ReactNode; }; function Section({ @@ -90,6 +93,7 @@ function Section({ illustrationBackgroundColor, illustrationStyle, overlayContent, + renderSubtitle, }: SectionProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -139,11 +143,15 @@ function Section({ )} - {!!subtitle && ( - - {subtitle} - - )} + {renderSubtitle + ? renderSubtitle?.() + : !!subtitle && ( + + {subtitle} + + )} {children} diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 527b92d4d7dc..5efa9592034f 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,6 +1,7 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ApiUtils from '@libs/ApiUtils'; import compose from '@libs/compose'; @@ -32,6 +33,7 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); const styles = useThemeStyles(); + const {translate} = useLocalize(); return ( <> @@ -39,13 +41,13 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { style={[styles.textLabelSupporting, styles.mb4]} numberOfLines={1} > - Test Preferences + {translate('initialSettingsPage.troubleshoot.testingPreferences')} {/* Option to switch between staging and default api endpoints. This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */} {!CONFIG.IS_USING_LOCAL_WEB && ( - + + {/* When toggled all network requests will fail. */} - + {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */} - +