Merge pull request #33181 from Expensify/georgia-joinDiscussion

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

Author: arosiclair

src/pages/signin/SignInModal.js

@@ -1,17 +1,21 @@
 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 = {};
 
 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}

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,

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,

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,