Merge pull request #18347 from Prince-Mendiratta/feat/17635-money-req…

…uest-hover-effect [MoneyRequestConfirmation] add hover style to fields on the money confirmation modal
Expensify · May 4, 2023 · f14be7b · f14be7b
2 parents 1b60108 + cf8fa02
commit f14be7b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
@@ -289,6 +289,7 @@ class MoneyRequestConfirmationList extends Component {
                 boldStyle
                 shouldTextInputAppearBelowOptions
                 shouldShowTextInput={false}
+                shouldUseStyleForChildren={false}
                 optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
                 footerContent={shouldShowSettlementButton
                     ? (
@@ -313,19 +314,17 @@ class MoneyRequestConfirmationList extends Component {
                     shouldShowRightIcon
                     title={formattedAmount}
                     description={this.props.translate('iou.amount')}
-                    interactive={false} // This is so the menu item's background doesn't change color on hover
                     onPress={() => this.props.navigateToStep(0)}
-                    style={styles.moneyRequestMenuItem}
+                    style={[styles.moneyRequestMenuItem, styles.mt2]}
                     titleStyle={styles.moneyRequestConfirmationAmount}
                     disabled={this.state.didConfirm}
                 />
                 <MenuItemWithTopDescription
                     shouldShowRightIcon
                     title={this.props.iou.comment}
                     description={this.props.translate('common.description')}
-                    interactive={false} // This is so the menu item's background doesn't change color on hover
                     onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)}
-                    style={styles.moneyRequestMenuItem}
+                    style={[styles.moneyRequestMenuItem, styles.mb2]}
                     disabled={this.state.didConfirm}
                 />
             </OptionsSelector>

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -335,14 +335,14 @@ class BaseOptionsSelector extends Component {
                                     <View style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100, styles.flexRow]}>
                                         {optionsList}
                                     </View>
-                                    <View style={[styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0]}>
+                                    <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0] : []}>
                                         {this.props.children}
                                         {this.props.shouldShowTextInput && textInput}
                                     </View>
                                 </>
                             ) : (
                                 <>
-                                    <View style={[styles.ph5, styles.pb3]}>
+                                    <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pb3] : []}>
                                         {this.props.children}
                                         {this.props.shouldShowTextInput && textInput}
                                     </View>

diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -101,6 +101,9 @@ const propTypes = {
 
     /** Key of the option that we should focus on when first opening the options list */
     initiallyFocusedOptionKey: PropTypes.string,
+
+    /** Whether to use default padding and flex styles for children */
+    shouldUseStyleForChildren: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -130,6 +133,7 @@ const defaultProps = {
     maxLength: undefined,
     shouldShowTextInput: true,
     onChangeText: () => {},
+    shouldUseStyleForChildren: true,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2331,7 +2331,8 @@ const styles = {
         borderRadius: 0,
         justifyContent: 'space-between',
         width: '100%',
-        marginBottom: 20,
+        paddingHorizontal: 20,
+        paddingVertical: 12,
     },
 
     iouPreviewBox: {