add/update/delete servers

app/components/Modal/Modal.scss

@@ -0,0 +1,50 @@
+@import '../../scss/variables';
+
+.CustomModal--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.CustomModal__base {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.CustomModal__content {
+  height: 400px;
+  width: 400px;
+  background: $dark-blue--1;
+  border-radius: 4px;
+  z-index: 200;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.CustomModal__overlay {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: $dark-blue;
+  opacity: 0.8;
+}
+
+.CustomModal__header {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  background: $dark-blue--2;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}

app/components/Modal/Modal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import './Modal.scss';
+
+interface Props {
+  isOpen: boolean;
+  title: string;
+  onClose?(): any;
+}
+
+export class Modal extends React.Component<Props, any> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render(): any {
+    const { isOpen, onClose, title } = this.props;
+
+    const hiddenClass = !isOpen ? 'CustomModal--hidden' : '';
+
+    return (
+      <div className={'CustomModal__base ' + hiddenClass}>
+        <div className="CustomModal__content">
+          <div className="CustomModal__header">
+            <h3>{title}</h3>
+          </div>
+          {this.props.children}
+        </div>
+        <div className="CustomModal__overlay" onClick={onClose.bind(this)} />
+      </div>
+    );
+  }
+}