partial: second batch of components

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

@@ -1,27 +1,27 @@
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
+import IconButton from '@mui/material/IconButton'
 import InputLabel from '@mui/material/InputLabel'
 import React, { memo, useState } from 'react'
 import { H4, P } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
-import { Button, IconButton } from 'src/components/buttons'
+import { Button } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs'
 
 import ErrorMessage from './ErrorMessage'
+import SvgIcon from '@mui/material/SvgIcon'
 
 export const DialogTitle = ({ children, onClose }) => {
   return (
     <div className="p-4 pr-3 flex justify-between">
       {children}
       {onClose && (
-        <IconButton
+        <IconButton aria-label="close" onClick={onClose} className="p-0 -mt-1">
-          size={16}
+          <SvgIcon fontSize="small">
-          aria-label="close"
+            <CloseIcon />
-          onClick={onClose}
+          </SvgIcon>
-          className="p-0 -mt-1">
-          <CloseIcon />
         </IconButton>
       )}
     </div>

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

@@ -37,7 +37,9 @@ const CopyToClipboard = ({
     <div className={classnames('flex items-center', wrapperClassname)}>
       {children && (
         <>
-          <Mono noMargin className={className}>
+          <Mono
+            noMargin
+            className={classnames('linebreak-anywhere', className)}>
             {children}
           </Mono>
           <div className={buttonClassname}>

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

@@ -1,25 +1,25 @@
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
+import IconButton from '@mui/material/IconButton'
 import React from 'react'
 import { H4, P } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
-import { Button, IconButton } from 'src/components/buttons'
+import { Button } from 'src/components/buttons'
 
 import ErrorMessage from './ErrorMessage'
+import SvgIcon from '@mui/material/SvgIcon'
 
 export const DialogTitle = ({ children, close }) => {
   return (
     <div className="p-4 pr-3 flex justify-between m-0">
       {children}
       {close && (
-        <IconButton
+        <IconButton aria-label="close" onClick={close} className="p-0 -mt-1">
-          size={16}
+          <SvgIcon fontSize="small">
-          aria-label="close"
+            <CloseIcon />
-          onClick={close}
+          </SvgIcon>
-          className="p-0 -mt-1">
-          <CloseIcon />
         </IconButton>
       )}
     </div>

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

@@ -21,8 +21,8 @@ const ImagePopper = memo(
 
     const popperOpen = Boolean(popperAnchorEl)
 
-    const Image = ({ className }) => (
+    const Image = ({ className, style }) => (
-      <img className={classnames(className)} src={src} alt="" />
+      <img className={classnames(className)} style={style} src={src} alt="" />
     )
 
     return (
@@ -35,12 +35,12 @@ const ImagePopper = memo(
           <FeatureButton
             Icon={ZoomIcon}
             InverseIcon={ZoomIconInverse}
-            className="rounded-br-lg"
+            className="rounded-none rounded-tr-lg rounded-br-lg"
             style={{ height }}
             onClick={handleOpenPopper}
           />
           <Popper open={popperOpen} anchorEl={popperAnchorEl} placement="top">
-            <div className="block py-2 px-4">
+            <div className="py-2 px-4">
               <Image
                 className="object-cover"
                 style={{ width: popupWidth, height: popupHeight }}

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

@@ -1,11 +1,11 @@
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
+import SvgIcon from '@mui/material/SvgIcon'
+import IconButton from '@mui/material/IconButton'
 import React, { memo } from 'react'
 import { H1 } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
-import { IconButton } from 'src/components/buttons'
-
 export const InformativeDialog = memo(
   ({ title = '', open, onDissmised, disabled = false, data, ...props }) => {
     const innerOnClose = () => {
@@ -24,7 +24,10 @@ export const InformativeDialog = memo(
         aria-labelledby="form-dialog-title"
         {...props}>
         <div className="flex justify-end pt-4 pr-3 pb-0 pl-4">
-          <IconButton size={16} aria-label="close" onClick={innerOnClose}>
+          <IconButton aria-label="close" onClick={innerOnClose}>
+            <SvgIcon fontSize="small">
+              <CloseIcon />
+            </SvgIcon>
             <CloseIcon />
           </IconButton>
         </div>

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

@@ -1,12 +1,12 @@
 import MaterialModal from '@mui/material/Modal'
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import Paper from '@mui/material/Paper'
 import classnames from 'classnames'
 import React from 'react'
 import { H1, H4 } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
-import { IconButton } from 'src/components/buttons'
-
 const Modal = ({
   width,
   height,
@@ -59,10 +59,11 @@ const Modal = ({
               className="ml-auto"
               style={{ marginRight: marginBySize, marginTop: marginBySize }}>
               <IconButton
-                size={closeSize}
                 className="p-0 mb-auto ml-auto"
                 onClick={() => handleClose()}>
-                <CloseIcon />
+                <SvgIcon fontSize={xl ? 'large' : 'small'}>
+                  <CloseIcon />
+                </SvgIcon>
               </IconButton>
             </div>
           </div>

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx

@@ -1,3 +1,4 @@
+import IconButton from '@mui/material/IconButton'
 import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
 import React, { useState, memo } from 'react'
@@ -9,9 +10,10 @@ import FalseIcon from 'src/styling/icons/table/false.svg?react'
 import TrueIcon from 'src/styling/icons/table/true.svg?react'
 import * as Yup from 'yup'
 
-import { Link, IconButton } from 'src/components/buttons'
+import { Link } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs/formik'
 import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const BooleanCell = ({ name }) => {
   const { values } = useFormikContext()
@@ -78,9 +80,10 @@ const BooleanPropertiesTable = memo(
                   ) : (
                     <IconButton
                       className="my-auto mx-3"
-                      onClick={() => setEditing(true)}
+                      onClick={() => setEditing(true)}>
-                      size="large">
+                      <SvgIcon fontSize="small">
-                      {disabled ? <EditIconDisabled /> : <EditIcon />}
+                        {disabled ? <EditIconDisabled /> : <EditIcon />}
+                      </SvgIcon>
                     </IconButton>
                   )}
                 </div>

new-lamassu-admin/src/components/buttons/IconButton.jsx

@@ -1,45 +0,0 @@
-import IconB from '@mui/material/IconButton'
-import { makeStyles } from '@mui/styles'
-import React from 'react'
-
-import { comet } from 'src/styling/variables'
-
-const styles = {
-  root: ({ size }) => ({
-    width: size,
-    height: size,
-    '& svg': {
-      flex: 1
-    },
-    '&:hover': {
-      backgroundColor: 'inherit'
-    },
-    '&:hover rect': {
-      stroke: comet
-    },
-    '&:hover polygon': {
-      stroke: comet
-    },
-    '&:hover path': {
-      stroke: comet
-    }
-  })
-}
-
-const useStyles = makeStyles(styles)
-
-const IconButton = ({ size, children, onClick, ...props }) => {
-  const classes = useStyles({ size })
-  return (
-    <IconB
-      {...props}
-      size="small"
-      classes={{ root: classes.root }}
-      disableRipple
-      onClick={onClick}>
-      {children}
-    </IconB>
-  )
-}
-
-export default IconButton

new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx

@@ -1,31 +1,18 @@
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react'
 import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react'
 
 import { ActionButton } from 'src/components/buttons'
-import { spacer, primaryColor } from 'src/styling/variables'
-
-const useStyles = makeStyles({
-  actionButton: {
-    marginBottom: spacer * 4
-  },
-  actionButtonLink: {
-    textDecoration: 'none',
-    color: primaryColor
-  }
-})
 
 const SupportLinkButton = ({ link, label }) => {
-  const classes = useStyles()
   return (
     <a
-      className={classes.actionButtonLink}
+      className="no-underline text-zodiac"
       target="_blank"
       rel="noopener noreferrer"
       href={link}>
       <ActionButton
-        className={classes.actionButton}
+        className="mb-8"
         color="primary"
         Icon={LinkIcon}
         InverseIcon={InverseLinkIcon}>

new-lamassu-admin/src/components/buttons/index.js

@@ -4,7 +4,6 @@ import Button from './Button'
 import DeleteButton from './DeleteButton'
 import FeatureButton from './FeatureButton'
 import IDButton from './IDButton'
-import IconButton from './IconButton'
 import Link from './Link'
 import SubpageButton from './SubpageButton'
 import SupportLinkButton from './SupportLinkButton'
@@ -14,7 +13,6 @@ export {
   Link,
   ActionButton,
   FeatureButton,
-  IconButton,
   IDButton,
   AddButton,
   SupportLinkButton,

new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { compareAsc, differenceInDays, set } from 'date-fns/fp'
 import * as R from 'ramda'
@@ -6,15 +5,6 @@ import React, { useState, useEffect } from 'react'
 
 import Calendar from './Calendar'
 
-const styles = {
-  wrapper: {
-    backgroundColor: 'white',
-    borderRadius: 10
-  }
-}
-
-const useStyles = makeStyles(styles)
-
 const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
   const [from, setFrom] = useState(null)
   const [to, setTo] = useState(null)
@@ -23,8 +13,6 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
     onRangeChange(from, to)
   }, [from, onRangeChange, to])
 
-  const classes = useStyles()
-
   const handleSelect = day => {
     if (
       (maxDate && compareAsc(maxDate, day) > 0) ||
@@ -55,7 +43,7 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
 
   return (
     <>
-      <div className={classnames(classes.wrapper, className)}>
+      <div className={classnames('bg-white rounded-xl', className)}>
         <Calendar
           from={from}
           to={to}

new-lamassu-admin/src/components/editableProperty/EditableProperty.jsx

@@ -1,74 +0,0 @@
-import { makeStyles } from '@mui/styles'
-import React, { useState, memo } from 'react'
-import { H4, P } from 'src/components/typography'
-import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'
-import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
-
-import { Link } from 'src/components/buttons'
-import { RadioGroup } from 'src/components/inputs'
-
-import { editablePropertyStyles } from './EditableProperty.styles'
-
-const useStyles = makeStyles(editablePropertyStyles)
-
-const EditableProperty = memo(
-  ({ title, prefixText, disabled, options, code, save }) => {
-    const [editing, setEditing] = useState(false)
-    const [currentCode, setCurrentCode] = useState(code)
-
-    const classes = useStyles()
-
-    const innerSave = () => {
-      save(currentCode)
-      setEditing(false)
-    }
-
-    const innerCancel = () => setEditing(false)
-
-    return (
-      <>
-        <div className={classes.rowWrapper}>
-          <H4>{title}</H4>
-          {editing ? (
-            <div className={classes.leftSpace}>
-              <Link
-                className={classes.leftSpace}
-                onClick={innerCancel}
-                color="secondary">
-                Cancel
-              </Link>
-              <Link
-                className={classes.leftSpace}
-                onClick={innerSave}
-                color="primary">
-                Save
-              </Link>
-            </div>
-          ) : (
-            <div className={classes.transparentButton}>
-              <button disabled={disabled} onClick={() => setEditing(true)}>
-                {disabled ? <EditIconDisabled /> : <EditIcon />}
-              </button>
-            </div>
-          )}
-        </div>
-        {editing ? (
-          <RadioGroup
-            options={options}
-            value={currentCode}
-            onChange={event => setCurrentCode(event.target.value)}
-            className={classes.radioButtons}
-          />
-        ) : (
-          <P>
-            {`${prefixText} ${options
-              .find(it => it.code === currentCode)
-              .display.toLowerCase()}`}
-          </P>
-        )}
-      </>
-    )
-  }
-)
-
-export default EditableProperty

new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js

@@ -1,36 +0,0 @@
-const optionsRowHeigth = 43
-
-const editablePropertyStyles = {
-  transparentButton: {
-    '& > *': {
-      margin: 'auto 12px'
-    },
-    '& button': {
-      border: 'none',
-      backgroundColor: 'transparent',
-      cursor: 'pointer'
-    }
-  },
-  rowWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    flex: 'wrap',
-    height: optionsRowHeigth
-  },
-  rightAligned: {
-    display: 'flex',
-    position: 'absolute',
-    right: 0
-  },
-  radioButtons: {
-    display: 'flex',
-    flexDirection: 'row',
-    height: optionsRowHeigth
-  },
-  leftSpace: {
-    marginLeft: '20px'
-  }
-}
-
-export { editablePropertyStyles }

new-lamassu-admin/src/components/editableProperty/index.js

@@ -1,3 +0,0 @@
-import EditableProperty from './EditableProperty'
-
-export { EditableProperty }

new-lamassu-admin/src/components/editableTable/Header.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
@@ -13,14 +12,6 @@ import { sentenceCase } from 'src/utils/string'
 
 import TableCtx from './Context'
 
-const styles = {
-  orderedBySpan: {
-    whiteSpace: 'nowrap'
-  }
-}
-
-const useStyles = makeStyles(styles)
-
 const groupSecondHeader = elements => {
   const doubleHeader = R.prop('doubleHeader')
   const sameDoubleHeader = (a, b) => doubleHeader(a) === doubleHeader(b)
@@ -46,7 +37,6 @@ const groupSecondHeader = elements => {
 }
 
 const Header = () => {
-  const classes = useStyles()
   const {
     elements,
     enableEdit,
@@ -79,7 +69,7 @@ const Header = () => {
     idx
   ) => {
     const orderClasses = classnames({
-      [classes.orderedBySpan]:
+      'whitespace-nowrap':
         R.isNil(header) && !R.isNil(orderedBy) && R.equals(name, orderedBy.code)
     })
 

new-lamassu-admin/src/components/editableTable/Row.jsx

@@ -1,5 +1,7 @@
 import { makeStyles } from '@mui/styles'
 import Switch from '@mui/material/Switch'
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
 import * as R from 'ramda'
@@ -13,7 +15,7 @@ import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 import StripesSvg from 'src/styling/icons/stripes.svg?react'
 
-import { Link, IconButton } from 'src/components/buttons'
+import { Link } from 'src/components/buttons'
 
 import TableCtx from './Context'
 import styles from './Row.styles'
@@ -77,9 +79,10 @@ const ActionCol = ({ disabled, editing }) => {
           <IconButton
             disabled={disableEdit}
             className={classes.editButton}
-            onClick={() => onEdit && onEdit(values.id)}
+            onClick={() => onEdit && onEdit(values.id)}>
-            size="large">
+            <SvgIcon>
-            {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
+              {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
+            </SvgIcon>
           </IconButton>
         </Td>
       )}
@@ -89,9 +92,10 @@ const ActionCol = ({ disabled, editing }) => {
             disabled={disabled}
             onClick={() => {
               setDeleteDialog(true)
-            }}
+            }}>
-            size="large">
+            <SvgIcon>
-            {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
+              {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
+            </SvgIcon>
           </IconButton>
           <DeleteDialog
             open={deleteDialog}
@@ -116,7 +120,7 @@ const ActionCol = ({ disabled, editing }) => {
         </Td>
       )}
     </>
-  );
+  )
 }
 
 const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {

new-lamassu-admin/src/components/fake-table/Table.jsx

@@ -1,14 +1,10 @@
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 
 import { Link } from 'src/components/buttons'
-
+import styles from './Table.module.css'
-import styles from './Table.styles'
-
-const useStyles = makeStyles(styles)
 
 const Table = ({ children, className, ...props }) => (
   <div className={classnames(className)} {...props}>
@@ -17,17 +13,12 @@ const Table = ({ children, className, ...props }) => (
 )
 
 const THead = ({ children, className }) => {
-  const classes = useStyles()
+  return <div className={classnames(className, styles.header)}>{children}</div>
-  return <div className={classnames(className, classes.header)}>{children}</div>
 }
 
 const TDoubleLevelHead = ({ children, className }) => {
-  const classes = useStyles()
-
   return (
-    <div className={classnames(className, classes.doubleHeader)}>
+    <div className={classnames(className, styles.doubleHeader)}>{children}</div>
-      {children}
-    </div>
   )
 }
 
@@ -45,15 +36,28 @@ const Td = ({
   textAlign,
   action
 }) => {
-  const classes = useStyles({ textAlign, width, size })
+  const inlineStyle = {
-  const classNames = {
+    width,
-    [classes.td]: true,
+    textAlign
-    [classes.tdHeader]: header,
-    [classes.actionCol]: action,
-    [classes.size]: !header,
-    [classes.bold]: !header && bold
   }
-  return <div data-cy={`td-${header}`} className={classnames(className, classNames)}>{children}</div>
+
+  const cssClasses = {
+    [styles.td]: !header,
+    [styles.tdHeader]: header,
+    [styles.bold]: !header && bold,
+    [styles.actionCol]: action,
+    [styles.sizeSm]: !header && size === 'sm',
+    [styles.sizeLg]: !header && size === 'lg'
+  }
+
+  return (
+    <div
+      data-cy={`td-${header}`}
+      className={classnames(className, cssClasses)}
+      style={inlineStyle}>
+      {children}
+    </div>
+  )
 }
 
 const Th = ({ children, ...props }) => {
@@ -65,10 +69,10 @@ const Th = ({ children, ...props }) => {
 }
 
 const ThDoubleLevel = ({ title, children, className, width }) => {
-  const classes = useStyles({ width })
-
   return (
-    <div className={classnames(className, classes.thDoubleLevel)}>
+    <div
+      className={classnames(className, styles.thDoubleLevel)}
+      style={{ width }}>
       <div>{title}</div>
       <div>{children}</div>
     </div>
@@ -85,23 +89,25 @@ const Tr = ({
   size,
   newRow
 }) => {
-  const classes = useStyles({ size })
+  const cardClasses = {
-  const cardClasses = { root: classes.cardContentRoot }
+    [styles.card]: true,
-  const classNames = {
+    [styles.trError]: error,
-    [classes.tr]: true,
+    [styles.trAdding]: newRow
-    [classes.trError]: error,
+  }
-    [classes.card]: true,
+
-    [classes.trAdding]: newRow,
+  const mainContentClasses = {
-    className
+    [styles.mainContent]: true,
+    [styles.sizeSm]: size === 'sm',
+    [styles.sizeLg]: size === 'lg'
   }
 
   return (
     <>
-      <Card className={classnames(classNames, className)} onClick={onClick}>
+      <Card className={classnames(className, cardClasses)} onClick={onClick}>
-        <CardContent classes={cardClasses}>
+        <CardContent className={styles.cardContentRoot}>
-          <div className={classes.mainContent}>{children}</div>
+          <div className={classnames(mainContentClasses)}>{children}</div>
           {error && shouldShowError && (
-            <div className={classes.errorContent}>{errorMessage}</div>
+            <div className={styles.errorContent}>{errorMessage}</div>
           )}
         </CardContent>
       </Card>

new-lamassu-admin/src/components/fake-table/Table.module.css

@@ -0,0 +1,112 @@
+.bold {
+  font-weight: 700;
+}
+
+.header {
+  background-color: var(--zodiac);
+  height: 32px;
+  text-align: left;
+  color: white;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.doubleHeader {
+  background-color: var(--zodiac);
+  height: 64px;
+  color: white;
+  display: table-row;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.thDoubleLevel {
+  display: table-cell;
+}
+
+.thDoubleLevel > :first-child {
+  margin: 0 10px;
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--zodiac);
+  color: white;
+  border-radius: 0 0 8px 8px;
+  height: 28px;
+}
+
+.thDoubleLevel > :last-child {
+  padding: 0 11px;
+  display: table-cell;
+  vertical-align: middle;
+  height: 36px;
+}
+
+.cellDoubleLevel {
+  display: flex;
+  padding: 0 16px;
+}
+
+.td {
+  padding: 1px 24px 0 24px;
+}
+
+.tdHeader {
+  vertical-align: middle;
+  display: table-cell;
+  padding: 0 24px;
+}
+
+.trError {
+  background-color: var(--misty-rose);
+}
+
+.trAdding {
+  background-color: var(--spring3);
+}
+
+.mainContent {
+  display: flex;
+  align-items: center;
+}
+
+.cardContentRoot {
+  margin: 0;
+  padding: 0;
+}
+
+.cardContentRoot:last-child {
+  padding: 0;
+}
+
+.card {
+  font-size: 14px;
+  margin: 4px 0 0 0;
+  width: 100%;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+.card:before {
+  height: 0;
+}
+
+.actionCol {
+  margin-left: auto;
+}
+
+.errorContent {
+  padding: 12px 0 12px 24px;
+  color: var(--tomato);
+}
+
+.sizeSm {
+  min-height: 34px;
+}
+
+.sizeLg {
+  min-height: 68px;
+}

new-lamassu-admin/src/components/fake-table/Table.styles.js

@@ -1,114 +0,0 @@
-import typographyStyles from 'src/components/typography/styles'
-import { bySize, bold } from 'src/styling/helpers'
-import {
-  tableHeaderColor,
-  tableHeaderHeight,
-  tableErrorColor,
-  tableSuccessColor,
-  spacer,
-  white,
-  tableDoubleHeaderHeight,
-  offColor,
-  errorColor
-} from 'src/styling/variables'
-
-const { tl2, p, label1 } = typographyStyles
-
-export default {
-  size: ({ size }) => bySize(size),
-  bold,
-  header: {
-    extend: tl2,
-    backgroundColor: tableHeaderColor,
-    height: tableHeaderHeight,
-    textAlign: 'left',
-    color: white,
-    display: 'flex',
-    alignItems: 'center'
-  },
-  doubleHeader: {
-    extend: tl2,
-    backgroundColor: tableHeaderColor,
-    height: tableDoubleHeaderHeight,
-    color: white,
-    display: 'table-row'
-  },
-  thDoubleLevel: ({ width }) => ({
-    width,
-    display: 'table-cell',
-    '& > :first-child': {
-      margin: [[0, 10]],
-      extend: label1,
-      fontWeight: 700,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: offColor,
-      color: white,
-      borderRadius: [[0, 0, 8, 8]],
-      height: 28
-    },
-    '& > :last-child': {
-      padding: [[0, 11]],
-      display: 'table-cell',
-      verticalAlign: 'middle',
-      height: tableDoubleHeaderHeight - 28
-    }
-  }),
-  cellDoubleLevel: {
-    display: 'flex',
-    padding: [[0, spacer * 2]]
-  },
-  td: ({ textAlign, width }) => ({
-    width,
-    padding: [[1, spacer * 3, 0, spacer * 3]],
-    textAlign
-  }),
-  tdHeader: {
-    verticalAlign: 'middle',
-    display: 'table-cell',
-    padding: [[0, spacer * 3]]
-  },
-  trError: {
-    backgroundColor: tableErrorColor
-  },
-  trAdding: {
-    backgroundColor: tableSuccessColor
-  },
-  mainContent: ({ size }) => {
-    const sizes = {
-      sm: 34,
-      lg: 68
-    }
-    const minHeight = sizes[size] || 48
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      minHeight
-    }
-  },
-  // mui-overrides
-  cardContentRoot: {
-    margin: 0,
-    padding: 0,
-    '&:last-child': {
-      padding: 0
-    }
-  },
-  card: {
-    extend: p,
-    '&:before': {
-      height: 0
-    },
-    margin: [[4, 0, 0, 0]],
-    width: '100%',
-    boxShadow: [[0, 0, 4, 0, 'rgba(0, 0, 0, 0.08)']]
-  },
-  actionCol: {
-    marginLeft: 'auto'
-  },
-  errorContent: {
-    padding: [[12, 0, 12, 24]],
-    color: errorColor
-  }
-}

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

@@ -1,16 +1,12 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { useSelect } from 'downshift'
 import * as R from 'ramda'
 import React from 'react'
 import Arrowdown from 'src/styling/icons/action/arrow/regular.svg?react'
 
-import styles from './Select.styles'
+import styles from './Select.module.css'
-
-const useStyles = makeStyles(styles)
 
 function Select({ className, label, items, ...props }) {
-  const classes = useStyles()
 
   const {
     isOpen,
@@ -28,18 +24,18 @@ function Select({ className, label, items, ...props }) {
   })
 
   const selectClassNames = {
-    [classes.select]: true,
+    [styles.select]: true,
-    [classes.selectFiltered]: props.defaultAsFilter
+    [styles.selectFiltered]: props.defaultAsFilter
       ? true
       : !R.equals(selectedItem, props.default),
-    [classes.open]: isOpen
+    [styles.open]: isOpen
   }
 
   return (
     <div className={classnames(selectClassNames, className)}>
       <label {...getLabelProps()}>{label}</label>
       <button {...getToggleButtonProps()}>
-        <span className={classes.selectedItem}>{selectedItem.display}</span>
+        <span className={styles.selectedItem}>{selectedItem.display}</span>
         <Arrowdown />
       </button>
       <ul {...getMenuProps()}>

new-lamassu-admin/src/components/inputs/base/Select.module.css

@@ -0,0 +1,100 @@
+.selectedItem {
+  width: 111px;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select {
+  width: 152px;
+  z-index: 1;
+}
+
+.select label {
+  font-size: 13px;
+  font-family: var(--museo);
+  font-weight: 500;
+  color: var(--comet);
+  padding-left: 10px;
+}
+
+.select button {
+  font-size: 14px;
+  font-family: var(--museo);
+  font-weight: 500;
+  position: relative;
+  border: 0;
+  background-color: var(--zircon);
+  width: 152px;
+  padding: 6px 0 6px 12px;
+  border-radius: 20px;
+  line-height: 1.14;
+  text-align: left;
+  color: var(--comet);
+  cursor: pointer;
+  outline: 0 none;
+}
+
+.select ul {
+  max-height: 200px;
+  width: 152px;
+  overflow-y: auto;
+  position: absolute;
+  margin: 0;
+  border-top: 0;
+  padding: 0;
+  border-radius: 0 0 8px 8px;
+  background-color: var(--zircon);
+  outline: 0 none;
+}
+
+.select ul li {
+  font-size: 14px;
+  font-family: var(--museo);
+  font-weight: 500;
+  list-style-type: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.select ul li span {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.select ul li:hover {
+  background-color: var(--comet);
+  color: white;
+}
+
+.select svg {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  fill: var(--comet);
+}
+
+.selectFiltered button {
+  background-color: var(--comet);
+  color: white;
+}
+
+.selectFiltered ul li {
+  background-color: var(--comet);
+  color: white;
+}
+
+.selectFiltered ul li:hover {
+  background-color: var(--zircon);
+  color: var(--comet);
+}
+
+.selectFiltered svg {
+  fill: white !important;
+}
+
+.open button {
+  border-radius: 8px 8px 0 0;
+}

new-lamassu-admin/src/components/inputs/base/Select.styles.js

@@ -1,96 +0,0 @@
-import { subheaderColor, offColor, white } from '../../../styling/variables'
-import typographyStyles from '../../typography/styles'
-
-const { p, label1 } = typographyStyles
-
-const WIDTH = 152
-
-export default {
-  selectedItem: {
-    width: WIDTH - 41,
-    display: 'block',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden'
-  },
-  select: {
-    width: WIDTH,
-    zIndex: 1,
-    '& label': {
-      extend: label1,
-      color: offColor,
-      paddingLeft: 10
-    },
-    '& button': {
-      extend: p,
-      position: 'relative',
-      border: 0,
-      backgroundColor: subheaderColor,
-      width: WIDTH,
-      padding: [[6, 0, 6, 12]],
-      borderRadius: 20,
-      lineHeight: '1.14',
-      textAlign: 'left',
-      color: offColor,
-      cursor: 'pointer',
-      outline: '0 none'
-    },
-    '& ul': {
-      maxHeight: '200px',
-      width: WIDTH,
-      overflowY: 'auto',
-      position: 'absolute',
-      margin: 0,
-      borderTop: 0,
-      padding: 0,
-      borderRadius: [[0, 0, 8, 8]],
-      backgroundColor: subheaderColor,
-      outline: '0 none',
-      '& li': {
-        extend: p,
-        listStyleType: 'none',
-        padding: [[6, 12]],
-        cursor: 'pointer',
-        '& span': {
-          width: '100%',
-          display: 'block',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap'
-        }
-      },
-      '& li:hover': {
-        backgroundColor: offColor,
-        color: white
-      }
-    },
-    '& svg': {
-      position: 'absolute',
-      top: 12,
-      right: 14,
-      fill: offColor
-    }
-  },
-  selectFiltered: {
-    '& button': {
-      backgroundColor: offColor,
-      color: white
-    },
-    '& ul': {
-      '& li': {
-        backgroundColor: offColor,
-        color: white
-      },
-      '& li:hover': {
-        backgroundColor: subheaderColor,
-        color: offColor
-      }
-    },
-    '& svg': {
-      fill: [[white], '!important']
-    }
-  },
-  open: {
-    '& button': {
-      borderRadius: [[8, 8, 0, 0]]
-    }
-  }
-}

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

@@ -1,12 +1,9 @@
-import { makeStyles } from '@mui/styles'
 import TextField from '@mui/material/TextField'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 
-import styles from './TextInput.styles'
+import styles from './TextInput.module.css'
-
-const useStyles = makeStyles(styles)
 
 const TextInput = memo(
   ({
@@ -27,11 +24,20 @@ const TextInput = memo(
     InputProps,
     ...props
   }) => {
-    const classes = useStyles({ textAlign, width, size })
     const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value)
     const filled = isPasswordFilled || isTextFilled
+
+    // Set CSS variables for dynamic styles
+    const rootStyle = { 
+      '--input-width': width,
+      '--input-text-align': textAlign
+    }
+
+    // Determine size class based on size prop
+    const sizeClass = size === 'sm' ? styles.sizeSm : size === 'lg' ? styles.sizeLg : styles.size
+
     const divClass = {
-      [classes.bold]: bold
+      [styles.bold]: bold
     }
 
     return (
@@ -42,13 +48,14 @@ const TextInput = memo(
         onBlur={onBlur}
         error={error}
         value={value}
-        classes={{ root: classes.root }}
+        classes={{ root: styles.root }}
         className={className}
+        style={rootStyle}
         InputProps={{
           className: classnames(divClass),
           classes: {
-            root: classes.size,
+            root: sizeClass,
-            underline: filled ? classes.underline : null,
+            underline: filled ? styles.underline : null,
             input: inputClasses
           },
           ...InputProps

new-lamassu-admin/src/components/inputs/base/TextInput.module.css

@@ -0,0 +1,35 @@
+.size {
+  margin-top: 2px;
+  font-size: var(--input-font-size, 16px);
+}
+
+.sizeSm {
+  margin-top: 2px;
+  font-size: var(--input-font-size-sm, 14px);
+}
+
+.sizeLg {
+  margin-top: 0;
+  font-size: var(--input-font-size-lg, 24px);
+  font-weight: var(--input-font-weight-bold, 700);
+}
+
+.bold {
+  font-weight: var(--input-font-weight-bold, 700);
+}
+
+.root {
+  width: var(--input-width);
+}
+
+.root input {
+  text-align: var(--input-text-align, left);
+}
+
+.underline:before {
+  border-bottom-color: var(--spring);
+}
+
+.underline:hover:not(.Mui-disabled)::before {
+  border-bottom-color: var(--spring);
+}

new-lamassu-admin/src/components/inputs/base/TextInput.styles.js

@@ -1,24 +0,0 @@
-import { bySize, bold } from 'src/styling/helpers'
-import { secondaryColor } from 'src/styling/variables'
-
-export default {
-  size: ({ size }) => ({
-    marginTop: size === 'lg' ? 0 : 2,
-    ...bySize(size)
-  }),
-  bold,
-  root: ({ width, textAlign }) => ({
-    width,
-    '& input': {
-      textAlign
-    }
-  }),
-  underline: {
-    '&:before': {
-      borderBottomColor: secondaryColor
-    },
-    '&:hover:not(.Mui-disabled)::before': {
-      borderBottomColor: secondaryColor
-    }
-  }
-}

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

@@ -1,38 +1,8 @@
-import { makeStyles } from '@mui/styles'
 import MUIToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import ToggleButton from '@mui/material/ToggleButton'
 import React from 'react'
 import { H4, P } from 'src/components/typography'
 
-import { backgroundColor, comet } from 'src/styling/variables'
-const styles = {
-  noTextTransform: {
-    textTransform: 'none'
-  },
-  flex: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'start',
-    width: '90%',
-    overflow: 'hidden',
-    maxHeight: 80
-  },
-  buttonTextContent: {
-    marginLeft: 32,
-    textTransform: 'none',
-    textAlign: 'left'
-  },
-  button: {
-    backgroundColor: backgroundColor,
-    marginBottom: 16
-  },
-  paragraph: {
-    color: comet,
-    marginTop: -10
-  }
-}
-
-const useStyles = makeStyles(styles)
 const ToggleButtonGroup = ({
   name,
   orientation = 'vertical',
@@ -42,7 +12,6 @@ const ToggleButtonGroup = ({
   size = 'small',
   ...props
 }) => {
-  const classes = useStyles()
   return (
     <MUIToggleButtonGroup
       size={size}
@@ -54,15 +23,15 @@ const ToggleButtonGroup = ({
       {props.options.map(option => {
         return (
           <ToggleButton
-            className={classes.button}
+            className="bg-ghost"
             value={option.value}
             aria-label={option.value}
             key={option.value}>
-            <div className={classes.flex}>
+            <div className="flex items-center justify-start w-9/10 overflow-hidden max-h-20">
               <option.icon />
-              <div className={classes.buttonTextContent}>
+              <div className="ml-8 normal-case text-left">
                 <H4>{option.title}</H4>
-                <P className={classes.paragraph}> {option.description}</P>
+                <P className="text-comet -mt-2"> {option.description}</P>
               </div>
             </div>
           </ToggleButton>

new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx

@@ -1,3 +1,5 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import React from 'react'
 import {
   Table,
@@ -9,8 +11,6 @@ import {
 } from 'src/components/fake-table/Table'
 import EditIcon from 'src/styling/icons/action/edit/white.svg?react'
 
-import { IconButton } from 'src/components/buttons'
-
 import { Label1, P } from '../typography/index.jsx'
 
 const SingleRowTable = ({
@@ -27,8 +27,10 @@ const SingleRowTable = ({
         <THead>
           <Th className="flex flex-1 justify-between items-center pr-3">
             {title}
-            <IconButton onClick={onEdit} className="mb-[1px]" size="large">
+            <IconButton onClick={onEdit} className="mb-[1px]">
-              <EditIcon />
+              <SvgIcon>
+                <EditIcon />
+              </SvgIcon>
             </IconButton>
           </Th>
         </THead>

new-lamassu-admin/src/components/table/Table.module.css

@@ -0,0 +1,3 @@
+.tableCell {
+  padding: 0 6px;
+}

new-lamassu-admin/src/components/table/TableCell.jsx

@@ -1,17 +1,19 @@
 import classnames from 'classnames'
 import React, { memo } from 'react'
 
+import classes from './Table.module.css'
+
 const TableCell = memo(
   ({ colspan, rightAlign, className, children, ...props }) => {
     const styles = {
-      'py-0 px-6': true,
+      [classes.tableCell]: true,
       'text-right': rightAlign
     }
 
     return (
       <td
         colSpan={colspan}
-        className={classnames(styles, className)}
+        className={classnames(className, styles)}
         {...props}>
         {children}
       </td>

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

@@ -40,7 +40,7 @@ const Row = ({
   const trClasses = {
     'cursor-pointer': hasPointer,
     'border-2 border-transparent': true,
-    'border-2 border-zircon shadow-xl': expanded
+    'border-2 border-zircon shadow-md': expanded
   }
 
   return (

new-lamassu-admin/src/components/typography/index.jsx

@@ -1,16 +1,12 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 
-import styles from './styles'
+import styles from './typography.module.css'
-
-const useStyles = makeStyles(styles)
 
 function H1({ children, noMargin, className, ...props }) {
-  const classes = useStyles()
   const classNames = {
-    [classes.h1]: true,
+    [styles.h1]: true,
-    [classes.noMargin]: noMargin,
+    [styles.noMargin]: noMargin,
     [className]: !!className
   }
 
@@ -22,10 +18,9 @@ function H1({ children, noMargin, className, ...props }) {
 }
 
 function H2({ children, noMargin, className, ...props }) {
-  const classes = useStyles()
   const classNames = {
-    [classes.h2]: true,
+    [styles.h2]: true,
-    [classes.noMargin]: noMargin,
+    [styles.noMargin]: noMargin,
     [className]: !!className
   }
 
@@ -37,10 +32,9 @@ function H2({ children, noMargin, className, ...props }) {
 }
 
 function H3({ children, noMargin, className, ...props }) {
-  const classes = useStyles()
   const classNames = {
-    [classes.h3]: true,
+    [styles.h3]: true,
-    [classes.noMargin]: noMargin,
+    [styles.noMargin]: noMargin,
     [className]: !!className
   }
 
@@ -52,10 +46,9 @@ function H3({ children, noMargin, className, ...props }) {
 }
 
 function H4({ children, noMargin, className, ...props }) {
-  const classes = useStyles()
   const classNames = {
-    [classes.h4]: true,
+    [styles.h4]: true,
-    [classes.noMargin]: noMargin,
+    [styles.noMargin]: noMargin,
     [className]: !!className
   }
 
@@ -67,10 +60,9 @@ function H4({ children, noMargin, className, ...props }) {
 }
 
 function H5({ children, noMargin, className, ...props }) {
-  const classes = useStyles()
   const classNames = {
-    [classes.h5]: true,
+    [styles.h5]: true,
-    [classes.noMargin]: noMargin,
+    [styles.noMargin]: noMargin,
     [className]: !!className
   }
 
@@ -94,12 +86,11 @@ const Label3 = pBuilder('label3')
 
 function pBuilder(elementClass) {
   return ({ inline, noMargin, className, children, ...props }) => {
-    const classes = useStyles()
     const classNames = {
       [className]: !!className,
-      [classes[elementClass]]: elementClass,
+      [styles[elementClass]]: elementClass,
-      [classes.inline]: inline,
+      [styles.inline]: inline,
-      [classes.noMargin]: noMargin
+      [styles.noMargin]: noMargin
     }
     return (
       <p className={classnames(classNames)} {...props}>

new-lamassu-admin/src/components/typography/styles.js

@@ -7,8 +7,7 @@ import {
   fontSize5,
   fontPrimary,
   fontSecondary,
-  fontMonospaced,
+  fontMonospaced
-  codeInputFontSize
 } from 'src/styling/variables'
 
 const base = {
@@ -17,6 +16,10 @@ const base = {
 }
 
 export default {
+  base: {
+    lineHeight: '120%',
+    color: fontColor
+  },
   h1: {
     extend: base,
     fontSize: fontSize1,
@@ -126,12 +129,6 @@ export default {
     fontWeight: 500,
     color: fontColor
   },
-  confirmationCode: {
-    extend: base,
-    fontSize: codeInputFontSize,
-    fontFamily: fontSecondary,
-    fontWeight: 900
-  },
   inline: {
     display: 'inline'
   },

new-lamassu-admin/src/components/typography/typography.module.css

@@ -0,0 +1,140 @@
+.base {
+  line-height: 120%;
+  color: var(--zodiac);
+}
+
+.h1 {
+  composes: base;
+  font-size: 24px;
+  font-family: var(--mont);
+  font-weight: 900;
+}
+
+.h2 {
+  composes: base;
+  font-size: 20px;
+  font-family: var(--mont);
+  font-weight: 900;
+}
+
+.h3 {
+  composes: base;
+  font-size: 14px;
+  font-family: var(--mont);
+  font-weight: 900;
+}
+
+.h4 {
+  composes: base;
+  font-size: 14px;
+  font-family: var(--mont);
+  font-weight: 700;
+}
+
+.h5 {
+  composes: base;
+  font-size: 16px;
+  font-family: var(--mont);
+  font-weight: 700;
+}
+
+.p {
+  composes: base;
+  font-size: 14px;
+  font-family: var(--museo);
+  font-weight: 500;
+}
+
+.tl1 {
+  composes: base;
+  font-size: 20px;
+  font-family: var(--museo);
+  font-weight: 700;
+}
+
+.tl2 {
+  composes: base;
+  font-size: 14px;
+  font-family: var(--museo);
+  font-weight: 700;
+}
+
+.info1 {
+  composes: base;
+  font-size: 24px;
+  font-family: var(--museo);
+  font-weight: 700;
+}
+
+.info2 {
+  composes: base;
+  font-size: 16px;
+  font-family: var(--museo);
+  font-weight: 700;
+}
+
+.info3 {
+  composes: base;
+  font-size: 16px;
+  font-family: var(--museo);
+  font-weight: 500;
+}
+
+.mono {
+  composes: base;
+  font-size: 14px;
+  font-family: var(--bpmono);
+  font-weight: 500;
+}
+
+.monoBold {
+  font-weight: 700;
+}
+
+.monoSmall {
+  font-size: 13px;
+}
+
+.inputFont {
+  font-size: 20px;
+  font-family: var(--museo);
+  font-weight: 500;
+  line-height: 110%;
+  color: var(--zodiac);
+}
+
+.regularLabel {
+  font-size: 14px;
+  font-family: var(--museo);
+  font-weight: 500;
+  line-height: 110%;
+}
+
+.label1 {
+  font-size: 13px;
+  font-family: var(--museo);
+  font-weight: 500;
+  color: var(--zodiac);
+}
+
+.label2 {
+  font-size: 13px;
+  font-family: var(--museo);
+  font-weight: 700;
+  color: var(--zodiac);
+}
+
+.label3 {
+  font-size: 14px;
+  font-family: var(--museo);
+  font-weight: 500;
+  color: var(--zodiac);
+}
+
+.inline {
+  display: inline;
+}
+
+.noMargin {
+  margin: 0;
+}

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

@@ -1,40 +0,0 @@
-import typographyStyles from 'src/components/typography/styles'
-import {
-  placeholderColor,
-  primaryColor,
-  mainWidth,
-  spring2,
-  spring3,
-  errorColor
-} from 'src/styling/variables'
-
-const { tl2, p } = typographyStyles
-
-const fill = '100%'
-const flexDirection = 'column'
-
-const styles = {
-  wrapper: {
-    width: mainWidth,
-    height: fill,
-    margin: '0 auto',
-    flex: 1,
-    display: 'flex',
-    flexDirection
-  },
-  contentDiv: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'row'
-  },
-  headerDiv: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  contentWrapper: {
-    marginLeft: 48
-  }
-}
-
-export default styles

new-lamassu-admin/src/pages/Authentication/LoginCard.jsx

@@ -57,7 +57,7 @@ const LoginCard = () => {
       <div className={classes.wrapper}>
         <div className={classes.titleWrapper}>
           <Logo className={classes.icon} />
-          <H5 className={classes.title}>Lamassu Admin</H5>
+          <h3 className={classes.title}>Lamassu Admin</h3>
         </div>
         {renderState()}
       </div>

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

@@ -3,6 +3,8 @@ import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
 import Switch from '@mui/material/Switch'
+import SvgIcon from '@mui/material/SvgIcon'
+import IconButton from '@mui/material/IconButton'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'
@@ -12,12 +14,7 @@ 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 {
+import { Link, Button, SupportLinkButton } from 'src/components/buttons'
-  Link,
-  Button,
-  IconButton,
-  SupportLinkButton
-} from 'src/components/buttons'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
 import BlackListAdvanced from './BlacklistAdvanced'
@@ -100,11 +97,12 @@ const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
       <div className="p-2">
         <DialogTitle className="flex flex-col">
           <IconButton
-            size={30}
             aria-label="close"
             onClick={onDissmised}
             className="-mt-2 -mr-4 ml-auto">
-            <CloseIcon />
+            <SvgIcon>
+              <CloseIcon />
+            </SvgIcon>
           </IconButton>
           <H2 noMargin>{'Are you sure you want to enable this?'}</H2>
         </DialogTitle>

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

@@ -1,3 +1,5 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import { Form, Formik, Field } from 'formik'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -11,7 +13,7 @@ import DefaultIconReverse from 'src/styling/icons/button/retry/white.svg?react'
 import DefaultIcon from 'src/styling/icons/button/retry/zodiac.svg?react'
 import * as Yup from 'yup'
 
-import { ActionButton, IconButton, Button } from 'src/components/buttons'
+import { ActionButton, Button } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
 
 const DEFAULT_MESSAGE = `This address may be associated with a deceptive offer or a prohibited group. Please make sure you're using an address from your own wallet.`
@@ -56,11 +58,10 @@ const BlacklistAdvanced = ({
       textAlign: 'center',
       size: 'sm',
       view: it => (
-        <IconButton
+        <IconButton className="pl-3" onClick={() => setSelectedMessage(it)}>
-          className="pl-3"
+          <SvgIcon>
-          onClick={() => setSelectedMessage(it)}
+            <EditIcon />
-          size="large">
+          </SvgIcon>
-          <EditIcon />
         </IconButton>
       )
     },
@@ -76,13 +77,14 @@ const BlacklistAdvanced = ({
           disabled={
             !R.isNil(R.path(['allowToggle'], it)) &&
             !R.path(['allowToggle'], it)
-          }
+          }>
-          size="large">
+          <SvgIcon>
-          {R.path(['allowToggle'], it) ? (
+            {R.path(['allowToggle'], it) ? (
-            <DeleteIcon />
+              <DeleteIcon />
-          ) : (
+            ) : (
-            <DisabledDeleteIcon />
+              <DisabledDeleteIcon />
-          )}
+            )}
+          </SvgIcon>
         </IconButton>
       )
     }

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

@@ -1,3 +1,5 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'
@@ -5,8 +7,6 @@ import DataTable from 'src/components/tables/DataTable'
 import CopyToClipboard from 'src/components/CopyToClipboard.jsx'
 import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
 
-import { IconButton } from 'src/components/buttons'
-
 const BlacklistTable = ({
   data,
   handleDeleteEntry,
@@ -42,9 +42,10 @@ const BlacklistTable = ({
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted(it)
-          }}
+          }}>
-          size="large">
+          <SvgIcon>
-          <DeleteIcon />
+            <DeleteIcon />
+          </SvgIcon>
         </IconButton>
       )
     }

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

@@ -1,3 +1,5 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client'
 import Breadcrumbs from '@mui/material/Breadcrumbs'
 import DialogActions from '@mui/material/DialogActions'
@@ -18,7 +20,7 @@ import BlockIcon from 'src/styling/icons/button/block/zodiac.svg?react'
 import DataReversedIcon from 'src/styling/icons/button/data/white.svg?react'
 import DataIcon from 'src/styling/icons/button/data/zodiac.svg?react'
 
-import { Button, IconButton, ActionButton } from 'src/components/buttons'
+import { Button, ActionButton } from 'src/components/buttons'
 import {
   OVERRIDE_AUTHORIZED,
   OVERRIDE_REJECTED
@@ -734,11 +736,10 @@ const RetrieveDataDialog = ({
       }}
       {...props}>
       <div className="pt-4 pr-4 flex justify-end">
-        <IconButton
+        <IconButton aria-label="close" onClick={() => onDismissed(false)}>
-          size={32}
+          <SvgIcon>
-          aria-label="close"
+            <CloseIcon />
-          onClick={() => onDismissed(false)}>
+          </SvgIcon>
-          <CloseIcon />
         </IconButton>
       </div>
       <H2 className="mb-2 ml-10">{'Retrieve API data from Twilio'}</H2>

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

@@ -1,8 +1,10 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import { useQuery, useMutation, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { Link, Button, IconButton } from 'src/components/buttons'
+import { Link, Button } from 'src/components/buttons'
 import { DeleteDialog } from 'src/components/DeleteDialog'
 import DataTable from 'src/components/tables/DataTable'
 import { Label3, TL1 } from 'src/components/typography'
@@ -136,9 +138,10 @@ const IndividualDiscounts = () => {
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted({ variables: { discountId: t.id } })
-          }}
+          }}>
-          size="large">
+          <SvgIcon>
-          <DeleteIcon />
+            <DeleteIcon />
+          </SvgIcon>
         </IconButton>
       )
     }

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

@@ -1,3 +1,5 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import { useQuery, useMutation, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -6,7 +8,7 @@ import DataTable from 'src/components/tables/DataTable'
 import { Label3, TL1 } from 'src/components/typography'
 import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
 
-import { Link, Button, IconButton } from 'src/components/buttons'
+import { Link, Button } from 'src/components/buttons'
 
 import PromoCodesModal from './PromoCodesModal'
 
@@ -114,9 +116,10 @@ const PromoCodes = () => {
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted({ variables: { codeId: t.id } })
-          }}
+          }}>
-          size="large">
+          <SvgIcon>
-          <DeleteIcon />
+            <DeleteIcon />
+          </SvgIcon>
         </IconButton>
       )
     }

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

@@ -1,5 +1,7 @@
 import { useQuery, useMutation, gql } from '@apollo/client'
 import DialogActions from '@mui/material/DialogActions'
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
@@ -12,7 +14,7 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 import ReverseHistoryIcon from 'src/styling/icons/circle buttons/history/white.svg?react'
 import HistoryIcon from 'src/styling/icons/circle buttons/history/zodiac.svg?react'
 
-import { IconButton, Button, SupportLinkButton } from 'src/components/buttons'
+import { Button, SupportLinkButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import { EmptyTable } from 'src/components/table'
 import { fromNamespace, toNamespace } from 'src/utils/config'
@@ -252,8 +254,10 @@ const CashCassettes = () => {
                     {onlyFirstToUpper(cashboxReset)}
                   </P>
                 )}
-                <IconButton onClick={() => setEditingSchema(true)} size="large">
+                <IconButton onClick={() => setEditingSchema(true)}>
-                  <EditIcon />
+                  <SvgIcon>
+                    <EditIcon />
+                  </SvgIcon>
                 </IconButton>
               </div>
             </div>

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

@@ -1,9 +1,10 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
 import React from 'react'
 import * as R from 'ramda'
 import { CashIn, CashOutLite } from 'src/components/inputs/cashbox/Cashbox'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 
-import { IconButton } from 'src/components/buttons'
 import { fromNamespace } from 'src/utils/config'
 import { getCashUnitCapacity } from 'src/utils/machine'
 
@@ -124,9 +125,10 @@ const getElements = (config, bills, setWizard, widths, setMachineId) => {
             onClick={() => {
               !R.isNil(setMachineId) && setMachineId(m.id ?? m.deviceId)
               setWizard(true)
-            }}
+            }}>
-            size="large">
+            <SvgIcon>
-            <EditIcon />
+              <EditIcon />
+            </SvgIcon>
           </IconButton>
         )
       }

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

@@ -1,9 +1,11 @@
+import IconButton from '@mui/material/IconButton'
 import React from 'react'
 import { H4 } from 'src/components/typography'
 import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 
-import { Link, IconButton } from 'src/components/buttons'
+import { Link } from 'src/components/buttons'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const Header = ({ title, editing, disabled, setEditing }) => {
   return (
@@ -15,9 +17,8 @@ const Header = ({ title, editing, disabled, setEditing }) => {
         <IconButton
           onClick={() => setEditing(true)}
           className="border-0 bg-transparent shrink-0 cursor-pointer ml-2"
-          disabled={disabled}
+          disabled={disabled}>
-          size="large">
+          <SvgIcon>{disabled ? <DisabledEditIcon /> : <EditIcon />}</SvgIcon>
-          {disabled ? <DisabledEditIcon /> : <EditIcon />}
         </IconButton>
       )}
       {editing && (

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

@@ -1,3 +1,4 @@
+import IconButton from '@mui/material/IconButton'
 import { useQuery, useMutation, gql } from '@apollo/client'
 import { Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
@@ -9,13 +10,14 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
 import * as Yup from 'yup'
 
-import { Link, IconButton } from 'src/components/buttons'
+import { Link } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
 import SwitchRow from './components/SwitchRow.jsx'
 import InfoMessage from './components/InfoMessage.jsx'
 import Header from './components/Header.jsx'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const FIELD_WIDTH = 280
 
@@ -160,8 +162,10 @@ const ContactInfo = ({ wizard }) => {
         <div className="flex items-center gap-4">
           <H4>Info card</H4>
           {!editing && (
-            <IconButton onClick={() => setEditing(true)} size="large">
+            <IconButton onClick={() => setEditing(true)}>
-              <EditIcon />
+              <SvgIcon>
+                <EditIcon />
+              </SvgIcon>
             </IconButton>
           )}
         </div>

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

@@ -1,6 +1,7 @@
 import { useQuery, useMutation, gql } from '@apollo/client'
 import Paper from '@mui/material/Paper'
 import Switch from '@mui/material/Switch'
+import IconButton from '@mui/material/IconButton'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'
@@ -11,10 +12,11 @@ import ExpandIconClosed from 'src/styling/icons/action/expand/closed.svg?react'
 import ExpandIconOpen from 'src/styling/icons/action/expand/open.svg?react'
 import WhiteLogo from 'src/styling/icons/menu/logo-white.svg?react'
 
-import { IconButton, SupportLinkButton } from 'src/components/buttons'
+import { SupportLinkButton } from 'src/components/buttons'
 import { formatDate } from 'src/utils/timezones'
 
 import CustomSMSModal from './SMSNoticesModal'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const GET_SMS_NOTICES = gql`
   query SMSNotices {
@@ -175,9 +177,10 @@ const SMSNotices = () => {
             setPreviewOpen(false)
             setSelectedSMS(it)
             setShowModal(true)
-          }}
+          }}>
-          size="large">
+          <SvgIcon>
-          <EditIcon />
+            <EditIcon />
+          </SvgIcon>
         </IconButton>
       )
     },
@@ -217,13 +220,14 @@ const SMSNotices = () => {
             R.equals(selectedSMS, it)
               ? setPreviewOpen(!previewOpen)
               : setPreviewOpen(true)
-          }}
+          }}>
-          size="large">
+          <SvgIcon>
-          {R.equals(selectedSMS, it) && previewOpen ? (
+            {R.equals(selectedSMS, it) && previewOpen ? (
-            <ExpandIconOpen />
+              <ExpandIconOpen />
-          ) : (
+            ) : (
-            <ExpandIconClosed />
+              <ExpandIconClosed />
-          )}
+            )}
+          </SvgIcon>
         </IconButton>
       )
     }

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

@@ -1,3 +1,4 @@
+import IconButton from '@mui/material/IconButton'
 import { useQuery, useMutation, gql } from '@apollo/client'
 import classnames from 'classnames'
 import { Form, Formik, Field as FormikField } from 'formik'
@@ -9,12 +10,13 @@ import { Info2, Info3, Label3 } from 'src/components/typography'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 import * as Yup from 'yup'
 
-import { Link, IconButton } from 'src/components/buttons'
+import { Link } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
 import Header from './components/Header.jsx'
 import SwitchRow from './components/SwitchRow.jsx'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const Field = ({
   editing,
@@ -184,8 +186,10 @@ const TermsConditions = () => {
       <div className="flex gap-3">
         <Info2>Info card</Info2>
         {!editing && (
-          <IconButton onClick={() => setEditing(true)} size="large">
+          <IconButton onClick={() => setEditing(true)}>
-            <EditIcon />
+            <SvgIcon>
+              <EditIcon />
+            </SvgIcon>
           </IconButton>
         )}
       </div>

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

@@ -1,4 +1,5 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import IconButton from '@mui/material/IconButton'
+import { useQuery, useMutation, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React from 'react'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -6,8 +7,8 @@ import DataTable from 'src/components/tables/DataTable'
 import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
 import parser from 'ua-parser-js'
 
-import { IconButton } from 'src/components/buttons'
 import { formatDate } from 'src/utils/timezones'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const GET_SESSIONS = gql`
   query sessions {
@@ -98,9 +99,10 @@ const SessionManagement = () => {
         <IconButton
           onClick={() => {
             deleteSession({ variables: { sid: s.sid } })
-          }}
+          }}>
-          size="large">
+          <SvgIcon>
-          <DeleteIcon />
+            <DeleteIcon />
+          </SvgIcon>
         </IconButton>
       )
     }

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

@@ -1,3 +1,4 @@
+import IconButton from '@mui/material/IconButton'
 import { useMutation, useQuery, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -7,11 +8,12 @@ import { Info1, Info3, P } from 'src/components/typography'
 import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
 import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 
-import { IconButton, Button, Link } from 'src/components/buttons'
+import { Button, Link } from 'src/components/buttons'
 import { fromNamespace, namespaces, toNamespace } from 'src/utils/config'
 
 import DetailsRow from './DetailsCard'
 import Wizard from './Wizard'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const inputTypeDisplay = {
   numerical: 'Numerical',
@@ -212,9 +214,10 @@ const CustomInfoRequests = ({
                       onClick={() => {
                         setToBeEdited(it)
                         return toggleWizard()
-                      }}
+                      }}>
-                      size="large">
+                      <SvgIcon>
-                      <EditIcon />
+                        <EditIcon />
+                      </SvgIcon>
                     </IconButton>
                   )
                 }
@@ -230,9 +233,10 @@ const CustomInfoRequests = ({
                       onClick={() => {
                         setToBeDeleted(it.id)
                         return setDeleteDialog(true)
-                      }}
+                      }}>
-                      size="large">
+                      <SvgIcon>
-                      <DeleteIcon />
+                        <DeleteIcon />
+                      </SvgIcon>
                     </IconButton>
                   )
                 }

new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx

@@ -38,7 +38,7 @@ const NumericalEntry = () => {
         name="constraintType"
       />
       {isLength && (
-        <div className="flex mt-27 max-w-29">
+        <div className="flex mt-6 max-w-29">
           <Field
             component={NumberInput}
             name={'inputLength'}

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

@@ -64,6 +64,10 @@
   column-span: all;
 }
 
+@utility linebreak-anywhere {
+  line-break: anywhere;
+}
+
 body {
   font-size: 0.875rem;
   width: 1200px;

new-lamassu-admin/src/styling/theme.js

@@ -56,6 +56,11 @@ theme = createTheme(theme, {
         body1: { ...p }
       }
     },
+    MuiIconButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    },
     MuiButtonBase: {
       defaultProps: {
         disableRipple: true
@@ -159,6 +164,9 @@ theme = createTheme(theme, {
     },
     MuiPaper: {
       styleOverrides: {
+        root: {
+          color: primaryColor
+        },
         elevation1: {
           boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)'
         }

new-lamassu-admin/src/styling/variables.js

@@ -32,16 +32,12 @@ const mistyRose = '#ffeceb'
 const pumpkin = '#ff7311'
 const linen = '#fbf3ec'
 
-// Warning
-const orangeYellow = '#ffcc00'
-
 // Color Variables
 const primaryColor = zodiac
 
 const secondaryColor = spring
 const secondaryColorDark = spring2
 const secondaryColorDarker = spring4
-const secondaryColorLighter = spring3
 
 const backgroundColor = ghost
 const subheaderColor = zircon
@@ -52,16 +48,13 @@ const fontColor = primaryColor
 const offColor = comet
 const offDarkColor = comet2
 const offDarkerColor = comet3
-const placeholderColor = comet
 const errorColor = tomato
 const errorColorDark = tomato1
 const errorColorDarker = tomato2
 const offErrorColor = mistyRose
-const inputBorderColor = primaryColor
 
 // General
 const spacer = 8
-const mainWidth = 1200
 
 // Buttons
 const linkPrimaryColor = secondaryColor
@@ -72,19 +65,11 @@ const fontPrimary = 'Mont'
 const fontSecondary = 'MuseoSans'
 const fontMonospaced = 'BPmono'
 
-let fontSize1 = 24
+const fontSize1 = 24
-let fontSize2 = 20
+const fontSize2 = 20
-let fontSize3 = 16
+const fontSize3 = 16
-let fontSize4 = 14
+const fontSize4 = 14
-let fontSize5 = 13
+const fontSize5 = 13
-
-if (version === 8) {
-  fontSize1 = 32
-  fontSize2 = 24
-  fontSize3 = 20
-  fontSize4 = 16
-  fontSize5 = 14
-}
 
 const smallestFontSize = fontSize5
 const inputFontSizeSm = fontSize4
@@ -93,7 +78,6 @@ const inputFontSizeLg = fontSize1
 const inputFontWeight = 500
 const inputFontWeightBold = 700
 const inputFontFamily = fontSecondary
-const codeInputFontSize = 35
 
 // Breakpoints
 const sm = 576
@@ -113,13 +97,7 @@ if (version === 8) {
 
 const tableDoubleHeaderHeight = tableHeaderHeight * 2
 
-const tableSmCellHeight = 30
-const tableLgCellHeight = 76
-
 const tableHeaderColor = primaryColor
-const tableDisabledHeaderColor = zircon
-const tableNewDisabledHeaderColor = spring3
-const tableCellColor = white
 const tableErrorColor = mistyRose
 const tableSuccessColor = spring3
 
@@ -139,17 +117,14 @@ export {
   java,
   neon,
   linen,
-  orangeYellow,
   // named colors
   primaryColor,
   secondaryColor,
   secondaryColorDark,
   secondaryColorDarker,
-  secondaryColorLighter,
   subheaderColor,
   subheaderDarkColor,
   backgroundColor,
-  placeholderColor,
   offColor,
   offDarkColor,
   offDarkerColor,
@@ -162,7 +137,6 @@ export {
   errorColorDarker,
   errorColorDark,
   offErrorColor,
-  inputBorderColor,
   // font sizes
   fontSize1,
   fontSize2,
@@ -180,7 +154,6 @@ export {
   inputFontFamily,
   inputFontWeight,
   inputFontWeightBold,
-  codeInputFontSize,
   // screen sizes
   sm,
   md,
@@ -189,17 +162,11 @@ export {
   xxl,
   // sizes
   spacer,
-  mainWidth,
   // table sizes
   tableHeaderHeight,
   tableDoubleHeaderHeight,
   tableCellHeight,
-  tableSmCellHeight,
-  tableLgCellHeight,
   tableHeaderColor,
-  tableDisabledHeaderColor,
-  tableNewDisabledHeaderColor,
-  tableCellColor,
   tableErrorColor,
   tableSuccessColor
 }