diff --git a/assets/images/product-illustrations/three_legged_laptop_woman.svg b/assets/images/product-illustrations/three_legged_laptop_woman.svg
new file mode 100644
index 000000000000..6be000b92e37
--- /dev/null
+++ b/assets/images/product-illustrations/three_legged_laptop_woman.svg
@@ -0,0 +1,173 @@
+
+
+
diff --git a/src/CONST.ts b/src/CONST.ts
index 3bce14516b80..abf8382d4771 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -3277,6 +3277,12 @@ const CONST = {
REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
+ /** Dimensions for illustration shown in Confirmation Modal */
+ CONFIRM_CONTENT_SVG_SIZE: {
+ HEIGHT: 220,
+ WIDTH: 130,
+ },
+
DEBUG_CONSOLE: {
LEVELS: {
INFO: 'INFO',
diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
index 94146a2c2957..c0c146bbae08 100644
--- a/src/components/ConfirmContent.tsx
+++ b/src/components/ConfirmContent.tsx
@@ -4,13 +4,17 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
import {View} from 'react-native';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
+import colors from '@styles/theme/colors';
import variables from '@styles/variables';
+import CONST from '@src/CONST';
import type IconAsset from '@src/types/utils/IconAsset';
import Button from './Button';
import Header from './Header';
import Icon from './Icon';
+import ImageSVG from './ImageSVG';
import Text from './Text';
type ConfirmContentProps = {
@@ -64,6 +68,9 @@ type ConfirmContentProps = {
/** Styles for icon */
iconAdditionalStyles?: StyleProp;
+
+ /** Image to display with content */
+ image?: IconAsset;
};
function ConfirmContent({
@@ -84,79 +91,95 @@ function ConfirmContent({
promptStyles,
contentStyles,
iconAdditionalStyles,
+ image,
}: ConfirmContentProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const theme = useTheme();
const {isOffline} = useNetwork();
+ const StyleUtils = useStyleUtils();
const isCentered = shouldCenterContent;
return (
-
-
- {typeof iconSource === 'function' && (
-
-
+ {!!image && (
+
+
+
+ )}
+
+
+
+ {typeof iconSource === 'function' && (
+
+
+
+ )}
+
+
- )}
-
-
+ {typeof prompt === 'string' ? {prompt} : prompt}
- {typeof prompt === 'string' ? {prompt} : prompt}
-
- {shouldStackButtons ? (
- <>
-
- {shouldShowCancelButton && (
+ {shouldStackButtons ? (
+ <>
- )}
-
- ) : (
-
- {shouldShowCancelButton && (
+ {shouldShowCancelButton && (
+
+ )}
+
+ ) : (
+
+ {shouldShowCancelButton && (
+
+ )}
- )}
-
-
- )}
-
+
+ )}
+
+
);
}
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
index f25fc978e3ee..6a875e1fbce8 100755
--- a/src/components/ConfirmModal.tsx
+++ b/src/components/ConfirmModal.tsx
@@ -1,6 +1,7 @@
import type {ReactNode} from 'react';
import React from 'react';
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import CONST from '@src/CONST';
import type IconAsset from '@src/types/utils/IconAsset';
@@ -64,6 +65,9 @@ type ConfirmModalProps = {
/** Whether to stack the buttons */
shouldStackButtons?: boolean;
+
+ /** Image to display with content */
+ image?: IconAsset;
};
function ConfirmModal({
@@ -86,8 +90,10 @@ function ConfirmModal({
shouldStackButtons = true,
isVisible,
onConfirm,
+ image,
}: ConfirmModalProps) {
const {isSmallScreenWidth} = useWindowDimensions();
+ const styles = useThemeStyles();
return (
);
diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js
index e846c1f188e2..9ec16beead15 100644
--- a/src/components/FocusModeNotification.js
+++ b/src/components/FocusModeNotification.js
@@ -6,6 +6,7 @@ import * as Link from '@userActions/Link';
import * as User from '@userActions/User';
import CONST from '@src/CONST';
import ConfirmModal from './ConfirmModal';
+import * as Illustrations from './Icon/Illustrations';
import Text from './Text';
import TextLinkWithRef from './TextLink';
@@ -34,12 +35,14 @@ function FocusModeNotification() {
Link.openLink(href, environmentURL);
}}
>
- {translate('common.here')}
+ {translate('focusModeUpdateModal.settings')}
.
}
isVisible
+ image={Illustrations.ThreeLeggedLaptopWoman}
+ titleStyles={[styles.textHeadline, styles.mbn3]}
/>
);
}
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index e03b393dc81f..f8c048ebc4c0 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -27,6 +27,7 @@ import SmartScan from '@assets/images/product-illustrations/simple-illustration_
import TadaBlue from '@assets/images/product-illustrations/tada--blue.svg';
import TadaYellow from '@assets/images/product-illustrations/tada--yellow.svg';
import TeleScope from '@assets/images/product-illustrations/telescope.svg';
+import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg';
import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
import Approval from '@assets/images/simple-illustrations/simple-illustration__approval.svg';
import BankArrow from '@assets/images/simple-illustrations/simple-illustration__bank-arrow.svg';
@@ -143,5 +144,6 @@ export {
Approval,
WalletAlt,
Workflows,
+ ThreeLeggedLaptopWoman,
House,
};
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 4fa22d8e255d..4018eab57d2b 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1290,7 +1290,8 @@ export default {
},
focusModeUpdateModal: {
title: 'Welcome to #focus mode!',
- prompt: "Read chats will be hidden, unless they have a green dot, which means there's an action you need to take on them. You can change this in your account settings ",
+ prompt: "Stay on top of things by only seeing unread chats or chats that need your attention. Don't worry, you can change this at any point in ",
+ settings: 'settings',
},
notFound: {
chatYouLookingForCannotBeFound: 'The chat you are looking for cannot be found.',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 7bea48d71d36..960b454137ea 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1291,7 +1291,8 @@ export default {
},
focusModeUpdateModal: {
title: '¡Bienvenido al modo #concentración!',
- prompt: 'Los mensajes leídos se ocultarán, a menos que tengan un punto verde, lo que significa que tienes que tomar una acción en ellos. Puedes cambiar esto en la configuración de tu cuenta ',
+ prompt: 'Mantente al tanto de todo viendo sólo los chats no leídos o los que necesitan tu atención. No te preocupes, puedes cambiar el ajuste en cualquier momento desde la ',
+ settings: 'configuración',
},
notFound: {
chatYouLookingForCannotBeFound: 'El chat que estás buscando no se pudo encontrar.',
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index b807ee2bdf24..389727f32ee5 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -315,6 +315,10 @@ export default {
marginBottom: -4,
},
+ mbn3: {
+ marginBottom: -12,
+ },
+
mbn5: {
marginBottom: -20,
},