Merge pull request #23464 from DanutGavrus/fix/22658-highlight-cancel-button

[22658] Highlight specified cancel buttons

Author: Gonals

src/components/Button/index.js

@@ -87,6 +87,9 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     textStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Whether we should use the default hover style */
+    shouldUseDefaultHover: PropTypes.bool,
+
     /** Whether we should use the success theme color */
     success: PropTypes.bool,
 
@@ -142,6 +145,7 @@ const defaultProps = {
     style: [],
     innerStyles: [],
     textStyles: [],
+    shouldUseDefaultHover: false,
     success: false,
     danger: false,
     children: null,
@@ -295,6 +299,7 @@ class Button extends Component {
                     ...this.props.innerStyles,
                 ]}
                 hoverStyle={[
+                    this.props.shouldUseDefaultHover && !this.props.isDisabled ? styles.buttonDefaultHovered : undefined,
                     this.props.success && !this.props.isDisabled ? styles.buttonSuccessHovered : undefined,
                     this.props.danger && !this.props.isDisabled ? styles.buttonDangerHovered : undefined,
                 ]}

src/components/ConfirmContent.js

@@ -76,6 +76,7 @@ function ConfirmContent(props) {
                     style={[styles.mt3, styles.noSelect]}
                     onPress={props.onCancel}
                     text={props.cancelText || props.translate('common.no')}
+                    shouldUseDefaultHover
                 />
             )}
         </View>

src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

@@ -455,6 +455,7 @@ class BasePaymentsPage extends React.Component {
                                     onPress={this.navigateToAddPaypalRoute}
                                     style={[styles.mb4]}
                                     text={this.props.translate('common.edit')}
+                                    shouldUseDefaultHover
                                 />
                             )}
                             <Button

src/styles/styles.js

@@ -525,6 +525,11 @@ const styles = {
         textAlign: 'center',
     },
 
+    buttonDefaultHovered: {
+        backgroundColor: themeColors.buttonHoveredBG,
+        borderWidth: 0,
+    },
+
     buttonSuccess: {
         backgroundColor: themeColors.success,
         borderWidth: 0,