From 5685c8c93cd8c97621c59419b1b86044a54f0df3 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 24 Apr 2024 02:20:52 +0700 Subject: [PATCH 1/2] fix illustration is sitting too far down --- src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx index b2523a4e039..3b235c1b71e 100644 --- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx +++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx @@ -22,9 +22,11 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import getPlatform from '@libs/getPlatform'; import Navigation from '@libs/Navigation/Navigation'; import * as App from '@userActions/App'; import * as Report from '@userActions/Report'; +import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -81,6 +83,11 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { .reverse(); }, [shouldStoreLogs, translate, waitForNavigate, styles.sectionMenuItemTopDescription]); + const isNativePlatform = useMemo(() => { + const platform = getPlatform(); + return platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID; + }, []); + return ( ( From 46646501313bee6a9ebb3ba42205c9579118b0b9 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 5 Jun 2024 05:38:25 +0700 Subject: [PATCH 2/2] fix create getLightbulbIllustrationStyle --- src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 11 +++-------- .../getLightbulbIllustrationStyle/index.native.ts | 6 ++++++ .../getLightbulbIllustrationStyle/index.ts | 9 +++++++++ 3 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.native.ts create mode 100644 src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.ts diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx index 3b235c1b71e..34f762e7b82 100644 --- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx +++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx @@ -22,15 +22,14 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import getPlatform from '@libs/getPlatform'; import Navigation from '@libs/Navigation/Navigation'; import * as App from '@userActions/App'; import * as Report from '@userActions/Report'; -import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; +import getLightbulbIllustrationStyle from './getLightbulbIllustrationStyle'; type BaseMenuItem = { translationKey: TranslationPaths; @@ -52,6 +51,7 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false); const waitForNavigate = useWaitForNavigation(); const {isSmallScreenWidth} = useWindowDimensions(); + const illustrationStyle = getLightbulbIllustrationStyle(); const menuItems = useMemo(() => { const debugConsoleItem: BaseMenuItem = { @@ -83,11 +83,6 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { .reverse(); }, [shouldStoreLogs, translate, waitForNavigate, styles.sectionMenuItemTopDescription]); - const isNativePlatform = useMemo(() => { - const platform = getPlatform(); - return platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID; - }, []); - return ( ( diff --git a/src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.native.ts b/src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.native.ts new file mode 100644 index 00000000000..034df2052d9 --- /dev/null +++ b/src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.native.ts @@ -0,0 +1,6 @@ +import type {ViewStyle} from 'react-native'; + +// Styling lottie animations for the Lightbulb component requires different margin values depending on the platform. +export default function getLightbulbIllustrationStyle(): ViewStyle { + return {}; +} diff --git a/src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.ts b/src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.ts new file mode 100644 index 00000000000..fa22fde7306 --- /dev/null +++ b/src/pages/settings/Troubleshoot/getLightbulbIllustrationStyle/index.ts @@ -0,0 +1,9 @@ +import type {ViewStyle} from 'react-native'; + +// Styling lottie animations for the Lightbulb component requires different margin values depending on the platform. +export default function getTripIllustrationStyle(): ViewStyle { + return { + marginTop: 16, + marginBottom: -16, + }; +}