partial: dangling components css migration

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

@@ -1,27 +1,9 @@
-import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 import ReactCarousel from 'react-material-ui-carousel'
 import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'
 import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react'
 
-const useStyles = makeStyles({
-  imgWrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    display: 'flex'
-  },
-  imgInner: {
-    objectFit: 'contain',
-    objectPosition: 'center',
-    width: 500,
-    height: 400,
-    marginBottom: 40
-  }
-})
-
 export const Carousel = memo(({ photosData, slidePhoto }) => {
-  const classes = useStyles()
-
   return (
     <>
       <ReactCarousel
@@ -48,9 +30,9 @@ export const Carousel = memo(({ photosData, slidePhoto }) => {
         prev={activeIndex => slidePhoto(activeIndex)}>
         {photosData.map((item, i) => (
           <div key={i}>
-            <div className={classes.imgWrapper}>
+            <div className="items-center justify-center flex">
               <img
-                className={classes.imgInner}
+                className="object-contain object-center w-75 h-100 mb-10"
                 src={`/${item?.photoDir}/${item?.path}`}
                 alt=""
               />

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

@@ -2,49 +2,25 @@ import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import InputLabel from '@mui/material/InputLabel'
-import { makeStyles } from '@mui/styles'
 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 { TextInput } from 'src/components/inputs'
-import { spacer } from 'src/styling/variables'
 
 import ErrorMessage from './ErrorMessage'
 
-const useStyles = makeStyles({
-  dialogContent: {
-    width: 434,
-    padding: spacer * 2,
-    paddingRight: spacer * 3.5
-  },
-  dialogTitle: {
-    padding: spacer * 2,
-    paddingRight: spacer * 1.5,
-    display: 'flex',
-    'justify-content': 'space-between',
-    '& > h4': {
-      margin: 0
-    },
-    '& > button': {
-      padding: 0,
-      marginTop: -(spacer / 2)
-    }
-  },
-  dialogActions: {
-    padding: spacer * 4,
-    paddingTop: spacer * 2
-  }
-})
-
 export const DialogTitle = ({ children, onClose }) => {
-  const classes = useStyles()
   return (
-    <div className={classes.dialogTitle}>
+    <div className="p-4 pr-3 flex justify-between">
       {children}
       {onClose && (
-        <IconButton size={16} aria-label="close" onClick={onClose}>
+        <IconButton
+          size={16}
+          aria-label="close"
+          onClick={onClose}
+          className="p-0 -mt-1">
           <CloseIcon />
         </IconButton>
       )}
@@ -67,7 +43,6 @@ export const ConfirmDialog = memo(
     disabled = false,
     ...props
   }) => {
-    const classes = useStyles()
     const [value, setValue] = useState(initialValue)
     const [error, setError] = useState(false)
     const handleChange = event => setValue(event.target.value)
@@ -84,7 +59,7 @@ export const ConfirmDialog = memo(
     return (
       <Dialog open={open} aria-labelledby="form-dialog-title" {...props}>
         <DialogTitle id="customized-dialog-title" onClose={innerOnClose}>
-          <H4>{title}</H4>
+          <H4 noMargin>{title}</H4>
         </DialogTitle>
         {errorMessage && (
           <DialogTitle>
@@ -98,7 +73,7 @@ export const ConfirmDialog = memo(
             </ErrorMessage>
           </DialogTitle>
         )}
-        <DialogContent className={classes.dialogContent}>
+        <DialogContent className="w-108 p-4 pr-7">
           {message && <P>{message}</P>}
           <InputLabel htmlFor="confirm-input">{confirmationMessage}</InputLabel>
           <TextInput
@@ -116,7 +91,7 @@ export const ConfirmDialog = memo(
             onChange={handleChange}
           />
         </DialogContent>
-        <DialogActions className={classes.dialogActions}>
+        <DialogActions className="p-8 pt-4">
           <Button
             color="green"
             disabled={isOnErrorState}

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

@@ -56,7 +56,6 @@ const CopyToClipboard = ({
             open={open}
             anchorEl={anchorEl}
             onClose={handleClose}
-            arrowSize={3}
             bgColor={comet}
             className="py-1 px-2"
             placement="top">

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

@@ -1,53 +1,24 @@
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
-import { makeStyles } from '@mui/styles'
 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 { spacer } from 'src/styling/variables'
 
 import ErrorMessage from './ErrorMessage'
 
-const useStyles = makeStyles({
-  content: {
-    width: 434,
-    padding: spacer * 2,
-    paddingRight: spacer * 3.5
-  },
-  titleSection: {
-    padding: spacer * 2,
-    paddingRight: spacer * 1.5,
-    display: 'flex',
-    justifyContent: 'space-between',
-    margin: 0
-  },
-  actions: {
-    padding: spacer * 4,
-    paddingTop: spacer * 2
-  },
-  title: {
-    margin: 0
-  },
-  closeButton: {
-    padding: 0,
-    marginTop: -(spacer / 2)
-  }
-})
-
 export const DialogTitle = ({ children, close }) => {
-  const classes = useStyles()
   return (
-    <div className={classes.titleSection}>
+    <div className="p-4 pr-3 flex justify-between m-0">
       {children}
       {close && (
         <IconButton
           size={16}
           aria-label="close"
           onClick={close}
-          className={classes.closeButton}>
+          className="p-0 -mt-1">
           <CloseIcon />
         </IconButton>
       )}
@@ -65,12 +36,10 @@ export const DeleteDialog = ({
   extraMessage,
   errorMessage = ''
 }) => {
-  const classes = useStyles()
-
   return (
     <Dialog open={open} aria-labelledby="form-dialog-title">
       <DialogTitle close={() => onDismissed()}>
-        <H4 className={classes.title}>{title}</H4>
+        <H4 className="m-0">{title}</H4>
       </DialogTitle>
       {errorMessage && (
         <DialogTitle>
@@ -84,11 +53,11 @@ export const DeleteDialog = ({
           </ErrorMessage>
         </DialogTitle>
       )}
-      <DialogContent className={classes.content}>
+      <DialogContent className="w-108 p-4 pr-7">
         {confirmationMessage && <P>{confirmationMessage}</P>}
         {extraMessage}
       </DialogContent>
-      <DialogActions className={classes.actions}>
+      <DialogActions className="p-8 pt-4">
         <Button onClick={onConfirmed}>Confirm</Button>
       </DialogActions>
     </Dialog>

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

@@ -1,38 +1,16 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import ErrorIcon from 'src/styling/icons/warning-icon/tomato.svg?react'
 
-import { errorColor } from 'src/styling/variables'
-
 import { Info3 } from './typography'
 
-const styles = {
+const ErrorMessage = ({ className, children }) => {
-  wrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    '& > svg': {
-      marginRight: 10
-    }
-  },
-  message: {
-    display: 'flex',
-    alignItems: 'center',
-    color: errorColor,
-    margin: 0,
-    whiteSpace: 'break-spaces'
-  }
-}
-
-const useStyles = makeStyles(styles)
-
-const ErrorMessage = ({ className, children, ...props }) => {
-  const classes = useStyles()
-
   return (
-    <div className={classnames(classes.wrapper, className)}>
+    <div className={classnames('flex items-center', className)}>
-      <ErrorIcon />
+      <ErrorIcon className="mr-3" />
-      <Info3 className={classes.message}>{children}</Info3>
+      <Info3 className="flex items-center text-tomato m-0 whitespace-break-spaces">
+        {children}
+      </Info3>
     </div>
   )
 }

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

@@ -1,5 +1,4 @@
 import ClickAwayListener from '@mui/material/ClickAwayListener'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import Popper from 'src/components/Popper'
@@ -8,18 +7,8 @@ import ZoomIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
 
 import { FeatureButton } from 'src/components/buttons'
 
-import imagePopperStyles from './ImagePopper.styles'
-
-const useStyles = makeStyles(imagePopperStyles)
-
 const ImagePopper = memo(
   ({ className, width, height, popupWidth, popupHeight, src }) => {
-    const classes = useStyles({
-      width,
-      height,
-      popupWidth,
-      popupHeight
-    })
     const [popperAnchorEl, setPopperAnchorEl] = useState(null)
 
     const handleOpenPopper = event => {
@@ -38,17 +27,24 @@ const ImagePopper = memo(
 
     return (
       <ClickAwayListener onClickAway={handleClosePopper}>
-        <div className={classnames(classes.row, className)}>
+        <div className={classnames('flex flex-row', className)}>
-          <Image className={classes.image} />
+          <Image
+            className="object-cover rounded-tl-lg"
+            style={{ width, height }}
+          />
           <FeatureButton
             Icon={ZoomIcon}
             InverseIcon={ZoomIconInverse}
-            className={classes.button}
+            className="rounded-br-lg"
+            style={{ height }}
             onClick={handleOpenPopper}
           />
           <Popper open={popperOpen} anchorEl={popperAnchorEl} placement="top">
-            <div className={classes.popoverContent}>
+            <div className="block py-2 px-4">
-              <Image className={classes.popupImage} />
+              <Image
+                className="object-cover"
+                style={{ width: popupWidth, height: popupHeight }}
+              />
             </div>
           </Popper>
         </div>

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

@@ -1,25 +0,0 @@
-export default {
-  row: {
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  image: ({ width, height }) => ({
-    objectFit: 'cover',
-    borderRadius: '8px 0px 0px 8px',
-    width,
-    height
-  }),
-  popupImage: ({ popupWidth, popupHeight }) => ({
-    objectFit: 'cover',
-    width: popupWidth,
-    height: popupHeight
-  }),
-  button: ({ height }) => ({
-    borderRadius: '0px 8px 8px 0px',
-    height
-  }),
-  popoverContent: {
-    display: 'block',
-    padding: [[10, 15]]
-  }
-}

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

@@ -1,43 +1,13 @@
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
-import { makeStyles } from '@mui/styles'
 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'
-import { spacer } from 'src/styling/variables'
-
-const useStyles = makeStyles({
-  closeButton: {
-    display: 'flex',
-    padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],
-    paddingRight: spacer * 1.5,
-    justifyContent: 'end'
-  },
-  title: {
-    margin: [[0, spacer * 2, spacer, spacer * 2 + 4]]
-  }
-})
-
-export const DialogTitle = ({ children, onClose }) => {
-  const classes = useStyles()
-  return (
-    <div className={classes.dialogTitle}>
-      {children}
-      {onClose && (
-        <IconButton size={16} aria-label="close" onClick={onClose}>
-          <CloseIcon />
-        </IconButton>
-      )}
-    </div>
-  )
-}
 
 export const InformativeDialog = memo(
   ({ title = '', open, onDissmised, disabled = false, data, ...props }) => {
-    const classes = useStyles()
-
     const innerOnClose = () => {
       onDissmised()
     }
@@ -53,13 +23,13 @@ export const InformativeDialog = memo(
         open={open}
         aria-labelledby="form-dialog-title"
         {...props}>
-        <div className={classes.closeButton}>
+        <div className="flex justify-end pt-4 pr-3 pb-0 pl-4">
           <IconButton size={16} aria-label="close" onClick={innerOnClose}>
             <CloseIcon />
           </IconButton>
         </div>
-        <H1 className={classes.title}>{title}</H1>
+        <H1 className="mt-0 mr-4 mb-2 ml-5">{title}</H1>
-        <DialogContent className={classes.dialogContent}>{data}</DialogContent>
+        <DialogContent>{data}</DialogContent>
       </Dialog>
     )
   }

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

@@ -1,6 +1,5 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from '@apollo/client'
 import ClickAwayListener from '@mui/material/ClickAwayListener'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { format, set } from 'date-fns/fp'
 import FileSaver from 'file-saver'
@@ -11,68 +10,32 @@ import DownloadInverseIcon from 'src/styling/icons/button/download/white.svg?rea
 import Download from 'src/styling/icons/button/download/zodiac.svg?react'
 
 import { FeatureButton, Link } from 'src/components/buttons'
-import { primaryColor, offColor, zircon } from 'src/styling/variables'
 import { formatDate } from 'src/utils/timezones'
 
 import Popper from './Popper'
 import DateRangePicker from './date-range-picker/DateRangePicker'
 import { RadioGroup } from './inputs'
 import typographyStyles from './typography/styles'
+import { H4, Info1, Label1, Label2 } from './typography/index.jsx'
 
-const { info1, label1, label2, h4 } = typographyStyles
+const DateContainer = ({ date, children }) => {
-
-const dateContainerStyles = {
-  wrapper: {
-    height: 46,
-    width: 99
-  },
-  container: {
-    display: 'flex'
-  },
-  monthWeekDayContainer: {
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  label: {
-    extend: label1,
-    lineHeight: 1.33,
-    color: primaryColor
-  },
-  bigNumber: {
-    extend: info1,
-    lineHeight: 1,
-    marginRight: 7
-  },
-  monthYear: {
-    extend: label2,
-    lineHeight: 1.17,
-    color: primaryColor
-  },
-  weekDay: {
-    extend: label1,
-    lineHeight: 1.33,
-    color: offColor
-  }
-}
-
-const dateContainerUseStyles = makeStyles(dateContainerStyles)
-
-const DateContainer = ({ date, children, ...props }) => {
-  const classes = dateContainerUseStyles()
-
   return (
-    <div className={classes.wrapper}>
+    <div className="h-11 w-25">
-      <div className={classes.label}>{children}</div>
+      <Label1 noMargin>{children}</Label1>
       {date && (
         <>
-          <div className={classes.container}>
+          <div className="flex">
-            <div className={classes.bigNumber}>{format('d', date)}</div>
+            <Info1 noMargin className="mr-2">
-            <div className={classes.monthWeekDayContainer}>
+              {format('d', date)}
-              <span className={classes.monthYear}>{`${format(
+            </Info1>
+            <div className="flex flex-col">
+              <Label2 noMargin>{`${format(
                 'MMM',
                 date
-              )} ${format('yyyy', date)}`}</span>
+              )} ${format('yyyy', date)}`}</Label2>
-              <span className={classes.weekDay}>{format('EEEE', date)}</span>
+              <Label1 noMargin className="text-comet">
+                {format('EEEE', date)}
+              </Label1>
             </div>
           </div>
         </>
@@ -81,54 +44,6 @@ const DateContainer = ({ date, children, ...props }) => {
   )
 }
 
-const styles = {
-  popoverContent: {
-    width: 280
-  },
-  popoverHeader: {
-    extend: h4,
-    padding: [[15, 15, 0, 15]]
-  },
-  radioButtonsContainer: {
-    padding: [[5, 15, 5, 15]]
-  },
-  radioButtons: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    flexDirection: 'row',
-    color: primaryColor
-  },
-  dateRangePickerShowing: {
-    display: 'block',
-    height: '100%'
-  },
-  dateRangePickerHidden: {
-    display: 'none',
-    height: 0
-  },
-  download: {
-    padding: [[10, 15]]
-  },
-  dateContainerWrapper: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    position: 'relative',
-    backgroundColor: zircon,
-    padding: [[0, 15]],
-    minHeight: 70
-  },
-  arrowContainer: {
-    position: 'absolute',
-    left: 125,
-    top: 26
-  },
-  arrow: {
-    margin: 'auto'
-  }
-}
-
-const useStyles = makeStyles(styles)
 const ALL = 'all'
 const RANGE = 'range'
 const ADVANCED = 'advanced'
@@ -153,11 +68,9 @@ const LogsDownloaderPopover = ({
     onCompleted: data => createLogsFile(getLogs(data), range)
   })
 
-  const classes = useStyles()
-
   const dateRangePickerClasses = {
-    [classes.dateRangePickerShowing]: selectedRadio === RANGE,
+    'block h-full': selectedRadio === RANGE,
-    [classes.dateRangePickerHidden]: selectedRadio === ALL
+    hidden: selectedRadio === ALL
   }
 
   const handleRadioButtons = evt => {
@@ -255,26 +168,28 @@ const LogsDownloaderPopover = ({
           variant="contained"
         />
         <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom">
-          <div className={classes.popoverContent}>
+          <div className="w-70">
-            <div className={classes.popoverHeader}>{title}</div>
+            <H4 noMargin className="p-4 pb-0">
-            <div className={classes.radioButtonsContainer}>
+              {title}
+            </H4>
+            <div className="py-1 px-4">
               <RadioGroup
                 name="logs-select"
                 value={selectedRadio}
                 options={radioButtonOptions}
                 ariaLabel="logs-select"
                 onChange={handleRadioButtons}
-                className={classes.radioButtons}
+                className="flex flex-row justify-between text-zodiac"
               />
             </div>
             {selectedRadio === RANGE && (
               <div className={classnames(dateRangePickerClasses)}>
-                <div className={classes.dateContainerWrapper}>
+                <div className="flex justify-between items-center py-0 px-4 bg-zircon relative min-h-20">
                   {range && (
                     <>
                       <DateContainer date={range.from}>From</DateContainer>
-                      <div className={classes.arrowContainer}>
+                      <div className="absolute left-31 top-6">
-                        <Arrow className={classes.arrow} />
+                        <Arrow className="m-auto" />
                       </div>
                       <DateContainer date={range.until}>To</DateContainer>
                     </>
@@ -295,18 +210,18 @@ const LogsDownloaderPopover = ({
               </div>
             )}
             {simplified && (
-              <div className={classes.radioButtonsContainer}>
+              <div className="py-1 px-4">
                 <RadioGroup
                   name="simplified-tx-logs"
                   value={selectedAdvancedRadio}
                   options={advancedRadioButtonOptions}
                   ariaLabel="simplified-tx-logs"
                   onChange={handleAdvancedRadioButtons}
-                  className={classes.radioButtons}
+                  className="flex flex-row justify-between text-zodiac"
                 />
               </div>
             )}
-            <div className={classes.download}>
+            <div className="py-3 px-4">
               <Link color="primary" onClick={() => downloadLogs(range, args)}>
                 Download
               </Link>

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

@@ -1,6 +1,5 @@
 import MaterialModal from '@mui/material/Modal'
 import Paper from '@mui/material/Paper'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import { H1, H4 } from 'src/components/typography'
@@ -8,68 +7,6 @@ import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
 import { IconButton } from 'src/components/buttons'
 
-const styles = {
-  modal: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    alignItems: 'center'
-  },
-  wrapper: ({ width, height }) => ({
-    width,
-    height,
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: height ?? 400,
-    maxHeight: '90vh',
-    overflowY: 'auto',
-    borderRadius: 8,
-    outline: 0
-  }),
-  infoPanelWrapper: ({ width, infoPanelHeight }) => ({
-    width,
-    height: infoPanelHeight,
-    marginTop: 16,
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: infoPanelHeight ?? 200,
-    maxHeight: '90vh',
-    overflowY: 'auto',
-    borderRadius: 8,
-    outline: 0
-  }),
-  panelContent: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    padding: [[0, 24]]
-  },
-  content: ({ small, xl }) => ({
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    padding: xl ? [[0, 60 + 28]] : small ? [[0, 16]] : [[0, 32]]
-  }),
-  button: ({ small, xl }) => ({
-    padding: [[0, 0, 0, 0]],
-    margin: xl
-      ? [[0, 0, 'auto', 'auto']]
-      : small
-        ? [[12, 12, 'auto', 'auto']]
-        : [[16, 16, 'auto', 'auto']]
-  }),
-  header: {
-    display: 'flex'
-  },
-  title: ({ small }) => ({
-    margin: small ? [[20, 0, 8, 16]] : [[28, 0, 8, 32]]
-  })
-}
-
-const useStyles = makeStyles(styles)
-
 const Modal = ({
   width,
   height,
@@ -86,7 +23,6 @@ const Modal = ({
   closeOnBackdropClick,
   ...props
 }) => {
-  const classes = useStyles({ width, height, small, infoPanelHeight, xl })
   const TitleCase = small ? H4 : H1
   const closeSize = xl ? 28 : small ? 16 : 20
 
@@ -96,24 +32,60 @@ const Modal = ({
     handleClose()
   }
 
+  const marginBySize = xl ? 0 : small ? 12 : 16
+  const paddingBySize = xl ? 88 : small ? 16 : 32
   return (
-    <MaterialModal onClose={innerClose} className={classes.modal} {...props}>
+    <MaterialModal
+      onClose={innerClose}
+      className="flex justify-center flex-col items-center"
+      {...props}>
       <>
-        <Paper className={classnames(classes.wrapper, className)}>
+        <Paper
-          <div className={classes.header}>
+          style={{ width, height, minHeight: height ?? 400 }}
-            {title && <TitleCase className={classes.title}>{title}</TitleCase>}
+          className={classnames(
+            'flex flex-col max-h-[90vh] rounded-lg outline-0',
+            className
+          )}>
+          <div className="flex">
+            {title && (
+              <TitleCase
+                className={
+                  small ? 'mt-5 mr-0 mb-2 ml-4' : 'mt-7 mr-0 mb-2 ml-8'
+                }>
+                {title}
+              </TitleCase>
+            )}
+            <div
+              className="ml-auto"
+              style={{ marginRight: marginBySize, marginTop: marginBySize }}>
               <IconButton
                 size={closeSize}
-              className={classes.button}
+                className="p-0 mb-auto ml-auto"
                 onClick={() => handleClose()}>
                 <CloseIcon />
               </IconButton>
             </div>
-          <div className={classes.content}>{children}</div>
+          </div>
+          <div
+            className="w-full flex flex-col flex-1"
+            style={{ paddingRight: paddingBySize, paddingLeft: paddingBySize }}>
+            {children}
+          </div>
         </Paper>
         {infoPanel && (
-          <Paper className={classnames(classes.infoPanelWrapper, className)}>
+          <Paper
-            <div className={classes.panelContent}>{infoPanel}</div>
+            style={{
+              width,
+              height: infoPanelHeight,
+              minHeight: infoPanelHeight ?? 200
+            }}
+            className={classnames(
+              'mt-4 flex flex-col max-h-[90vh] overflow-y-auto rounded-lg outline-0',
+              className
+            )}>
+            <div className="w-full flex flex-col flex-1 py-0 px-6">
+              {infoPanel}
+            </div>
           </Paper>
         )}
       </>

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

@@ -1,120 +1,15 @@
 import MaterialPopper from '@mui/material/Popper'
 import Paper from '@mui/material/Paper'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import { white } from 'src/styling/variables'
+import classes from './Popper.module.css'
 
-const Popover = ({
+const Popover = ({ children, bgColor = white, className, ...props }) => {
-  children,
-  bgColor = white,
-  arrowSize = 6,
-  className,
-  ...props
-}) => {
   const [arrowRef, setArrowRef] = useState(null)
 
-  const styles = {
-    popover: {
-      zIndex: 3000,
-      backgroundColor: bgColor,
-      borderRadius: 4
-    },
-    arrow: {
-      position: 'absolute',
-      fontSize: arrowSize,
-      width: '3em',
-      height: '3em'
-    },
-    arrowBottom: {
-      top: 0,
-      width: 0,
-      height: 0,
-      borderLeft: [['2em', 'solid', 'transparent']],
-      borderRight: [['2em', 'solid', 'transparent']],
-      borderBottom: [['2em', 'solid', bgColor]],
-      marginTop: '-1.9em',
-      '&:after': {
-        zIndex: -10,
-        content: '""',
-        position: 'absolute',
-        width: arrowSize * 3,
-        height: arrowSize * 3,
-        marginLeft: 0,
-        bottom: 0,
-        top: 'calc(50% - 0px)',
-        left: 0,
-        border: '5px solid #fff',
-        borderColor: 'transparent transparent #fff #fff',
-        transformOrigin: '0 0',
-        transform: 'rotate(45deg)',
-        boxShadow:
-          '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)'
-      }
-    },
-    arrowTop: {
-      bottom: 0,
-      width: 0,
-      height: 0,
-      borderLeft: [['2em', 'solid', 'transparent']],
-      borderRight: [['2em', 'solid', 'transparent']],
-      borderTop: [['2em', 'solid', bgColor]],
-      marginBottom: '-1.9em',
-      '&:after': {
-        zIndex: -10,
-        content: '""',
-        position: 'absolute',
-        width: arrowSize * 3,
-        height: arrowSize * 3,
-        marginLeft: 0,
-        bottom: 0,
-        top: -(arrowSize * 4 + 2),
-        left: 0,
-        border: '5px solid #fff',
-        borderColor: 'transparent transparent #fff #fff',
-        transformOrigin: '0 0',
-        transform: 'rotate(45deg)',
-        boxShadow:
-          '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)'
-      }
-    },
-    arrowRight: {
-      left: 0,
-      width: 0,
-      height: 0,
-      borderTop: [['2em', 'solid', 'transparent']],
-      borderBottom: [['2em', 'solid', 'transparent']],
-      borderRight: [['2em', 'solid', bgColor]],
-      marginLeft: '-1.9em'
-    },
-    arrowLeft: {
-      right: 0,
-      width: 0,
-      height: 0,
-      borderTop: [['2em', 'solid', 'transparent']],
-      borderBottom: [['2em', 'solid', 'transparent']],
-      borderLeft: [['2em', 'solid', bgColor]],
-      marginRight: '-1.9em'
-    },
-    root: {
-      backgroundColor: bgColor
-    }
-  }
-
-  const useStyles = makeStyles(styles)
-
-  const classes = useStyles()
-
-  const getArrowClasses = placement => ({
-    [classes.arrow]: true,
-    [classes.arrowBottom]: placement === 'bottom',
-    [classes.arrowTop]: placement === 'top',
-    [classes.arrowRight]: placement === 'right',
-    [classes.arrowLeft]: placement === 'left'
-  })
-
   const flipPlacements = {
     top: ['bottom'],
     bottom: ['top'],
@@ -164,17 +59,16 @@ const Popover = ({
       <MaterialPopper
         disablePortal={false}
         modifiers={modifiers}
-        className={classes.popover}
+        className={classnames(classes.tooltip, 'z-3000 rounded-sm')}
         {...props}>
-        {({ placement }) => (
+        <Paper style={{ backgroundColor: bgColor }} className={className}>
-          <Paper className={classnames(classes.root, className)}>
           <span
-              className={classnames(getArrowClasses(placement))}
+            className={classes.newArrow}
+            data-popper-arrow
             ref={setArrowRef}
           />
           {children}
         </Paper>
-        )}
       </MaterialPopper>
     </>
   )

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

@@ -0,0 +1,33 @@
+.newArrow,
+.newArrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.newArrow {
+  visibility: hidden;
+}
+
+.newArrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.tooltip[data-popper-placement^='top'] > div > span {
+  bottom: -4px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > div > span {
+  top: -4px;
+}
+
+.tooltip[data-popper-placement^='left'] > div > span {
+  right: -4px;
+}
+
+.tooltip[data-popper-placement^='right'] > div > span {
+  left: -4px;
+}

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

@@ -1,16 +1,11 @@
 import InputBase from '@mui/material/InputBase'
 import Paper from '@mui/material/Paper'
-import { makeStyles } from '@mui/styles'
 import MAutocomplete from '@mui/material/Autocomplete'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { P } from 'src/components/typography'
 import SearchIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
 
-import styles from './SearchBox.styles'
-
-const useStyles = makeStyles(styles)
-
 const SearchBox = memo(
   ({
     loading = false,
@@ -21,13 +16,11 @@ const SearchBox = memo(
     onChange,
     ...props
   }) => {
-    const classes = useStyles({ size })
-
     const [popupOpen, setPopupOpen] = useState(false)
 
     const inputClasses = {
-      [classes.input]: true,
+      'flex flex-1 h-8 px-2 py-2 font-md items-center rounded-2xl bg-zircon text-comet': true,
-      [classes.inputWithPopup]: popupOpen
+      'rounded-b-none': popupOpen
     }
 
     const innerOnChange = filters => onChange(filters)
@@ -35,15 +28,16 @@ const SearchBox = memo(
     return (
       <MAutocomplete
         loading={loading}
-        classes={{ option: classes.autocomplete }}
         value={filters}
         options={options}
         getOptionLabel={it => it.label || it.value}
         renderOption={(props, it) => (
           <li {...props}>
-            <div className={classes.item}>
+            <div className="flex flex-row w-full h-8">
-              <P className={classes.itemLabel}>{it.label || it.value}</P>
+              <P className="m-0 whitespace-nowrap overflow-hidden text-ellipsis">
-              <P className={classes.itemType}>{it.type}</P>
+                {it.label || it.value}
+              </P>
+              <P className="m-0 ml-auto text-sm text-come">{it.type}</P>
             </div>
           </li>
         )}
@@ -54,8 +48,10 @@ const SearchBox = memo(
         filterSelectedOptions
         isOptionEqualToValue={(option, value) => option.type === value.type}
         PaperComponent={({ children }) => (
-          <Paper elevation={0} className={classes.popup}>
+          <Paper
-            <div className={classes.separator} />
+            elevation={0}
+            className="flex flex-col rounded-b-xl bg-zircon shadow-2xl">
+            <div className="w-[88%] h-[1px] my-p mx-auto border-1 border-comet" />
             {children}
           </Paper>
         )}
@@ -65,13 +61,10 @@ const SearchBox = memo(
               ref={params.InputProps.ref}
               {...params}
               className={classnames(inputClasses)}
-              startAdornment={<SearchIcon className={classes.iconButton} />}
+              startAdornment={<SearchIcon className="mr-3" />}
               placeholder={inputPlaceholder}
               inputProps={{
-                className: classes.bold,
+                className: 'font-bold',
-                classes: {
-                  root: classes.size
-                },
                 ...params.inputProps
               }}
             />

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

@@ -1,78 +0,0 @@
-import baseButtonStyles from 'src/components/buttons/BaseButton.styles'
-import { bySize, bold } from 'src/styling/helpers'
-import { zircon, comet, primaryColor } from 'src/styling/variables'
-
-const { baseButton } = baseButtonStyles
-
-const searchBoxBorderRadius = baseButton.height / 2
-const searchBoxHeight = 32
-const popupBorderRadiusFocus = baseButton.height / 4
-
-const hoverColor = 'rgba(0, 0, 0, 0.08)'
-const boxShadow = `0 4px 4px 0 ${hoverColor}`
-
-const styles = {
-  size: ({ size }) => ({
-    marginTop: size === 'lg' ? 0 : 2,
-    ...bySize(size)
-  }),
-  bold,
-  autocomplete: {
-    '&[data-focus="true"]': {
-      backgroundColor: hoverColor
-    }
-  },
-  popup: {
-    display: 'flex',
-    flexDirection: 'column',
-    borderRadius: [[0, 0, popupBorderRadiusFocus, popupBorderRadiusFocus]],
-    backgroundColor: zircon,
-    boxShadow
-  },
-  separator: {
-    width: '88%',
-    height: 1,
-    margin: '0 auto',
-    border: 'solid 0.5px',
-    borderColor: comet
-  },
-  item: {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    height: 36,
-    alignItems: 'center'
-  },
-  itemLabel: {
-    margin: [0],
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-  itemType: {
-    marginLeft: 'auto',
-    fontSize: 12,
-    color: comet,
-    margin: [0]
-  },
-  input: {
-    display: 'flex',
-    flex: 1,
-    width: 273,
-    padding: [[8, 12]],
-    alignItems: 'center',
-    height: searchBoxHeight,
-    borderRadius: searchBoxBorderRadius,
-    backgroundColor: zircon,
-    color: primaryColor
-  },
-  inputWithPopup: {
-    borderRadius: [[popupBorderRadiusFocus, popupBorderRadiusFocus, 0, 0]],
-    boxShadow
-  },
-  iconButton: {
-    marginRight: 12
-  }
-}
-
-export default styles

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

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import Chip from '@mui/material/Chip'
 import React from 'react'
 import { P, Label3 } from 'src/components/typography'
@@ -9,38 +8,29 @@ import ReverseFilterIcon from 'src/styling/icons/button/filter/zodiac.svg?react'
 import { ActionButton } from 'src/components/buttons'
 import { onlyFirstToUpper, singularOrPlural } from 'src/utils/string'
 
-import { chipStyles, styles } from './SearchFilter.styles'
-
-const useChipStyles = makeStyles(chipStyles)
-const useStyles = makeStyles(styles)
-
 const SearchFilter = ({
   filters,
   onFilterDelete,
   deleteAllFilters,
   entries = 0
 }) => {
-  const chipClasses = useChipStyles()
-  const classes = useStyles()
-
   return (
     <>
-      <P className={classes.text}>{'Filters:'}</P>
+      <P className="mx-0">{'Filters:'}</P>
-      <div className={classes.filters}>
+      <div className="flex mb-4">
-        <div className={classes.chips}>
+        <div className="mt-auto">
           {filters.map((f, idx) => (
             <Chip
               key={idx}
-              classes={chipClasses}
               label={`${onlyFirstToUpper(f.type)}: ${f.label || f.value}`}
               onDelete={() => onFilterDelete(f)}
-              deleteIcon={<CloseIcon className={classes.button} />}
+              deleteIcon={<CloseIcon className="w-2 h-2 mx-2" />}
             />
           ))}
         </div>
-        <div className={classes.deleteWrapper}>
+        <div className="flex ml-auto justify-end flex-row">
           {
-            <Label3 className={classes.entries}>{`${entries} ${singularOrPlural(
+            <Label3 className="text-comet m-auto mr-3">{`${entries} ${singularOrPlural(
               entries,
               `entry`,
               `entries`
@@ -50,7 +40,6 @@ const SearchFilter = ({
             color="secondary"
             Icon={ReverseFilterIcon}
             InverseIcon={FilterIcon}
-            className={classes.deleteButton}
             onClick={deleteAllFilters}>
             Delete filters
           </ActionButton>

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

@@ -1,62 +0,0 @@
-import {
-  primaryColor,
-  zircon,
-  smallestFontSize,
-  inputFontFamily,
-  inputFontWeight,
-  spacer,
-  offColor
-} from 'src/styling/variables'
-
-const chipStyles = {
-  root: {
-    marginLeft: 0,
-    height: 20,
-    backgroundColor: zircon,
-    '&:hover, &:focus, &:active': {
-      backgroundColor: zircon
-    },
-    marginBottom: 'auto'
-  },
-  label: {
-    fontSize: smallestFontSize,
-    fontWeight: inputFontWeight,
-    fontFamily: inputFontFamily,
-    paddingRight: 0,
-    paddingLeft: spacer,
-    color: primaryColor
-  }
-}
-
-const styles = {
-  button: {
-    width: 8,
-    height: 8,
-    marginLeft: 8,
-    marginRight: 8
-  },
-  text: {
-    marginTop: 0,
-    marginBottom: 0
-  },
-  filters: {
-    display: 'flex',
-    marginBottom: 16
-  },
-  deleteWrapper: {
-    display: 'flex',
-    marginLeft: 'auto',
-    justifyContent: 'flex-end',
-    flexDirection: 'row'
-  },
-  entries: {
-    color: offColor,
-    margin: 'auto',
-    marginRight: 12
-  },
-  chips: {
-    marginTop: 'auto'
-  }
-}
-
-export { chipStyles, styles }

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

@@ -1,59 +1,8 @@
 import Chip from '@mui/material/Chip'
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 
-import {
-  tomato,
-  mistyRose,
-  pumpkin,
-  secondaryColorDarker as spring4,
-  inputFontWeight,
-  spring3,
-  zircon,
-  primaryColor,
-  smallestFontSize,
-  inputFontFamily,
-  spacer,
-  linen
-} from '../styling/variables'
-
-const colors = {
-  error: tomato,
-  warning: pumpkin,
-  success: spring4,
-  neutral: primaryColor
-}
-
-const backgroundColors = {
-  error: mistyRose,
-  warning: linen,
-  success: spring3,
-  neutral: zircon
-}
-
-const useStyles = makeStyles({
-  root: {
-    borderRadius: spacer / 2,
-    marginTop: spacer / 2,
-    marginRight: spacer / 4,
-    marginBottom: spacer / 2,
-    marginLeft: spacer / 4,
-    height: spacer * 3,
-    backgroundColor: ({ type }) => backgroundColors[type]
-  },
-  label: {
-    fontSize: smallestFontSize,
-    fontWeight: inputFontWeight,
-    fontFamily: inputFontFamily,
-    paddingRight: spacer / 2,
-    paddingLeft: spacer / 2,
-    color: ({ type }) => colors[type]
-  }
-})
-
 const Status = ({ status }) => {
-  const classes = useStyles({ type: status.type })
+  return <Chip color={status.type} label={status.label} />
-  return <Chip type={status.type} label={status.label} classes={classes} />
 }
 
 const MainStatus = ({ statuses }) => {

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

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'
@@ -9,79 +8,29 @@ import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg
 import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
 import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
 
-import {
+import classes from './Stepper.module.css'
-  primaryColor,
-  secondaryColor,
-  offColor,
-  disabledColor
-} from 'src/styling/variables'
-
-const styles = {
-  stages: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  wrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    margin: 0
-  },
-  stage: {
-    display: 'flex',
-    height: 28,
-    width: 28,
-    zIndex: 2,
-    '& > svg': {
-      height: '100%',
-      width: '100%',
-      overflow: 'visible'
-    }
-  },
-  separator: {
-    width: 28,
-    height: 2,
-    border: [[2, 'solid']],
-    zIndex: 1
-  },
-  separatorSpring: {
-    borderColor: secondaryColor
-  },
-  separatorZodiac: {
-    borderColor: primaryColor
-  },
-  separatorSpringEmpty: {
-    borderColor: disabledColor
-  },
-  separatorZodiacEmpty: {
-    borderColor: offColor
-  }
-}
-
-const useStyles = makeStyles(styles)
 
 const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {
   if (currentStep < 1 || currentStep > steps)
     throw Error('Value of currentStage is invalid')
   if (steps < 1) throw Error('Value of stages is invalid')
 
-  const classes = useStyles()
-
   const separatorClasses = {
-    [classes.separator]: true,
+    'w-7 h-[2px] border-2 z-1': true,
-    [classes.separatorSpring]: color === 'spring',
+    'border-spring': color === 'spring',
-    [classes.separatorZodiac]: color === 'zodiac'
+    'border-zodiac': color === 'zodiac'
   }
 
   const separatorEmptyClasses = {
-    [classes.separator]: true,
+    'w-7 h-[2px] border-2 z-1': true,
-    [classes.separatorSpringEmpty]: color === 'spring',
+    'border-dust': color === 'spring',
-    [classes.separatorZodiacEmpty]: color === 'zodiac'
+    'border-comet': color === 'zodiac'
   }
 
   return (
-    <div className={classnames(className, classes.stages)}>
+    <div className={classnames(className, 'flex items-center')}>
       {R.range(1, currentStep).map(idx => (
-        <div key={idx} className={classes.wrapper}>
+        <div key={idx} className="flex items-center m-0">
           {idx > 1 && <div className={classnames(separatorClasses)} />}
           <div className={classes.stage}>
             {color === 'spring' && <CompleteStageIconSpring />}
@@ -89,7 +38,7 @@ const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {
           </div>
         </div>
       ))}
-      <div className={classes.wrapper}>
+      <div className="flex items-center m-0">
         {currentStep > 1 && <div className={classnames(separatorClasses)} />}
         <div className={classes.stage}>
           {color === 'spring' && <CurrentStageIconSpring />}
@@ -97,7 +46,7 @@ const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {
         </div>
       </div>
       {R.range(currentStep + 1, steps + 1).map(idx => (
-        <div key={idx} className={classes.wrapper}>
+        <div key={idx} className="flex items-center m-0">
           <div className={classnames(separatorEmptyClasses)} />
           <div className={classes.stage}>
             {color === 'spring' && <EmptyStageIconSpring />}

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

@@ -0,0 +1,12 @@
+.stage {
+  display: flex;
+  height: 28px;
+  width: 28px;
+  z-index: 2;
+}
+
+.stage > svg {
+  height: 100%;
+  width: 100%;
+  overflow: visible;
+}

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

@@ -1,27 +1,12 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 
-import { spacer, offColor } from 'src/styling/variables'
-
 import { TL1 } from './typography'
 
-const useStyles = makeStyles({
-  subtitle: {
-    color: offColor,
-    marginTop: spacer * 2,
-    marginBottom: spacer * 2
-  },
-  extraMarginTop: {
-    marginTop: spacer * 9
-  }
-})
-
 const Subtitle = memo(({ children, className, extraMarginTop }) => {
-  const classes = useStyles()
   const classNames = {
-    [classes.subtitle]: true,
+    'text-comet my-4': true,
-    [classes.extraMarginTop]: extraMarginTop
+    'mt-18': extraMarginTop
   }
 
   return <TL1 className={classnames(classNames, className)}>{children}</TL1>

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

@@ -1,35 +0,0 @@
-import { makeStyles } from '@mui/styles'
-import classnames from 'classnames'
-import React from 'react'
-
-import { Label1 } from './typography'
-
-const useStyles = makeStyles({
-  wrapper: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  colorIndicator: {
-    borderRadius: 3,
-    height: 12,
-    width: 12,
-    marginRight: 8
-  }
-})
-
-const TableLabel = ({ className, label, color, ...props }) => {
-  const classes = useStyles()
-  return (
-    <div className={classnames(classes.wrapper, className)} {...props}>
-      {color && (
-        <div
-          className={classes.colorIndicator}
-          style={{ backgroundColor: color }}
-        />
-      )}
-      <Label1 {...props}>{label}</Label1>
-    </div>
-  )
-}
-
-export default TableLabel

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

@@ -1,20 +1,9 @@
-import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 
-import { spacer } from 'src/styling/variables'
-
 import { H1 } from './typography'
 
-const useStyles = makeStyles({
-  title: {
-    marginTop: spacer * 3,
-    marginBottom: spacer * 3
-  }
-})
-
 const Title = memo(({ children }) => {
-  const classes = useStyles()
+  return <H1 className="my-6">{children}</H1>
-  return <H1 className={classes.title}>{children}</H1>
 })
 
 export default Title

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

@@ -1,11 +1,10 @@
 import ClickAwayListener from '@mui/material/ClickAwayListener'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState, memo } from 'react'
 import Popper from 'src/components/Popper'
 import HelpIcon from 'src/styling/icons/action/help/zodiac.svg?react'
 
-const useStyles = makeStyles({
+const useStyles = {
   transparentButton: {
     border: 'none',
     backgroundColor: 'transparent',
@@ -27,10 +26,9 @@ const useStyles = makeStyles({
     width,
     padding: [[10, 15]]
   })
-})
+}
 
-const usePopperHandler = width => {
+const usePopperHandler = () => {
-  const classes = useStyles({ width })
   const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
 
   const handleOpenHelpPopper = event => {
@@ -48,7 +46,6 @@ const usePopperHandler = width => {
   const helpPopperOpen = Boolean(helpPopperAnchorEl)
 
   return {
-    classes,
     helpPopperAnchorEl,
     helpPopperOpen,
     handleOpenHelpPopper,
@@ -62,15 +59,13 @@ const HelpTooltip = memo(({ children, width }) => {
 
   return (
     <ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
-      <div
+      <div className="relative" onMouseLeave={handler.handleCloseHelpPopper}>
-        className={handler.classes.relativelyPositioned}
-        onMouseLeave={handler.handleCloseHelpPopper}>
         {handler.helpPopperOpen && (
-          <div className={handler.classes.safeSpace}></div>
+          <div className="absolute bg-transparent h-10 -left-1/2 w-[200%]"></div>
         )}
         <button
           type="button"
-          className={handler.classes.transparentButton}
+          className="border-0 bg-transparent outline-0 cursor-pointer mt-1"
           onMouseEnter={handler.openHelpPopper}>
           <HelpIcon />
         </button>
@@ -79,7 +74,9 @@ const HelpTooltip = memo(({ children, width }) => {
           anchorEl={handler.helpPopperAnchorEl}
           arrowEnabled={true}
           placement="bottom">
-          <div className={handler.classes.popoverContent}>{children}</div>
+          <div className="py-2 px-4" style={{ width }}>
+            {children}
+          </div>
         </Popper>
       </div>
     </ClickAwayListener>
@@ -104,7 +101,7 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
             type="button"
             onMouseEnter={handler.handleOpenHelpPopper}
             onMouseLeave={handler.handleCloseHelpPopper}
-            className={handler.classes.transparentButton}>
+            className="border-0 bg-transparent outline-0 cursor-pointer mt-1">
             <HelpIcon />
           </button>
         )}
@@ -112,7 +109,9 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
           open={handler.helpPopperOpen}
           anchorEl={handler.helpPopperAnchorEl}
           placement="bottom">
-          <div className={handler.classes.popoverContent}>{children}</div>
+          <div className="py-2 px-4" style={{ width }}>
+            {children}
+          </div>
         </Popper>
       </div>
     </ClickAwayListener>

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

@@ -1,93 +0,0 @@
-import { makeStyles } from '@mui/styles'
-import Chip from '@mui/material/Chip'
-import * as R from 'ramda'
-import React from 'react'
-
-import {
-  secondaryColorLighter,
-  secondaryColorDarker,
-  offErrorColor,
-  errorColor,
-  offColor,
-  inputFontWeight,
-  smallestFontSize,
-  inputFontFamily,
-  spacer
-} from 'src/styling/variables'
-import { onlyFirstToUpper } from 'src/utils/string'
-
-import typographyStyles from './typography/styles'
-const { label1 } = typographyStyles
-
-const colors = {
-  running: secondaryColorDarker,
-  notRunning: offErrorColor
-}
-
-const backgroundColors = {
-  running: secondaryColorLighter,
-  notRunning: errorColor
-}
-
-const styles = {
-  uptimeContainer: {
-    display: 'inline-block',
-    minWidth: 104,
-    margin: [[0, 20]]
-  },
-  name: {
-    extend: label1,
-    paddingLeft: 4,
-    color: offColor
-  }
-}
-
-const useStyles = makeStyles(styles)
-
-const useChipStyles = makeStyles({
-  root: {
-    borderRadius: spacer / 2,
-    marginTop: spacer / 2,
-    marginRight: spacer / 4,
-    marginBottom: spacer / 2,
-    marginLeft: spacer / 4,
-    height: spacer * 3,
-    backgroundColor: ({ type }) => backgroundColors[type]
-  },
-  label: {
-    fontSize: smallestFontSize,
-    fontWeight: inputFontWeight,
-    fontFamily: inputFontFamily,
-    padding: [[spacer / 2, spacer]],
-    color: ({ type }) => colors[type]
-  }
-})
-
-const Uptime = ({ process, ...props }) => {
-  const classes = useStyles()
-
-  const uptime = time => {
-    if (time < 60) return `${time}s`
-    if (time < 3600) return `${Math.floor(time / 60)}m`
-    if (time < 86400) return `${Math.floor(time / 60 / 60)}h`
-    return `${Math.floor(time / 60 / 60 / 24)}d`
-  }
-
-  return (
-    <div className={classes.uptimeContainer}>
-      <div className={classes.name}>{R.toLower(process.name)}</div>
-      <Chip
-        label={
-          process.state === 'RUNNING'
-            ? `Running for ${uptime(process.uptime)}`
-            : onlyFirstToUpper(process.state)
-        }
-        classes={useChipStyles({
-          type: process.state === 'RUNNING' ? 'running' : 'notRunning'
-        })}
-      />
-    </div>
-  )
-}
-
-export default Uptime

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

@@ -127,7 +127,6 @@ const IDButton = memo(
           open={open}
           anchorEl={anchorEl}
           onClose={handleClose}
-          arrowSize={3}
           placement="top"
           flip>
           <div className={classes.popoverContent}>

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

@@ -1,6 +1,5 @@
 import CardContent from '@mui/material/CardContent'
 import Card from '@mui/material/Card'
-import classnames from 'classnames'
 import { Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
 import { useState, React, useRef } from 'react'
@@ -90,7 +89,7 @@ const EditableCard = ({
 
   const authorized =
     state === OVERRIDE_PENDING
-      ? { label: 'Pending', type: 'neutral' }
+      ? { label: 'Pending', type: 'default' }
       : state === OVERRIDE_REJECTED
         ? { label: 'Rejected', type: 'error' }
         : { label: 'Accepted', type: 'success' }

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

@@ -6,10 +6,16 @@ import { format } from 'date-fns/fp'
 import { QRCodeSVG as QRCode } from 'qrcode.react'
 import * as R from 'ramda'
 import React, { useState } from 'react'
-import TableLabel from 'src/components/TableLabel'
+import TableLabel from 'src/pages/Funding/TableLabel.jsx'
-import Title from 'src/components/Title'
+import Title from 'src/components/Title.jsx'
-import { Tr, Td, THead, TBody, Table } from 'src/components/fake-table/Table'
+import {
-import Sidebar from 'src/components/layout/Sidebar'
+  Tr,
+  Td,
+  THead,
+  TBody,
+  Table
+} from 'src/components/fake-table/Table.jsx'
+import Sidebar from 'src/components/layout/Sidebar.jsx'
 import {
   H3,
   Info1,
@@ -17,10 +23,10 @@ import {
   Info3,
   Label1,
   Label3
-} from 'src/components/typography'
+} from 'src/components/typography/index.jsx'
 import CopyToClipboard from 'src/components/CopyToClipboard.jsx'
 
-import { primaryColor } from 'src/styling/variables'
+import { primaryColor } from 'src/styling/variables.js'
 
 import classes from './Funding.module.css'
 

new-lamassu-admin/src/pages/Funding/TableLabel.jsx

@@ -0,0 +1,20 @@
+import classnames from 'classnames'
+import React from 'react'
+
+import { Label1 } from '../../components/typography/index.jsx'
+
+const TableLabel = ({ className, label, color, ...props }) => {
+  return (
+    <div className={classnames('flex items-center', className)} {...props}>
+      {color && (
+        <div
+          className="rounded-sm h-3 w-3 mr-2"
+          style={{ backgroundColor: color }}
+        />
+      )}
+      <Label1 {...props}>{label}</Label1>
+    </div>
+  )
+}
+
+export default TableLabel

new-lamassu-admin/src/pages/Logs/MachineLogs.jsx

@@ -1,10 +1,10 @@
-import { useQuery, gql } from "@apollo/client";
+import { useQuery, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState } from 'react'
-import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
+import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper.jsx'
-import Title from 'src/components/Title'
+import Title from 'src/components/Title.jsx'
-import Sidebar from 'src/components/layout/Sidebar'
+import Sidebar from 'src/components/layout/Sidebar.jsx'
-import { Info3, H4 } from 'src/components/typography'
+import { Info3, H4 } from 'src/components/typography/index.jsx'
 
 import {
   Table,
@@ -13,8 +13,8 @@ import {
   TableHeader,
   TableBody,
   TableCell
-} from 'src/components/table'
+} from 'src/components/table/index.js'
-import { formatDate } from 'src/utils/timezones'
+import { formatDate } from 'src/utils/timezones.js'
 
 import classes from './Logs.module.css'
 
@@ -48,7 +48,12 @@ const GET_MACHINE_LOGS_CSV = gql`
 `
 
 const GET_MACHINE_LOGS = gql`
-  query MachineLogs($deviceId: ID!, $limit: Int, $from: DateTimeISO, $until: DateTimeISO) {
+  query MachineLogs(
+    $deviceId: ID!
+    $limit: Int
+    $from: DateTimeISO
+    $until: DateTimeISO
+  ) {
     machineLogs(
       deviceId: $deviceId
       limit: $limit

new-lamassu-admin/src/pages/Logs/ServerLogs.jsx

@@ -1,12 +1,12 @@
 import { useQuery, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState, useRef } from 'react'
-import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
+import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper.jsx'
-import Title from 'src/components/Title'
+import Title from 'src/components/Title.jsx'
-import Uptime from 'src/components/Uptime'
+import Uptime from 'src/pages/Logs/Uptime.jsx'
-import { Info3, H4 } from 'src/components/typography'
+import { Info3, H4 } from 'src/components/typography/index.jsx'
 
-import { Select } from 'src/components/inputs'
+import { Select } from 'src/components/inputs/index.js'
 import {
   Table,
   TableHead,
@@ -14,9 +14,9 @@ import {
   TableHeader,
   TableBody,
   TableCell
-} from 'src/components/table'
+} from 'src/components/table/index.js'
-import { startCase } from 'src/utils/string'
+import { startCase } from 'src/utils/string.js'
-import { formatDate } from 'src/utils/timezones'
+import { formatDate } from 'src/utils/timezones.js'
 
 import logsClasses from './Logs.module.css'
 import classes from './ServerLogs.module.css'

new-lamassu-admin/src/pages/Logs/ServerLogs.module.css

@@ -1,5 +1,5 @@
 .serverTableWrapper {
-  composes: tableWrapper from './Logs.module.css';
+  composes: tableWrapper from 'Logs.module.css';
   max-width: 100%;
   margin-left: 0;
 }

new-lamassu-admin/src/pages/Logs/Uptime.jsx

@@ -0,0 +1,33 @@
+import Chip from '@mui/material/Chip'
+import * as R from 'ramda'
+import React from 'react'
+
+import { onlyFirstToUpper } from 'src/utils/string.js'
+import { Label1 } from 'src/components/typography/index.jsx'
+
+const Uptime = ({ process }) => {
+  const uptime = time => {
+    if (time < 60) return `${time}s`
+    if (time < 3600) return `${Math.floor(time / 60)}m`
+    if (time < 86400) return `${Math.floor(time / 60 / 60)}h`
+    return `${Math.floor(time / 60 / 60 / 24)}d`
+  }
+
+  return (
+    <div className="inline-block min-w-26 my-0 mx-5">
+      <Label1 noMargin className="pl-1 color-comet">
+        {R.toLower(process.name)}
+      </Label1>
+      <Chip
+        color={process.state === 'RUNNING' ? 'success' : 'error'}
+        label={
+          process.state === 'RUNNING'
+            ? `Running for ${uptime(process.uptime)}`
+            : onlyFirstToUpper(process.state)
+        }
+      />
+    </div>
+  )
+}
+
+export default Uptime

new-lamassu-admin/src/routing/lamassu.routes.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Redirect } from 'react-router-dom'
-import Funding from 'src/pages/Funding'
+import Funding from 'src/pages/Funding/Funding.jsx'
 import IndividualDiscounts from 'src/pages/LoyaltyPanel/IndividualDiscounts'
 import PromoCodes from 'src/pages/LoyaltyPanel/PromoCodes'
-import MachineLogs from 'src/pages/MachineLogs'
+import MachineLogs from 'src/pages/Logs/MachineLogs.jsx'
 import CashUnits from 'src/pages/Maintenance/CashUnits'
 import MachineStatus from 'src/pages/Maintenance/MachineStatus'
 import Notifications from 'src/pages/Notifications/Notifications'
@@ -13,7 +13,7 @@ import MachineScreens from 'src/pages/OperatorInfo/MachineScreens'
 import ReceiptPrinting from 'src/pages/OperatorInfo/ReceiptPrinting'
 import SMSNotices from 'src/pages/OperatorInfo/SMSNotices/SMSNotices'
 import TermsConditions from 'src/pages/OperatorInfo/TermsConditions'
-import ServerLogs from 'src/pages/ServerLogs'
+import ServerLogs from 'src/pages/Logs/ServerLogs.jsx'
 import Services from 'src/pages/Services/Services'
 import SessionManagement from 'src/pages/SessionManagement/SessionManagement'
 import Transactions from 'src/pages/Transactions/Transactions'

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

@@ -19,6 +19,7 @@
   --comet3: #525772;
 
   --tomato: #ff584a;
+  --misty-rose: #ffeceb;
 
   --dust: #dddddd;
   --ghost: #fafbff;
@@ -45,7 +46,8 @@
   --color-comet2: var(--comet2);
   --color-comet3: var(--comet3);
   --color-tomato: var(--tomato);
-  --color--dust: var(--dust);
+  --color-misty-rose: var(--misty-rose);
+  --color-dust: var(--dust);
   --color-ghost: var(--ghost);
   --color-zircon: var(--zircon);
   --color-zircon2: var(--zircon2);

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

@@ -16,7 +16,13 @@ import {
   disabledColor2,
   disabledColor,
   smallestFontSize,
-  inputFontWeight
+  inputFontWeight,
+  spring3,
+  spring4,
+  tomato,
+  mistyRose,
+  linen,
+  pumpkin
 } from './variables'
 
 const { p } = typographyStyles
@@ -173,6 +179,30 @@ theme = createTheme(theme, {
           fontFamily: inputFontFamily,
           paddingRight: 4,
           paddingLeft: 4
+        },
+        colorDefault: {
+          backgroundColor: zircon,
+          '& .MuiChip-label': {
+            color: primaryColor
+          }
+        },
+        colorWarning: {
+          backgroundColor: linen,
+          '& .MuiChip-label': {
+            color: pumpkin
+          }
+        },
+        colorError: {
+          backgroundColor: mistyRose,
+          '& .MuiChip-label': {
+            color: tomato
+          }
+        },
+        colorSuccess: {
+          backgroundColor: spring3,
+          '& .MuiChip-label': {
+            color: spring4
+          }
         }
       }
     },