Introduce generic overlay components

ui/src/shared/components/overlay/OverlayBody.tsx

@@ -0,0 +1,11 @@
+import React, {SFC, ReactNode} from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+const OverlayBody: SFC<Props> = ({children}) => (
+  <div className="overlay--body">{children}</div>
+)
+
+export default OverlayBody

ui/src/shared/components/overlay/OverlayContainer.tsx

@@ -0,0 +1,30 @@
+import React, {Component, ReactNode, CSSProperties} from 'react'
+
+interface Props {
+  children: ReactNode
+  maxWidth?: number
+}
+
+class OverlayContainer extends Component<Props> {
+  public static defaultProps: Partial<Props> = {
+    maxWidth: 600,
+  }
+
+  public render() {
+    const {children} = this.props
+
+    return (
+      <div className="overlay--container" style={this.style}>
+        {children}
+      </div>
+    )
+  }
+
+  private get style(): CSSProperties {
+    const {maxWidth} = this.props
+
+    return {maxWidth: `${maxWidth}px`}
+  }
+}
+
+export default OverlayContainer

ui/src/shared/components/overlay/OverlayHeading.tsx

@@ -0,0 +1,28 @@
+import React, {PureComponent, ReactChildren} from 'react'
+
+interface Props {
+  children?: ReactChildren
+  title: string
+  onDismiss?: () => void
+}
+
+class OverlayHeading extends PureComponent<Props> {
+  constructor(props: Props) {
+    super(props)
+  }
+
+  public render() {
+    const {title, onDismiss, children} = this.props
+
+    return (
+      <div className="overlay--heading">
+        <div className="overlay--title">{title}</div>
+        {onDismiss && (
+          <button className="overlay--dismiss" onClick={onDismiss} />
+        )}
+        {children && children}
+      </div>
+    )
+  }
+}
+export default OverlayHeading