From 7551a50c23f8a4b28b22483e9646b02b4be91e9a Mon Sep 17 00:00:00 2001 From: Liordino Neto Date: Tue, 7 Apr 2020 19:00:19 -0300 Subject: [PATCH] style: fixed styles and wizard step icons --- .../src/components/wizard/Wizard.js | 19 +++++++++++++++---- .../src/components/wizard/Wizard.styles.js | 11 +++++------ .../src/pages/Triggers/NewTriggerWizard.js | 10 ++++++++-- .../src/pages/Triggers/Triggers.js | 9 ++++----- .../src/pages/Triggers/Triggers.styles.js | 11 +++++++++++ .../styling/icons/stage/spring/complete.svg | 8 ++++---- .../styling/icons/stage/spring/current.svg | 8 ++++---- .../src/styling/icons/stage/spring/empty.svg | 6 +++--- .../styling/icons/stage/zodiac/complete.svg | 8 ++++---- .../styling/icons/stage/zodiac/current.svg | 8 ++++---- .../src/styling/icons/stage/zodiac/empty.svg | 6 +++--- 11 files changed, 65 insertions(+), 39 deletions(-) diff --git a/new-lamassu-admin/src/components/wizard/Wizard.js b/new-lamassu-admin/src/components/wizard/Wizard.js index 5ef28b38..0ae600b3 100644 --- a/new-lamassu-admin/src/components/wizard/Wizard.js +++ b/new-lamassu-admin/src/components/wizard/Wizard.js @@ -31,7 +31,7 @@ const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => { return ( <> -
{header}
+
{header}
{/* TODO: wizard steps icons are a little strange... */} @@ -41,14 +41,25 @@ const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => { if (i < currentStepIndex) elementToRender.push( - + ) else if (i === currentStepIndex) elementToRender.push( - + ) else - elementToRender.push() + elementToRender.push( + + ) if (i < currentStepIndex) elementToRender.push( diff --git a/new-lamassu-admin/src/components/wizard/Wizard.styles.js b/new-lamassu-admin/src/components/wizard/Wizard.styles.js index 4e20fd45..79258103 100644 --- a/new-lamassu-admin/src/components/wizard/Wizard.styles.js +++ b/new-lamassu-admin/src/components/wizard/Wizard.styles.js @@ -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, diff --git a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js index 0799d516..e169f3bc 100644 --- a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js +++ b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js @@ -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 = (
-

New Compliance Trigger

+

New Compliance Trigger

+
+ +
) diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.js b/new-lamassu-admin/src/pages/Triggers/Triggers.js index 89418fd9..a5067353 100644 --- a/new-lamassu-admin/src/pages/Triggers/Triggers.js +++ b/new-lamassu-admin/src/pages/Triggers/Triggers.js @@ -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}> - - + )} diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js index 19438800..61584b81 100644 --- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js +++ b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js @@ -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', diff --git a/new-lamassu-admin/src/styling/icons/stage/spring/complete.svg b/new-lamassu-admin/src/styling/icons/stage/spring/complete.svg index 0ed20799..e0c46e71 100644 --- a/new-lamassu-admin/src/styling/icons/stage/spring/complete.svg +++ b/new-lamassu-admin/src/styling/icons/stage/spring/complete.svg @@ -1,10 +1,10 @@ - - + + icon/stage/spring/complete Created with Sketch. - - + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/stage/spring/current.svg b/new-lamassu-admin/src/styling/icons/stage/spring/current.svg index a9084457..a77f763d 100644 --- a/new-lamassu-admin/src/styling/icons/stage/spring/current.svg +++ b/new-lamassu-admin/src/styling/icons/stage/spring/current.svg @@ -1,10 +1,10 @@ - - + + icon/stage/spring/current Created with Sketch. - - + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/stage/spring/empty.svg b/new-lamassu-admin/src/styling/icons/stage/spring/empty.svg index b1a0cdf1..5fc327e2 100644 --- a/new-lamassu-admin/src/styling/icons/stage/spring/empty.svg +++ b/new-lamassu-admin/src/styling/icons/stage/spring/empty.svg @@ -1,9 +1,9 @@ - - + + icon/stage/spring/empty Created with Sketch. - + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/stage/zodiac/complete.svg b/new-lamassu-admin/src/styling/icons/stage/zodiac/complete.svg index 5903dff7..4dfd01b3 100644 --- a/new-lamassu-admin/src/styling/icons/stage/zodiac/complete.svg +++ b/new-lamassu-admin/src/styling/icons/stage/zodiac/complete.svg @@ -1,10 +1,10 @@ - - + + icon/stage/zodiac/complete Created with Sketch. - - + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/stage/zodiac/current.svg b/new-lamassu-admin/src/styling/icons/stage/zodiac/current.svg index 5b030128..d3fe9737 100644 --- a/new-lamassu-admin/src/styling/icons/stage/zodiac/current.svg +++ b/new-lamassu-admin/src/styling/icons/stage/zodiac/current.svg @@ -1,10 +1,10 @@ - - + + icon/stage/zodiac/current Created with Sketch. - - + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/stage/zodiac/empty.svg b/new-lamassu-admin/src/styling/icons/stage/zodiac/empty.svg index 5b8f504b..6ecb4edd 100644 --- a/new-lamassu-admin/src/styling/icons/stage/zodiac/empty.svg +++ b/new-lamassu-admin/src/styling/icons/stage/zodiac/empty.svg @@ -1,9 +1,9 @@ - - + + icon/stage/zodiac/empty Created with Sketch. - + \ No newline at end of file