partial: notifications, op info, services

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js

@@ -35,7 +35,7 @@ const cashboxStyles = {
     border: '4px solid'
   },
   emptyPart: {
-    backgroundColor: 'white',
+    backgroundColor: 'var(--ghost)',
     height: ({ percent }) => `${100 - percent}%`,
     position: 'relative',
     '& > p': {

new-lamassu-admin/src/pages/Notifications/Notifications.styles.js

@@ -1,20 +0,0 @@
-export default {
-  cryptoBalanceAlerts: {
-    display: 'flex',
-    marginBottom: 36,
-    height: 135,
-    alignItems: 'center'
-  },
-  cryptoBalanceAlertsForm: {
-    width: 222,
-    marginRight: 32
-  },
-  cryptoBalanceAlertsSecondForm: {
-    marginLeft: 50
-  },
-  vertSeparator: {
-    width: 1,
-    height: '100%',
-    borderRight: [[1, 'solid', 'black']]
-  }
-}

new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { H4 } from 'src/components/typography'
 import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react'
@@ -6,27 +5,23 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 
 import { Link, IconButton } from 'src/components/buttons'
 
-import styles from './EditHeader.styles'
-
-const useStyles = makeStyles(styles)
-
 const Header = ({ title, editing, disabled, setEditing }) => {
-  const classes = useStyles()
-
   return (
-    <div className={classes.header}>
+    <div className="flex items-center m-0 mb-4 h-7">
-      <H4 className={classes.title}>{title}</H4>
+      <H4 noMargin className="overflow-hidden whitespace-nowrap text-ellipsis">
+        {title}
+      </H4>
       {!editing && (
         <IconButton
           onClick={() => setEditing(true)}
-          className={classes.button}
+          className="border-0 bg-transparent shrink-0 cursor-pointer ml-2"
           disabled={disabled}
           size="large">
           {disabled ? <DisabledEditIcon /> : <EditIcon />}
         </IconButton>
       )}
       {editing && (
-        <div className={classes.editingButtons}>
+        <div className="flex ml-4 justify-between shrink-0 w-27">
           <Link color="primary" type="submit">
             Save
           </Link>
@@ -36,7 +31,7 @@ const Header = ({ title, editing, disabled, setEditing }) => {
         </div>
       )}
     </div>
-  );
+  )
 }
 
 export default Header

new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js

@@ -1,29 +0,0 @@
-export default {
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    marginBottom: 16,
-    height: 26,
-    margin: 0
-  },
-  title: {
-    flexShrink: 2,
-    margin: 0,
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  },
-  button: {
-    border: 'none',
-    backgroundColor: 'transparent',
-    cursor: 'pointer',
-    marginLeft: 8
-  },
-  editingButtons: {
-    display: 'flex',
-    flexShrink: 0,
-    marginLeft: 16,
-    justifyContent: 'space-between',
-    width: 110
-  }
-}

new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { useFormikContext, Field as FormikField } from 'formik'
 import React from 'react'
@@ -6,10 +5,6 @@ import { Label1, Info1, TL2 } from 'src/components/typography'
 
 import { NumberInput } from 'src/components/inputs/formik'
 
-import styles from './EditableNumber.styles'
-
-const useStyles = makeStyles(styles)
-
 const EditableNumber = ({
   label,
   name,
@@ -20,20 +15,21 @@ const EditableNumber = ({
   decimalPlaces = 0,
   width = 80
 }) => {
-  const classes = useStyles({ width, editing })
   const { values } = useFormikContext()
 
   const classNames = {
-    [classes.fieldWrapper]: true,
+    'h-13': true,
     className
   }
 
   return (
     <div className={classnames(classNames)}>
-      {label && <Label1 className={classes.label}>{label}</Label1>}
+      {label && <Label1 noMargin>{label}</Label1>}
-      <div className={classes.valueWrapper}>
+      <div className="flex items-baseline">
         {!editing && (
-          <Info1 className={classes.text}>{displayValue(values[name])}</Info1>
+          <Info1 noMargin className="my-2">
+            {displayValue(values[name])}
+          </Info1>
         )}
         {editing && (
           <FormikField
@@ -47,7 +43,9 @@ const EditableNumber = ({
             decimalPlaces={decimalPlaces}
           />
         )}
-        <TL2 className={classes.decoration}>{decoration}</TL2>
+        <TL2 noMargin className="ml-2">
+          {decoration}
+        </TL2>
       </div>
     </div>
   )

new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js

@@ -1,18 +0,0 @@
-export default {
-  text: {
-    margin: [[7, 0, 7, 1]]
-  },
-  fieldWrapper: {
-    height: 53
-  },
-  valueWrapper: {
-    display: 'flex',
-    alignItems: 'baseline'
-  },
-  label: {
-    margin: 0
-  },
-  decoration: {
-    margin: [[0, 0, 0, 7]]
-  }
-}

new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx

@@ -1,31 +1,24 @@
-import { makeStyles } from '@mui/styles'
 import React, { useContext } from 'react'
 
 import NotificationsCtx from '../NotificationsContext'
 import SingleFieldEditableNumber from '../components/SingleFieldEditableNumber'
 
-import styles from './CryptoBalanceAlerts.styles'
-
 const LOW_BALANCE_KEY = 'cryptoLowBalance'
 const HIGH_BALANCE_KEY = 'cryptoHighBalance'
 
-const useStyles = makeStyles(styles)
-
 const CryptoBalanceAlerts = ({ section, fieldWidth }) => {
-  const classes = useStyles()
-
   const { data, save, currency, setEditing, isEditing, isDisabled } =
     useContext(NotificationsCtx)
 
   return (
-    <div className={classes.cryptoBalanceAlerts}>
+    <div className="flex mb-9 h-34 items-center gap-12">
       <SingleFieldEditableNumber
         name={LOW_BALANCE_KEY}
         data={data}
         save={save}
         section={section}
         decoration={currency}
-        className={classes.cryptoBalanceAlertsForm}
+        className="w-50"
         title="Default (Low balance)"
         label="Alert me under"
         editing={isEditing(LOW_BALANCE_KEY)}
@@ -34,7 +27,7 @@ const CryptoBalanceAlerts = ({ section, fieldWidth }) => {
         width={fieldWidth}
       />
 
-      <div className={classes.vertSeparator} />
+      <div className="w-[1px] h-full border-r border-r-comet" />
 
       <SingleFieldEditableNumber
         name={HIGH_BALANCE_KEY}
@@ -42,7 +35,6 @@ const CryptoBalanceAlerts = ({ section, fieldWidth }) => {
         section={section}
         save={save}
         decoration={currency}
-        className={classes.cryptoBalanceAlertsSecondForm}
         title="Default (High balance)"
         label="Alert me over"
         editing={isEditing(HIGH_BALANCE_KEY)}

new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js

@@ -1,20 +0,0 @@
-export default {
-  cryptoBalanceAlerts: {
-    display: 'flex',
-    marginBottom: 36,
-    height: 135,
-    alignItems: 'center'
-  },
-  cryptoBalanceAlertsForm: {
-    width: 222,
-    marginRight: 32
-  },
-  cryptoBalanceAlertsSecondForm: {
-    marginLeft: 50
-  },
-  vertSeparator: {
-    width: 1,
-    height: '100%',
-    borderRight: [[1, 'solid', 'black']]
-  }
-}

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import { Form, Formik } from 'formik'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
@@ -13,10 +12,6 @@ import NotificationsCtx from '../NotificationsContext'
 import Header from '../components/EditHeader'
 import EditableNumber from '../components/EditableNumber'
 
-import styles from './FiatBalanceAlerts.styles'
-
-const useStyles = makeStyles(styles)
-
 const CASH_IN_KEY = 'fiatBalanceAlertsCashIn'
 const CASH_OUT_KEY = 'fiatBalanceAlertsCashOut'
 const RECYCLER_STACKER_KEY = 'fiatBalanceAlertsRecyclerStacker'
@@ -34,8 +29,6 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
     save,
     machines = []
   } = useContext(NotificationsCtx)
-  const classes = useStyles()
-
   const maxNumberOfCassettes = Math.max(
     ...R.map(it => it.numberOfCassettes, machines),
     DEFAULT_NUMBER_OF_CASSETTES
@@ -97,8 +90,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
         setEditing(CASH_OUT_KEY, false)
       }}>
       {({ values }) => (
-        <>
+        <div className="flex flex-col gap-9">
-          <Form className={classes.form}>
+          <Form>
             <PromptWhenDirty />
             <Header
               title="Cash box"
@@ -106,24 +99,16 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
               disabled={isDisabled(CASH_IN_KEY)}
               setEditing={it => setEditing(CASH_IN_KEY, it)}
             />
-            <div className={classes.wrapper}>
+            <EditableNumber
-              <div className={classes.first}>
+              label="Alert me over"
-                <div className={classes.row}>
+              name="cashInAlertThreshold"
-                  <div className={classes.col2}>
+              editing={isEditing(CASH_IN_KEY)}
-                    <EditableNumber
+              displayValue={x => (x === '' ? '-' : x)}
-                      label="Alert me over"
+              decoration="notes"
-                      name="cashInAlertThreshold"
+              width={fieldWidth}
-                      editing={isEditing(CASH_IN_KEY)}
+            />
-                      displayValue={x => (x === '' ? '-' : x)}
-                      decoration="notes"
-                      width={fieldWidth}
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
           </Form>
-          <Form className={classes.form}>
+          <Form>
             <PromptWhenDirty />
             <Header
               title="Cash out (Empty)"
@@ -131,14 +116,12 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
               disabled={isDisabled(CASH_OUT_KEY)}
               setEditing={it => setEditing(CASH_OUT_KEY, it)}
             />
-            <div className={classes.wrapper}>
+            <div className="flex flex-wrap gap-8">
               {R.map(
                 it => (
                   <>
-                    <div className={classes.row}>
+                    <div className="flex w-50 gap-4">
                       <Cashbox
-                        labelClassName={classes.cashboxLabel}
-                        emptyPartClassName={classes.cashboxEmptyPart}
                         percent={
                           values[`fillingPercentageCassette${it + 1}`] ??
                           data[`cassette${it + 1}`]
@@ -148,8 +131,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
                         omitInnerPercentage
                         cashOut
                       />
-                      <div className={classes.col2}>
+                      <div className="w-30">
-                        <TL2 className={classes.title}>Cassette {it + 1}</TL2>
+                        <TL2 className="mt-0">Cassette {it + 1}</TL2>
                         <EditableNumber
                           label="Alert me under"
                           name={`fillingPercentageCassette${it + 1}`}
@@ -166,7 +149,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
               )}
             </div>
           </Form>
-          <Form className={classes.form}>
+          <Form>
             <PromptWhenDirty />
             <Header
               title="Cash recycling"
@@ -174,14 +157,12 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
               disabled={isDisabled(RECYCLER_STACKER_KEY)}
               setEditing={it => setEditing(RECYCLER_STACKER_KEY, it)}
             />
-            <div className={classes.wrapper}>
+            <div className="flex flex-wrap gap-8">
               {R.chain(
                 it => [
                   <>
-                    <div className={classes.row}>
+                    <div className="flex w-50 gap-4">
                       <Cashbox
-                        labelClassName={classes.cashboxLabel}
-                        emptyPartClassName={classes.cashboxEmptyPart}
                         percent={
                           values[
                             `fillingPercentageRecycler${(it + 1) * 2 - 1}`
@@ -192,10 +173,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
                         omitInnerPercentage
                         cashOut
                       />
-                      <div className={classes.col2}>
+                      <div className="w-30">
-                        <TL2 className={classes.title}>
+                        <TL2 className="mt-0">Recycler {(it + 1) * 2 - 1}</TL2>
-                          Recycler {(it + 1) * 2 - 1}
-                        </TL2>
                         <EditableNumber
                           label="Alert me under"
                           name={`fillingPercentageRecycler${(it + 1) * 2 - 1}`}
@@ -208,10 +187,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
                     </div>
                   </>,
                   <>
-                    <div className={classes.row}>
+                    <div className="flex w-50 gap-4">
                       <Cashbox
-                        labelClassName={classes.cashboxLabel}
-                        emptyPartClassName={classes.cashboxEmptyPart}
                         percent={
                           values[`fillingPercentageRecycler${(it + 1) * 2}`] ??
                           data[`recycler${(it + 1) * 2}`]
@@ -221,10 +198,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
                         omitInnerPercentage
                         cashOut
                       />
-                      <div className={classes.col2}>
+                      <div className="w-30">
-                        <TL2 className={classes.title}>
+                        <TL2 className="mt-0">Recycler {(it + 1) * 2}</TL2>
-                          Recycler {(it + 1) * 2}
-                        </TL2>
                         <EditableNumber
                           label="Alert me under"
                           name={`fillingPercentageRecycler${(it + 1) * 2}`}
@@ -241,7 +216,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
               )}
             </div>
           </Form>
-        </>
+        </div>
       )}
     </Formik>
   )

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js

@@ -1,31 +0,0 @@
-import { backgroundColor } from 'src/styling/variables'
-
-export default {
-  wrapper: {
-    display: 'flex'
-  },
-  form: {
-    marginBottom: 36
-  },
-  title: {
-    marginTop: 0
-  },
-  row: {
-    width: 236,
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2,1fr)',
-    gridTemplateRows: '1fr',
-    gridColumnGap: 18,
-    gridRowGap: 0
-  },
-  col2: {
-    width: 136
-  },
-  cashboxLabel: {
-    marginRight: 4,
-    fontSize: 20
-  },
-  cashboxEmptyPart: {
-    backgroundColor: `${backgroundColor}`
-  }
-}

new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import Switch from '@mui/material/Switch'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
@@ -74,12 +73,6 @@ const Row = ({
   )
 }
 
-const useStyles = makeStyles({
-  wizardTable: {
-    width: 930
-  }
-})
-
 const Setup = ({ wizard, forceDisable }) => {
   const {
     data: rawData,
@@ -120,9 +113,8 @@ const Setup = ({ wizard, forceDisable }) => {
   ]
 
   const widthAdjust = wizard ? 20 : 0
-  const classes = useStyles()
   return (
-    <Table className={wizard ? classes.wizardTable : null}>
+    <Table className={wizard ? 'w-233' : null}>
       <THead>
         <Th width={channelSize - widthAdjust}>Channel</Th>
         {Object.keys(sizes).map(it => (

new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx

@@ -1,18 +1,11 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
-import Switch from '@mui/material/Switch'
 import React, { memo } from 'react'
-import { HelpTooltip } from 'src/components/Tooltip'
-import { H4, P, Label2 } from 'src/components/typography'
 
 import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
-import { SupportLinkButton } from '../../components/buttons'
+import SwitchRow from './components/SwitchRow.jsx'
-
+import Header from './components/Header.jsx'
-import { global } from './OperatorInfo.styles'
-
-const useStyles = makeStyles(global)
 
 const GET_CONFIG = gql`
   query getData {
@@ -26,27 +19,7 @@ const SAVE_CONFIG = gql`
   }
 `
 
-const Row = memo(({ title, disabled = false, checked, save, label }) => {
-  const classes = useStyles()
-
-  return (
-    <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>
-    </div>
-  )
-})
-
 const CoinATMRadar = memo(({ wizard }) => {
-  const classes = useStyles()
-
   const { data } = useQuery(GET_CONFIG)
 
   const [saveConfig] = useMutation(SAVE_CONFIG, {
@@ -63,53 +36,34 @@ const CoinATMRadar = memo(({ wizard }) => {
   if (!coinAtmRadarConfig) return null
 
   return (
-    <div className={classes.content}>
+    <>
-      <div>
+      <Header
-        <div className={classes.header}>
+        title="Coin ATM Radar share settings"
-          <H4>Coin ATM Radar share settings</H4>
+        articleUrl="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar"
-          <HelpTooltip width={320}>
+        tooltipText="For details on configuring this panel, please read the relevant knowledgebase article."
-            <P>
+      />
-              For details on configuring this panel, please read the relevant
+      <SwitchRow
-              knowledgebase article{' '}
+        title={'Share information?'}
-              <a
+        checked={coinAtmRadarConfig.active}
-                target="_blank"
+        save={value => save({ active: value })}
-                rel="noopener noreferrer"
+      />
-                href="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar">
+      <BooleanPropertiesTable
-                here
+        editing={wizard}
-              </a>
+        title="Machine info"
-              .
+        data={coinAtmRadarConfig}
-            </P>
+        elements={[
-            <SupportLinkButton
+          {
-              link="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar"
+            name: 'commissions',
-              label="Lamassu Support Article"
+            display: 'Commissions'
-              bottomSpace="1"
+          },
-            />
+          {
-          </HelpTooltip>
+            name: 'limitsAndVerification',
-        </div>
+            display: 'Limits and verification'
-        <Row
+          }
-          title={'Share information?'}
+        ]}
-          checked={coinAtmRadarConfig.active}
+        save={save}
-          save={value => save({ active: value })}
+      />
-          label={coinAtmRadarConfig.active ? 'Yes' : 'No'}
+    </>
-        />
-        <BooleanPropertiesTable
-          editing={wizard}
-          title="Machine info"
-          data={coinAtmRadarConfig}
-          elements={[
-            {
-              name: 'commissions',
-              display: 'Commissions'
-            },
-            {
-              name: 'limitsAndVerification',
-              display: 'Limits and verification'
-            }
-          ]}
-          save={save}
-        />
-      </div>
-    </div>
   )
 })
 

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx

@@ -1,70 +1,37 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
-import Switch from '@mui/material/Switch'
-import classnames from 'classnames'
 import { Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import { HelpTooltip } from 'src/components/Tooltip'
+import { H4, Info3, Label3 } from 'src/components/typography'
-import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
 import * as Yup from 'yup'
 
-import { Link, IconButton, SupportLinkButton } from 'src/components/buttons'
+import { Link, IconButton } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
-import { fontSize5 } from 'src/styling/variables'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
-import { global } from './OperatorInfo.styles'
+import SwitchRow from './components/SwitchRow.jsx'
+import InfoMessage from './components/InfoMessage.jsx'
+import Header from './components/Header.jsx'
 
 const FIELD_WIDTH = 280
 
-const fieldStyles = {
-  field: {
-    position: 'relative',
-    width: 280,
-    height: 48,
-    padding: [[0, 4, 4, 0]]
-  },
-  notEditing: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > p:first-child': {
-      height: 16,
-      lineHeight: '16px',
-      fontSize: fontSize5,
-      transformOrigin: 'left',
-      paddingLeft: 0,
-      margin: [[3, 0, 3, 0]]
-    },
-    '& > p:last-child': {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      margin: 0
-    }
-  }
-}
-
-const fieldUseStyles = makeStyles(fieldStyles)
-
 const Field = ({ editing, field, displayValue, ...props }) => {
-  const classes = fieldUseStyles()
-
-  const classNames = {
-    [classes.field]: true,
-    [classes.notEditing]: !editing
-  }
-
   return (
-    <div className={classnames(classNames)}>
+    <div className="w-70 h-12 p-0 pl-1 pb-1">
       {!editing && (
         <>
-          <Label3>{field.label}</Label3>
+          <Label3 noMargin className="h-4 text-[13px] my-[3px]">
-          <Info3>{displayValue(field.value)}</Info3>
+            {field.label}
+          </Label3>
+          <Info3
+            noMargin
+            className="overflow-hidden whitespace-nowrap text-ellipsis">
+            {displayValue(field.value)}
+          </Info3>
         </>
       )}
       {editing && (
@@ -95,11 +62,7 @@ const SAVE_CONFIG = gql`
   }
 `
 
-const contactUseStyles = makeStyles(global)
-
 const ContactInfo = ({ wizard }) => {
-  const classes = contactUseStyles()
-
   const [editing, setEditing] = useState(wizard || false)
   const [error, setError] = useState(null)
 
@@ -187,42 +150,17 @@ const ContactInfo = ({ wizard }) => {
 
   return (
     <>
-      <div className={classes.header}>
+      <Header
-        <H4>Contact information</H4>
+        title="Contact information"
-        <HelpTooltip width={320}>
+        articleUrl="https://support.lamassu.is/hc/en-us/articles/360033051732-Enabling-Operator-Info"
-          <P>
+        tooltipText="For details on configuring this panel, please read the relevant knowledgebase article:"
-            For details on configuring this panel, please read the relevant
+      />
-            knowledgebase article:
+      <SwitchRow checked={info.active} save={save} title="Info card enabled?" />
-          </P>
+      <div>
-          <SupportLinkButton
+        <div className="flex items-center gap-4">
-            link="https://support.lamassu.is/hc/en-us/articles/360033051732-Enabling-Operator-Info"
-            label="Lamassu Support Article"
-            bottomSpace="1"
-          />
-        </HelpTooltip>
-      </div>
-      <div className={classes.switchRow}>
-        <P>Info card enabled?</P>
-        <div className={classes.switch}>
-          <Switch
-            checked={info.active}
-            onChange={event =>
-              save({
-                active: event.target.checked
-              })
-            }
-          />
-          <Label2>{info.active ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
-      <div className={classes.section}>
-        <div className={classes.header}>
           <H4>Info card</H4>
           {!editing && (
-            <IconButton
+            <IconButton onClick={() => setEditing(true)} size="large">
-              className={classes.transparentButton}
-              onClick={() => setEditing(true)}
-              size="large">
               <EditIcon />
             </IconButton>
           )}
@@ -239,9 +177,9 @@ const ContactInfo = ({ wizard }) => {
             setError(null)
           }}>
           {({ errors }) => (
-            <Form>
+            <Form className="flex flex-col gap-7 w-147">
               <PromptWhenDirty />
-              <div className={classes.row}>
+              <div className="flex gap-6 justify-between">
                 <Field
                   field={findField('name')}
                   editing={editing}
@@ -255,7 +193,7 @@ const ContactInfo = ({ wizard }) => {
                   onFocus={() => setError(null)}
                 />
               </div>
-              <div className={classes.row}>
+              <div className="flex gap-6">
                 <Field
                   field={findField('email')}
                   editing={editing}
@@ -269,7 +207,7 @@ const ContactInfo = ({ wizard }) => {
                   onFocus={() => setError(null)}
                 />
               </div>
-              <div className={classes.row}>
+              <div className="flex gap-6">
                 <Field
                   field={findField('companyNumber')}
                   editing={editing}
@@ -278,41 +216,34 @@ const ContactInfo = ({ wizard }) => {
                 />
               </div>
               {editing && !!getErrorMsg(errors) && (
-                <ErrorMessage className={classes.formErrorMsg}>
+                <ErrorMessage>{getErrorMsg(errors)}</ErrorMessage>
-                  {getErrorMsg(errors)}
+              )}
-                </ErrorMessage>
+              {editing && (
+                <div className="flex gap-10">
+                  <Link color="primary" type="submit">
+                    Save
+                  </Link>
+                  <Link color="secondary" type="reset">
+                    Cancel
+                  </Link>
+                  {error && <ErrorMessage>Failed to save changes</ErrorMessage>}
+                </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>
       </div>
       {!wizard && (
-        <div className={classnames(classes.section, classes.infoMessage)}>
+        <>
-          <WarningIcon />
+          <InfoMessage Icon={WarningIcon}>
-          <Label1>
             Sharing your information with your customers through your machines
             allows them to contact you in case there's a problem with a machine
             in your network or a transaction.
-          </Label1>
+          </InfoMessage>
-        </div>
+        </>
       )}
     </>
-  );
+  )
 }
 
 export default ContactInfo

new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx

@@ -1,15 +1,11 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
-import Switch from '@mui/material/Switch'
 import * as R from 'ramda'
 import React, { memo } from 'react'
-import { H4, P, Label2 } from 'src/components/typography'
+import { H4 } from 'src/components/typography'
 
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
-import { global } from './OperatorInfo.styles'
+import SwitchRow from './components/SwitchRow.jsx'
-
-const useStyles = makeStyles(global)
 
 const GET_CONFIG = gql`
   query getData {
@@ -24,14 +20,26 @@ const SAVE_CONFIG = gql`
 `
 
 const MachineScreens = memo(({ wizard }) => {
-  const classes = useStyles()
-
   const { data } = useQuery(GET_CONFIG)
 
   const [saveConfig] = useMutation(SAVE_CONFIG, {
     refetchQueries: () => ['getData']
   })
 
+  const save = it => {
+    const formatConfig = R.compose(
+      toNamespace(namespaces.MACHINE_SCREENS),
+      toNamespace('rates'),
+      R.mergeRight(ratesScreenConfig)
+    )
+
+    return saveConfig({
+      variables: {
+        config: formatConfig({ active: it })
+      }
+    })
+  }
+
   const machineScreensConfig =
     data?.config && fromNamespace(namespaces.MACHINE_SCREENS, data.config)
 
@@ -46,32 +54,12 @@ const MachineScreens = memo(({ wizard }) => {
 
   return (
     <>
-      <div className={classes.header}>
+      <H4>Rates screen</H4>
-        <H4>Rates screen</H4>
+      <SwitchRow
-      </div>
+        save={save}
-      <div className={classes.switchRow}>
+        title="Enable rates screen"
-        <P>Enable rates screen</P>
+        checked={ratesScreenConfig.active}
-        <div className={classes.switch}>
+      />
-          <Switch
-            checked={ratesScreenConfig.active}
-            onChange={event =>
-              saveConfig({
-                variables: {
-                  config: R.compose(
-                    toNamespace(namespaces.MACHINE_SCREENS),
-                    toNamespace('rates')
-                  )(
-                    R.merge(ratesScreenConfig, {
-                      active: event.target.checked
-                    })
-                  )
-                }
-              })
-            }
-          />
-          <Label2>{ratesScreenConfig.active ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
     </>
   )
 })

new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js

@@ -1,118 +0,0 @@
-import { offColor } from 'src/styling/variables'
-
-const global = {
-  content: {
-    display: 'flex'
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 'wrap'
-  },
-  section: {
-    marginBottom: 52
-  },
-  row: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 28,
-    width: 600,
-    '&:last-child': {
-      marginBottom: 0
-    }
-  },
-  switchRow: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 'wrap',
-    justifyContent: 'space-between',
-    width: 396
-  },
-  switch: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  submit: {
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    padding: [[0, 4, 4, 4]],
-    '& > button': {
-      marginRight: 40
-    }
-  },
-  transparentButton: {
-    '& > *': {
-      margin: 'auto 12px'
-    },
-    '& button': {
-      border: 'none',
-      backgroundColor: 'transparent',
-      cursor: 'pointer'
-    }
-  },
-  infoMessage: {
-    display: 'flex',
-    marginBottom: 52,
-    '& > p': {
-      width: 330,
-      color: offColor,
-      marginTop: 4,
-      marginLeft: 16
-    }
-  },
-  formErrorMsg: {
-    margin: [[0, 0, 20, 0]]
-  }
-}
-
-const fieldStyles = {
-  field: {
-    position: 'relative',
-    width: 280,
-    padding: [[0, 4, 4, 0]]
-  },
-  notEditing: {
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  notEditingSingleLine: {
-    '& > p:first-child': {
-      height: 16,
-      lineHeight: '16px',
-      transform: 'scale(0.75)',
-      transformOrigin: 'left',
-      paddingLeft: 0,
-      margin: [[1, 0, 6, 0]]
-    },
-    '& > p:last-child': {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      height: 25,
-      margin: 0
-    }
-  },
-  notEditingMultiline: {
-    '& > p:first-child': {
-      height: 16,
-      lineHeight: '16px',
-      transform: 'scale(0.75)',
-      transformOrigin: 'left',
-      paddingLeft: 0,
-      margin: [[1, 0, 5, 0]]
-    },
-    '& > p:last-child': {
-      width: 502,
-      height: 121,
-      overflowY: 'auto',
-      lineHeight: '19px',
-      wordWrap: 'anywhere',
-      margin: 0
-    }
-  }
-}
-
-export { global, fieldStyles }

new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx

@@ -1,19 +1,12 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
-import Switch from '@mui/material/Switch'
 import * as R from 'ramda'
 import React, { memo } from 'react'
-import { HelpTooltip } from 'src/components/Tooltip'
-import { H4, P, Label2 } from 'src/components/typography'
 
 import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
-import { SupportLinkButton } from '../../components/buttons'
+import Header from './components/Header.jsx'
-
+import SwitchRow from './components/SwitchRow.jsx'
-import { global } from './OperatorInfo.styles'
-
-const useStyles = makeStyles(global)
 
 const GET_CONFIG = gql`
   query getData {
@@ -28,14 +21,23 @@ const SAVE_CONFIG = gql`
 `
 
 const ReceiptPrinting = memo(({ wizard }) => {
-  const classes = useStyles()
-
   const { data } = useQuery(GET_CONFIG)
 
   const [saveConfig] = useMutation(SAVE_CONFIG, {
     refetchQueries: () => ['getData']
   })
 
+  const saveSwitch = object => {
+    return saveConfig({
+      variables: {
+        config: toNamespace(
+          namespaces.RECEIPT,
+          R.mergeRight(receiptPrintingConfig, object)
+        )
+      }
+    })
+  }
+
   const save = it =>
     saveConfig({
       variables: { config: toNamespace(namespaces.RECEIPT, it) }
@@ -47,84 +49,26 @@ const ReceiptPrinting = memo(({ wizard }) => {
 
   return (
     <>
-      <div className={classes.header}>
+      <Header
-        <H4>Receipt options</H4>
+        title="Receipt printing"
-        <HelpTooltip width={320}>
+        tooltipText="For details on configuring this panel, please read the relevant knowledgebase article."
-          <P>
+        articleUrl="https://support.lamassu.is/hc/en-us/articles/360058513951-Receipt-options-printers"
-            For details on configuring this panel, please read the relevant
+      />
-            knowledgebase article:
+      <SwitchRow
-          </P>
+        title="Enable receipt printing"
-          <SupportLinkButton
+        checked={receiptPrintingConfig.active}
-            link="https://support.lamassu.is/hc/en-us/articles/360058513951-Receipt-options-printers"
+        save={it => saveSwitch({ active: it })}
-            label="Lamassu Support Article"
+      />
-            bottomSpace="1"
+      <SwitchRow
-          />
+        title="Automatic receipt printing"
-        </HelpTooltip>
+        checked={receiptPrintingConfig.automaticPrint}
-      </div>
+        save={it => saveSwitch({ automaticPrint: it })}
-      <div className={classes.switchRow}>
+      />
-        <P>Enable receipt printing</P>
+      <SwitchRow
-        <div className={classes.switch}>
+        title="Offer SMS receipt"
-          <Switch
+        checked={receiptPrintingConfig.sms}
-            checked={receiptPrintingConfig.active}
+        save={it => saveSwitch({ sms: it })}
-            onChange={event =>
+      />
-              saveConfig({
-                variables: {
-                  config: toNamespace(
-                    namespaces.RECEIPT,
-                    R.merge(receiptPrintingConfig, {
-                      active: event.target.checked
-                    })
-                  )
-                }
-              })
-            }
-          />
-          <Label2>{receiptPrintingConfig.active ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
-      <div className={classes.switchRow}>
-        <P>Automatic receipt printing</P>
-        <div className={classes.switch}>
-          <Switch
-            disabled={!receiptPrintingConfig.active}
-            checked={receiptPrintingConfig.automaticPrint}
-            onChange={event =>
-              saveConfig({
-                variables: {
-                  config: toNamespace(
-                    namespaces.RECEIPT,
-                    R.merge(receiptPrintingConfig, {
-                      automaticPrint: event.target.checked
-                    })
-                  )
-                }
-              })
-            }
-          />
-          <Label2>{receiptPrintingConfig.automaticPrint ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
-      <div className={classes.switchRow}>
-        <P>Offer SMS receipt</P>
-        <div className={classes.switch}>
-          <Switch
-            checked={receiptPrintingConfig.sms}
-            onChange={event =>
-              saveConfig({
-                variables: {
-                  config: toNamespace(
-                    namespaces.RECEIPT,
-                    R.merge(receiptPrintingConfig, {
-                      sms: event.target.checked
-                    })
-                  )
-                }
-              })
-            }
-          />
-          <Label2>{receiptPrintingConfig.sms ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
       <BooleanPropertiesTable
         editing={wizard}
         title={'Visible on the receipt (options)'}

new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx

@@ -1,24 +1,20 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
-import Switch from '@mui/material/Switch'
 import classnames from 'classnames'
 import { Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import { HelpTooltip } from 'src/components/Tooltip'
+import { Info2, Info3, Label3 } from 'src/components/typography'
-import { H4, Info2, Info3, Label2, Label3, P } from 'src/components/typography'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 import * as Yup from 'yup'
 
-import { Link, IconButton, SupportLinkButton } from 'src/components/buttons'
+import { Link, IconButton } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
-import { global, fieldStyles } from './OperatorInfo.styles'
+import Header from './components/Header.jsx'
-
+import SwitchRow from './components/SwitchRow.jsx'
-const useFieldStyles = makeStyles(fieldStyles)
 
 const Field = ({
   editing,
@@ -32,21 +28,21 @@ const Field = ({
   onFocus,
   ...props
 }) => {
-  const classes = useFieldStyles()
+  const info3ClassNames = {
-
+    'overflow-hidden whitespace-nowrap text-ellipsis h-6': !multiline,
-  const classNames = {
+    'wrap-anywhere overflow-y-auto h-32 mt-4 leading-[23px]': multiline
-    [classes.field]: true,
-    [classes.notEditing]: !editing,
-    [classes.notEditingSingleLine]: !editing && !multiline,
-    [classes.notEditingMultiline]: !editing && multiline
   }
 
   return (
-    <div className={classnames(classNames)}>
+    <div className={`w-125 p-0 pl-1 pb-1`}>
       {!editing && (
         <>
-          <Label3>{label}</Label3>
+          <Label3 noMargin className="h-4 text-[13px] my-[3px] mb-1">
-          <Info3>{value}</Info3>
+            {label}
+          </Label3>
+          <Info3 noMargin className={classnames(info3ClassNames)}>
+            {value}
+          </Info3>
         </>
       )}
       {editing && (
@@ -81,8 +77,6 @@ const SAVE_CONFIG = gql`
   }
 `
 
-const useTermsConditionsStyles = makeStyles(global)
-
 const TermsConditions = () => {
   const [error, setError] = useState(null)
   const [editing, setEditing] = useState(false)
@@ -95,8 +89,6 @@ const TermsConditions = () => {
     onError: e => setError(e)
   })
 
-  const classes = useTermsConditionsStyles()
-
   const { data } = useQuery(GET_CONFIG)
 
   const termsAndConditions =
@@ -169,72 +161,30 @@ const TermsConditions = () => {
 
   return (
     <>
-      <div className={classes.header}>
+      <Header
-        <H4>Terms &amp; Conditions</H4>
+        title="Terms & Conditions"
-        <HelpTooltip width={320}>
+        tooltipText="For details on configuring this panel, please read the relevant knowledgebase article:"
-          <P>
+        articleUrl="https://support.lamassu.is/hc/en-us/articles/360015982211-Terms-and-Conditions"
-            For details on configuring this panel, please read the relevant
+      />
-            knowledgebase article:
+      <SwitchRow
-          </P>
+        title="Show on screen"
-          <SupportLinkButton
+        checked={showOnScreen}
-            link="https://support.lamassu.is/hc/en-us/articles/360015982211-Terms-and-Conditions"
+        save={it => save({ active: it })}
-            label="Lamassu Support Article"
+      />
-            bottomSpace="1"
+      <SwitchRow
-          />
+        title="Capture customer photo on acceptance of Terms & Conditions"
-        </HelpTooltip>
+        checked={tcPhoto}
-      </div>
+        save={it => save({ tcPhoto: it })}
-      <div className={classes.switchRow}>
+      />
-        <P>Show on screen</P>
+      <SwitchRow
-        <div className={classes.switch}>
+        title="Add 7 seconds delay on screen"
-          <Switch
+        checked={addDelayOnScreen}
-            checked={showOnScreen}
+        save={it => save({ delay: it })}
-            onChange={event =>
+      />
-              save({
+      <div className="flex gap-3">
-                active: event.target.checked
-              })
-            }
-          />
-          <Label2>{showOnScreen ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
-      <div className={classes.switchRow}>
-        <P>
-          Capture customer photo on acceptance <br /> of Terms & Conditions
-          screen
-        </P>
-        <div className={classes.switch}>
-          <Switch
-            checked={tcPhoto}
-            onChange={event =>
-              save({
-                tcPhoto: event.target.checked
-              })
-            }
-          />
-          <Label2>{tcPhoto ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
-      <div className={classes.switchRow}>
-        <P>Add 7 seconds delay on screen</P>
-        <div className={classes.switch}>
-          <Switch
-            checked={addDelayOnScreen}
-            onChange={event =>
-              save({
-                delay: event.target.checked
-              })
-            }
-          />
-          <Label2>{addDelayOnScreen ? 'Yes' : 'No'}</Label2>
-        </div>
-      </div>
-      <div className={classes.header}>
         <Info2>Info card</Info2>
         {!editing && (
-          <IconButton
+          <IconButton onClick={() => setEditing(true)} size="large">
-            className={classes.transparentButton}
-            onClick={() => setEditing(true)}
-            size="large">
             <EditIcon />
           </IconButton>
         )}
@@ -251,10 +201,10 @@ const TermsConditions = () => {
           setError(null)
         }}>
         {({ errors }) => (
-          <Form>
+          <Form className="flex flex-col gap-6">
             <PromptWhenDirty />
             {fields.map((f, idx) => (
-              <div className={classes.row} key={idx}>
+              <div className="flex gap-7" key={idx}>
                 <Field
                   editing={editing}
                   name={f.name}
@@ -268,7 +218,7 @@ const TermsConditions = () => {
                 />
               </div>
             ))}
-            <div className={classnames(classes.row, classes.submit)}>
+            <div className="flex gap-10">
               {editing && (
                 <>
                   <Link color="primary" type="submit">
@@ -288,7 +238,7 @@ const TermsConditions = () => {
         )}
       </Formik>
     </>
-  );
+  )
 }
 
 export default TermsConditions

new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { H4, P } from 'src/components/typography/index.jsx'
+import { HelpTooltip } from 'src/components/Tooltip.jsx'
+import { SupportLinkButton } from 'src/components/buttons/index.js'
+
+const Header = ({ title, tooltipText, articleUrl }) => (
+  <div className="flex items-center">
+    <H4>{title}</H4>
+    <HelpTooltip width={320}>
+      <P>{tooltipText}</P>
+      <SupportLinkButton
+        link={articleUrl}
+        label="Lamassu Support Article"
+        bottomSpace="1"
+      />
+    </HelpTooltip>
+  </div>
+)
+
+export default Header

new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import { Label1 } from 'src/components/typography'
+
+const InfoMessage = ({ Icon, children }) => (
+  <div className="flex my-13 gap-4">
+    <Icon />
+    <Label1 className="w-83 text-comet mt-1">{children}</Label1>
+  </div>
+)
+
+export default InfoMessage

new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx

@@ -0,0 +1,21 @@
+import React, { memo } from 'react'
+import { Label2, P } from 'src/components/typography/index.jsx'
+import Switch from '@mui/material/Switch'
+
+const SwitchRow = memo(({ title, disabled = false, checked, save }) => {
+  return (
+    <div className="flex justify-between w-99">
+      <P>{title}</P>
+      <div className="flex items-center">
+        <Switch
+          disabled={disabled}
+          checked={checked}
+          onChange={event => save && save(event.target.checked)}
+        />
+        <Label2>{checked ? 'Yes' : 'No'}</Label2>
+      </div>
+    </div>
+  )
+})
+
+export default SwitchRow

new-lamassu-admin/src/pages/Services/FormRenderer.jsx

@@ -1,5 +1,3 @@
-import Grid from '@mui/material/Grid'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { Formik, Form, FastField } from 'formik'
 import * as R from 'ramda'
@@ -8,29 +6,7 @@ import ErrorMessage from 'src/components/ErrorMessage'
 
 import { Button } from 'src/components/buttons'
 import { SecretInput } from 'src/components/inputs/formik'
-import { spacer } from 'src/styling/variables'
 
-const styles = {
-  footer: {
-    display: 'flex',
-    flexDirection: 'row',
-    margin: [['auto', 0, spacer * 4, 0]]
-  },
-  button: {
-    margin: [['auto', 0, 0, 'auto']]
-  },
-  form: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  grid: {
-    marginBottom: 24,
-    marginTop: 12
-  }
-}
-
-const useStyles = makeStyles(styles)
 const FormRenderer = ({
   validationSchema,
   elements,
@@ -40,8 +16,6 @@ const FormRenderer = ({
   buttonClass,
   xs = 12
 }) => {
-  const classes = useStyles()
-
   const initialValues = R.compose(
     R.mergeAll,
     R.map(({ code }) => ({ [code]: (value && value[code]) ?? '' }))
@@ -74,11 +48,11 @@ const FormRenderer = ({
       validationSchema={validationSchema}
       onSubmit={saveNonEmptySecret}>
       {({ errors }) => (
-        <Form className={classes.form}>
+        <Form className="flex flex-col flex-1">
-          <Grid container spacing={3} className={classes.grid}>
+          <div className="flex flex-col gap-3 mb-6 mt-3">
             {elements.map(
               ({ component, code, display, settings, inputProps }) => (
-                <Grid item xs={xs} key={code}>
+                <div key={code}>
                   <FastField
                     component={component}
                     {...inputProps}
@@ -87,18 +61,18 @@ const FormRenderer = ({
                     settings={settings}
                     fullWidth={true}
                   />
-                </Grid>
+                </div>
               )
             )}
-          </Grid>
+          </div>
-          <div className={classes.footer}>
+          <div className="flex flex-row mt-auto mb-8">
             {!R.isEmpty(R.mergeRight(errors, saveError)) && (
               <ErrorMessage>
                 {R.head(R.values(R.mergeRight(errors, saveError)))}
               </ErrorMessage>
             )}
             <Button
-              className={classnames(classes.button, buttonClass)}
+              className={classnames('mt-auto ml-auto', buttonClass)}
               type="submit">
               {buttonLabel}
             </Button>

new-lamassu-admin/src/pages/Services/Services.jsx

@@ -1,6 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import Grid from '@mui/material/Grid'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'
@@ -33,16 +31,6 @@ const SAVE_ACCOUNT = gql`
   }
 `
 
-const styles = {
-  wrapper: {
-    // widths + spacing is a little over 1200 on the design
-    // this adjusts the margin after a small reduction on card size
-    marginLeft: 1
-  }
-}
-
-const useStyles = makeStyles(styles)
-
 const Services = () => {
   const [editingSchema, setEditingSchema] = useState(null)
 
@@ -57,8 +45,6 @@ const Services = () => {
 
   const schemas = _schemas(markets)
 
-  const classes = useStyles()
-
   const accounts = data?.accounts ?? {}
 
   const getItems = (code, elements) => {
@@ -116,20 +102,19 @@ const Services = () => {
 
   return (
     !loading && (
-      <div className={classes.wrapper}>
+      <div>
         <TitleSection title="Third-Party services" />
-        <Grid container spacing={4}>
+        <div className="grid grid-cols-3 gap-5">
           {R.values(schemas).map(schema => (
-            <Grid item key={schema.code}>
+            <SingleRowTable
-              <SingleRowTable
+              key={schema.code}
-                editMessage={'Configure ' + schema.title}
+              editMessage={'Configure ' + schema.title}
-                title={schema.title}
+              title={schema.title}
-                onEdit={() => setEditingSchema(schema)}
+              onEdit={() => setEditingSchema(schema)}
-                items={getItems(schema.code, schema.elements)}
+              items={getItems(schema.code, schema.elements)}
-              />
+            />
-            </Grid>
           ))}
-        </Grid>
+        </div>
         {editingSchema && (
           <Modal
             title={`Edit ${editingSchema.name}`}