Merge pull request #43627 from s77rt/popover-border-radius

[NoQA] Change modal border radius to 16px
Expensify · Jun 20, 2024 · d2ea358 · d2ea358
2 parents ed50007 + f4c4476
commit d2ea358
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -1702,7 +1702,7 @@ const styles = (theme: ThemeColors) =>
 
         createMenuContainer: {
             width: variables.sideBarWidth - 40,
-            paddingVertical: 12,
+            paddingVertical: variables.componentBorderRadiusLarge,
         },
 
         createMenuHeaderText: {

diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -75,7 +75,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 };
                 modalContainerStyle = {
                     boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
-                    borderRadius: 12,
+                    borderRadius: variables.componentBorderRadiusLarge,
                     overflow: 'hidden',
                     width: variables.sideBarWidth,
                 };
@@ -102,7 +102,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     flex: 1,
                     marginTop: isSmallScreenWidth ? 0 : 20,
                     marginBottom: isSmallScreenWidth ? 0 : 20,
-                    borderRadius: isSmallScreenWidth ? 0 : 12,
+                    borderRadius: isSmallScreenWidth ? 0 : variables.componentBorderRadiusLarge,
                     overflow: 'hidden',
                     ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth),
                 };
@@ -129,7 +129,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     flex: 1,
                     marginTop: isSmallScreenWidth ? 0 : 20,
                     marginBottom: isSmallScreenWidth ? 0 : 20,
-                    borderRadius: isSmallScreenWidth ? 0 : 12,
+                    borderRadius: isSmallScreenWidth ? 0 : variables.componentBorderRadiusLarge,
                     overflow: 'hidden',
                     ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth, true),
                 };
@@ -151,7 +151,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 };
                 modalContainerStyle = {
                     boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
-                    borderRadius: 12,
+                    borderRadius: variables.componentBorderRadiusLarge,
                     borderWidth: 0,
                 };
 
@@ -174,9 +174,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 };
                 modalContainerStyle = {
                     width: '100%',
-                    borderTopLeftRadius: 20,
-                    borderTopRightRadius: 20,
-                    paddingTop: 12,
+                    borderTopLeftRadius: variables.componentBorderRadiusLarge,
+                    borderTopRightRadius: variables.componentBorderRadiusLarge,
+                    paddingTop: variables.componentBorderRadiusLarge,
                     justifyContent: 'center',
                     overflow: 'hidden',
                 };
@@ -197,7 +197,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     },
                 };
                 modalContainerStyle = {
-                    borderRadius: 12,
+                    borderRadius: variables.componentBorderRadiusLarge,
                     borderWidth: 1,
                     borderColor: theme.border,
                     justifyContent: 'center',

diff --git a/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts b/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts
@@ -45,7 +45,7 @@ const createReportActionContextMenuStyleUtils: StyleUtilGenerator<GetReportActio
             getDefaultWrapperStyle(theme),
 
             // Small screens use a bottom-docked modal that already has vertical padding.
-            isSmallScreenWidth ? {} : styles.pv3,
+            isSmallScreenWidth ? {} : styles.pv4,
         ];
     },
 });