Merge pull request #33181 from Expensify/georgia-joinDiscussion

[CP Staging] Fix Sign In Modal Header/"Join the Discussion" Colors
Expensify · Dec 17, 2023 · bc62838 · bc62838
2 parents 990815f + 655c06c
commit bc62838
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/src/pages/signin/SignInModal.js b/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}

diff --git 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
@@ -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
@@ -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,