From 2b12285a9b16a7b70f71ba93024199db8f741454 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:04:22 +0530 Subject: [PATCH 01/20] Define image prop for Confirm Modal --- src/components/ConfirmModal.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 82c4b27be7f1..3ceb7f0da096 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -67,6 +67,9 @@ const propTypes = { /** Whether to stack the buttons */ shouldStackButtons: PropTypes.bool, + /** Image to display with content */ + image: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + ...windowDimensionsPropTypes, }; @@ -88,6 +91,7 @@ const defaultProps = { promptStyles: [], shouldCenterContent: false, shouldStackButtons: true, + image: null, }; function ConfirmModal(props) { From 2a2d2ca500fb5b369e664af072a86eb94b0e24dd Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:08:41 +0530 Subject: [PATCH 02/20] Define image prop for ConfirmContent --- src/components/ConfirmContent.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index 94146a2c2957..f5a63181140e 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -64,6 +64,9 @@ type ConfirmContentProps = { /** Styles for icon */ iconAdditionalStyles?: StyleProp; + + /** Image to display with content */ + image?: IconAsset; }; function ConfirmContent({ @@ -84,6 +87,7 @@ function ConfirmContent({ promptStyles, contentStyles, iconAdditionalStyles, + image = null, }: ConfirmContentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); From 32c4c97839a98a3308009fb12875f9c72c6fe637 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:09:03 +0530 Subject: [PATCH 03/20] Pass image to Confirm Content --- src/components/ConfirmModal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 3ceb7f0da096..6cf63064267b 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -123,6 +123,7 @@ function ConfirmModal(props) { titleStyles={props.titleStyles} promptStyles={props.promptStyles} shouldStackButtons={props.shouldStackButtons} + image={props.image} /> ); From 2aff47b4ca40539b21b6e58cd9b8c98a972a9680 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:22:13 +0530 Subject: [PATCH 04/20] Add illustration to App directory --- .../three_legged_laptop_woman.svg | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 assets/images/product-illustrations/three_legged_laptop_woman.svg 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From d18f38065bdbd2f80dceabab77cd274e6836096c Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:23:01 +0530 Subject: [PATCH 05/20] Export laptop woman svg from Illustrations.ts --- src/components/Icon/Illustrations.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 954c8d0392fc..87f584586114 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -57,6 +57,7 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg'; import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; +import ThreeLeggedLaptopWoman from '@assets/images/simple-illustrations/simple-illustration__three-legged-laptop-woman.svg'; export { Abracadabra, @@ -118,4 +119,5 @@ export { CommentBubbles, TrashCan, TeleScope, + ThreeLeggedLaptopWoman, }; From e89e5a1f843b3b98b16797b91c3e5d4cfc1c4ecc Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 23:17:07 +0530 Subject: [PATCH 06/20] Fix Illustration path --- src/components/Icon/Illustrations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 87f584586114..8d8f5bef4bb5 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -27,6 +27,7 @@ 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 ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg'; +import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg'; import BankArrow from '@assets/images/simple-illustrations/simple-illustration__bank-arrow.svg'; import BigRocket from '@assets/images/simple-illustrations/simple-illustration__bigrocket.svg'; import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg'; @@ -57,7 +58,6 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg'; import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; -import ThreeLeggedLaptopWoman from '@assets/images/simple-illustrations/simple-illustration__three-legged-laptop-woman.svg'; export { Abracadabra, From d330fcbf26eb7a9e11dc595dcda899bc476b44bd Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 02:59:22 +0530 Subject: [PATCH 07/20] Pass ThreeLeggedWoman Illustration to Confirm Modal --- src/components/FocusModeNotification.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js index e846c1f188e2..862bf0a2f2f0 100644 --- a/src/components/FocusModeNotification.js +++ b/src/components/FocusModeNotification.js @@ -8,6 +8,7 @@ import CONST from '@src/CONST'; import ConfirmModal from './ConfirmModal'; import Text from './Text'; import TextLinkWithRef from './TextLink'; +import * as Illustrations from './Icon/Illustrations'; function FocusModeNotification() { const styles = useThemeStyles(); @@ -40,6 +41,7 @@ function FocusModeNotification() { } isVisible + image={Illustrations.ThreeLeggedLaptopWoman} /> ); } From a3f1e5f02c35f90d7f4360a0037ac68e64c1fd9a Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 03:06:40 +0530 Subject: [PATCH 08/20] Render SVG in Confirm Content --- src/components/ConfirmContent.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index f5a63181140e..ddf59ef5cab3 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -8,6 +8,9 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import type IconAsset from '@src/types/utils/IconAsset'; +import useStyleUtils from '@hooks/useStyleUtils'; +import colors from '@styles/theme/colors'; +import ImageSVG from './ImageSVG'; import Button from './Button'; import Header from './Header'; import Icon from './Icon'; @@ -87,16 +90,28 @@ function ConfirmContent({ promptStyles, contentStyles, iconAdditionalStyles, - image = null, + image, }: ConfirmContentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const theme = useTheme(); const {isOffline} = useNetwork(); + const StyleUtils = useStyleUtils(); const isCentered = shouldCenterContent; - + return ( + <> + {typeof image === 'function' && ( + + + + )} {typeof iconSource === 'function' && ( @@ -161,6 +176,7 @@ function ConfirmContent({ )} + ); } From 70067fdc3e544c1616c642bcb907afb6063da49a Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 03:22:55 +0530 Subject: [PATCH 09/20] Use CONST for SVG dimensions --- src/CONST.ts | 6 ++++++ src/components/ConfirmContent.tsx | 5 +++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 2fd592f539c2..0bf7d4d34127 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3101,6 +3101,12 @@ const CONST = { EMAIL: 'EMAIL', REPORT: 'REPORT', }, + + /** Dimensions for illustration shown in Confirmation Modal */ + CONFIRM_CONTENT_SVG_SIZE: { + HEIGHT: 220, + WIDTH: 130, + } } as const; export default CONST; diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index ddf59ef5cab3..db92daaad6df 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -10,6 +10,7 @@ import variables from '@styles/variables'; import type IconAsset from '@src/types/utils/IconAsset'; import useStyleUtils from '@hooks/useStyleUtils'; import colors from '@styles/theme/colors'; +import CONST from '@src/CONST'; import ImageSVG from './ImageSVG'; import Button from './Button'; import Header from './Header'; @@ -107,8 +108,8 @@ function ConfirmContent({ )} From f9fd03f65f03c4e581125843196101387b111f14 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 04:03:38 +0530 Subject: [PATCH 10/20] Prettier --- src/CONST.ts | 2 +- src/components/ConfirmContent.tsx | 142 ++++++++++++------------ src/components/FocusModeNotification.js | 2 +- src/components/Icon/Illustrations.ts | 2 +- 4 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 0bf7d4d34127..5e63794af3e4 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3106,7 +3106,7 @@ const CONST = { CONFIRM_CONTENT_SVG_SIZE: { HEIGHT: 220, WIDTH: 130, - } + }, } as const; export default CONST; diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index db92daaad6df..7030b948ddb8 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -4,17 +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 variables from '@styles/variables'; -import type IconAsset from '@src/types/utils/IconAsset'; -import useStyleUtils from '@hooks/useStyleUtils'; import colors from '@styles/theme/colors'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; -import ImageSVG from './ImageSVG'; +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 = { @@ -70,7 +70,7 @@ type ConfirmContentProps = { iconAdditionalStyles?: StyleProp; /** Image to display with content */ - image?: IconAsset; + image?: IconAsset; }; function ConfirmContent({ @@ -100,83 +100,83 @@ function ConfirmContent({ const StyleUtils = useStyleUtils(); const isCentered = shouldCenterContent; - + return ( <> - {typeof image === 'function' && ( - - - - )} - - - {typeof iconSource === 'function' && ( - - + + + )} + + + {typeof iconSource === 'function' && ( + + + + )} + +
- )} - -
+ {typeof prompt === 'string' ? {prompt} : prompt} - {typeof prompt === 'string' ? {prompt} : prompt} - - {shouldStackButtons ? ( - <> -