From 5506641228e97bd2e91d2ce309baef1bd5bec3f5 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 8 Jan 2024 14:56:59 +0100 Subject: [PATCH 1/8] apply same styles as workspaces page --- src/pages/ReferralDetailsPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index 209b8f5fadc3..b369ea86eefa 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -71,8 +71,8 @@ function ReferralDetailsPage({route, account}) { headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]} backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor} > - {contentHeader} - {contentBody} + {contentHeader} + {contentBody} {shouldShowClipboard && ( Date: Mon, 8 Jan 2024 15:21:40 +0100 Subject: [PATCH 2/8] increase horizontal spacing --- src/pages/ReferralDetailsPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index b369ea86eefa..ab01758864c1 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -71,8 +71,8 @@ function ReferralDetailsPage({route, account}) { headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]} backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor} > - {contentHeader} - {contentBody} + {contentHeader} + {contentBody} {shouldShowClipboard && ( Date: Tue, 9 Jan 2024 12:34:31 +0100 Subject: [PATCH 3/8] replace icon --- .../product-illustrations/payment-hands.svg | 255 +++++++++++++++++- 1 file changed, 254 insertions(+), 1 deletion(-) diff --git a/assets/images/product-illustrations/payment-hands.svg b/assets/images/product-illustrations/payment-hands.svg index bf76b528ee76..bd317fdfabe8 100644 --- a/assets/images/product-illustrations/payment-hands.svg +++ b/assets/images/product-illustrations/payment-hands.svg @@ -1 +1,254 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 36f3abd147b32092f175bfee5ffdbbe2af6c9187 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Tue, 9 Jan 2024 12:34:53 +0100 Subject: [PATCH 4/8] set icon width by platform --- src/pages/ReferralDetailsPage.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index ab01758864c1..adde91af49b7 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -13,7 +13,9 @@ import useLocalize from '@hooks/useLocalize'; import useSingleExecution from '@hooks/useSingleExecution'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import Clipboard from '@libs/Clipboard'; +import getPlatform from '@libs/getPlatform'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -43,9 +45,12 @@ const defaultProps = { function ReferralDetailsPage({route, account}) { const theme = useTheme(); const styles = useThemeStyles(); + const {windowWidth} = useWindowDimensions(); const {translate} = useLocalize(); const popoverAnchor = useRef(null); const {isExecuting, singleExecution} = useSingleExecution(); + const platform = getPlatform(); + const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID; let {contentType} = route.params; if (!_.includes(_.values(CONST.REFERRAL_PROGRAM.CONTENT_TYPES), contentType)) { @@ -64,7 +69,7 @@ function ReferralDetailsPage({route, account}) { headerContent={ } From 7b8900108ab9e6ce96e35895ac2541f38b28e081 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 10 Jan 2024 10:59:24 +0100 Subject: [PATCH 5/8] update path --- src/pages/ReferralDetailsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index adde91af49b7..95d3960b6d9a 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -77,7 +77,7 @@ function ReferralDetailsPage({route, account}) { backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor} > {contentHeader} - {contentBody} + {contentBody} {shouldShowClipboard && ( Date: Thu, 11 Jan 2024 12:59:13 +0100 Subject: [PATCH 6/8] implement ReferralDetailsPageIcon --- .../ReferralDetailsPageIcon/index.native.tsx | 18 ++++++++++++++++++ .../ReferralDetailsPageIcon/index.tsx | 18 ++++++++++++++++++ src/pages/ReferralDetailsPage.js | 16 ++-------------- 3 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 src/components/ReferralDetailsPageIcon/index.native.tsx create mode 100644 src/components/ReferralDetailsPageIcon/index.tsx diff --git a/src/components/ReferralDetailsPageIcon/index.native.tsx b/src/components/ReferralDetailsPageIcon/index.native.tsx new file mode 100644 index 000000000000..578fab7a2e33 --- /dev/null +++ b/src/components/ReferralDetailsPageIcon/index.native.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import Icon from '@components/Icon'; +import {PaymentHands} from '@components/Icon/Illustrations'; +import useWindowDimensions from '@hooks/useWindowDimensions'; + +function ReferralDetailsPageIcon() { + const {windowWidth} = useWindowDimensions(); + + return ( + + ); +} + +export default ReferralDetailsPageIcon; diff --git a/src/components/ReferralDetailsPageIcon/index.tsx b/src/components/ReferralDetailsPageIcon/index.tsx new file mode 100644 index 000000000000..81ca33871277 --- /dev/null +++ b/src/components/ReferralDetailsPageIcon/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import Icon from '@components/Icon'; +import {PaymentHands} from '@components/Icon/Illustrations'; +import useWindowDimensions from '@hooks/useWindowDimensions'; + +function ReferralDetailsPageIcon() { + const {windowWidth} = useWindowDimensions(); + + return ( + + ); +} + +export default ReferralDetailsPageIcon; diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index 95d3960b6d9a..b1383ffce34b 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -4,18 +4,15 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import ContextMenuItem from '@components/ContextMenuItem'; import HeaderPageLayout from '@components/HeaderPageLayout'; -import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; -import {PaymentHands} from '@components/Icon/Illustrations'; import MenuItem from '@components/MenuItem'; +import ReferralDetailsPageIcon from '@components/ReferralDetailsPageIcon'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useSingleExecution from '@hooks/useSingleExecution'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import Clipboard from '@libs/Clipboard'; -import getPlatform from '@libs/getPlatform'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -45,12 +42,9 @@ const defaultProps = { function ReferralDetailsPage({route, account}) { const theme = useTheme(); const styles = useThemeStyles(); - const {windowWidth} = useWindowDimensions(); const {translate} = useLocalize(); const popoverAnchor = useRef(null); const {isExecuting, singleExecution} = useSingleExecution(); - const platform = getPlatform(); - const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID; let {contentType} = route.params; if (!_.includes(_.values(CONST.REFERRAL_PROGRAM.CONTENT_TYPES), contentType)) { @@ -66,13 +60,7 @@ function ReferralDetailsPage({route, account}) { return ( - } + headerContent={} headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]} backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor} > From 9bffdf760880e744e548929a920b47cb7c77ba56 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 11 Jan 2024 15:56:20 +0100 Subject: [PATCH 7/8] fix icon size --- .../ReferralDetailsPageIcon/index.native.tsx | 18 ------------------ .../ReferralDetailsPageIcon/index.tsx | 18 ------------------ src/pages/ReferralDetailsPage.js | 11 +++++++++-- 3 files changed, 9 insertions(+), 38 deletions(-) delete mode 100644 src/components/ReferralDetailsPageIcon/index.native.tsx delete mode 100644 src/components/ReferralDetailsPageIcon/index.tsx diff --git a/src/components/ReferralDetailsPageIcon/index.native.tsx b/src/components/ReferralDetailsPageIcon/index.native.tsx deleted file mode 100644 index 578fab7a2e33..000000000000 --- a/src/components/ReferralDetailsPageIcon/index.native.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Icon from '@components/Icon'; -import {PaymentHands} from '@components/Icon/Illustrations'; -import useWindowDimensions from '@hooks/useWindowDimensions'; - -function ReferralDetailsPageIcon() { - const {windowWidth} = useWindowDimensions(); - - return ( - - ); -} - -export default ReferralDetailsPageIcon; diff --git a/src/components/ReferralDetailsPageIcon/index.tsx b/src/components/ReferralDetailsPageIcon/index.tsx deleted file mode 100644 index 81ca33871277..000000000000 --- a/src/components/ReferralDetailsPageIcon/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Icon from '@components/Icon'; -import {PaymentHands} from '@components/Icon/Illustrations'; -import useWindowDimensions from '@hooks/useWindowDimensions'; - -function ReferralDetailsPageIcon() { - const {windowWidth} = useWindowDimensions(); - - return ( - - ); -} - -export default ReferralDetailsPageIcon; diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index b1383ffce34b..fc3586678efb 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -4,9 +4,10 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import ContextMenuItem from '@components/ContextMenuItem'; import HeaderPageLayout from '@components/HeaderPageLayout'; +import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; +import {PaymentHands} from '@components/Icon/Illustrations'; import MenuItem from '@components/MenuItem'; -import ReferralDetailsPageIcon from '@components/ReferralDetailsPageIcon'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useSingleExecution from '@hooks/useSingleExecution'; @@ -60,7 +61,13 @@ function ReferralDetailsPage({route, account}) { return ( } + headerContent={ + + } headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]} backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor} > From e41d7a6b23868ea40583b4a979a5cd10d92d551a Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Tue, 16 Jan 2024 11:44:08 +0100 Subject: [PATCH 8/8] replace icon --- .../product-illustrations/payment-hands.svg | 390 +++++++----------- src/pages/ReferralDetailsPage.js | 2 +- 2 files changed, 139 insertions(+), 253 deletions(-) diff --git a/assets/images/product-illustrations/payment-hands.svg b/assets/images/product-illustrations/payment-hands.svg index bd317fdfabe8..2dbebd24994b 100644 --- a/assets/images/product-illustrations/payment-hands.svg +++ b/assets/images/product-illustrations/payment-hands.svg @@ -1,254 +1,140 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js index fc3586678efb..c10500c428da 100644 --- a/src/pages/ReferralDetailsPage.js +++ b/src/pages/ReferralDetailsPage.js @@ -64,7 +64,7 @@ function ReferralDetailsPage({route, account}) { headerContent={ }