diff --git a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
new file mode 100644
index 00000000..a2bc8584
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { makeStyles, Paper } from '@material-ui/core'
+
+import { H2 } from 'src/components/typography'
+// import { Button } from 'src/components/buttons'
+import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+
+import { mainStyles } from './Triggers.styles'
+
+const useStyles = makeStyles(mainStyles)
+
+const NewTriggerWizard = ({ handleClose, save }) => {
+ const classes = useStyles()
+
+ return (
+
+
+
+
New Compliance Trigger
+
+
+
+ )
+}
+
+export { NewTriggerWizard }
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.js b/new-lamassu-admin/src/pages/Triggers/Triggers.js
index 6a106779..b12014b1 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.js
@@ -1,13 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles'
-import React from 'react'
+import React, { useState } from 'react'
+import { makeStyles, Modal } from '@material-ui/core'
import Title from 'src/components/Title'
import { FeatureButton, Link } from 'src/components/buttons'
import { Table as EditableTable } from 'src/components/editableTable'
import { ReactComponent as ConfigureInverseIcon } from 'src/styling/icons/button/configure/white.svg'
import { ReactComponent as Configure } from 'src/styling/icons/button/configure/zodiac.svg'
-// import { ReactComponent as Help } from 'src/styling/icons/action/help/white.svg'
+import { NewTriggerWizard } from './NewTriggerWizard'
import { mainStyles } from './Triggers.styles'
const useStyles = makeStyles(mainStyles)
@@ -20,8 +20,18 @@ const sizes = {
}
const Triggers = () => {
+ const [wizardModalOpen, setWizardModalOpen] = useState(false)
+
const classes = useStyles()
+ const handleOpenWizard = () => {
+ setWizardModalOpen(true)
+ }
+
+ const handleCloseWizard = () => {
+ setWizardModalOpen(false)
+ }
+
return (
<>
@@ -32,49 +42,48 @@ const Triggers = () => {
Icon={Configure}
InverseIcon={ConfigureInverseIcon}
variant="contained"
- // onClick={handleAdvanced}
/>
- + Add new trigger
+
+ + Add new trigger
+
+ {wizardModalOpen && (
+
+
+
+
+
+ )}
>
)
}
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
index a492668a..11ec4f8e 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
@@ -5,7 +5,48 @@ const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
const mainStyles = {
titleWrapper,
titleAndButtonsContainer,
- buttonsWrapper
+ buttonsWrapper,
+ modal: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ '& > div': {
+ outline: 'none'
+ }
+ },
+ paper: {
+ padding: [[5, 20, 32, 24]],
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ width: 520,
+ height: 480,
+ overflow: 'hidden',
+ '& > button': {
+ position: 'absolute',
+ top: 16,
+ right: 16,
+ border: 'none',
+ backgroundColor: 'transparent',
+ cursor: 'pointer',
+ '& svg': {
+ width: 18
+ }
+ },
+ '& form': {
+ display: 'flex',
+ flexDirection: 'column',
+ flexGrow: 2
+ }
+ },
+ modalHeader: {
+ display: 'flex',
+ marginBottom: 14
+ },
+ modalBody: {
+ display: 'flex',
+ flexGrow: 2
+ }
}
export { mainStyles }