fix: cross icon replace

fix: space between switch buttons and label fix: switch button shadow feat: change CoinATMRadar fields to table refactor: css classes
2021-06-12 03:09:57 +01:00 · 2021-06-12 03:09:57 +01:00 · ddfd5e1309
commit ddfd5e1309
parent 2a9e2c1714
12 changed files with 126 additions and 249 deletions
--- 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: {
--- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/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 (
-    <div className={classes.rowWrapper}>
-      <div className={classes.rowTextAndSwitch}>
-        <P>{title}</P>
+    <div className={classes.switchRow}>
+      <P>{title}</P>
+      <div className={classes.switch}>
        <Switch
          disabled={disabled}
          checked={checked}
          onChange={event => save && save(event.target.checked)}
        />
+        {label && <Label2>{label}</Label2>}
      </div>
-      {label && <Label2>{label}</Label2>}
    </div>
  )
 })

-const CoinATMRadar = memo(() => {
+const CoinATMRadar = memo(({ wizard }) => {
  const classes = useStyles()

  const { data } = useQuery(GET_CONFIG)
@ -63,7 +64,7 @@ const CoinATMRadar = memo(() => {
  return (
    <div className={classes.content}>
      <div>
-        <div className={classes.titleWrapper}>
+        <div className={classes.header}>
          <H4>Coin ATM Radar share settings</H4>
          <Tooltip width={304}>
            <P>
@ -85,18 +86,21 @@ const CoinATMRadar = memo(() => {
          save={value => save({ active: value })}
          label={coinAtmRadarConfig.active ? 'Yes' : 'No'}
        />
-        <H4>{'Machine info'}</H4>
-        <Row
-          title={'Commissions'}
-          disabled={!coinAtmRadarConfig.active}
-          checked={coinAtmRadarConfig.commissions}
-          save={value => save({ commissions: value })}
-        />
-        <Row
-          title={'Limits and verification'}
-          disabled={!coinAtmRadarConfig.active}
-          checked={coinAtmRadarConfig.limitsAndVerification}
-          save={value => save({ limitsAndVerification: value })}
+        <BooleanPropertiesTable
+          editing={wizard}
+          title="Machine info"
+          data={coinAtmRadarConfig}
+          elements={[
+            {
+              name: 'commissions',
+              display: 'Commissions'
+            },
+            {
+              name: 'limitsAndVerification',
+              display: 'Limits and verification'
+            }
+          ]}
+          save={save}
        />
      </div>
    </div>
--- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.styles.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.styles.js
@ -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 }
--- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js
@ -1,3 +0,0 @@
-import CoinATMRadar from './CoinATMRadar'
-
-export default CoinATMRadar
--- 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 (
    <>
-      <div className={classes.rowWrapper}>
+      <div className={classes.header}>
        <H4>Contact information</H4>
      </div>
-      <div className={classes.rowWrapper}>
+      <div className={classes.switchRow}>
        <P>Info card enabled?</P>
        <div className={classes.switch}>
          <Switch
@ -207,7 +202,7 @@ const ContactInfo = ({ wizard }) => {
        </div>
      </div>
      <div className={classes.section}>
-        <div className={classes.rowWrapper}>
+        <div className={classes.header}>
          <H4>Info card</H4>
          {!editing && (
            <IconButton
@ -275,11 +270,7 @@ const ContactInfo = ({ wizard }) => {
                  <Link color="secondary" type="reset">
                    Cancel
                  </Link>
-                  {error && (
-                    <ErrorMessage className={classes.errorMessage}>
-                      Failed to save changes
-                    </ErrorMessage>
-                  )}
+                  {error && <ErrorMessage>Failed to save changes</ErrorMessage>}
                </>
              )}
            </div>
--- 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 }
--- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/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 (
    <>
-      <div className={classes.rowWrapper}>
+      <div className={classes.header}>
        <H4>Receipt options</H4>
      </div>
-      <div className={classes.rowWrapper}>
+      <div className={classes.switchRow}>
        <P>Enable receipt printing?</P>
-        <div className={classes.switchWrapper}>
+        <div className={classes.switch}>
          <Switch
            checked={receiptPrintingConfig.active}
            onChange={event =>
@ -66,8 +66,8 @@ const ReceiptPrinting = memo(({ wizard }) => {
              })
            }
          />
+          <Label2>{receiptPrintingConfig.active ? 'Yes' : 'No'}</Label2>
        </div>
-        <Label2>{receiptPrintingConfig.active ? 'Yes' : 'No'}</Label2>
      </div>
      <BooleanPropertiesTable
        editing={wizard}
--- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js
@ -1,14 +0,0 @@
-const mainStyles = {
-  rowWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 'wrap'
-  },
-  switchWrapper: {
-    display: 'flex',
-    marginLeft: 120
-  }
-}
-
-export { mainStyles }
--- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js
@ -1,3 +0,0 @@
-import ReceiptPrinting from './ReceiptPrinting'
-
-export default ReceiptPrinting
--- a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
@ -12,15 +12,11 @@ import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { Link, IconButton } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import { TextInput } from 'src/components/inputs/formik'
-import { H4, Info2, Info3, Label2, Label3 } from 'src/components/typography'
+import { H4, Info2, Info3, Label2, Label3, P } from 'src/components/typography'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'

-import {
-  styles as globalStyles,
-  termsConditionsStyles,
-  fieldStyles
-} from './OperatorInfo.styles'
+import { global, fieldStyles } from './OperatorInfo.styles'

 const useFieldStyles = makeStyles(fieldStyles)

@ -50,7 +46,7 @@ const Field = ({
      {!editing && (
        <>
          <Label3>{label}</Label3>
-          <Info3 className={classes.multiLineText}>{value}</Info3>
+          <Info3>{value}</Info3>
        </>
      )}
      {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 (
    <>
-      <div className={classes.rowWrapper}>
+      <div className={classes.header}>
        <H4>Terms &amp; Conditions</H4>
      </div>
-      <div className={classes.section}>
-        <div className={classes.enable}>
-          <span>Show on screen</span>
+      <div className={classes.switchRow}>
+        <P>Show on screen</P>
+        <div className={classes.switch}>
          <Switch
            checked={showOnScreen}
            onChange={event =>
@ -187,64 +181,60 @@ const TermsConditions = () => {
          />
          <Label2>{showOnScreen ? 'Yes' : 'No'}</Label2>
        </div>
-        <div className={classes.header}>
-          <Info2>Info card</Info2>
-          {!editing && (
-            <IconButton
-              className={classes.transparentButton}
-              onClick={() => setEditing(true)}>
-              <EditIcon />
-            </IconButton>
-          )}
-        </div>
-        <Formik
-          validateOnBlur={false}
-          validateOnChange={false}
-          enableReinitialize
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={values => save(values)}
-          onReset={() => {
-            setEditing(false)
-            setError(null)
-          }}>
-          <Form>
-            <PromptWhenDirty />
-            {fields.map((f, idx) => (
-              <div className={classes.row} key={idx}>
-                <Field
-                  editing={editing}
-                  name={f.name}
-                  width={f.width}
-                  placeholder={f.placeholder}
-                  label={f.label}
-                  value={f.value}
-                  multiline={f.multiline}
-                  rows={f.rows}
-                  onFocus={() => setError(null)}
-                />
-              </div>
-            ))}
-            <div className={classnames(classes.row, classes.submit)}>
-              {editing && (
-                <>
-                  <Link color="primary" type="submit">
-                    Save
-                  </Link>
-                  <Link color="secondary" type="reset">
-                    Cancel
-                  </Link>
-                  {error && (
-                    <ErrorMessage className={classes.errorMessage}>
-                      Failed to save changes
-                    </ErrorMessage>
-                  )}
-                </>
-              )}
-            </div>
-          </Form>
-        </Formik>
      </div>
+      <div className={classes.header}>
+        <Info2>Info card</Info2>
+        {!editing && (
+          <IconButton
+            className={classes.transparentButton}
+            onClick={() => setEditing(true)}>
+            <EditIcon />
+          </IconButton>
+        )}
+      </div>
+      <Formik
+        validateOnBlur={false}
+        validateOnChange={false}
+        enableReinitialize
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={values => save(values)}
+        onReset={() => {
+          setEditing(false)
+          setError(null)
+        }}>
+        <Form>
+          <PromptWhenDirty />
+          {fields.map((f, idx) => (
+            <div className={classes.row} key={idx}>
+              <Field
+                editing={editing}
+                name={f.name}
+                width={f.width}
+                placeholder={f.placeholder}
+                label={f.label}
+                value={f.value}
+                multiline={f.multiline}
+                rows={f.rows}
+                onFocus={() => setError(null)}
+              />
+            </div>
+          ))}
+          <div className={classnames(classes.row, classes.submit)}>
+            {editing && (
+              <>
+                <Link color="primary" type="submit">
+                  Save
+                </Link>
+                <Link color="secondary" type="reset">
+                  Cancel
+                </Link>
+                {error && <ErrorMessage>Failed to save changes</ErrorMessage>}
+              </>
+            )}
+          </div>
+        </Form>
+      </Formik>
    </>
  )
 }
--- a/new-lamassu-admin/src/styling/icons/table/false.svg
+++ b/new-lamassu-admin/src/styling/icons/table/false.svg
@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
-    <desc>Created with Sketch.</desc>
-    <g id="icon/table/false" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-4" stroke="#FF584A" stroke-width="4">
-            <line x1="13.5" y1="0.5" x2="0.995667" y2="13.004333" id="Line-7"></line>
-            <line x1="13.5" y1="0.5" x2="0.995667" y2="13.004333" id="Line-7" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) "></line>
+<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">
+    <title>Group</title>
+    <g id="↳↳-Coin-ATM-Radar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="operator-info_v4-CAR#1" transform="translate(-832.000000, -608.000000)" fill="#FF584A" fill-rule="nonzero">
+            <g id="Group" transform="translate(832.000000, 608.000000)">
+                <polygon id="Line-7" points="13.0484874 0 16 2.95151255 2.95151255 16 0 13.0484874"></polygon>
+                <polygon id="Line-7" transform="translate(8.000000, 8.000000) scale(-1, 1) translate(-8.000000, -8.000000) " points="13.0484874 0 16 2.95151255 2.95151255 16 0 13.0484874"></polygon>
+            </g>
        </g>
    </g>
 </svg>
--- a/new-lamassu-admin/src/styling/icons/table/true.svg
+++ b/new-lamassu-admin/src/styling/icons/table/true.svg
@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>icon/table/true</title>
    <desc>Created with Sketch.</desc>
    <g id="icon/table/true" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M4.17451294,13.3251347 L0.599425104,9.29667256 C-0.199808368,8.3960844 -0.199808368,6.94040225 0.599425104,6.03981409 C1.39865858,5.13922593 2.69051421,5.13922593 3.48974768,6.03981409 L5.61967423,8.439847 L12.5102523,0.675441122 C13.3094858,-0.225147041 14.6033855,-0.225147041 15.4005749,0.675441122 C16.1998084,1.57372599 16.1998084,3.03171143 15.4005749,3.93229959 L7.06483552,13.3251347 C6.66624082,13.7742771 6.14295752,14 5.61967423,14 C5.09639093,14 4.57310763,13.7742771 4.17451294,13.3251347 Z" id="Fill-1" fill="#48F694"></path>