initial commit

src/components/RegistryInfoDialog/index.js

@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog/index';
+import DialogActions from '@material-ui/core/DialogActions/index';
+import Button from '@material-ui/core/Button/index';
+import { Title, Content } from './styles';
+
+import type { Node } from 'react';
+
+import { IProps } from './types';
+
+const RegistryInfoDialog = ({ open = false, children, onClose }: IProps): Node => (
+  <Dialog id={'registryInfo--dialog-container'} onClose={onClose} open={open}>
+    <Title disableTypography={true}>{'Register Info'}</Title>
+    <Content>{children}</Content>
+    <DialogActions>
+      <Button color={'inherit'} id={'registryInfo--dialog-close'} onClick={onClose}>
+        {'CLOSE'}
+      </Button>
+    </DialogActions>
+  </Dialog>
+);
+
+export default RegistryInfoDialog;

src/components/RegistryInfoDialog/styles.js

@@ -0,0 +1,24 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import DialogTitle from '@material-ui/core/DialogTitle/index';
+import DialogContent from '@material-ui/core/DialogContent/index';
+import colors from '../../utils/styles/colors';
+import { fontSize } from '../../utils/styles/sizes';
+
+export const Title = styled(DialogTitle)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+    font-size: ${fontSize.lg};
+  }
+`;
+
+export const Content = styled(DialogContent)`
+  && {
+    padding: 0 24px;
+  }
+`;

src/components/RegistryInfoDialog/types.js

@@ -0,0 +1,12 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import type { Node } from 'react';
+
+export interface IProps {
+  children: Node;
+  open: boolean;
+  onClose: () => void;
+}