Adjust overlay style to LHP borderRadius

Expensify · Dec 18, 2023 · 53e4fd6 · 53e4fd6
1 parent bc38b46
commit 53e4fd6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -1385,8 +1385,8 @@ const styles = (theme: ThemeColors) =>
                 position: 'absolute',
                 left: 0,
                 height: '100%',
-                borderTopRightRadius: isSmallScreenWidth ? 0 : 24,
-                borderBottomRightRadius: isSmallScreenWidth ? 0 : 24,
+                borderTopRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
+                borderBottomRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
                 overflow: 'hidden',
             } satisfies ViewStyle),
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
@@ -1614,7 +1614,8 @@ const styles = (theme: ThemeColors) =>
             ({
                 ...positioning.pFixed,
                 // We need to stretch the overlay to cover the sidebar and the translate animation distance.
-                left: isModalOnTheLeft ? 0 : -2 * variables.sideBarWidth,
+                // The overlay must also cover borderRadius of the LHP component
+                left: isModalOnTheLeft ? -variables.lhpBorderRadius : -2 * variables.sideBarWidth,
                 top: 0,
                 bottom: 0,
                 right: isModalOnTheLeft ? -2 * variables.sideBarWidth : 0,

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -192,4 +192,6 @@ export default {
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
     cardNameWidth: 156,
+
+    lhpBorderRadius: 24,
 } as const;