use bulma classes

scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css

@@ -1,102 +0,0 @@
-/*modified from https://github.com/GA-MO/react-confirm-alert*/
-.react-confirm-alert-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-  background: rgba(255, 255, 255, 0.9);
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
-  display: flex;
-  justify-content: center;
-  -ms-align-items: center;
-  align-items: center;
-  opacity: 0;
-  -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-}
-
-.react-confirm-alert-body {
-  font-family: Arial, Helvetica, sans-serif;
-  width: 400px;
-  padding: 30px;
-  text-align: left;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
-  color: #666;
-}
-
-.react-confirm-alert-body > h1 {
-  margin-top: 0;
-}
-
-.react-confirm-alert-body > h3 {
-  margin: 0;
-  font-size: 16px;
-}
-
-.react-confirm-alert-button-group {
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 20px;
-}
-
-.react-confirm-alert-button-group > button {
-  outline: none;
-  background: #333;
-  border: none;
-  display: inline-block;
-  padding: 6px 18px;
-  color: #eee;
-  margin-right: 10px;
-  border-radius: 5px;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-@-webkit-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@-o-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js

@@ -1,9 +1,8 @@
 // @flow
 import * as React from "react";
 import ReactDOM from "react-dom";
-import "./ConfirmAlert.css";
 
-type Button = {
+type ButtonType = {
   label: string,
   onClick: () => void | null
 };
@@ -11,11 +10,11 @@ type Button = {
 type Props = {
   title: string,
   message: string,
-  buttons: Button[]
+  buttons: ButtonType[]
 };
 
 class ConfirmAlert extends React.Component<Props> {
-  handleClickButton = (button: Button) => {
+  handleClickButton = (button: ButtonType) => {
     if (button.onClick) {
       button.onClick();
     }
@@ -46,15 +45,14 @@ class ConfirmAlert extends React.Component<Props> {
             </header>
             <section className="modal-card-body">
               {message}
-              <div className="react-confirm-alert-button-group">
+              <div className="buttons">
                 {buttons.map((button, i) => (
-                  <button
+                  <a className="button"
                     key={i}
                     onClick={() => this.handleClickButton(button)}
-                    href="javascript:void(0);"
                   >
                     {button.label}
-                  </button>
+                  </a>
                 ))}
               </div>
             </section>