diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css deleted file mode 100644 index 96246a44a5..0000000000 --- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css +++ /dev/null @@ -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; - } -} diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js index 416853cffa..16d3d501b6 100644 --- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js +++ b/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 { - handleClickButton = (button: Button) => { + handleClickButton = (button: ButtonType) => { if (button.onClick) { button.onClick(); } @@ -46,15 +45,14 @@ class ConfirmAlert extends React.Component {
{message} -
+
{buttons.map((button, i) => ( - + ))}