fix: cross icon replace

fix: space between switch buttons and label
fix: switch button shadow
feat: change CoinATMRadar fields to table
refactor: css classes

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: {

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 (
-    <div className={classes.rowWrapper}>
+    <div className={classes.switchRow}>
-      <div className={classes.rowTextAndSwitch}>
+      <P>{title}</P>
-        <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>
+        <BooleanPropertiesTable
-        <Row
+          editing={wizard}
-          title={'Commissions'}
+          title="Machine info"
-          disabled={!coinAtmRadarConfig.active}
+          data={coinAtmRadarConfig}
-          checked={coinAtmRadarConfig.commissions}
+          elements={[
-          save={value => save({ commissions: value })}
+            {
-        />
+              name: 'commissions',
-        <Row
+              display: 'Commissions'
-          title={'Limits and verification'}
+            },
-          disabled={!coinAtmRadarConfig.active}
+            {
-          checked={coinAtmRadarConfig.limitsAndVerification}
+              name: 'limitsAndVerification',
-          save={value => save({ limitsAndVerification: value })}
+              display: 'Limits and verification'
+            }
+          ]}
+          save={save}
         />
       </div>
     </div>

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 }

new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js

@@ -1,3 +0,0 @@
-import CoinATMRadar from './CoinATMRadar'
-
-export default CoinATMRadar

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 {
+import { global } from './OperatorInfo.styles'
-  styles as globalStyles,
-  contactInfoStyles
-} from './OperatorInfo.styles'
 
 const FIELD_WIDTH = 280
 
@@ -98,9 +95,7 @@ const SAVE_CONFIG = gql`
   }
 `
 
-const styles = R.merge(globalStyles, contactInfoStyles)
+const contactUseStyles = makeStyles(global)
-
-const contactUseStyles = makeStyles(styles)
 
 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 && (
+                  {error && <ErrorMessage>Failed to save changes</ErrorMessage>}
-                    <ErrorMessage className={classes.errorMessage}>
-                      Failed to save changes
-                    </ErrorMessage>
-                  )}
                 </>
               )}
             </div>

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 global = {
-
+  content: {
-const styles = {
+    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,
+    position: 'relative',
-    width: 600
+    flex: 'wrap',
+    justifyContent: 'space-between',
+    width: 396
   },
   switch: {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'center'
-    marginLeft: 120
   },
   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'
     }
-  }
+  },
-}
+  infoMessage: {
-
-const termsConditionsStyles = {
-  enable: {
     display: 'flex',
-    alignItems: 'center',
+    marginBottom: 52,
-    marginBottom: 22 - theme.spacing(1),
+    '& > p': {
-    '& > span:first-child': {
+      width: 330,
-      extend: p,
+      color: offColor,
-      marginRight: 116 - theme.spacing(1)
+      marginTop: 4,
-    },
+      marginLeft: 16
-    '& > span:last-child': {
-      marginLeft: 4
     }
   }
 }
@@ -160,4 +112,4 @@ const fieldStyles = {
   }
 }
 
-export { styles, contactInfoStyles, termsConditionsStyles, fieldStyles }
+export { global, fieldStyles }

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 (
     <>
-      <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}

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 }

new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js

@@ -1,3 +0,0 @@
-import ReceiptPrinting from './ReceiptPrinting'
-
-export default ReceiptPrinting

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 {
+import { global, fieldStyles } from './OperatorInfo.styles'
-  styles as globalStyles,
-  termsConditionsStyles,
-  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(global)
-
-const useTermsConditionsStyles = makeStyles(styles)
 
 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.switchRow}>
-        <div className={classes.enable}>
+        <P>Show on screen</P>
-          <span>Show on screen</span>
+        <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>
     </>
   )
 }

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">
+<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 61.2 (89653) - https://sketch.com -->
+    <title>Group</title>
-    <desc>Created with Sketch.</desc>
+    <g id="↳↳-Coin-ATM-Radar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g id="icon/table/false" 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-4" stroke="#FF584A" stroke-width="4">
+            <g id="Group" transform="translate(832.000000, 608.000000)">
-            <line x1="13.5" y1="0.5" x2="0.995667" y2="13.004333" id="Line-7"></line>
+                <polygon id="Line-7" points="13.0484874 0 16 2.95151255 2.95151255 16 0 13.0484874"></polygon>
-            <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>
+                <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>

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>