1 files changed, 17 insertions, 13 deletions
diff --git a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
index 4a4e572f7c3..fc98e4eb71a 100644
--- a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
@@ -26,6 +26,7 @@ import { Metric } from '../../../app/types';
 import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 import './styles.css';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
 
 interface Props {
   branch?: string;
@@ -46,18 +47,21 @@ export default class BadgesModal extends React.PureComponent<Props, State> {
     badgeOptions: { color: 'white', metric: 'alert_status' }
   };
 
-  handleClose = () => this.setState({ open: false });
-
-  handleOpen = () => this.setState({ open: true });
+  handleClose = () => {
+    this.setState({ open: false });
+  };
 
-  handleSelectBadge = (selectedType: BadgeType) => this.setState({ selectedType });
+  handleOpen = () => {
+    this.setState({ open: true });
+  };
 
-  handleUpdateOptions = (options: Partial<BadgeOptions>) =>
-    this.setState(state => ({
-      badgeOptions: { ...state.badgeOptions, ...options }
-    }));
+  handleSelectBadge = (selectedType: BadgeType) => {
+    this.setState({ selectedType });
+  };
 
-  handleCancelClick = () => this.handleClose();
+  handleUpdateOptions = (options: Partial<BadgeOptions>) => {
+    this.setState(state => ({ badgeOptions: { ...state.badgeOptions, ...options } }));
+  };
 
   render() {
     const { branch, project } = this.props;
@@ -66,9 +70,9 @@ export default class BadgesModal extends React.PureComponent<Props, State> {
     const fullBadgeOptions = { branch, project, ...badgeOptions };
     return (
       <div className="overview-meta-card">
-        <button className="js-project-badges" onClick={this.handleOpen}>
+        <Button className="js-project-badges" onClick={this.handleOpen}>
           {translate('overview.badges.get_badge')}
-        </button>
+        </Button>
         {this.state.open && (
           <Modal contentLabel={header} onRequestClose={this.handleClose}>
             <header className="modal-head">
@@ -100,9 +104,9 @@ export default class BadgesModal extends React.PureComponent<Props, State> {
               <BadgeSnippet snippet={getBadgeUrl(selectedType, fullBadgeOptions)} />
             </div>
             <footer className="modal-foot">
-              <button className="button-link js-modal-close" onClick={this.handleCancelClick}>
+              <ResetButtonLink className="js-modal-close" onClick={this.handleClose}>
                 {translate('close')}
-              </button>
+              </ResetButtonLink>
             </footer>
           </Modal>
         )}