lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: fixed styles and wizard step icons

Browse source
This commit is contained in:
Liordino Neto 2020-04-07 19:00:19 -03:00 • committed by Josh Harvey
parent cefe9e2521
commit 7551a50c23
11 changed files with 65 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

19
new-lamassu-admin/src/components/wizard/Wizard.js
View file

@ -31,7 +31,7 @@ const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => {
return ( return (
<> <>
<div className={classes.header}>{header}</div> <div>{header}</div>
<div className={classes.body}> <div className={classes.body}>
<div className={classes.columnWrapper}> <div className={classes.columnWrapper}>
{/* TODO: wizard steps icons are a little strange... */} {/* TODO: wizard steps icons are a little strange... */}
@ -41,14 +41,25 @@ const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => {
if (i < currentStepIndex) if (i < currentStepIndex)
elementToRender.push( elementToRender.push(
<CompleteIcon key={elementToRender.length} /> <CompleteIcon
key={elementToRender.length}
className={classes.wizardStepIcon}
/>
) )
else if (i === currentStepIndex) else if (i === currentStepIndex)
elementToRender.push( elementToRender.push(
<CurrentIcon key={elementToRender.length} /> <CurrentIcon
key={elementToRender.length}
className={classes.wizardStepIcon}
/>
) )
else else
elementToRender.push(<EmptyIcon key={elementToRender.length} />) elementToRender.push(
<EmptyIcon
key={elementToRender.length}
className={classes.wizardStepIcon}
/>
)
if (i < currentStepIndex) if (i < currentStepIndex)
elementToRender.push( elementToRender.push(

11
new-lamassu-admin/src/components/wizard/Wizard.styles.js
View file

@ -12,10 +12,6 @@ const mainStyles = {
marginLeft: 'auto', marginLeft: 'auto',
marginTop: 'auto' marginTop: 'auto'
}, },
header: {
display: 'flex',
marginBottom: 14
},
body: { body: {
display: 'flex', display: 'flex',
height: '100%' height: '100%'
@ -24,8 +20,11 @@ const mainStyles = {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
position: 'relative', position: 'relative',
flex: 'wrap', flex: 'wrap'
marginBottom: 10 },
wizardStepIcon: {
width: 24,
height: 24
}, },
unreachedStepLine: { unreachedStepLine: {
width: 24, width: 24,

10
new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
View file

@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core'
import { Wizard } from 'src/components/wizard' import { Wizard } from 'src/components/wizard'
import { H2, P } from 'src/components/typography' import { H2, P } from 'src/components/typography'
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg' 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 Popper from 'src/components/Popper'
import SelectTriggerDirection from './SelectTriggerDirection' 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 { data: configResponse } = useQuery(GET_CONFIG)
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
@ -41,7 +42,7 @@ const NewTriggerWizard = ({ finish }) => {
const wizardHeader = ( const wizardHeader = (
<div className={classes.rowWrapper}> <div className={classes.rowWrapper}>
<H2>New Compliance Trigger</H2> <H2 className={classes.wizardHeaderText}>New Compliance Trigger</H2>
<div className={classes.transparentButton}> <div className={classes.transparentButton}>
<button onClick={handleOpenHelpPopper}> <button onClick={handleOpenHelpPopper}>
<HelpIcon /> <HelpIcon />
@ -60,6 +61,11 @@ const NewTriggerWizard = ({ finish }) => {
</Popper> </Popper>
</button> </button>
</div> </div>
<div className={classes.transparentButton}>
<button onClick={close}>
<CloseIcon className={classes.closeButton} />
</button>
</div>
</div> </div>
) )

9
new-lamassu-admin/src/pages/Triggers/Triggers.js
View file

@ -6,7 +6,6 @@ import { FeatureButton, Link } from 'src/components/buttons'
import { Table as EditableTable } from 'src/components/editableTable' import { Table as EditableTable } from 'src/components/editableTable'
import { ReactComponent as ConfigureInverseIcon } from 'src/styling/icons/button/configure/white.svg' 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 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 { NewTriggerWizard } from './NewTriggerWizard'
import { mainStyles } from './Triggers.styles' import { mainStyles } from './Triggers.styles'
@ -85,10 +84,10 @@ const Triggers = () => {
onClose={handleCloseWizard} onClose={handleCloseWizard}
className={classes.modal}> className={classes.modal}>
<Paper className={classes.paper}> <Paper className={classes.paper}>
<button onClick={handleCloseWizard}> <NewTriggerWizard
<CloseIcon /> close={handleCloseWizard}
</button> finish={handleFinishWizard}
<NewTriggerWizard finish={handleFinishWizard} /> />
</Paper> </Paper>
</Modal> </Modal>
)} )}

11
new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
View file

@ -10,6 +10,13 @@ const mainStyles = {
buttonsWrapper, buttonsWrapper,
rowWrapper, rowWrapper,
radioButtons, radioButtons,
closeButton: {
position: 'absolute',
width: 16,
height: 16,
top: 20,
right: 0
},
stepOneRadioButtons: { stepOneRadioButtons: {
'& > *': { '& > *': {
marginRight: 48 marginRight: 48
@ -35,6 +42,10 @@ const mainStyles = {
outline: 'none' outline: 'none'
} }
}, },
wizardHeaderText: {
display: 'flex',
margin: [[24, 0]]
},
paper: { paper: {
padding: [[5, 20, 32, 24]], padding: [[5, 20, 32, 24]],
position: 'relative', position: 'relative',

8
new-lamassu-admin/src/styling/icons/stage/spring/complete.svg
View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?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"> <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 60.1 (88133) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>icon/stage/spring/complete</title> <title>icon/stage/spring/complete</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="icon/stage/spring/complete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <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> <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="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> <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> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

8
new-lamassu-admin/src/styling/icons/stage/spring/current.svg
View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?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"> <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 60.1 (88133) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>icon/stage/spring/current</title> <title>icon/stage/spring/current</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="icon/stage/spring/current" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <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-2-Copy" fill="#48F694" cx="9" cy="9" 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-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> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 719 B

After

Width:  |  Height:  |  Size: 719 B

Before After
Before After

6
new-lamassu-admin/src/styling/icons/stage/spring/empty.svg
View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?> <?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"> <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 60.1 (88133) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>icon/stage/spring/empty</title> <title>icon/stage/spring/empty</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="icon/stage/spring/empty" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <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> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 637 B

After

Width:  |  Height:  |  Size: 637 B

Before After
Before After

8
new-lamassu-admin/src/styling/icons/stage/zodiac/complete.svg
View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?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"> <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 60.1 (88133) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>icon/stage/zodiac/complete</title> <title>icon/stage/zodiac/complete</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="icon/stage/zodiac/complete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <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> <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="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> <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> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

8
new-lamassu-admin/src/styling/icons/stage/zodiac/current.svg
View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?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"> <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 60.1 (88133) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>icon/stage/zodiac/current</title> <title>icon/stage/zodiac/current</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="icon/stage/zodiac/current" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <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-2-Copy" fill="#1B2559" cx="9" cy="9" 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-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> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 719 B

After

Width:  |  Height:  |  Size: 719 B

Before After
Before After

6
new-lamassu-admin/src/styling/icons/stage/zodiac/empty.svg
View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?> <?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"> <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 60.1 (88133) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>icon/stage/zodiac/empty</title> <title>icon/stage/zodiac/empty</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="icon/stage/zodiac/empty" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <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> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 620 B

After

Width:  |  Height:  |  Size: 620 B

Before After
Before After