From a453d1e610a5dc14c62c21f5172dbbe444e3d0dd Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Tue, 4 Apr 2023 11:04:30 -0400
Subject: [PATCH] Repurpose style prop for menuitem to apply to pressable

---
 src/components/IOUConfirmationList.js | 3 ++-
 src/components/MenuItem.js            | 8 ++++----
 src/styles/styles.js                  | 8 ++++++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
index 5a0de690033e..b9885a02dcb7 100755
--- a/src/components/IOUConfirmationList.js
+++ b/src/components/IOUConfirmationList.js
@@ -323,12 +323,13 @@ class IOUConfirmationList extends Component {
                         />
                     )}
             >
-                <MenuItemWithTopDescription // TODO: Get rid of the padding that's coming from popoverItem within MenuItem for this one.
+                <MenuItemWithTopDescription
                     shouldShowRightIcon
                     title={formattedAmount}
                     description={this.props.translate('iou.amount')}
                     interactive={false}
                     onPress={() => {}} // TODO: Make this go to edit amount!
+                    style={styles.iouMenuItem}
                     titleStyle={styles.iouConfirmationAmount}
                 />
             </OptionsSelector>
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index c10c9e1c9e0f..41aa29260211 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -30,7 +30,7 @@ const defaultProps = {
     shouldShowBasicTitle: false,
     shouldShowDescriptionOnTop: false,
     wrapperStyle: [],
-    style: {},
+    style: styles.popoverMenuItem,
     titleStyle: {},
     success: false,
     icon: undefined,
@@ -60,13 +60,13 @@ const MenuItem = (props) => {
         (props.shouldShowBasicTitle ? undefined : styles.textStrong),
         (props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined),
         styles.pre,
-    ], props.style, props.titleStyle);
+    ], props.titleStyle);
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         (props.icon ? styles.ml3 : undefined),
         styles.breakWord,
         styles.lineHeightNormal,
-    ], props.style);
+    ]);
 
     return (
         <Pressable
@@ -82,7 +82,7 @@ const MenuItem = (props) => {
                 props.onPress(e);
             }}
             style={({hovered, pressed}) => ([
-                styles.popoverMenuItem,
+                props.style,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
             ])}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index eb0ff7791f54..06355826ad29 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2280,6 +2280,14 @@ const styles = {
         fontSize: 19,
     },
 
+    iouMenuItem: {
+        flexDirection: 'row',
+        borderRadius: 0,
+        justifyContent: 'space-between',
+        width: '100%',
+        marginBottom: 20,
+    },
+
     iouPreviewBox: {
         backgroundColor: themeColors.cardBG,
         borderRadius: variables.componentBorderRadiusCard,