Add custom modal container

2 files changed, 53 insertions, 0 deletions

diff --git a/gui/packages/components/src/Modal.tsx b/gui/packages/components/src/Modal.tsx
new file mode 100644
index 0000000000..6eb070262b
--- /dev/null
+++ b/gui/packages/components/src/Modal.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+export class ModalContent extends React.Component {
+  public render() {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export class ModalAlert extends React.Component {
+  public render() {
+    return (
+      <div
+        style={{
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+interface IModalContainerProps {
+  children?: Array<React.ReactElement<ModalContent | ModalAlert>>;
+}
+
+export class ModalContainer extends React.Component<IModalContainerProps> {
+  public render() {
+    return <div style={{ position: 'relative', flex: 1 }}>{this.props.children}</div>;
+  }
+}
diff --git a/gui/packages/components/src/index.ts b/gui/packages/components/src/index.ts
index 46c4ec3195..31c5ee6fec 100644
--- a/gui/packages/components/src/index.ts
+++ b/gui/packages/components/src/index.ts
@@ -5,3 +5,4 @@ export { default as SecuredLabel, SecuredDisplayStyle } from './SecuredLabel';
 export { default as HeaderBar, HeaderBarStyle, Brand, SettingsBarButton } from './HeaderBar';
 export { default as SettingsHeader, HeaderTitle, HeaderSubTitle } from './SettingsHeader';
 export { default as ImageView } from './ImageView';
+export { ModalContainer, ModalAlert, ModalContent } from './Modal';