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 }