Merge pull request Expensify#89600 from Expensify/claude-fixGreenButtonTextContrast

Use preserved high contrast mode preference on sign-in page

Author: youssef-lr

src/pages/signin/SignInPage.tsx

@@ -356,16 +356,25 @@ function SignInPageWrapper({ref}: SignInPageProps) {
 }
 
 // WithTheme is a HOC that provides theme-related contexts (e.g. to the SignInPageWrapper component since these contexts are required for variable declarations).
+// The sign-in page always uses the dark theme, but respects the user's contrast preference (nvp_preferredTheme) which is preserved on sign-out.
 function WithTheme(Component: React.ComponentType<SignInPageProps>) {
-    return ({ref}: SignInPageProps) => (
-        <ThemeProvider theme={CONST.THEME.DARK}>
-            <ThemeStylesProvider>
-                <HTMLEngineProvider>
-                    <Component ref={ref} />
-                </HTMLEngineProvider>
-            </ThemeStylesProvider>
-        </ThemeProvider>
-    );
+    function ThemedComponent({ref}: SignInPageProps) {
+        const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
+        const contrastThemes: string[] = [CONST.THEME.DARK_CONTRAST, CONST.THEME.LIGHT_CONTRAST, CONST.THEME.SYSTEM_CONTRAST];
+        const signInTheme = contrastThemes.includes(preferredTheme ?? '') ? CONST.THEME.DARK_CONTRAST : CONST.THEME.DARK;
+
+        return (
+            <ThemeProvider theme={signInTheme}>
+                <ThemeStylesProvider>
+                    <HTMLEngineProvider>
+                        <Component ref={ref} />
+                    </HTMLEngineProvider>
+                </ThemeStylesProvider>
+            </ThemeProvider>
+        );
+    }
+    ThemedComponent.displayName = `WithTheme(${Component.displayName ?? Component.name ?? 'Component'})`;
+    return ThemedComponent;
 }
 
 const SignInPageThemed = WithTheme(SignInPage);

src/pages/signin/Socials.tsx

@@ -74,7 +74,7 @@ function Socials() {
                             src={icons[social.iconURL]}
                             height={variables.iconSizeLarge}
                             width={variables.iconSizeLarge}
-                            fill={hovered || pressed ? theme.link : theme.textLight}
+                            fill={hovered || pressed ? theme.link : theme.text}
                         />
                     )}
                 </PressableWithoutFeedback>

src/styles/index.ts

@@ -4039,7 +4039,7 @@ const staticStyles = (theme: ThemeColors) =>
         footerRow: {
             paddingVertical: 4,
             marginBottom: 8,
-            color: theme.textLight,
+            color: theme.text,
             fontSize: variables.fontSizeMedium,
         },
 
@@ -4165,7 +4165,7 @@ const staticStyles = (theme: ThemeColors) =>
         loginHeroBody: {
             ...FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSignInHeroBody,
-            color: theme.textLight,
+            color: theme.text,
             textAlign: 'center',
         },