From ea659d03b32f4f74ce7259264ed5f0cf5a3798b7 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 15 Dec 2023 09:18:45 -0800
Subject: [PATCH 1/2] fix sign in modal

---
 src/pages/signin/SignInModal.js  | 11 ++++++++---
 src/styles/index.ts              |  2 +-
 src/styles/theme/themes/dark.ts  |  4 ++++
 src/styles/theme/themes/light.ts |  4 ++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 1bb8b6065a15..f617143c354c 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -1,17 +1,22 @@
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Session from '@userActions/Session';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import SCREENS from '@src/SCREENS';
 import SignInPage from './SignInPage';
 
+
 const propTypes = {};
 
 const defaultProps = {};
 
 function SignInModal() {
-    const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+
     if (!Session.isAnonymousUser()) {
         // Sign in in RHP is only for anonymous users
         Navigation.isNavigationReady().then(() => {
@@ -20,7 +25,7 @@ function SignInModal() {
     }
     return (
         <ScreenWrapper
-            style={[styles.highlightBG]}
+            style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.SETTINGS.PROFILE.STATUS].backgroundColor)]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             testID={SignInModal.displayName}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9e02335bde0d..20a78b604e6a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2372,7 +2372,7 @@ const styles = (theme: ThemeColors) =>
         anonymousRoomFooterLogoTaglineText: {
             fontFamily: fontFamily.EXP_NEUE,
             fontSize: variables.fontSizeMedium,
-            color: theme.textLight,
+            color: theme.text,
         },
         signInButtonAvatar: {
             width: 80,
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index c2fcac6af13e..fecdcb8480f9 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -131,6 +131,10 @@ const darkTheme = {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
+        [SCREENS.RIGHT_MODAL.SIGN_IN]: {
+            backgroundColor: colors.productDark100,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
     },
 
     statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 3cd052046f43..c564ca6a1452 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -131,6 +131,10 @@ const lightTheme = {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
+        [SCREENS.RIGHT_MODAL.SIGN_IN]: {
+            backgroundColor: colors.productDark100,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
     },
 
     statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,

From 655c06c1425e9f889428584eef3c7029f703129a Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 15 Dec 2023 09:34:29 -0800
Subject: [PATCH 2/2] use highlightBG color, prettier

---
 src/pages/signin/SignInModal.js  | 7 +++----
 src/styles/theme/themes/dark.ts  | 2 +-
 src/styles/theme/themes/light.ts | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index f617143c354c..10f048d31380 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import Navigation from '@libs/Navigation/Navigation';
-import * as Session from '@userActions/Session';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Session from '@userActions/Session';
 import SCREENS from '@src/SCREENS';
 import SignInPage from './SignInPage';
 
-
 const propTypes = {};
 
 const defaultProps = {};
@@ -25,7 +24,7 @@ function SignInModal() {
     }
     return (
         <ScreenWrapper
-            style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.SETTINGS.PROFILE.STATUS].backgroundColor)]}
+            style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.SIGN_IN].backgroundColor)]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             testID={SignInModal.displayName}
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index fecdcb8480f9..fada75407162 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -132,7 +132,7 @@ const darkTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.RIGHT_MODAL.SIGN_IN]: {
-            backgroundColor: colors.productDark100,
+            backgroundColor: colors.productDark200,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
     },
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index c564ca6a1452..366220a0652d 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -132,7 +132,7 @@ const lightTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.RIGHT_MODAL.SIGN_IN]: {
-            backgroundColor: colors.productDark100,
+            backgroundColor: colors.productDark200,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
     },