partial: theme and more css fixes

new-lamassu-admin/package-lock.json

@@ -14,7 +14,6 @@
         "@emotion/styled": "^11.14.0",
         "@lamassu/coins": "v1.6.1",
         "@mui/icons-material": "^5.17.1",
-        "@mui/lab": "^5.0.0-alpha.170",
         "@mui/material": "^5.17.1",
         "@mui/styles": "^5.17.1",
         "@simplewebauthn/browser": "^3.0.0",
@@ -1243,44 +1242,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
-      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
-      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
-      "license": "MIT"
-    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -1616,48 +1577,6 @@
         "react-dom": "^16.8.0 || ^17.0.0"
       }
     },
-    "node_modules/@mui/base": {
-      "version": "5.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
-      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
-      "deprecated": "This package has been replaced by @base-ui-components/react",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@floating-ui/react-dom": "^2.0.8",
-        "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
-        "@popperjs/core": "^2.11.8",
-        "clsx": "^2.1.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/base/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.17.1.tgz",
@@ -1694,56 +1613,6 @@
         }
       }
     },
-    "node_modules/@mui/lab": {
-      "version": "5.0.0-alpha.170",
-      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.170.tgz",
-      "integrity": "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/base": "5.0.0-beta.40",
-        "@mui/system": "^5.15.15",
-        "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
-        "clsx": "^2.1.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@mui/material": ">=5.15.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/lab/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@mui/material": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.17.1.tgz",

new-lamassu-admin/package.json

@@ -9,7 +9,6 @@
     "@emotion/styled": "^11.14.0",
     "@lamassu/coins": "v1.6.1",
     "@mui/icons-material": "^5.17.1",
-    "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.17.1",
     "@mui/styles": "^5.17.1",
     "@simplewebauthn/browser": "^3.0.0",

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

@@ -121,28 +121,42 @@ const Popover = ({
     right: ['left']
   }
 
-  const modifiers = R.mergeDeepLeft(props.modifiers, {
+  const modifiers = [
-    flip: {
+    {
+      name: 'flip',
       enabled: R.defaultTo(false, props.flip),
-      allowedAutoPlacements: flipPlacements[props.placement],
+      options: {
-      boundary: 'clippingParents'
+        allowedAutoPlacements: flipPlacements[props.placement]
+      }
     },
-    preventOverflow: {
+    {
+      name: 'preventOverflow',
       enabled: R.defaultTo(true, props.preventOverflow),
-      boundariesElement: 'scrollParent'
+      options: {
+        rootBoundary: 'scrollParent'
+      }
     },
-    offset: {
+    {
+      name: 'offset',
       enabled: true,
-      offset: '0, 10'
+      options: {
+        offset: [0, 10]
+      }
     },
-    arrow: {
+    {
+      name: 'arrow',
       enabled: R.defaultTo(true, props.showArrow),
-      element: arrowRef
+      options: {
+        element: arrowRef
+      }
     },
-    computeStyle: {
+    {
-      gpuAcceleration: false
+      name: 'computeStyles',
+      options: {
+        gpuAcceleration: false
+      }
     }
-  })
+  ]
 
   if (props.preventOverflow === false) {
     modifiers.hide = {

new-lamassu-admin/src/components/buttons/BaseButton.styles.js

@@ -1,5 +1,3 @@
-// import { outlinedInputClasses } from '@mui/material/ButtonBase';
-
 import {
   white,
   fontColor,
@@ -39,7 +37,6 @@ export default {
     extend: colors(subheaderColor, subheaderDarkColor, offColor),
     '&:active': {
       color: white,
-      // [`& ${outlinedInputClasses.buttonIcon}`]: {
       '& $buttonIcon': {
         display: 'none'
       },
@@ -57,14 +54,12 @@ export default {
     '&:active': {
       color: fontColor,
       '& $buttonIcon': {
-      // [`& ${outlinedInputClasses.buttonIcon}`]: {
         display: 'flex'
       },
       '& $buttonIconActive': {
         display: 'none'
       }
     },
-    // [`& ${outlinedInputClasses.buttonIcon}`]: {
     '& $buttonIcon': {
       display: 'none'
     },

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

@@ -5,11 +5,9 @@ import React from 'react'
 import { comet } from 'src/styling/variables'
 
 const styles = {
-  label: ({ size }) => ({
+  root: ({ size }) => ({
     width: size,
-    height: size
+    height: size,
-  }),
-  root: {
     '& svg': {
       flex: 1
     },
@@ -25,7 +23,7 @@ const styles = {
     '&:hover path': {
       stroke: comet
     }
-  }
+  })
 }
 
 const useStyles = makeStyles(styles)
@@ -36,7 +34,7 @@ const IconButton = ({ size, children, onClick, ...props }) => {
     <IconB
       {...props}
       size="small"
-      classes={{ root: classes.root, label: classes.label }}
+      classes={{ root: classes.root }}
       disableRipple
       onClick={onClick}>
       {children}

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

@@ -8,7 +8,7 @@ import classnames from 'classnames'
 import React from 'react'
 import { Label1 } from 'src/components/typography'
 
-import { offColor } from 'src/styling/variables'
+import { offColor, secondaryColor } from 'src/styling/variables'
 const styles = {
   label: {
     height: 16,
@@ -20,6 +20,9 @@ const styles = {
     marginTop: -8,
     marginLeft: 32,
     color: offColor
+  },
+  radio: {
+    color: secondaryColor
   }
 }
 
@@ -50,7 +53,7 @@ const RadioGroup = ({
               <FormControlLabel
                 disabled={option.disabled}
                 value={option.code}
-                control={<Radio className={radioClassName} />}
+                control={<Radio className={classnames(classes.radio, radioClassName)} />}
                 label={option.display}
                 className={classnames(labelClassName)}
               />

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

@@ -62,6 +62,7 @@ const SwitchInput = memo(({ ...props }) => {
   const classes = useStyles()
   return (
     <Switch
+      color="secondary"
       focusVisibleClassName={classes.focusVisible}
       disableRipple
       classes={{

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

@@ -1,6 +1,5 @@
 import { makeStyles } from '@mui/styles'
-import { ToggleButtonGroup as MUIToggleButtonGroup } from '@mui/lab'
+import { ToggleButtonGroup as MUIToggleButtonGroup, ToggleButton } from '@mui/material'
-import ToggleButton from '@mui/lab/ToggleButton'
 import React from 'react'
 import { H4, P } from 'src/components/typography'
 

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

@@ -175,17 +175,22 @@ const Header = memo(({ tree, user }) => {
                   className={classes.popper}
                   disablePortal={false}
                   placement="bottom-end"
-                  modifiers={{
+                  modifiers={[
-                    offset: {
+                    {
+                      name: 'offset',
                       enabled: true,
-                      offset: '100vw'
+                      options: {
+                        offset: ['100vw', '100vw']
+                      }
                     },
-                    preventOverflow: {
+                    {
+                      name: 'preventOverflow',
                       enabled: true,
-                      boundariesElement: 'viewport',
+                      options: {
-                      padding: 0
+                        rootBoundary: 'viewport',
+                      },
                     }
-                  }}>
+                  ]}>
                   <NotificationCenter
                     popperRef={popperRef}
                     buttonCoords={notifButtonCoords}

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

@@ -48,7 +48,7 @@ export default {
     fontWeight: 700
   },
   p: {
-    extend: base,
+    ...base,
     fontSize: fontSize4,
     fontFamily: fontSecondary,
     fontWeight: 500

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

@@ -252,7 +252,7 @@ const AddMachine = memo(({ close, onPaired }) => {
           <div className={classes.wrapper}>
             <div className={classes.headerDiv}>
               <Title>Add Machine</Title>
-              <IconButton disableRipple={true} onClick={close} size="large">
+              <IconButton onClick={close} size="large">
                 <SvgIcon color="error">
                   <CloseIcon />
                 </SvgIcon>

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

@@ -1,4 +1,4 @@
-import { createTheme, adaptV4Theme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 
 import typographyStyles from 'src/components/typography/styles'
 
@@ -18,13 +18,9 @@ import {
 
 const { p } = typographyStyles
 
-export default createTheme(adaptV4Theme({
+export default createTheme({
   typography: {
     fontFamily: inputFontFamily,
-    body1: { ...p }
-  },
-  MuiButtonBase: {
-    disableRipple: true
   },
   palette: {
     primary: {
@@ -41,105 +37,126 @@ export default createTheme(adaptV4Theme({
       default: backgroundColor
     }
   },
-  overrides: {
+  components: {
-    MuiRadio: {
+    MuiTypography: {
-      colorSecondary: {
+      styleOverrides: {
-        color: secondaryColor
+        root: { ...p }
+      }
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
       }
     },
     MuiAutocomplete: {
-      root: {
+      styleOverrides: {
-        color: fontColor
+        root: {
-      },
+          color: fontColor
-      noOptions: {
-        padding: [[6, 16]]
-      },
-      option: {
-        '&[data-focus="true"]': {
-          backgroundColor: subheaderColor
-        }
-      },
-      paper: {
-        color: fontColor,
-        margin: 0
-      },
-      listbox: {
-        padding: 0
-      },
-      tag: {
-        '&[data-tag-index="0"]': {
-          marginLeft: 0
         },
-        margin: 2,
+        noOptions: {
-        backgroundColor: subheaderColor,
+          padding: `6px 16px`
-        borderRadius: 4,
+        },
-        height: 18
+        option: {
+          '&[data-focus="true"]': {
+            backgroundColor: subheaderColor
+          }
+        },
+        paper: {
+          color: fontColor,
+          margin: 0
+        },
+        listbox: {
+          padding: 0
+        },
+        tag: {
+          '&[data-tag-index="0"]': {
+            marginLeft: 0
+          },
+          margin: 2,
+          backgroundColor: subheaderColor,
+          borderRadius: 4,
+          height: 18
+        }
       }
     },
     MuiChip: {
-      label: {
+      styleOverrides: {
-        paddingLeft: 4,
+        label: {
-        paddingRight: 4,
+          paddingLeft: 4,
-        color: fontColor,
+          paddingRight: 4,
-        fontSize: fontSize5
+          color: fontColor,
+          fontSize: fontSize5
+        }
       }
     },
     MuiInput: {
-      root: {
+      styleOverrides: {
-        color: fontColor
+        root: {
-      },
+          color: fontColor
-      underline: {
+        },
-        '&:before': {
+        underline: {
-          borderBottom: [[2, 'solid', fontColor]]
+          '&:before': {
+            borderBottom: `2px solid ${fontColor}`
+          }
         }
       }
     },
     MuiInputLabel: {
-      root: {
+      styleOverrides: {
-        font: 'inherit',
+        root: {
-        fontSize: fontSize3,
+          font: 'inherit',
-        color: offColor
+          fontSize: fontSize3,
-      },
+          color: offColor
-      shrink: {
+        },
-        color: fontColor,
+        shrink: {
-        transform: 'translate(0, 1.7px) scale(0.83)'
+          color: fontColor,
+          transform: 'translate(0, 1.7px) scale(0.83)'
+        }
       }
     },
     MuiFormLabel: {
-      root: {
+      styleOverrides: {
-        '&.Mui-focused': {
+        root: {
-          color: fontColor
+          '&.Mui-focused': {
+            color: fontColor
+          }
         }
       }
     },
     MuiListItem: {
-      root: {
+      styleOverrides: {
-        '&:nth-of-type(odd)': {
+        root: {
-          backgroundColor: backgroundColor
+          '&:nth-of-type(odd)': {
+            backgroundColor: backgroundColor
+          }
         }
       }
     },
     MuiToggleButton: {
-      root: {
+      styleOverrides: {
-        '&.Mui-selected': {
+        root: {
-          backgroundColor: zircon,
+          '&.Mui-selected': {
-          borderColor: primaryColor,
+            backgroundColor: zircon,
-          borderTopColor: [primaryColor, '!important'],
+            borderColor: primaryColor,
+            borderTopColor: `${primaryColor} !important`,
+            '&:hover': {
+              backgroundColor: zircon2
+            }
+          },
           '&:hover': {
             backgroundColor: zircon2
           }
-        },
-        '&:hover': {
-          backgroundColor: zircon2
         }
       }
     },
     MuiToggleButtonGroup: {
-      groupedVertical: {
+      styleOverrides: {
-        borderRadius: 8,
+        vertical: {
-        border: '1px solid',
+          borderRadius: 8,
-        borderColor: zircon,
+          border: 'none',
-        '&:not(:first-child)': {
+          borderColor: zircon,
+        },
+        firstButton: {
           borderTop: '1px solid',
           borderTopColor: zircon,
           borderTopRightRadius: 8,
@@ -147,15 +164,23 @@ export default createTheme(adaptV4Theme({
           borderBottomRightRadius: 8,
           borderBottomLeftRadius: 8
         },
-        '&:not(:last-child)': {
+        lastButton: {
           borderTop: '1px solid',
           borderTopColor: zircon,
           borderTopRightRadius: 8,
           borderTopLeftRadius: 8,
           borderBottomRightRadius: 8,
           borderBottomLeftRadius: 8
-        }
+        },
+        middleButton: {
+          borderTop: '1px solid',
+          borderTopColor: zircon,
+          borderTopRightRadius: 8,
+          borderTopLeftRadius: 8,
+          borderBottomRightRadius: 8,
+          borderBottomLeftRadius: 8
+        },
       }
     }
   }
-}))
+})