From a3a432e8597b90611632bc204301d3d30eefe279 Mon Sep 17 00:00:00 2001
From: Andrew Rosiclair <arosiclair@expensify.com>
Date: Sun, 17 Dec 2023 17:27:40 -0500
Subject: [PATCH] Merge pull request #33181 from
 Expensify/georgia-joinDiscussion

[CP Staging] Fix Sign In Modal Header/"Join the Discussion" Colors

(cherry picked from commit bc62838c8dec925040850bd01bf3f6b7731c6f1c)
---
 src/pages/signin/SignInModal.js  | 10 +++++++---
 src/styles/index.ts              |  2 +-
 src/styles/theme/themes/dark.ts  |  4 ++++
 src/styles/theme/themes/light.ts |  4 ++++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 1bb8b6065a15..10f048d31380 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useThemeStyles from '@hooks/useThemeStyles';
+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 = {};
@@ -11,7 +13,9 @@ 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 +24,7 @@ function SignInModal() {
     }
     return (
         <ScreenWrapper
-            style={[styles.highlightBG]}
+            style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.SIGN_IN].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 95cf518921a9..daa1a72d35dd 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -130,6 +130,10 @@ const darkTheme = {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
+        [SCREENS.RIGHT_MODAL.SIGN_IN]: {
+            backgroundColor: colors.productDark200,
+            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 f10885ae4d2e..86d150d15cad 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -130,6 +130,10 @@ const lightTheme = {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
+        [SCREENS.RIGHT_MODAL.SIGN_IN]: {
+            backgroundColor: colors.productDark200,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
     },
 
     statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,