Convert some <button>s to <Button> and remove Button--success-new class

frontend/src/metabase/admin/settings/components/SettingsBatchForm.jsx

@@ -7,6 +7,7 @@ import cx from "classnames";
 import Collapse from "react-collapse";
 import { t } from "c-3po";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
+import Button from "metabase/components/Button";
 import DisclosureTriangle from "metabase/components/DisclosureTriangle";
 import MetabaseUtils from "metabase/lib/utils";
 import SettingsSetting from "./SettingsSetting";
@@ -257,17 +258,15 @@ export default class SettingsBatchForm extends Component {
         )}
 
         <div className="m2 mb4">
-          <button
-            className={cx(
-              "Button mr1",
-              { "Button--primary": !disabled },
-              { "Button--success-new": submitting === "success" },
-            )}
+          <Button
+            mr={1}
+            primary={!disabled}
+            success={submitting === "success"}
             disabled={disabled}
             onClick={this.updateSettings}
           >
             {SAVE_SETTINGS_BUTTONS_STATES[submitting]}
-          </button>
+          </Button>
 
           {this.props.renderExtraButtons &&
             this.props.renderExtraButtons({

frontend/src/metabase/admin/settings/components/SettingsEmailForm.jsx

@@ -68,9 +68,8 @@ export default class SettingsLdapForm extends Component {
           return [
             valid && !dirty && submitting === "default" ? (
               <Button
-                className={cx("mr1", {
-                  "Button--success-new": sendingEmail === "success",
-                })}
+                mr={1}
+                success={sendingEmail === "success"}
                 disabled={disabled}
                 onClick={this.sendTestEmail}
               >
@@ -78,9 +77,9 @@ export default class SettingsLdapForm extends Component {
               </Button>
             ) : null,
             <Button
-              className="mr1"
-              onClick={() => this.clearEmailSettings()}
+              mr={1}
               disabled={disabled}
+              onClick={() => this.clearEmailSettings()}
             >
               {t`Clear`}
             </Button>,

frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx

@@ -4,6 +4,7 @@ import MetabaseAnalytics from "metabase/lib/analytics";
 import MetabaseUtils from "metabase/lib/utils";
 import SettingsSetting from "./SettingsSetting.jsx";
 
+import Button from "metabase/components/Button";
 import Icon from "metabase/components/Icon.jsx";
 
 import RetinaImage from "react-retina-image";
@@ -262,17 +263,15 @@ export default class SettingsSlackForm extends Component {
         <ul>
           {settings}
           <li className="m2 mb4">
-            <button
-              className={cx(
-                "Button mr2",
-                { "Button--primary": !disabled },
-                { "Button--success-new": submitting === "success" },
-              )}
+            <Button
+              mr={2}
+              primary={!disabled}
+              success={submitting === "success"}
               disabled={disabled}
               onClick={this.updateSlackSettings.bind(this)}
             >
               {saveButtonText}
-            </button>
+            </Button>
             {formErrors && formErrors.message ? (
               <span className="pl2 text-error text-bold">
                 {formErrors.message}

frontend/src/metabase/components/ButtonWithStatus.jsx

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import cx from "classnames";
 import { t } from "c-3po";
 
+import Button from "metabase/components/Button";
+
 let defaultTitleForState = {
   default: t`Save`,
   inProgress: t`Saving...`,
@@ -9,9 +11,6 @@ let defaultTitleForState = {
   failed: t`Saving failed.`,
 };
 
-// TODO Atte Keinänen 7/14/17: This could use Button component underneath and pass parameters to it
-// (Didn't want to generalize too much for the first version of this component
-
 // TODO: Tom Robinson 4/16/2018: Is this the same functionality as ActionButton?
 
 /**
@@ -56,18 +55,15 @@ export default class ButtonWithStatus extends Component {
     const disabled = this.props.disabled || progressState !== "default";
 
     return (
-      <button
-        className={cx(
-          "Button",
-          { "Button--primary": !disabled },
-          { "Button--success-new": progressState === "completed" },
-          this.props.className,
-        )}
+      <Button
+        className={this.props.className}
+        primary={!disabled}
+        success={progressState === "completed"}
         disabled={disabled}
         onClick={this.onClick}
       >
         {title}
-      </button>
+      </Button>
     );
   }
 }

frontend/src/metabase/css/components/buttons.css

@@ -217,12 +217,6 @@
   color: #fff;
 }
 
-.Button--success-new {
-  border-color: var(--success-button-color);
-  color: var(--success-button-color);
-  font-weight: bold;
-}
-
 /* toggle button */
 .Button-toggle {
   color: var(--grey-text-color);