chore: deprecate material/Box

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

@@ -1,26 +0,0 @@
-import Box from '@mui/material/Box'
-import { makeStyles } from '@mui/styles'
-import React from 'react'
-import { Label1 } from 'src/components/typography'
-import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
-
-const useStyles = makeStyles({
-  message: ({ width }) => ({
-    width,
-    marginTop: 4,
-    marginLeft: 16
-  })
-})
-
-const InfoMessage = ({ children, width = 330, className }) => {
-  const classes = useStyles({ width })
-
-  return (
-    <Box display="flex" className={className}>
-      <WarningIcon />
-      <Label1 className={classes.message}>{children}</Label1>
-    </Box>
-  )
-}
-
-export default InfoMessage

new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx

@@ -1,13 +1,11 @@
-import Box from '@mui/material/Box'
 import MAutocomplete from '@mui/material/Autocomplete'
+import classnames from 'classnames'
 import sort from 'match-sorter'
 import * as R from 'ramda'
 import React from 'react'
 import { HoverableTooltip } from 'src/components/Tooltip'
 import { P } from 'src/components/typography'
 
-import { errorColor, orangeYellow, spring4 } from 'src/styling/variables'
-
 import TextInput from './TextInput'
 
 const Autocomplete = ({
@@ -104,34 +102,23 @@ const Autocomplete = ({
         if (!props.warning && !props.warningMessage)
           return <li {...iprops}>{R.path([labelProp])(props)}</li>
 
-        const warningColors = {
+        const className = {
-          clean: spring4,
+          'flex w-4 h-4 rounded-md': true,
-          partial: orangeYellow,
+          'bg-spring4': props.warning === 'clean',
-          important: errorColor
+          'bg-orange-yellow': props.warning === 'partial',
+          'bg-tomato': props.warning === 'important'
         }
 
-        const hoverableElement = (
+        const hoverableElement = <div className={classnames(className)} />
-          <Box
-            width={18}
-            height={18}
-            borderRadius="6px"
-            bgcolor={warningColors[props.warning]}
-          />
-        )
 
         return (
           <li {...iprops}>
-            <Box
+            <div className="flex flex-row justify-between items-center w-full">
-              width="100%"
+              <div className="flex">{R.path([labelProp])(props)}</div>
-              display="flex"
-              flexDirection="row"
-              justifyContent="space-between"
-              alignItems="center">
-              <Box>{R.path([labelProp])(props)}</Box>
               <HoverableTooltip parentElements={hoverableElement} width={250}>
                 <P>{props.warningMessage}</P>
               </HoverableTooltip>
-            </Box>
+            </div>
           </li>
         )
       }}

new-lamassu-admin/src/components/layout/TitleSection.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
@@ -52,15 +51,15 @@ const TitleSection = ({
           </>
         )}
       </div>
-      <Box display="flex" flexDirection="row" alignItems="center">
+      <div className="flex flex-row items-center">
         {(labels ?? []).map(({ icon, label }, idx) => (
-          <Box key={idx} display="flex" alignItems="center">
+          <div key={idx} className="flex items-center">
             <div className={classes.icon}>{icon}</div>
             <Label1 className={classes.label}>{label}</Label1>
-          </Box>
+          </div>
         ))}
         {appendixRight}
-      </Box>
+      </div>
       {children}
     </div>
   )

new-lamassu-admin/src/components/tables/DataTable.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
@@ -171,7 +170,7 @@ const DataTable = ({
   }
 
   return (
-    <Box display="flex" flex="1" flexDirection="column">
+    <div className="flex flex-1 flex-col">
       <Table className={classnames(classes.table, tableClassName)}>
         <THead>
           {elements.map(({ width, className, textAlign, header }, idx) => (
@@ -208,7 +207,7 @@ const DataTable = ({
           )}
         </TBody>
       </Table>
-    </Box>
+    </div>
   )
 }
 

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

@@ -331,7 +331,7 @@ const Analytics = () => {
           </div>
         </TitleSection>
         <div className="flex justify-between items-center mb-4">
-          <div className="flex flex-row gap-6">
+          <div className="flex gap-6">
             <Select
               label="Representing"
               onSelectedItemChange={handleRepresentationChange}
@@ -349,7 +349,7 @@ const Analytics = () => {
               defaultAsFilter
             />
           </div>
-          <div className="flex flex-row items-center gap-10">
+          <div className="flex items-center gap-10">
             <OverviewEntry
               label="Transactions"
               value={txs.current}

new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { getTimezoneOffset } from 'date-fns-tz'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -80,10 +79,10 @@ const HourOfDayBarGraphHeader = ({
       <div className={classes.graphHeaderWrapper}>
         <div className={classes.graphHeaderLeft}>
           <H2 noMargin>{title}</H2>
-          <Box className={classes.graphLegend}>
+          <div className={classes.graphLegend}>
             <LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
             <LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
-          </Box>
+          </div>
         </div>
         <div className={classes.graphHeaderRight}>
           {/* <RadioGroup

new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx

@@ -1,5 +1,4 @@
 import Switch from '@mui/material/Switch'
-import Box from '@mui/material/Box'
 import React, { useState } from 'react'
 import { H2, Label1 } from 'src/components/typography'
 
@@ -44,7 +43,7 @@ const OverTimeDotGraphHeader = ({
       <div className={classes.graphHeaderWrapper}>
         <div className={classes.graphHeaderLeft}>
           <H2 noMargin>{title}</H2>
-          <Box className={classes.graphLegend}>
+          <div className={classes.graphLegend}>
             <LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
             <LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
             <LegendEntry
@@ -52,7 +51,7 @@ const OverTimeDotGraphHeader = ({
               label={'One transaction'}
             />
             <LegendEntry IconElement={legend.median} label={'Median'} />
-          </Box>
+          </div>
         </div>
         <div className={classes.graphHeaderRight}>
           <div className={classes.graphHeaderSwitchBox}>

new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'
@@ -33,10 +32,10 @@ const TopMachinesBarGraphHeader = ({
       <div className={classes.graphHeaderWrapper}>
         <div className={classes.graphHeaderLeft}>
           <H2 noMargin>{title}</H2>
-          <Box className={classes.graphLegend}>
+          <div className={classes.graphLegend}>
             <LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
             <LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
-          </Box>
+          </div>
         </div>
         <div className={classes.graphHeaderRight}>
           {/* <RadioGroup

new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import Switch from '@mui/material/Switch'
 import React, { useState } from 'react'
 import { H2, Label1 } from 'src/components/typography'
@@ -51,10 +50,10 @@ const VolumeOverTimeGraphHeader = ({
       <div className={classes.graphHeaderWrapper}>
         <div className={classes.graphHeaderLeft}>
           <H2 noMargin>{title}</H2>
-          <Box className={classes.graphLegend}>
+          <div className={classes.graphLegend}>
             <LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
             <LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
-          </Box>
+          </div>
         </div>
         <div className={classes.graphHeaderRight}>
           <div className={classes.graphHeaderSwitchBox}>

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

@@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import Box from '@mui/material/Box'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import DialogActions from '@mui/material/DialogActions'
@@ -14,7 +13,12 @@ import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 import ReverseSettingsIcon from 'src/styling/icons/circle buttons/settings/white.svg?react'
 import SettingsIcon from 'src/styling/icons/circle buttons/settings/zodiac.svg?react'
 
-import { Link, Button, IconButton, SupportLinkButton } from 'src/components/buttons'
+import {
+  Link,
+  Button,
+  IconButton,
+  SupportLinkButton
+} from 'src/components/buttons'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
 import styles from './Blacklist.styles'
@@ -234,12 +238,8 @@ const Blacklist = () => {
           }
         ]}>
         {!advancedSettings && (
-          <Box display="flex" alignItems="center" justifyContent="flex-end">
+          <div className="flex items-center justify-end">
-            <Box
+            <div className="flex items-center justify-end mr-4">
-              display="flex"
-              alignItems="center"
-              justifyContent="end"
-              mr="15px">
               <P>Enable paper wallet (only)</P>
               <Switch
                 checked={enablePaperWalletOnly}
@@ -260,12 +260,8 @@ const Blacklist = () => {
                   to scan an address from their own wallet.
                 </P>
               </HelpTooltip>
-            </Box>
+            </div>
-            <Box
+            <div className="flex items-center justify-end mr-4">
-              display="flex"
-              alignItems="center"
-              justifyContent="flex-end"
-              mr="15px">
               <P>Reject reused addresses</P>
               <Switch
                 checked={rejectAddressReuse}
@@ -285,11 +281,11 @@ const Blacklist = () => {
                   label="Reject Address Reuse"
                 />
               </HelpTooltip>
-            </Box>
+            </div>
             <Link color="primary" onClick={() => setShowModal(true)}>
               Blacklist new addresses
             </Link>
-          </Box>
+          </div>
         )}
       </TitleSection>
       {!advancedSettings && (

new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import * as R from 'ramda'
@@ -55,11 +54,11 @@ const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
       </Formik>
       <div className={classes.footer}>
         {!R.isNil(errorMsg) && <ErrorMessage>{errorMsg}</ErrorMessage>}
-        <Box className={classes.submit}>
+        <div className="flex ml-auto">
           <Link type="submit" form="address-form">
             Blacklist address
           </Link>
-        </Box>
+        </div>
       </div>
     </Modal>
   )

new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client";
+import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client'
 import Breadcrumbs from '@mui/material/Breadcrumbs'
-import Box from '@mui/material/Box'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import Dialog from '@mui/material/Dialog'
@@ -637,10 +636,7 @@ const CustomerProfile = memo(() => {
         <div className={classes.rightSidePanel}>
           {isOverview && (
             <div>
-              <Box
+              <div className="flex justify-between mb-5">
-                className={classes.customerDetails}
-                display="flex"
-                justifyContent="space-between">
                 <CustomerDetails
                   customer={customerData}
                   photosData={photosData}
@@ -648,7 +644,7 @@ const CustomerProfile = memo(() => {
                   setShowCompliance={() => setShowCompliance(!showCompliance)}
                   timezone={timezone}
                 />
-              </Box>
+              </div>
               <div>
                 <TransactionsList
                   customer={customerData}

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

@@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -222,11 +221,11 @@ const Customers = () => {
           </div>
         }
         appendixRight={
-          <Box display="flex">
+          <div className="flex">
             <Link color="primary" onClick={() => setShowCreationModal(true)}>
               Add new user
             </Link>
-          </Box>
+          </div>
         }
         labels={[
           { label: 'Cash-in', icon: <TxInIcon /> },

new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { memo } from 'react'
@@ -51,9 +50,9 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
     })
 
   return (
-    <Box display="flex">
+    <div className="flex">
       <PhotosCard photosData={photosData} timezone={timezone} />
-      <Box display="flex" flexDirection="column">
+      <div className="flex flex-col">
         <div className={classes.name}>
           <IdIcon className={classes.idIcon} />
           <H2 noMargin>
@@ -64,7 +63,7 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
                 : getFormattedPhone(phone, locale.country)}
           </H2>
         </div>
-        <Box display="flex" mt="auto">
+        <div className="flex mt-auto">
           {elements.map(({ size, header }, idx) => (
             <Label1
               noMargin
@@ -74,8 +73,8 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
               {header}
             </Label1>
           ))}
-        </Box>
+        </div>
-        <Box display="flex">
+        <div className="flex">
           {elements.map(({ size, value }, idx) => (
             <P
               noMargin
@@ -85,9 +84,9 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
               {value}
             </P>
           ))}
-        </Box>
+        </div>
-      </Box>
+      </div>
-    </Box>
+    </div>
   )
 })
 

new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { memo } from 'react'
@@ -35,7 +34,7 @@ const IdCardPhotoCard = memo(({ customerData, updateCustomer }) => {
         updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED })
       }
       reject={() => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED })}>
-      <Box display="flex" flex="1" justifyContent="center" alignItems="center">
+      <div className="flex flex-1 justify-center items-center">
         {customerData.idCardPhotoPath ? (
           <img
             className={classes.idCardPhoto}
@@ -45,7 +44,7 @@ const IdCardPhotoCard = memo(({ customerData, updateCustomer }) => {
         ) : (
           <CrossedCameraIcon />
         )}
-      </Box>
+      </div>
     </PropertyCard>
   )
 })

new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { differenceInYears, format, parse } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { memo } from 'react'
@@ -77,11 +76,11 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
         updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED })
       }
       reject={() => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED })}>
-      <Box display="flex" alignItems="center">
+      <div className="flex items-center">
         {elements.map(({ header, display, size }, idx) => (
           <Field key={idx} label={header} display={display} size={size} />
         ))}
-      </Box>
+      </div>
     </PropertyCard>
   )
 })

new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx

@@ -1,5 +1,4 @@
 import { toUnit } from '@lamassu/coins/lightUtils'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
@@ -139,8 +138,8 @@ const TransactionsList = ({ customer, data, loading }) => {
   return (
     <>
       <H3>Transactions</H3>
-      <Box display="flex" flexDirection="column">
+      <div className="flex flex-col">
-        <Box display="flex" mt="auto">
+        <div className="flex mt-auto">
           {summaryElements.map(({ size, header }, idx) => (
             <Label1
               noMargin
@@ -150,8 +149,8 @@ const TransactionsList = ({ customer, data, loading }) => {
               {header}
             </Label1>
           ))}
-        </Box>
+        </div>
-        <Box display="flex">
+        <div className="flex">
           {summaryElements.map(({ size, value }, idx) => (
             <P
               noMargin
@@ -161,8 +160,8 @@ const TransactionsList = ({ customer, data, loading }) => {
               {value}
             </P>
           ))}
-        </Box>
+        </div>
-      </Box>
+      </div>
       <div className={classes.titleWrapper}>
         <div className={classnames(tableSpacingClasses)}>
           {loading ? (

new-lamassu-admin/src/pages/Customers/helper.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { parse, isValid, format } from 'date-fns/fp'
@@ -7,7 +6,7 @@ import { Field, useFormikContext } from 'formik'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import * as R from 'ramda'
 import { H4 } from 'src/components/typography'
-import { validate as uuidValidate } from 'uuid';
+import { validate as uuidValidate } from 'uuid'
 import * as Yup from 'yup'
 
 import {
@@ -224,9 +223,9 @@ const EntryType = ({ customInfoRequirementOptions }) => {
 
   return (
     <>
-      <Box display="flex" alignItems="center">
+      <div className="flex items-center">
         <H4>Type of entry</H4>
-      </Box>
+      </div>
       <Field
         component={RadioGroup}
         name="entryType"
@@ -237,9 +236,9 @@ const EntryType = ({ customInfoRequirementOptions }) => {
       />
       {displayCustomOptions && (
         <div>
-          <Box display="flex" alignItems="center">
+          <div className="flex items-center">
             <H4>Type of data</H4>
-          </Box>
+          </div>
           <Field
             component={RadioGroup}
             name="dataType"
@@ -252,9 +251,9 @@ const EntryType = ({ customInfoRequirementOptions }) => {
       )}
       {displayRequirementOptions && (
         <div>
-          <Box display="flex" alignItems="center">
+          <div className="flex items-center">
             <H4>Requirements</H4>
-          </Box>
+          </div>
           <Field
             component={RadioGroup}
             name="requirement"
@@ -310,9 +309,9 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
 
   return (
     <>
-      <Box display="flex" alignItems="center">
+      <div className="flex items-center">
         <H4>{title}</H4>
-      </Box>
+      </div>
       {isCustomInfoRequirement && (
         <Autocomplete
           fullWidth
@@ -344,7 +343,7 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
           }></Upload>
       )}
     </>
-  );
+  )
 }
 
 const customElements = {

new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx

@@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -67,9 +66,7 @@ const IndividualDiscounts = () => {
   const [showModal, setShowModal] = useState(false)
   const toggleModal = () => setShowModal(!showModal)
 
-  const { data: discountResponse, loading } = useQuery(
+  const { data: discountResponse, loading } = useQuery(GET_INDIVIDUAL_DISCOUNTS)
-    GET_INDIVIDUAL_DISCOUNTS
-  )
   const { data: customerData, loading: customerLoading } =
     useQuery(GET_CUSTOMERS)
 
@@ -157,16 +154,15 @@ const IndividualDiscounts = () => {
     <>
       {!loading && !R.isEmpty(discountResponse.individualDiscounts) && (
         <>
-          <Box
+          <div className="flex justify-end mb-8 -mt-14">
-            marginBottom={4}
+            <Link
-            marginTop={-7}
+              color="primary"
-            className={classes.tableWidth}
+              onClick={toggleModal}
-            display="flex"
+              className={classnames({ [classes.disabled]: customerLoading })}
-            justifyContent="flex-end">
+              disabled={customerLoading}>
-            <Link color="primary" onClick={toggleModal} className={classnames({[classes.disabled]: customerLoading})} disabled={customerLoading}>
               Add new code
             </Link>
-          </Box>
+          </div>
           <DataTable
             elements={elements}
             data={R.path(['individualDiscounts'])(discountResponse)}
@@ -186,13 +182,13 @@ const IndividualDiscounts = () => {
         </>
       )}
       {!loading && R.isEmpty(discountResponse.individualDiscounts) && (
-        <Box display="flex" alignItems="left" flexDirection="column">
+        <div className="flex items-start flex-col">
           <Label3>
             It seems there are no active individual customer discounts on your
             network.
           </Label3>
           <Button onClick={toggleModal}>Add individual discount</Button>
-        </Box>
+        </div>
       )}
       <IndividualDiscountModal
         showModal={showModal}

new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx

@@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -132,16 +131,11 @@ const PromoCodes = () => {
   return (
     <>
       {!loading && !R.isEmpty(codeResponse.promoCodes) && (
-        <Box
+        <div className="flex justify-end mb-8 -mt-14">
-          marginBottom={4}
-          marginTop={-7}
-          className={classes.tableWidth}
-          display="flex"
-          justifyContent="flex-end">
           <Link color="primary" onClick={toggleModal}>
             Add new code
           </Link>
-        </Box>
+        </div>
       )}
       {!loading && !R.isEmpty(codeResponse.promoCodes) && (
         <>
@@ -164,12 +158,12 @@ const PromoCodes = () => {
         </>
       )}
       {!loading && R.isEmpty(codeResponse.promoCodes) && (
-        <Box display="flex" alignItems="left" flexDirection="column">
+        <div className="flex flex-col items-start">
           <Label3>
             Currently, there are no active promo codes on your network.
           </Label3>
           <Button onClick={toggleModal}>Add Code</Button>
-        </Box>
+        </div>
       )}
       <PromoCodesModal
         showModal={showModal}

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
@@ -146,7 +145,7 @@ const DataTable = ({
   }
 
   return (
-    <Box display="flex" flex="1" flexDirection="column">
+    <div className="flex flex-1 flex-col">
       <Table className={classes.table}>
         <THead>
           {elements.map(({ width, className, textAlign, header }, idx) => (
@@ -181,7 +180,7 @@ const DataTable = ({
           </AutoSizer>
         </TBody>
       </Table>
-    </Box>
+    </div>
   )
 }
 

new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
 import DialogActions from '@mui/material/DialogActions'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -98,7 +97,11 @@ const SET_CASSETTE_BILLS = gql`
 `
 
 const GET_BATCHES_CSV = gql`
-  query cashboxBatchesCsv($from: DateTimeISO, $until: DateTimeISO, $timezone: String) {
+  query cashboxBatchesCsv(
+    $from: DateTimeISO
+    $until: DateTimeISO
+    $timezone: String
+  ) {
     cashboxBatchesCsv(from: $from, until: $until, timezone: $timezone)
   }
 `
@@ -202,155 +205,155 @@ const CashCassettes = () => {
     />
   )
 
-  return (!dataLoading && (<>
+  return (
-    <TitleSection
+    !dataLoading && (
-      title="Cash boxes & cassettes"
-      buttons={[
-        {
-          text: 'Cash box history',
-          icon: HistoryIcon,
-          inverseIcon: ReverseHistoryIcon,
-          toggle: setShowHistory
-        },
-        {
-          component: showHistory ? (
-            <LogsDowloaderPopover
-              className={classes.downloadLogsButton}
-              title="Download logs"
-              name="cashboxHistory"
-              query={GET_BATCHES_CSV}
-              getLogs={logs => R.path(['cashboxBatchesCsv'])(logs)}
-              timezone={timezone}
-              args={{ timezone }}
-            />
-          ) : (
-            <></>
-          )
-        }
-      ]}
-      iconClassName={classes.listViewButton}
-      className={classes.tableWidth}
-      appendix={
-        <HelpTooltip width={220}>
-          <P>
-            For details on configuring cash boxes and cassettes, please read
-            the relevant knowledgebase article:
-          </P>
-          <SupportLinkButton
-            link="https://support.lamassu.is/hc/en-us/articles/4420839641229-Cash-Boxes-Cassettess"
-            label="Cash Boxes & Cassettes"
-            bottomSpace="1"
-          />
-        </HelpTooltip>
-      }>
-      {!showHistory && (
-        <Box alignItems="center" justifyContent="flex-end">
-          <Label1 className={classes.cashboxReset}>Cash box resets</Label1>
-          <Box
-            display="flex"
-            alignItems="center"
-            justifyContent="end"
-            mr="-4px">
-            {cashboxReset && (
-              <P className={classes.selection}>
-                {onlyFirstToUpper(cashboxReset)}
-              </P>
-            )}
-            <IconButton
-              onClick={() => setEditingSchema(true)}
-              className={classes.button}
-              size="large">
-              <EditIcon />
-            </IconButton>
-          </Box>
-        </Box>
-      )}
-    </TitleSection>
-    {!showHistory && (
       <>
-        <DataTable
+        <TitleSection
-          loading={dataLoading}
+          title="Cash boxes & cassettes"
-          elements={elements}
+          buttons={[
-          data={machines}
+            {
-          Details={InnerCashUnitDetails}
+              text: 'Cash box history',
-          emptyText="No machines so far"
+              icon: HistoryIcon,
-          expandable
+              inverseIcon: ReverseHistoryIcon,
-          tableClassName={classes.dataTable}
+              toggle: setShowHistory
-        />
+            },
+            {
+              component: showHistory ? (
+                <LogsDowloaderPopover
+                  className={classes.downloadLogsButton}
+                  title="Download logs"
+                  name="cashboxHistory"
+                  query={GET_BATCHES_CSV}
+                  getLogs={logs => R.path(['cashboxBatchesCsv'])(logs)}
+                  timezone={timezone}
+                  args={{ timezone }}
+                />
+              ) : (
+                <></>
+              )
+            }
+          ]}
+          iconClassName={classes.listViewButton}
+          className={classes.tableWidth}
+          appendix={
+            <HelpTooltip width={220}>
+              <P>
+                For details on configuring cash boxes and cassettes, please read
+                the relevant knowledgebase article:
+              </P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/4420839641229-Cash-Boxes-Cassettess"
+                label="Cash Boxes & Cassettes"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
+          }>
+          {!showHistory && (
+            <div className="flex items-center justify-end">
+              <Label1 className={classes.cashboxReset}>Cash box resets</Label1>
+              <div className="flex items-center justify-end -mr-1">
+                {cashboxReset && (
+                  <P className={classes.selection}>
+                    {onlyFirstToUpper(cashboxReset)}
+                  </P>
+                )}
+                <IconButton
+                  onClick={() => setEditingSchema(true)}
+                  className={classes.button}
+                  size="large">
+                  <EditIcon />
+                </IconButton>
+              </div>
+            </div>
+          )}
+        </TitleSection>
+        {!showHistory && (
+          <>
+            <DataTable
+              loading={dataLoading}
+              elements={elements}
+              data={machines}
+              Details={InnerCashUnitDetails}
+              emptyText="No machines so far"
+              expandable
+              tableClassName={classes.dataTable}
+            />
 
-        {data && R.isEmpty(machines) && (
+            {data && R.isEmpty(machines) && (
-          <EmptyTable message="No machines so far" />
+              <EmptyTable message="No machines so far" />
+            )}
+          </>
+        )}
+        {showHistory && (
+          <CashboxHistory
+            machines={R.concat(machines, unpairedMachines)}
+            currency={fiatCurrency}
+            timezone={timezone}
+          />
+        )}
+        <CashCassettesFooter
+          currencyCode={fiatCurrency}
+          machines={machines}
+          config={config}
+          bills={R.path(['bills'])(data)}
+          deviceIds={deviceIds}
+        />
+        {wizard && (
+          <Wizard
+            machine={R.find(R.propEq('id', machineId), machines)}
+            cashoutSettings={getCashoutSettings(machineId)}
+            onClose={() => {
+              setWizard(false)
+            }}
+            error={error?.message}
+            save={onSave}
+            locale={locale}
+          />
+        )}
+        {editingSchema && (
+          <Modal
+            title={'Cash box resets'}
+            width={478}
+            handleClose={() => setEditingSchema(null)}
+            open={true}>
+            <P className={classes.descriptions}>
+              We can automatically assume you emptied a bill validator's cash
+              box when the machine detects that it has been removed.
+            </P>
+            <RadioGroup
+              name="set-automatic-reset"
+              value={selectedRadio ?? cashboxReset}
+              options={[radioButtonOptions[0]]}
+              onChange={handleRadioButtons}
+              className={classes.radioButtons}
+            />
+            <P className={classes.descriptions}>
+              Assume the cash box is emptied whenever it's removed, creating a
+              new batch on the history screen and setting its current balance to
+              zero.
+            </P>
+            <RadioGroup
+              name="set-manual-reset"
+              value={selectedRadio ?? cashboxReset}
+              options={[radioButtonOptions[1]]}
+              onChange={handleRadioButtons}
+              className={classes.radioButtons}
+            />
+            <P className={classes.descriptions}>
+              Cash boxes won't be assumed emptied when removed, nor their counts
+              modified. Instead, to update the count and create a new batch,
+              you'll click the 'Edit' button on this panel.
+            </P>
+            <DialogActions className={classes.actions}>
+              <Button onClick={() => saveCashboxOption(selectedRadio)}>
+                Confirm
+              </Button>
+            </DialogActions>
+          </Modal>
         )}
       </>
-    )}
+    )
-    {showHistory && (
+  )
-      <CashboxHistory
-        machines={R.concat(machines, unpairedMachines)}
-        currency={fiatCurrency}
-        timezone={timezone}
-      />
-    )}
-    <CashCassettesFooter
-      currencyCode={fiatCurrency}
-      machines={machines}
-      config={config}
-      bills={R.path(['bills'])(data)}
-      deviceIds={deviceIds}
-    />
-    {wizard && (
-      <Wizard
-        machine={R.find(R.propEq('id', machineId), machines)}
-        cashoutSettings={getCashoutSettings(machineId)}
-        onClose={() => {
-          setWizard(false)
-        }}
-        error={error?.message}
-        save={onSave}
-        locale={locale}
-      />
-    )}
-    {editingSchema && (
-      <Modal
-        title={'Cash box resets'}
-        width={478}
-        handleClose={() => setEditingSchema(null)}
-        open={true}>
-        <P className={classes.descriptions}>
-          We can automatically assume you emptied a bill validator's cash
-          box when the machine detects that it has been removed.
-        </P>
-        <RadioGroup
-          name="set-automatic-reset"
-          value={selectedRadio ?? cashboxReset}
-          options={[radioButtonOptions[0]]}
-          onChange={handleRadioButtons}
-          className={classes.radioButtons}
-        />
-        <P className={classes.descriptions}>
-          Assume the cash box is emptied whenever it's removed, creating a
-          new batch on the history screen and setting its current balance to
-          zero.
-        </P>
-        <RadioGroup
-          name="set-manual-reset"
-          value={selectedRadio ?? cashboxReset}
-          options={[radioButtonOptions[1]]}
-          onChange={handleRadioButtons}
-          className={classes.radioButtons}
-        />
-        <P className={classes.descriptions}>
-          Cash boxes won't be assumed emptied when removed, nor their counts
-          modified. Instead, to update the count and create a new batch,
-          you'll click the 'Edit' button on this panel.
-        </P>
-        <DialogActions className={classes.actions}>
-          <Button onClick={() => saveCashboxOption(selectedRadio)}>
-            Confirm
-          </Button>
-        </DialogActions>
-      </Modal>
-    )}
-  </>));
 }
 
 export default CashCassettes

new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx

@@ -1,6 +1,5 @@
-import { useLazyQuery, useMutation, gql } from "@apollo/client";
+import { useLazyQuery, useMutation, gql } from '@apollo/client'
 import { toUnit, formatCryptoAddress } from '@lamassu/coins/lightUtils'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
@@ -249,7 +248,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
 
         <div data-cy="availableIds" className={classes.availableIds}>
           <Label>Available IDs</Label>
-          <Box display="flex" flexDirection="row">
+          <div className="flex">
             {tx.customerPhone && (
               <IDButton
                 className={classes.idButton}
@@ -330,7 +329,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
                 />
               </IDButton>
             )}
-          </Box>
+          </div>
         </div>
         <div data-cy="exchangeRate" className={classes.exchangeRate}>
           <Label>Exchange rate</Label>

new-lamassu-admin/src/pages/Triggers/TriggerView.jsx

@@ -1,5 +1,4 @@
-import { useMutation, gql } from "@apollo/client";
+import { useMutation, gql } from '@apollo/client'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -52,9 +51,9 @@ const TriggerView = ({
   }
 
   const add = rawConfig => {
-    const toSave = R.concat([{ id: uuidv4(), direction: 'both', ...rawConfig }])(
+    const toSave = R.concat([
-      triggers
+      { id: uuidv4(), direction: 'both', ...rawConfig }
-    )
+    ])(triggers)
     return saveConfig({ variables: { config: { triggers: toServer(toSave) } } })
   }
 
@@ -85,12 +84,12 @@ const TriggerView = ({
         />
       )}
       {R.isEmpty(triggers) && (
-        <Box display="flex" alignItems="center" flexDirection="column" mt={15}>
+        <div className="flex items-center flex-col mt-30">
           <H2>
             It seems there are no active compliance triggers on your network
           </H2>
           <Button onClick={addNewTriger}>Add first trigger</Button>
-        </Box>
+        </div>
       )}
     </>
   )

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

@@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import Box from '@mui/material/Box'
 import Switch from '@mui/material/Switch'
 import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
@@ -169,12 +168,8 @@ const Triggers = () => {
         ]}
         className={classnames(titleSectionWidth)}>
         {!subMenu && (
-          <Box display="flex" alignItems="center">
+          <div className="flex items-center">
-            <Box
+            <div className="flex items-center justify-end -mr-1">
-              display="flex"
-              alignItems="center"
-              justifyContent="flex-end"
-              mr="-5px">
               <P>Reject reused addresses</P>
               <Switch
                 checked={rejectAddressReuse}
@@ -196,25 +191,25 @@ const Triggers = () => {
                   label="Reject Address Reuse"
                 />
               </HelpTooltip>
-            </Box>
+            </div>
-          </Box>
+          </div>
         )}
         {subMenu === 'customInfoRequests' &&
           !R.isEmpty(enabledCustomInfoRequests) && (
-            <Box display="flex" justifyContent="flex-end">
+            <div className="flex justify-end">
               <Link
                 color="primary"
                 onClick={() => toggleWizard('newCustomRequest')()}>
                 + Add new custom info request
               </Link>
-            </Box>
+            </div>
           )}
         {!loading && !subMenu && !R.isEmpty(triggers) && (
-          <Box display="flex" justifyContent="flex-end">
+          <div className="flex justify-end">
             <Link color="primary" onClick={addNewTriger}>
               + Add new trigger
             </Link>
-          </Box>
+          </div>
         )}
       </TitleSection>
       {!loading && subMenu === 'customInfoRequests' && (

new-lamassu-admin/src/pages/Triggers/helper.jsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
@@ -363,9 +362,9 @@ const Type = ({ ...props }) => {
 
   return (
     <>
-      <Box display="flex" alignItems="center">
+      <div className="flex items-center">
         <H4 className={classnames(typeClass)}>Choose trigger type</H4>
-      </Box>
+      </div>
       <Field
         component={RadioGroup}
         name="triggerType"
@@ -623,9 +622,9 @@ const Requirement = ({
 
   return (
     <>
-      <Box display="flex" alignItems="center">
+      <div className="flex items-center">
         <H4 className={classnames(titleClass)}>Choose a requirement</H4>
-      </Box>
+      </div>
       <Field
         component={RadioGroup}
         name="requirement.requirement"
@@ -749,7 +748,7 @@ const RequirementInput = ({ customInfoRequests = [] }) => {
     : getView(requirementOptions, 'display')(requirement)
 
   return (
-    <Box display="flex" alignItems="baseline">
+    <div className="flex items-baseline">
       {`${display} ${isSuspend ? 'for' : ''}`}
       {isSuspend && (
         <Field
@@ -761,7 +760,7 @@ const RequirementInput = ({ customInfoRequests = [] }) => {
         />
       )}
       {isSuspend && 'days'}
-    </Box>
+    </div>
   )
 }
 
@@ -783,7 +782,7 @@ const RequirementView = ({
         : getView(requirementOptions, 'display')(requirement)
   const isSuspend = requirement === 'suspend'
   return (
-    <Box display="flex" alignItems="baseline">
+    <div className="flex items-baseline">
       {`${display} ${isSuspend ? 'for' : ''}`}
       {isSuspend && (
         <Info2 className={classes.space} noMargin>
@@ -791,7 +790,7 @@ const RequirementView = ({
         </Info2>
       )}
       {isSuspend && 'days'}
-    </Box>
+    </div>
   )
 }
 
@@ -833,16 +832,16 @@ const DisplayThreshold = ({ config, currency, isEdit }) => {
   switch (config?.triggerType) {
     case 'txAmount':
       return (
-        <Box display="flex" alignItems="baseline" justifyContent="right">
+        <div className="flex items-baseline justify-end">
           {Threshold}
           <Label2 noMargin className={classes.lastSpace}>
             {currency}
           </Label2>
-        </Box>
+        </div>
       )
     case 'txVolume':
       return (
-        <Box display="flex" alignItems="baseline" justifyContent="right">
+        <div className="flex items-baseline justify-end">
           {Threshold}
           <Label2 noMargin className={classes.lastSpace}>
             {currency}
@@ -854,11 +853,11 @@ const DisplayThreshold = ({ config, currency, isEdit }) => {
           <Label1 noMargin className={classes.lastSpace}>
             days
           </Label1>
-        </Box>
+        </div>
       )
     case 'txVelocity':
       return (
-        <Box display="flex" alignItems="baseline" justifyContent="right">
+        <div className="flex items-baseline justify-end">
           {Threshold}
           <Label1 className={classes.space} noMargin>
             transactions in
@@ -867,16 +866,16 @@ const DisplayThreshold = ({ config, currency, isEdit }) => {
           <Label1 className={classes.lastSpace} noMargin>
             days
           </Label1>
-        </Box>
+        </div>
       )
     case 'consecutiveDays':
       return (
-        <Box display="flex" alignItems="baseline" justifyContent="right">
+        <div className="flex items-baseline justify-end">
           {ThresholdDays}
           <Label1 className={classes.lastSpace} noMargin>
             days
           </Label1>
-        </Box>
+        </div>
       )
     default:
       return ''

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

@@ -1,6 +1,5 @@
-import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client";
+import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client'
 import Chip from '@mui/material/Chip'
-import Box from '@mui/material/Box'
 import Switch from '@mui/material/Switch'
 import { makeStyles } from '@mui/styles'
 import { startAttestation } from '@simplewebauthn/browser'
@@ -242,24 +241,21 @@ const Users = () => {
 
   return (
     <>
-      <TitleSection title="User management" />
+      <TitleSection
-      <Box
+        title="User management"
-        marginBottom={3}
+        appendixRight={
-        marginTop={-5}
+          <Link
-        className={classes.tableWidth}
+            color="primary"
-        display="flex"
+            onClick={() => {
-        justifyContent="flex-end">
+              dispatch({
-        <Link
+                type: 'open',
-          color="primary"
+                payload: 'showCreateUserModal'
-          onClick={() => {
+              })
-            dispatch({
+            }}>
-              type: 'open',
+            Add new user
-              payload: 'showCreateUserModal'
+          </Link>
-            })
+        }
-          }}>
+      />
-          Add new user
-        </Link>
-      </Box>
       <DataTable elements={elements} data={R.path(['users'])(userResponse)} />
       <CreateUserModal state={state} dispatch={dispatch} />
       <ResetPasswordModal

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

@@ -1,4 +1,4 @@
-import { useQuery, gql } from "@apollo/client";
+import { useQuery, gql } from '@apollo/client'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import { makeStyles } from '@mui/styles'

new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx

@@ -1,12 +1,11 @@
-import { useMutation, useQuery, gql } from "@apollo/client";
+import { useMutation, useQuery, gql } from '@apollo/client'
-import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { useState } from 'react'
-import InfoMessage from 'src/components/InfoMessage'
 import { HelpTooltip } from 'src/components/Tooltip'
-import { H1, H4, P } from 'src/components/typography'
+import { H1, H4, Label1, P } from 'src/components/typography'
 import FormRenderer from 'src/pages/Services/FormRenderer'
+import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
 
 import { Button, SupportLinkButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
@@ -98,7 +97,7 @@ function Twilio({ doContinue }) {
     <div className={classes.wrapper}>
       <div className={classes.content}>
         <H1>Twilio (SMS service)</H1>
-        <Box display="flex" alignItems="end">
+        <div className="flex items-end">
           <H4 noMargin className={classnames(titleClasses)}>
             Will you setup a two way machine or compliance?
           </H4>
@@ -112,7 +111,7 @@ function Twilio({ doContinue }) {
               compliance triggers
             </P>
           </HelpTooltip>
-        </Box>
+        </div>
 
         <RadioGroup
           labelClassName={classes.radioLabel}
@@ -122,9 +121,13 @@ function Twilio({ doContinue }) {
           onChange={onSelect}
         />
 
-        <InfoMessage className={classes.info}>
+        <div className="flex gap-4 mt-5 mb-8 items-center">
-          To set up Twilio please read the instructions from our support portal.
+          <WarningIcon />
-        </InfoMessage>
+          <Label1 noMargin>
+            To set up Twilio please read the instructions from our support
+            portal.
+          </Label1>
+        </div>
         <SupportLinkButton
           link="https://support.lamassu.is/hc/en-us/articles/115001203951-Twilio-for-SMS"
           label="Twilio for SMS"

new-lamassu-admin/src/styling/global/global.css

@@ -11,6 +11,8 @@
   --spring: #48f694;
   --spring2: #44e188;
   --spring3: #ecfbef;
+  --spring4: #3fd07e;
+
 
   --comet: #5f668a;
   --comet2: #72799d;
@@ -24,6 +26,7 @@
   --java: #16d6d3;
   --neon: #5a67ff;
   --malachite: #00CD5A;
+  --orange-yellow: #ffcc00;
 }
 
 @theme {
@@ -31,6 +34,7 @@
   --color-spring: var(--spring);
   --color-spring2: var(--spring2);
   --color-spring3: var(--spring3);
+  --color-spring4: var(--spring4);
   --color-comet: var(--comet);
   --color-comet2: var(--comet2);
   --color-comet3: var(--comet3);
@@ -38,6 +42,7 @@
   --color-ghost: var(--ghost);
   --color-zircon: var(--zircon);
   --color-malachite: var(--malachite);
+  --color-orange-yellow: var(--orange-yellow);
 }
 
 body {