fix statusbar color on mWeb iOS

Expensify · Feb 8, 2024 · 1d0e5a9 · 1d0e5a9
1 parent 9f2b8f8
commit 1d0e5a9
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 deletions.
diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
@@ -1,7 +1,9 @@
+import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
 import type DotLottieAnimation from './types';
+import type {AnimationKey} from './types';
 
-const DotLottieAnimations: Record<string, DotLottieAnimation> = {
+const DotLottieAnimations: Record<AnimationKey, DotLottieAnimation> = {
     ExpensifyLounge: {
         file: require('@assets/animations/ExpensifyLounge.lottie'),
         w: 1920,
@@ -26,6 +28,7 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         file: require('@assets/animations/PreferencesDJ.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.blue500,
     },
     ReviewingBankInfo: {
         file: require('@assets/animations/ReviewingBankInfo.lottie'),

diff --git a/src/components/LottieAnimations/types.ts b/src/components/LottieAnimations/types.ts
@@ -1,9 +1,26 @@
 import type {LottieViewProps} from 'lottie-react-native';
+import type {ColorValue} from '@styles/utils/types';
+
+type AnimationKey =
+    | 'ExpensifyLounge'
+    | 'FastMoney'
+    | 'Fireworks'
+    | 'Hands'
+    | 'PreferencesDJ'
+    | 'ReviewingBankInfo'
+    | 'WorkspacePlanet'
+    | 'SaveTheWorld'
+    | 'Safe'
+    | 'Magician'
+    | 'Update'
+    | 'Coin';
 
 type DotLottieAnimation = {
     file: LottieViewProps['source'];
     w: number;
     h: number;
+    backgroundColor?: ColorValue;
 };
 
+export type {AnimationKey};
 export default DotLottieAnimation;
diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
@@ -90,7 +90,7 @@ function Section({
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? theme.appBG);
+    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? illustration?.backgroundColor ?? theme.appBG);
 
     return (
         <>

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
@@ -22,7 +22,6 @@ import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 
 const propTypes = {
     /** The chat priority mode */
@@ -73,7 +72,6 @@ function PreferencesPage(props) {
                         isCentralPane
                         subtitleMuted
                         illustration={LottieAnimations.PreferencesDJ}
-                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
                         titleStyles={styles.accountSettingsSectionTitle}
                     >
                         <View style={[styles.flex1, styles.mt5]}>

diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
@@ -105,7 +105,7 @@ const darkTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.PREFERENCES.ROOT]: {
-            backgroundColor: colors.blue500,
+            backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.WORKSPACES]: {

diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
@@ -105,7 +105,7 @@ const lightTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.PREFERENCES.ROOT]: {
-            backgroundColor: colors.blue500,
+            backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.WORKSPACES]: {