diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json index 15e9f98c..d6897569 100644 --- a/new-lamassu-admin/package-lock.json +++ b/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", diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json index 32ca64b2..639d0a27 100644 --- a/new-lamassu-admin/package.json +++ b/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", diff --git a/new-lamassu-admin/src/components/Popper.jsx b/new-lamassu-admin/src/components/Popper.jsx index 6dc56d01..30203f97 100644 --- a/new-lamassu-admin/src/components/Popper.jsx +++ b/new-lamassu-admin/src/components/Popper.jsx @@ -121,28 +121,42 @@ const Popover = ({ right: ['left'] } - const modifiers = R.mergeDeepLeft(props.modifiers, { - flip: { + const modifiers = [ + { + name: 'flip', enabled: R.defaultTo(false, props.flip), - allowedAutoPlacements: flipPlacements[props.placement], - boundary: 'clippingParents' + options: { + 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 = { diff --git a/new-lamassu-admin/src/components/buttons/BaseButton.styles.js b/new-lamassu-admin/src/components/buttons/BaseButton.styles.js index 6bad408a..3d49746e 100644 --- a/new-lamassu-admin/src/components/buttons/BaseButton.styles.js +++ b/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' }, diff --git a/new-lamassu-admin/src/components/buttons/IconButton.jsx b/new-lamassu-admin/src/components/buttons/IconButton.jsx index e3ed0665..52661a22 100644 --- a/new-lamassu-admin/src/components/buttons/IconButton.jsx +++ b/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 - }), - root: { + height: size, '& 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 }) => { {children} diff --git a/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx b/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx index 2f680f87..efd6ce33 100644 --- a/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx +++ b/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 = ({ } + control={} label={option.display} className={classnames(labelClassName)} /> diff --git a/new-lamassu-admin/src/components/inputs/base/Switch.jsx b/new-lamassu-admin/src/components/inputs/base/Switch.jsx index fedd6b44..79e235f2 100644 --- a/new-lamassu-admin/src/components/inputs/base/Switch.jsx +++ b/new-lamassu-admin/src/components/inputs/base/Switch.jsx @@ -62,6 +62,7 @@ const SwitchInput = memo(({ ...props }) => { const classes = useStyles() return ( { className={classes.popper} disablePortal={false} placement="bottom-end" - modifiers={{ - offset: { + modifiers={[ + { + name: 'offset', enabled: true, - offset: '100vw' + options: { + offset: ['100vw', '100vw'] + } }, - preventOverflow: { + { + name: 'preventOverflow', enabled: true, - boundariesElement: 'viewport', - padding: 0 + options: { + rootBoundary: 'viewport', + }, } - }}> + ]}> {
Add Machine - + diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index 34d1e0ef..869547b7 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/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: { - MuiRadio: { - colorSecondary: { - color: secondaryColor + components: { + MuiTypography: { + styleOverrides: { + root: { ...p } + } + }, + MuiButtonBase: { + defaultProps: { + disableRipple: true } }, MuiAutocomplete: { - 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 + styleOverrides: { + root: { + color: fontColor }, - margin: 2, - backgroundColor: subheaderColor, - borderRadius: 4, - height: 18 + noOptions: { + padding: `6px 16px` + }, + 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: { - paddingLeft: 4, - paddingRight: 4, - color: fontColor, - fontSize: fontSize5 + styleOverrides: { + label: { + paddingLeft: 4, + paddingRight: 4, + color: fontColor, + fontSize: fontSize5 + } } }, MuiInput: { - root: { - color: fontColor - }, - underline: { - '&:before': { - borderBottom: [[2, 'solid', fontColor]] + styleOverrides: { + root: { + color: fontColor + }, + underline: { + '&:before': { + borderBottom: `2px solid ${fontColor}` + } } } }, MuiInputLabel: { - root: { - font: 'inherit', - fontSize: fontSize3, - color: offColor - }, - shrink: { - color: fontColor, - transform: 'translate(0, 1.7px) scale(0.83)' + styleOverrides: { + root: { + font: 'inherit', + fontSize: fontSize3, + color: offColor + }, + shrink: { + color: fontColor, + transform: 'translate(0, 1.7px) scale(0.83)' + } } }, MuiFormLabel: { - root: { - '&.Mui-focused': { - color: fontColor + styleOverrides: { + root: { + '&.Mui-focused': { + color: fontColor + } } } }, MuiListItem: { - root: { - '&:nth-of-type(odd)': { - backgroundColor: backgroundColor + styleOverrides: { + root: { + '&:nth-of-type(odd)': { + backgroundColor: backgroundColor + } } } }, MuiToggleButton: { - root: { - '&.Mui-selected': { - backgroundColor: zircon, - borderColor: primaryColor, - borderTopColor: [primaryColor, '!important'], + styleOverrides: { + root: { + '&.Mui-selected': { + backgroundColor: zircon, + borderColor: primaryColor, + borderTopColor: `${primaryColor} !important`, + '&:hover': { + backgroundColor: zircon2 + } + }, '&:hover': { backgroundColor: zircon2 } - }, - '&:hover': { - backgroundColor: zircon2 } } }, MuiToggleButtonGroup: { - groupedVertical: { - borderRadius: 8, - border: '1px solid', - borderColor: zircon, - '&:not(:first-child)': { + styleOverrides: { + vertical: { + borderRadius: 8, + border: 'none', + 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 + }, } } } -})) +})