chore: integrate new admin with l-s

new-lamassu-admin/src/components/Modal.js

@@ -3,17 +3,19 @@ import classnames from 'classnames'
 import React from 'react'
 
 import { IconButton } from 'src/components/buttons'
-import { H1 } from 'src/components/typography'
+import { H1, H2 } from 'src/components/typography'
 import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 
 const styles = {
   modal: {
     display: 'flex',
     justifyContent: 'center',
+    flexDirection: 'column',
     alignItems: 'center'
   },
-  wrapper: ({ width }) => ({
+  wrapper: ({ width, height }) => ({
     width,
+    height,
     display: 'flex',
     flexDirection: 'column',
     minHeight: 400,
@@ -45,7 +47,10 @@ const useStyles = makeStyles(styles)
 
 const Modal = ({
   width,
+  height,
   title,
+  titleSmall,
+  infoPanel,
   handleClose,
   children,
   className,
@@ -53,7 +58,9 @@ const Modal = ({
   closeOnBackdropClick,
   ...props
 }) => {
-  const classes = useStyles({ width })
+  const classes = useStyles({ width, height })
+  const TitleCase = titleSmall ? H2 : H1
+  const closeSize = titleSmall ? 16 : 20
 
   const innerClose = (evt, reason) => {
     if (!closeOnBackdropClick && reason === 'backdropClick') return
@@ -63,18 +70,25 @@ const Modal = ({
 
   return (
     <MaterialModal onClose={innerClose} className={classes.modal} {...props}>
-      <Paper className={classnames(classes.wrapper, className)}>
-        <div className={classes.header}>
-          {title && <H1 className={classes.title}>{title}</H1>}
-          <IconButton
-            size={20}
-            className={classes.button}
-            onClick={() => handleClose()}>
-            <CloseIcon />
-          </IconButton>
-        </div>
-        <div className={classes.content}>{children}</div>
-      </Paper>
+      <>
+        <Paper className={classnames(classes.wrapper, className)}>
+          <div className={classes.header}>
+            {title && <TitleCase className={classes.title}>{title}</TitleCase>}
+            <IconButton
+              size={closeSize}
+              className={classes.button}
+              onClick={() => handleClose()}>
+              <CloseIcon />
+            </IconButton>
+          </div>
+          <div className={classes.content}>{children}</div>
+        </Paper>
+        {infoPanel && (
+          <Paper className={classnames(classes.wrapper, className)}>
+            {infoPanel}
+          </Paper>
+        )}
+      </>
     </MaterialModal>
   )
 }