Merge pull request #6196 from Santhosh-Sellavel/Improve_Payment_Optio…

…ns_Floating_Button Improvement Payment options Padding
Expensify · Nov 4, 2021 · fa83e4c · fa83e4c
2 parents dc67437 + d4361a2
commit fa83e4c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {ScrollView} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import PaymentMethodList from './PaymentMethodList';
@@ -143,18 +143,20 @@ class PaymentsPage extends React.Component {
                             left: this.state.anchorPositionLeft,
                         }}
                     >
-                        {!this.props.payPalMeUsername && (
+                        <View style={styles.pr15}>
+                            {!this.props.payPalMeUsername && (
+                                <MenuItem
+                                    title={this.props.translate('common.payPalMe')}
+                                    icon={PayPal}
+                                    onPress={() => this.addPaymentMethodTypePressed(PAYPAL)}
+                                />
+                            )}
                             <MenuItem
-                                title={this.props.translate('common.payPalMe')}
-                                icon={PayPal}
-                                onPress={() => this.addPaymentMethodTypePressed(PAYPAL)}
+                                title={this.props.translate('common.debitCard')}
+                                icon={CreditCard}
+                                onPress={() => this.addPaymentMethodTypePressed(DEBIT_CARD)}
                             />
-                        )}
-                        <MenuItem
-                            title={this.props.translate('common.debitCard')}
-                            icon={CreditCard}
-                            onPress={() => this.addPaymentMethodTypePressed(DEBIT_CARD)}
-                        />
+                        </View>
                     </Popover>
                 </KeyboardAvoidingView>
             </ScreenWrapper>

diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
@@ -264,6 +264,10 @@ export default {
         paddingRight: 32,
     },
 
+    pr15: {
+        paddingRight: 60,
+    },
+
     pl5: {
         paddingLeft: 20,
     },