Merge pull request #44048 from tienifr/fix/38594-light-mode-status-bar

fix change the status bar color
Expensify · Jun 28, 2024 · f9a18c3 · f9a18c3
2 parents 83d1efe + 3b06703
commit f9a18c3
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 7 deletions.
diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
@@ -71,6 +71,7 @@ const DotLottieAnimations = {
         file: require('@assets/animations/Desk.lottie'),
         w: 200,
         h: 120,
+        backgroundColor: colors.blue700,
     },
     Plane: {
         file: require('@assets/animations/Plane.lottie'),

diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -18,7 +18,6 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -28,7 +27,6 @@ import * as Report from '@userActions/Report';
 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 = {
@@ -45,7 +43,6 @@ type TroubleshootPageProps = TroubleshootPageOnyxProps;
 
 function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
     const {translate} = useLocalize();
-    const theme = useTheme();
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
     const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false);
@@ -105,7 +102,6 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) {
                         illustration={LottieAnimations.Desk}
                         illustrationStyle={illustrationStyle}
                         titleStyles={styles.accountSettingsSectionTitle}
-                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor}
                         renderSubtitle={() => (
                             <Text style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt2]}>
                                 <Text style={[styles.textNormal, styles.colorMuted]}>{translate('initialSettingsPage.troubleshoot.description')}</Text>{' '}

diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
@@ -136,7 +136,7 @@ const darkTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.TROUBLESHOOT]: {
-            backgroundColor: colors.blue700,
+            backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.REFERRAL_DETAILS]: {

diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
@@ -136,8 +136,8 @@ const lightTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
         },
         [SCREENS.SETTINGS.TROUBLESHOOT]: {
-            backgroundColor: colors.blue700,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+            backgroundColor: colors.productLight100,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
         },
         [SCREENS.REFERRAL_DETAILS]: {
             backgroundColor: colors.pink800,