chore: deprecate material/Box

2025-04-29 09:14:44 +01:00 · 2025-04-29 09:14:44 +01:00 · 7b983d820d
commit 7b983d820d
parent 92ccd8cb92
30 changed files with 312 additions and 384 deletions
--- a/new-lamassu-admin/src/components/InfoMessage.jsx
+++ b/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
--- a/new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx
+++ b/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 = {
-          clean: spring4,
-          partial: orangeYellow,
-          important: errorColor
+        const className = {
+          'flex w-4 h-4 rounded-md': true,
+          'bg-spring4': props.warning === 'clean',
+          'bg-orange-yellow': props.warning === 'partial',
+          'bg-tomato': props.warning === 'important'
        }

-        const hoverableElement = (
-          <Box
-            width={18}
-            height={18}
-            borderRadius="6px"
-            bgcolor={warningColors[props.warning]}
-          />
-        )
+        const hoverableElement = <div className={classnames(className)} />

        return (
          <li {...iprops}>
-            <Box
-              width="100%"
-              display="flex"
-              flexDirection="row"
-              justifyContent="space-between"
-              alignItems="center">
-              <Box>{R.path([labelProp])(props)}</Box>
+            <div className="flex flex-row justify-between items-center w-full">
+              <div className="flex">{R.path([labelProp])(props)}</div>
              <HoverableTooltip parentElements={hoverableElement} width={250}>
                <P>{props.warningMessage}</P>
              </HoverableTooltip>
-            </Box>
+            </div>
          </li>
        )
      }}
--- a/new-lamassu-admin/src/components/layout/TitleSection.jsx
+++ b/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>
  )
--- a/new-lamassu-admin/src/components/tables/DataTable.jsx
+++ b/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>
  )
 }

--- a/new-lamassu-admin/src/pages/Analytics/Analytics.jsx
+++ b/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}
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.jsx
+++ b/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
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx
+++ b/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}>
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx
+++ b/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
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx
+++ b/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}>
--- a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx
+++ b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx
@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
-import Box from '@mui/material/Box'
+import { useQuery, useMutation, gql } from '@apollo/client'
 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">
-            <Box
-              display="flex"
-              alignItems="center"
-              justifyContent="end"
-              mr="15px">
+          <div className="flex items-center justify-end">
+            <div className="flex items-center justify-end mr-4">
              <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>
-            <Box
-              display="flex"
-              alignItems="center"
-              justifyContent="flex-end"
-              mr="15px">
+            </div>
+            <div className="flex items-center justify-end mr-4">
              <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 && (
--- a/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx
+++ b/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>
  )
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx
+++ b/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
-                className={classes.customerDetails}
-                display="flex"
-                justifyContent="space-between">
+              <div className="flex justify-between mb-5">
                <CustomerDetails
                  customer={customerData}
                  photosData={photosData}
@ -648,7 +644,7 @@ const CustomerProfile = memo(() => {
                  setShowCompliance={() => setShowCompliance(!showCompliance)}
                  timezone={timezone}
                />
-              </Box>
+              </div>
              <div>
                <TransactionsList
                  customer={customerData}
--- a/new-lamassu-admin/src/pages/Customers/Customers.jsx
+++ b/new-lamassu-admin/src/pages/Customers/Customers.jsx
@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
-import Box from '@mui/material/Box'
+import { useQuery, useMutation, gql } from '@apollo/client'
 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 /> },
--- a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx
+++ b/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>
-        <Box display="flex">
+        </div>
+        <div className="flex">
          {elements.map(({ size, value }, idx) => (
            <P
              noMargin
@ -85,9 +84,9 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
              {value}
            </P>
          ))}
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
  )
 })

--- a/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx
+++ b/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>
  )
 })
--- a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx
+++ b/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>
  )
 })
--- a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx
+++ b/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">
-        <Box display="flex" mt="auto">
+      <div className="flex flex-col">
+        <div className="flex mt-auto">
          {summaryElements.map(({ size, header }, idx) => (
            <Label1
              noMargin
@ -150,8 +149,8 @@ const TransactionsList = ({ customer, data, loading }) => {
              {header}
            </Label1>
          ))}
-        </Box>
-        <Box display="flex">
+        </div>
+        <div className="flex">
          {summaryElements.map(({ size, value }, idx) => (
            <P
              noMargin
@ -161,8 +160,8 @@ const TransactionsList = ({ customer, data, loading }) => {
              {value}
            </P>
          ))}
-        </Box>
-      </Box>
+        </div>
+      </div>
      <div className={classes.titleWrapper}>
        <div className={classnames(tableSpacingClasses)}>
          {loading ? (
--- a/new-lamassu-admin/src/pages/Customers/helper.jsx
+++ b/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 = {
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx
+++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx
@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
-import Box from '@mui/material/Box'
+import { useQuery, useMutation, gql } from '@apollo/client'
 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(
-    GET_INDIVIDUAL_DISCOUNTS
-  )
+  const { data: discountResponse, loading } = useQuery(GET_INDIVIDUAL_DISCOUNTS)
  const { data: customerData, loading: customerLoading } =
    useQuery(GET_CUSTOMERS)

@ -157,16 +154,15 @@ const IndividualDiscounts = () => {
    <>
      {!loading && !R.isEmpty(discountResponse.individualDiscounts) && (
        <>
-          <Box
-            marginBottom={4}
-            marginTop={-7}
-            className={classes.tableWidth}
-            display="flex"
-            justifyContent="flex-end">
-            <Link color="primary" onClick={toggleModal} className={classnames({[classes.disabled]: customerLoading})} disabled={customerLoading}>
+          <div className="flex justify-end mb-8 -mt-14">
+            <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}
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx
+++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx
@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
-import Box from '@mui/material/Box'
+import { useQuery, useMutation, gql } from '@apollo/client'
 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
-          marginBottom={4}
-          marginTop={-7}
-          className={classes.tableWidth}
-          display="flex"
-          justifyContent="flex-end">
+        <div className="flex justify-end mb-8 -mt-14">
          <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}
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.jsx
+++ b/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>
  )
 }

--- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx
+++ b/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 && (<>
-    <TitleSection
-      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 && (
+  return (
+    !dataLoading && (
      <>
-        <DataTable
-          loading={dataLoading}
-          elements={elements}
-          data={machines}
-          Details={InnerCashUnitDetails}
-          emptyText="No machines so far"
-          expandable
-          tableClassName={classes.dataTable}
-        />
+        <TitleSection
+          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 && (
+            <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) && (
-          <EmptyTable message="No machines so far" />
+            {data && R.isEmpty(machines) && (
+              <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
--- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx
+++ b/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>
--- a/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx
+++ b/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx
@ -1,5 +1,4 @@
-import { useMutation, gql } from "@apollo/client";
-import Box from '@mui/material/Box'
+import { useMutation, gql } from '@apollo/client'
 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 }])(
-      triggers
-    )
+    const toSave = R.concat([
+      { 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>
      )}
    </>
  )
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.jsx
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.jsx
@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
-import Box from '@mui/material/Box'
+import { useQuery, useMutation, gql } from '@apollo/client'
 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">
-            <Box
-              display="flex"
-              alignItems="center"
-              justifyContent="flex-end"
-              mr="-5px">
+          <div className="flex items-center">
+            <div className="flex items-center justify-end -mr-1">
              <P>Reject reused addresses</P>
              <Switch
                checked={rejectAddressReuse}
@ -196,25 +191,25 @@ const Triggers = () => {
                  label="Reject Address Reuse"
                />
              </HelpTooltip>
-            </Box>
-          </Box>
+            </div>
+          </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' && (
--- a/new-lamassu-admin/src/pages/Triggers/helper.jsx
+++ b/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 ''
--- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx
+++ b/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" />
-      <Box
-        marginBottom={3}
-        marginTop={-5}
-        className={classes.tableWidth}
-        display="flex"
-        justifyContent="flex-end">
-        <Link
-          color="primary"
-          onClick={() => {
-            dispatch({
-              type: 'open',
-              payload: 'showCreateUserModal'
-            })
-          }}>
-          Add new user
-        </Link>
-      </Box>
+      <TitleSection
+        title="User management"
+        appendixRight={
+          <Link
+            color="primary"
+            onClick={() => {
+              dispatch({
+                type: 'open',
+                payload: 'showCreateUserModal'
+              })
+            }}>
+            Add new user
+          </Link>
+        }
+      />
      <DataTable elements={elements} data={R.path(['users'])(userResponse)} />
      <CreateUserModal state={state} dispatch={dispatch} />
      <ResetPasswordModal
--- a/new-lamassu-admin/src/pages/Wizard/Wizard.jsx
+++ b/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'
--- a/new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx
+++ b/new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx
@ -1,12 +1,11 @@
-import { useMutation, useQuery, gql } from "@apollo/client";
-import Box from '@mui/material/Box'
+import { useMutation, useQuery, gql } from '@apollo/client'
 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}>
-          To set up Twilio please read the instructions from our support portal.
-        </InfoMessage>
+        <div className="flex gap-4 mt-5 mb-8 items-center">
+          <WarningIcon />
+          <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"
--- a/new-lamassu-admin/src/styling/global/global.css
+++ b/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 {