style: fixed styles and wizard step icons
This commit is contained in:
Liordino Neto
Josh Harvey
parent
cefe9e2521
commit
7551a50c23
11 changed files with 65 additions and 39 deletions
|
|
@ -31,7 +31,7 @@ const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className={classes.header}>{header}</div>
|
||||
<div>{header}</div>
|
||||
<div className={classes.body}>
|
||||
<div className={classes.columnWrapper}>
|
||||
{/* TODO: wizard steps icons are a little strange... */}
|
||||
|
|
@ -41,14 +41,25 @@ const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => {
|
|||
|
||||
if (i < currentStepIndex)
|
||||
elementToRender.push(
|
||||
<CompleteIcon key={elementToRender.length} />
|
||||
<CompleteIcon
|
||||
key={elementToRender.length}
|
||||
className={classes.wizardStepIcon}
|
||||
/>
|
||||
)
|
||||
else if (i === currentStepIndex)
|
||||
elementToRender.push(
|
||||
<CurrentIcon key={elementToRender.length} />
|
||||
<CurrentIcon
|
||||
key={elementToRender.length}
|
||||
className={classes.wizardStepIcon}
|
||||
/>
|
||||
)
|
||||
else
|
||||
elementToRender.push(<EmptyIcon key={elementToRender.length} />)
|
||||
elementToRender.push(
|
||||
<EmptyIcon
|
||||
key={elementToRender.length}
|
||||
className={classes.wizardStepIcon}
|
||||
/>
|
||||
)
|
||||
|
||||
if (i < currentStepIndex)
|
||||
elementToRender.push(
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@ const mainStyles = {
|
|||
marginLeft: 'auto',
|
||||
marginTop: 'auto'
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
marginBottom: 14
|
||||
},
|
||||
body: {
|
||||
display: 'flex',
|
||||
height: '100%'
|
||||
|
|
@ -24,8 +20,11 @@ const mainStyles = {
|
|||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
flex: 'wrap',
|
||||
marginBottom: 10
|
||||
flex: 'wrap'
|
||||
},
|
||||
wizardStepIcon: {
|
||||
width: 24,
|
||||
height: 24
|
||||
},
|
||||
unreachedStepLine: {
|
||||
width: 24,
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core'
|
|||
import { Wizard } from 'src/components/wizard'
|
||||
import { H2, P } from 'src/components/typography'
|
||||
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
|
||||
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
|
||||
import Popper from 'src/components/Popper'
|
||||
|
||||
import SelectTriggerDirection from './SelectTriggerDirection'
|
||||
|
|
@ -21,7 +22,7 @@ const GET_CONFIG = gql`
|
|||
}
|
||||
`
|
||||
|
||||
const NewTriggerWizard = ({ finish }) => {
|
||||
const NewTriggerWizard = ({ close, finish }) => {
|
||||
const { data: configResponse } = useQuery(GET_CONFIG)
|
||||
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
||||
|
||||
|
|
@ -41,7 +42,7 @@ const NewTriggerWizard = ({ finish }) => {
|
|||
|
||||
const wizardHeader = (
|
||||
<div className={classes.rowWrapper}>
|
||||
<H2>New Compliance Trigger</H2>
|
||||
<H2 className={classes.wizardHeaderText}>New Compliance Trigger</H2>
|
||||
<div className={classes.transparentButton}>
|
||||
<button onClick={handleOpenHelpPopper}>
|
||||
<HelpIcon />
|
||||
|
|
@ -60,6 +61,11 @@ const NewTriggerWizard = ({ finish }) => {
|
|||
</Popper>
|
||||
</button>
|
||||
</div>
|
||||
<div className={classes.transparentButton}>
|
||||
<button onClick={close}>
|
||||
<CloseIcon className={classes.closeButton} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ 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 CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
|
||||
|
||||
import { NewTriggerWizard } from './NewTriggerWizard'
|
||||
import { mainStyles } from './Triggers.styles'
|
||||
|
|
@ -85,10 +84,10 @@ const Triggers = () => {
|
|||
onClose={handleCloseWizard}
|
||||
className={classes.modal}>
|
||||
<Paper className={classes.paper}>
|
||||
<button onClick={handleCloseWizard}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
<NewTriggerWizard finish={handleFinishWizard} />
|
||||
<NewTriggerWizard
|
||||
close={handleCloseWizard}
|
||||
finish={handleFinishWizard}
|
||||
/>
|
||||
</Paper>
|
||||
</Modal>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,13 @@ const mainStyles = {
|
|||
buttonsWrapper,
|
||||
rowWrapper,
|
||||
radioButtons,
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
width: 16,
|
||||
height: 16,
|
||||
top: 20,
|
||||
right: 0
|
||||
},
|
||||
stepOneRadioButtons: {
|
||||
'& > *': {
|
||||
marginRight: 48
|
||||
|
|
@ -35,6 +42,10 @@ const mainStyles = {
|
|||
outline: 'none'
|
||||
}
|
||||
},
|
||||
wizardHeaderText: {
|
||||
display: 'flex',
|
||||
margin: [[24, 0]]
|
||||
},
|
||||
paper: {
|
||||
padding: [[5, 20, 32, 24]],
|
||||
position: 'relative',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<title>icon/stage/spring/complete</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="icon/stage/spring/complete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle id="Oval" stroke="#48F694" stroke-width="2" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " cx="8" cy="8" r="8"></circle>
|
||||
<path d="M6.80983711,11 C6.54819546,11 6.28655382,10.9032616 6.08725647,10.710772 L4.29971255,8.98428824 C3.90009582,8.59832189 3.90009582,7.97445811 4.29971255,7.58849175 C4.69932929,7.2025254 5.34525711,7.2025254 5.74487384,7.58849175 L6.80983711,8.61707728 L10.2551262,5.28947477 C10.6547429,4.90350841 11.3016927,4.90350841 11.7002874,5.28947477 C12.0999042,5.674454 12.0999042,6.2993049 11.7002874,6.68527125 L7.53241776,10.710772 C7.33312041,10.9032616 7.07147876,11 6.80983711,11" id="Path" fill="#48F694"></path>
|
||||
<circle id="Oval" stroke="#48F694" stroke-width="2" transform="translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) " cx="9" cy="9" r="8"></circle>
|
||||
<path d="M7.80983711,12 C7.54819546,12 7.28655382,11.9032616 7.08725647,11.710772 L5.29971255,9.98428824 C4.90009582,9.59832189 4.90009582,8.97445811 5.29971255,8.58849175 C5.69932929,8.2025254 6.34525711,8.2025254 6.74487384,8.58849175 L7.80983711,9.61707728 L11.2551262,6.28947477 C11.6547429,5.90350841 12.3016927,5.90350841 12.7002874,6.28947477 C13.0999042,6.674454 13.0999042,7.2993049 12.7002874,7.68527125 L8.53241776,11.710772 C8.33312041,11.9032616 8.07147876,12 7.80983711,12" id="Path" fill="#48F694"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<title>icon/stage/spring/current</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="icon/stage/spring/current" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle id="Oval-2-Copy" fill="#48F694" cx="8" cy="8" r="4"></circle>
|
||||
<circle id="Oval-Copy-5" stroke="#48F694" stroke-width="2" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " cx="8" cy="8" r="8"></circle>
|
||||
<circle id="Oval-2-Copy" fill="#48F694" cx="9" cy="9" r="4"></circle>
|
||||
<circle id="Oval-Copy-5" stroke="#48F694" stroke-width="2" transform="translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) " cx="9" cy="9" r="8"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 719 B After Width: | Height: | Size: 719 B |
|
|
@ -1,9 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<title>icon/stage/spring/empty</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="icon/stage/spring/empty" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle id="Oval-Copy-6" stroke="#DDDDDD" stroke-width="2" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " cx="8" cy="8" r="8"></circle>
|
||||
<circle id="Oval-Copy-6" stroke="#DDDDDD" stroke-width="2" transform="translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) " cx="9" cy="9" r="8"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 637 B After Width: | Height: | Size: 637 B |
|
|
@ -1,10 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<title>icon/stage/zodiac/complete</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="icon/stage/zodiac/complete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle id="Oval" stroke="#1B2559" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " cx="8" cy="8" r="8"></circle>
|
||||
<path d="M6.80983711,11 C6.54819546,11 6.28655382,10.9032616 6.08725647,10.710772 L4.29971255,8.98428824 C3.90009582,8.59832189 3.90009582,7.97445811 4.29971255,7.58849175 C4.69932929,7.2025254 5.34525711,7.2025254 5.74487384,7.58849175 L6.80983711,8.61707728 L10.2551262,5.28947477 C10.6547429,4.90350841 11.3016927,4.90350841 11.7002874,5.28947477 C12.0999042,5.674454 12.0999042,6.2993049 11.7002874,6.68527125 L7.53241776,10.710772 C7.33312041,10.9032616 7.07147876,11 6.80983711,11" id="Path" fill="#1B2559"></path>
|
||||
<circle id="Oval" stroke="#1B2559" transform="translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) " cx="9" cy="9" r="8"></circle>
|
||||
<path d="M7.80983711,12 C7.54819546,12 7.28655382,11.9032616 7.08725647,11.710772 L5.29971255,9.98428824 C4.90009582,9.59832189 4.90009582,8.97445811 5.29971255,8.58849175 C5.69932929,8.2025254 6.34525711,8.2025254 6.74487384,8.58849175 L7.80983711,9.61707728 L11.2551262,6.28947477 C11.6547429,5.90350841 12.3016927,5.90350841 12.7002874,6.28947477 C13.0999042,6.674454 13.0999042,7.2993049 12.7002874,7.68527125 L8.53241776,11.710772 C8.33312041,11.9032616 8.07147876,12 7.80983711,12" id="Path" fill="#1B2559"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<title>icon/stage/zodiac/current</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="icon/stage/zodiac/current" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle id="Oval-2-Copy" fill="#1B2559" cx="8" cy="8" r="4"></circle>
|
||||
<circle id="Oval-Copy-5" stroke="#1B2559" stroke-width="2" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " cx="8" cy="8" r="8"></circle>
|
||||
<circle id="Oval-2-Copy" fill="#1B2559" cx="9" cy="9" r="4"></circle>
|
||||
<circle id="Oval-Copy-5" stroke="#1B2559" stroke-width="2" transform="translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) " cx="9" cy="9" r="8"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 719 B After Width: | Height: | Size: 719 B |
|
|
@ -1,9 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<title>icon/stage/zodiac/empty</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="icon/stage/zodiac/empty" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle id="Oval-Copy-6" stroke="#5F668A" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " cx="8" cy="8" r="8"></circle>
|
||||
<circle id="Oval-Copy-6" stroke="#5F668A" transform="translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) " cx="9" cy="9" r="8"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 620 B After Width: | Height: | Size: 620 B |
Loading…
Add table
Add a link
Reference in a new issue