add Confirm shared component

webui/src/components/Base/Logout.js

@@ -1,4 +1,3 @@
-import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import styled from 'styled-components';
@@ -117,6 +116,6 @@ const Logout = ({ visible, onHide, onLogout }) => (
   </Modal>
 )
 
-Logout.PropTypes = propTypes;
+Logout.propTypes = propTypes;
 
 export default Logout;

webui/src/components/Shared/Button.js

@@ -15,6 +15,10 @@ function getBgColor(props) {
     color = oc.violet[7];
     colorDark = oc.violet[8];
   }
+  if (props.info) {
+    color = oc.gray[7];
+    colorDark = oc.gray[8];
+  }
   if (props.danger) {
     color = oc.red[7];
     colorDark = oc.red[8];
@@ -36,6 +40,7 @@ function getBgColor(props) {
 function getHoverColor(props) {
   let color = oc.indigo[8];
   if (props.secondary) color = oc.violet[8];
+  if (props.info) color = oc.gray[8];
   if (props.danger) color = oc.red[8];
   if (props.success) color = oc.lime[8];
   if (props.clear) color = 'transparent';
@@ -46,6 +51,7 @@ function getHoverColor(props) {
 function getActiveColor(props) {
   let color = oc.indigo[9];
   if (props.secondary) color = oc.violet[9];
+  if (props.info) color = oc.gray[9];
   if (props.danger) color = oc.red[9];
   if (props.success) color = oc.lime[9];
 
@@ -55,6 +61,7 @@ function getActiveColor(props) {
 function getColor(props) {
   if (props.primary) return oc.indigo[7];
   if (props.secondary) return oc.violet[7];
+  if (props.info) return oc.gray[7];
   if (props.danger) return oc.red[7];
   if (props.success) return oc.lime[7];
   return oc.indigo[7]; // default

webui/src/components/Shared/Confirm.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+
+import styled from 'styled-components';
+import oc from 'open-color';
+
+import { media, transitions } from 'helpers/style-utils';
+
+import Modal from './Modal';
+import Button from './Button';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  postion: relative;
+  width: 300px;
+
+  ${media.mobile`
+    width: calc(100vw - 2rem);
+  `}
+
+  background: white;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+`
+
+const Message = styled.div`
+  padding: 2rem;
+`
+
+const Buttons = styled.div`
+  display: flex;
+  justify-content: flex-end;
+
+  padding: 1rem;
+`
+
+const Confirm = ({ visible, message, buttons, onHide }) => {
+  const buttonList = buttons
+    .map(button =>
+      <Button
+        clear 
+        danger={button.danger === true} 
+        info={button.info === true} 
+        onClick={button.action}>
+        {button.text}
+      </Button>
+    );
+  return (
+    <Modal visible={visible} onHide={onHide}>
+      <Wrapper>
+        <Message>{message}</Message>
+        <Buttons>{buttonList}</Buttons>
+      </Wrapper>  
+    </Modal>
+  )
+}
+
+export default Confirm;

webui/src/components/index.js

@@ -14,6 +14,7 @@ import Blank from './Shared/Blank';
 import Button from './Shared/Button';
 import withRipple from './Shared/withRipple';
 import Form from './Shared/Form';
+import Confirm from './Shared/Confirm';
 
 import * as Subscriber from './Subscriber';
 
@@ -34,6 +35,7 @@ export {
   Button,
   withRipple,
   Form,
+  Confirm,
 
   Subscriber
 }