From 1d0e5a916de5b5f287d6f51bf5dbb6a67567f01f Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:53:00 +0100
Subject: [PATCH] fix statusbar color on mWeb iOS

---
 src/components/LottieAnimations/index.tsx       |  5 ++++-
 src/components/LottieAnimations/types.ts        | 17 +++++++++++++++++
 src/components/Section/index.tsx                |  2 +-
 .../settings/Preferences/PreferencesPage.js     |  2 --
 src/styles/theme/themes/dark.ts                 |  2 +-
 src/styles/theme/themes/light.ts                |  2 +-
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index fd593421232d..83300a5ccca2 100644
--- 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
index 6000b9f853f0..840e6a3cfa6b 100644
--- 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
index 948094c90bff..c4b900bea8b1 100644
--- 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
index 243b220fa517..b85e700df02b 100755
--- 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
index ea61a1b98ddf..613959307a8c 100644
--- 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
index 7317dc836b2d..10d37219465a 100644
--- 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]: {