Merge pull request #41830 from bernhardoj/fix/40683-status-bar-color

Fix status bar of mWeb Safari doesn't match the splash screen background color
Expensify · Jun 14, 2024 · ebafd6c · ebafd6c
2 parents 1c88c60 + 381c92d
commit ebafd6c
Show file tree

Hide file tree

Showing 6 changed files with 3 additions and 24 deletions.
diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx
@@ -114,11 +114,6 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
         [prevIsRootStatusBarEnabled, isRootStatusBarEnabled, statusBarAnimation, statusBarStyle, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle],
     );
 
-    useEffect(() => {
-        updateStatusBarAppearance({backgroundColor: theme.appBG});
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want this to run on first render
-    }, []);
-
     useEffect(() => {
         didForceUpdateStatusBarRef.current = false;
     }, [isRootStatusBarEnabled]);

diff --git a/src/libs/getSplashBackgroundColor/index.native.ts b/src/libs/getSplashBackgroundColor/index.native.ts
diff --git a/src/libs/getSplashBackgroundColor/index.ts b/src/libs/getSplashBackgroundColor/index.ts
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
@@ -1,4 +1,3 @@
-import getSplashBackgroundColor from '@libs/getSplashBackgroundColor';
 import colors from '@styles/theme/colors';
 import type {ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
@@ -7,7 +6,7 @@ import SCREENS from '@src/SCREENS';
 const darkTheme = {
     // Figma keys
     appBG: colors.productDark100,
-    splashBG: getSplashBackgroundColor(),
+    splashBG: colors.green400,
     highlightBG: colors.productDark200,
     border: colors.productDark400,
     borderLighter: colors.productDark400,

diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
@@ -1,4 +1,3 @@
-import getSplashBackgroundColor from '@libs/getSplashBackgroundColor';
 import colors from '@styles/theme/colors';
 import type {ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
@@ -7,7 +6,7 @@ import SCREENS from '@src/SCREENS';
 const lightTheme = {
     // Figma keys
     appBG: colors.productLight100,
-    splashBG: getSplashBackgroundColor(),
+    splashBG: colors.green400,
     highlightBG: colors.productLight200,
     border: colors.productLight400,
     borderLighter: colors.productLight400,

diff --git a/web/index.html b/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>New Expensify</title>
     <meta name="description" content="Corporate cards, reimbursements, receipt scanning, invoicing, and bill pay.">
-    <meta name="theme-color" content="">
+    <meta name="theme-color" content="#03D47C">
     <meta property="twitter:card" content="summary">
     <meta property="twitter:site" content="@expensify">
     <meta property="og:type" content="website">