From ddfd5e1309e8e4728599ed276751633b66a1e785 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Sat, 12 Jun 2021 03:09:57 +0100 Subject: [PATCH] fix: cross icon replace fix: space between switch buttons and label fix: switch button shadow feat: change CoinATMRadar fields to table refactor: css classes --- .../src/components/inputs/base/Switch.js | 3 +- .../{CoinATMRadar => }/CoinATMRadar.js | 44 +++--- .../CoinATMRadar/CoinATMRadar.styles.js | 43 ------ .../pages/OperatorInfo/CoinATMRadar/index.js | 3 - .../src/pages/OperatorInfo/ContactInfo.js | 21 +-- .../pages/OperatorInfo/OperatorInfo.styles.js | 84 +++-------- .../{ReceiptPrinting => }/ReceiptPrinting.js | 12 +- .../ReceiptPrinting/ReceiptPrinting.styles.js | 14 -- .../OperatorInfo/ReceiptPrinting/index.js | 3 - .../src/pages/OperatorInfo/TermsConditions.js | 132 ++++++++---------- .../src/styling/icons/table/false.svg | 15 +- .../src/styling/icons/table/true.svg | 1 + 12 files changed, 126 insertions(+), 249 deletions(-) rename new-lamassu-admin/src/pages/OperatorInfo/{CoinATMRadar => }/CoinATMRadar.js (72%) delete mode 100644 new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.styles.js delete mode 100644 new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js rename new-lamassu-admin/src/pages/OperatorInfo/{ReceiptPrinting => }/ReceiptPrinting.js (90%) delete mode 100644 new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js delete mode 100644 new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js diff --git a/new-lamassu-admin/src/components/inputs/base/Switch.js b/new-lamassu-admin/src/components/inputs/base/Switch.js index e7a19ae9..2f2cdf0f 100644 --- a/new-lamassu-admin/src/components/inputs/base/Switch.js +++ b/new-lamassu-admin/src/components/inputs/base/Switch.js @@ -38,7 +38,8 @@ const useStyles = makeStyles(theme => ({ } }, '&$focusVisible $thumb': { - border: '6px solid #fff' + border: '6px solid #fff', + boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)' } }, thumb: { diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.js similarity index 72% rename from new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js rename to new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.js index 9fca1c5a..3ea14244 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.js @@ -4,13 +4,14 @@ import gql from 'graphql-tag' import React, { memo } from 'react' import { Tooltip } from 'src/components/Tooltip' +import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable' import { Switch } from 'src/components/inputs' import { H4, P, Label2 } from 'src/components/typography' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { mainStyles } from './CoinATMRadar.styles' +import { global } from './OperatorInfo.styles' -const useStyles = makeStyles(mainStyles) +const useStyles = makeStyles(global) const GET_CONFIG = gql` query getData { @@ -28,21 +29,21 @@ const Row = memo(({ title, disabled = false, checked, save, label }) => { const classes = useStyles() return ( -
-
-

{title}

+
+

{title}

+
save && save(event.target.checked)} /> + {label && {label}}
- {label && {label}}
) }) -const CoinATMRadar = memo(() => { +const CoinATMRadar = memo(({ wizard }) => { const classes = useStyles() const { data } = useQuery(GET_CONFIG) @@ -63,7 +64,7 @@ const CoinATMRadar = memo(() => { return (
-
+

Coin ATM Radar share settings

@@ -85,18 +86,21 @@ const CoinATMRadar = memo(() => { save={value => save({ active: value })} label={coinAtmRadarConfig.active ? 'Yes' : 'No'} /> -

{'Machine info'}

- save({ commissions: value })} - /> - save({ limitsAndVerification: value })} +
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.styles.js deleted file mode 100644 index 2fbe5617..00000000 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.styles.js +++ /dev/null @@ -1,43 +0,0 @@ -import baseStyles from 'src/pages/Logs.styles' - -const { button } = baseStyles - -const mainStyles = { - button, - content: { - display: 'flex' - }, - transparentButton: { - '& > *': { - margin: 'auto 10px' - }, - '& button': { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer' - } - }, - titleWrapper: { - display: 'flex', - alignItems: 'center', - flex: 'wrap' - }, - rowWrapper: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between' - }, - rowTextAndSwitch: { - display: 'flex', - flex: 'wrap', - alignItems: 'center', - justifyContent: 'space-between', - width: 285 - }, - popoverContent: { - width: 272, - padding: [[10, 15]] - } -} - -export { mainStyles } diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js deleted file mode 100644 index 8fe804d8..00000000 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import CoinATMRadar from './CoinATMRadar' - -export default CoinATMRadar diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js index f655c786..802301f1 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js @@ -18,10 +18,7 @@ import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/co import { fontSize5 } from 'src/styling/variables' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { - styles as globalStyles, - contactInfoStyles -} from './OperatorInfo.styles' +import { global } from './OperatorInfo.styles' const FIELD_WIDTH = 280 @@ -98,9 +95,7 @@ const SAVE_CONFIG = gql` } ` -const styles = R.merge(globalStyles, contactInfoStyles) - -const contactUseStyles = makeStyles(styles) +const contactUseStyles = makeStyles(global) const ContactInfo = ({ wizard }) => { const classes = contactUseStyles() @@ -189,10 +184,10 @@ const ContactInfo = ({ wizard }) => { return ( <> -
+

Contact information

-
+

Info card enabled?

{
-
+

Info card

{!editing && ( { Cancel - {error && ( - - Failed to save changes - - )} + {error && Failed to save changes} )}
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js index 962a797f..1cc0c3ba 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js @@ -1,26 +1,15 @@ -import typographyStyles from 'src/components/typography/styles' -import theme from 'src/styling/theme' import { offColor } from 'src/styling/variables' -const { p } = typographyStyles - -const styles = { +const global = { + content: { + display: 'flex' + }, header: { display: 'flex', alignItems: 'center', position: 'relative', flex: 'wrap' }, - transparentButton: { - '& > *': { - margin: 'auto 12px' - }, - '& button': { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer' - } - }, section: { marginBottom: 52 }, @@ -37,55 +26,23 @@ const styles = { switchRow: { display: 'flex', alignItems: 'center', - marginBottom: 28, - width: 600 + position: 'relative', + flex: 'wrap', + justifyContent: 'space-between', + width: 396 }, switch: { display: 'flex', - alignItems: 'center', - marginLeft: 120 + alignItems: 'center' }, submit: { justifyContent: 'flex-start', alignItems: 'center', - height: 19, padding: [[0, 4, 4, 4]], '& > button': { marginRight: 40 } }, - singleButton: { - marginTop: 50, - paddingLeft: 0 - } -} - -const contactInfoStyles = { - infoMessage: { - display: 'flex', - marginBottom: 52, - '& > p': { - width: 330, - color: offColor, - marginTop: 4, - marginLeft: 16 - } - }, - radioButtonsRow: { - height: 60, - marginBottom: 14 - }, - radioButtons: { - display: 'flex', - flexDirection: 'row', - paddingLeft: 4 - }, - rowWrapper: { - display: 'flex', - alignItems: 'center', - position: 'relative', - flex: 'wrap' - }, transparentButton: { '& > *': { margin: 'auto 12px' @@ -95,20 +52,15 @@ const contactInfoStyles = { backgroundColor: 'transparent', cursor: 'pointer' } - } -} - -const termsConditionsStyles = { - enable: { + }, + infoMessage: { display: 'flex', - alignItems: 'center', - marginBottom: 22 - theme.spacing(1), - '& > span:first-child': { - extend: p, - marginRight: 116 - theme.spacing(1) - }, - '& > span:last-child': { - marginLeft: 4 + marginBottom: 52, + '& > p': { + width: 330, + color: offColor, + marginTop: 4, + marginLeft: 16 } } } @@ -160,4 +112,4 @@ const fieldStyles = { } } -export { styles, contactInfoStyles, termsConditionsStyles, fieldStyles } +export { global, fieldStyles } diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js similarity index 90% rename from new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js rename to new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js index d98d42d0..907700c1 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js @@ -9,9 +9,9 @@ import { Switch } from 'src/components/inputs' import { H4, P, Label2 } from 'src/components/typography' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { mainStyles } from './ReceiptPrinting.styles' +import { global } from './OperatorInfo.styles' -const useStyles = makeStyles(mainStyles) +const useStyles = makeStyles(global) const GET_CONFIG = gql` query getData { @@ -45,12 +45,12 @@ const ReceiptPrinting = memo(({ wizard }) => { return ( <> -
+

Receipt options

-
+

Enable receipt printing?

-
+
@@ -66,8 +66,8 @@ const ReceiptPrinting = memo(({ wizard }) => { }) } /> + {receiptPrintingConfig.active ? 'Yes' : 'No'}
- {receiptPrintingConfig.active ? 'Yes' : 'No'}
{label} - {value} + {value} )} {editing && ( @@ -85,9 +81,7 @@ const SAVE_CONFIG = gql` } ` -const styles = R.merge(globalStyles, termsConditionsStyles) - -const useTermsConditionsStyles = makeStyles(styles) +const useTermsConditionsStyles = makeStyles(global) const TermsConditions = () => { const [error, setError] = useState(null) @@ -171,12 +165,12 @@ const TermsConditions = () => { return ( <> -
+

Terms & Conditions

-
-
- Show on screen +
+

Show on screen

+
@@ -187,64 +181,60 @@ const TermsConditions = () => { /> {showOnScreen ? 'Yes' : 'No'}
-
- Info card - {!editing && ( - setEditing(true)}> - - - )} -
- save(values)} - onReset={() => { - setEditing(false) - setError(null) - }}> -
- - {fields.map((f, idx) => ( -
- setError(null)} - /> -
- ))} -
- {editing && ( - <> - - Save - - - Cancel - - {error && ( - - Failed to save changes - - )} - - )} -
- -
+
+ Info card + {!editing && ( + setEditing(true)}> + + + )} +
+ save(values)} + onReset={() => { + setEditing(false) + setError(null) + }}> +
+ + {fields.map((f, idx) => ( +
+ setError(null)} + /> +
+ ))} +
+ {editing && ( + <> + + Save + + + Cancel + + {error && Failed to save changes} + + )} +
+ +
) } diff --git a/new-lamassu-admin/src/styling/icons/table/false.svg b/new-lamassu-admin/src/styling/icons/table/false.svg index a02a1344..4d44d93f 100644 --- a/new-lamassu-admin/src/styling/icons/table/false.svg +++ b/new-lamassu-admin/src/styling/icons/table/false.svg @@ -1,11 +1,12 @@ - - - Created with Sketch. - - - - + + Group + + + + + + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/table/true.svg b/new-lamassu-admin/src/styling/icons/table/true.svg index 16672313..d805af9d 100644 --- a/new-lamassu-admin/src/styling/icons/table/true.svg +++ b/new-lamassu-admin/src/styling/icons/table/true.svg @@ -1,6 +1,7 @@ + icon/table/true Created with Sketch.