Merge pull request #27324 from margelo/@chrispader/re-structure-theme…

…-styles Feat: Re-structure theme styles and simplify ThemeStylesProvider
Expensify · Sep 14, 2023 · d68263a · d68263a
2 parents 8d7928d + 068556a
commit d68263a
Show file tree

Hide file tree

Showing 5 changed files with 328 additions and 306 deletions.
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -259,9 +259,12 @@ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle | CSSProperties {
 
 function getZoomCursorStyle(isZoomed: boolean, isDragging: boolean): ViewStyle | CSSProperties {
     if (!isZoomed) {
+        // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return styles.cursorZoomIn;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return isDragging ? styles.cursorGrabbing : styles.cursorZoomOut;
 }
 
@@ -336,12 +339,16 @@ function getWidthStyle(width: number): ViewStyle | CSSProperties {
  */
 function getAutoGrowHeightInputStyle(textInputHeight: number, maxHeight: number): ViewStyle | CSSProperties {
     if (textInputHeight > maxHeight) {
+        // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return {
             ...styles.pr0,
             ...styles.overflowAuto,
         };
     }
 
+    // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
         ...styles.pr0,
         ...styles.overflowHidden,
@@ -439,11 +446,17 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu
 function getBadgeColorStyle(success: boolean, error: boolean, isPressed = false, isAdHoc = false): ViewStyle | CSSProperties {
     if (success) {
         if (isAdHoc) {
+            // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
             return isPressed ? styles.badgeAdHocSuccessPressed : styles.badgeAdHocSuccess;
         }
+        // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return isPressed ? styles.badgeSuccessPressed : styles.badgeSuccess;
     }
     if (error) {
+        // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return isPressed ? styles.badgeDangerPressed : styles.badgeDanger;
     }
     return {};
@@ -593,6 +606,8 @@ function getLoginPagePromoStyle(): ViewStyle | CSSProperties {
  * Generate the styles for the ReportActionItem wrapper view.
  */
 function getReportActionItemStyle(isHovered = false, isLoading = false): ViewStyle | CSSProperties {
+    // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
         display: 'flex',
         justifyContent: 'space-between',
@@ -609,6 +624,8 @@ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewSty
  * Generate the wrapper styles for the mini ReportActionContextMenu.
  */
 function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped: boolean): ViewStyle | CSSProperties {
+    // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
         ...(isReportActionItemGrouped ? positioning.tn8 : positioning.tn4),
         ...positioning.r4,
@@ -1043,6 +1060,8 @@ function displayIfTrue(condition: boolean): ViewStyle | CSSProperties {
 
 function getGoogleListViewStyle(shouldDisplayBorder: boolean): ViewStyle | CSSProperties {
     if (shouldDisplayBorder) {
+        // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return {
             ...styles.borderTopRounded,
             ...styles.borderBottomRounded,
@@ -1150,6 +1169,8 @@ function getDisabledLinkStyles(isDisabled = false): ViewStyle | CSSProperties {
         ...cursor.cursorDisabled,
     };
 
+    // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
         ...styles.link,
         ...(isDisabled ? disabledLinkStyles : {}),

diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx
@@ -1,8 +1,11 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, {useMemo} from 'react';
 import useTheme from './themes/useTheme';
-import StylesContext from './ThemeStylesContext';
-import defaultStyles from './styles';
+import ThemeStylesContext from './ThemeStylesContext';
+// TODO: Rename this to "styles" once the app is migrated to theme switching hooks and HOCs
+import {stylesGenerator as stylesUntyped} from './styles';
+
+const styles = stylesUntyped as (theme: Record<string, string>) => Record<string, unknown>;
 
 type ThemeStylesProviderProps = {
     children: React.ReactNode;
@@ -11,23 +14,9 @@ type ThemeStylesProviderProps = {
 function ThemeStylesProvider({children}: ThemeStylesProviderProps) {
     const theme = useTheme();
 
-    const appContentStyle = useMemo(
-        () => ({
-            ...defaultStyles.appContent,
-            backgroundColor: theme.appBG,
-        }),
-        [theme.appBG],
-    );
-
-    const styles = useMemo(
-        () => ({
-            ...defaultStyles,
-            appContent: appContentStyle,
-        }),
-        [appContentStyle],
-    );
+    const themeStyles = useMemo(() => styles(theme), [theme]);
 
-    return <StylesContext.Provider value={styles}>{children}</StylesContext.Provider>;
+    return <ThemeStylesContext.Provider value={themeStyles}>{children}</ThemeStylesContext.Provider>;
 }
 
 ThemeStylesProvider.displayName = 'ThemeStylesProvider';

diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts
@@ -35,6 +35,8 @@ function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: b
         return miniWrapperStyle;
     }
 
+    // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return [
         ...bigWrapperStyle,