chore: use proper name convention for build tools

new-lamassu-admin/src/components/InformativeDialog.jsx

@@ -0,0 +1,64 @@
+import { Dialog, DialogContent, makeStyles } from '@material-ui/core'
+import React, { memo } from 'react'
+import { H1 } from 'src/components/typography'
+import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
+
+import { IconButton } from 'src/components/buttons'
+import { spacer } from 'src/styling/variables'
+
+const useStyles = makeStyles({
+  closeButton: {
+    display: 'flex',
+    padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],
+    paddingRight: spacer * 1.5,
+    justifyContent: 'end'
+  },
+  title: {
+    margin: [[0, spacer * 2, spacer, spacer * 2 + 4]]
+  }
+})
+
+export const DialogTitle = ({ children, onClose }) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.dialogTitle}>
+      {children}
+      {onClose && (
+        <IconButton size={16} aria-label="close" onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      )}
+    </div>
+  )
+}
+
+export const InformativeDialog = memo(
+  ({ title = '', open, onDissmised, disabled = false, data, ...props }) => {
+    const classes = useStyles()
+
+    const innerOnClose = () => {
+      onDissmised()
+    }
+
+    return (
+      <Dialog
+        PaperProps={{
+          style: {
+            borderRadius: 8
+          }
+        }}
+        fullWidth
+        open={open}
+        aria-labelledby="form-dialog-title"
+        {...props}>
+        <div className={classes.closeButton}>
+          <IconButton size={16} aria-label="close" onClick={innerOnClose}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+        <H1 className={classes.title}>{title}</H1>
+        <DialogContent className={classes.dialogContent}>{data}</DialogContent>
+      </Dialog>
+    )
+  }
+)