partial: theme and more css fixes
This commit is contained in:
Rafael Taranto
parent
c6c3feb3b4
commit
af21051989
12 changed files with 153 additions and 245 deletions
131
new-lamassu-admin/package-lock.json
generated
131
new-lamassu-admin/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
options: {
|
||||
element: arrowRef
|
||||
}
|
||||
},
|
||||
computeStyle: {
|
||||
{
|
||||
name: 'computeStyles',
|
||||
options: {
|
||||
gpuAcceleration: false
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
if (props.preventOverflow === false) {
|
||||
modifiers.hide = {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
|||
<IconB
|
||||
{...props}
|
||||
size="small"
|
||||
classes={{ root: classes.root, label: classes.label }}
|
||||
classes={{ root: classes.root }}
|
||||
disableRipple
|
||||
onClick={onClick}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ const SwitchInput = memo(({ ...props }) => {
|
|||
const classes = useStyles()
|
||||
return (
|
||||
<Switch
|
||||
color="secondary"
|
||||
focusVisibleClassName={classes.focusVisible}
|
||||
disableRipple
|
||||
classes={{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import { ToggleButtonGroup as MUIToggleButtonGroup } from '@mui/lab'
|
||||
import ToggleButton from '@mui/lab/ToggleButton'
|
||||
import { ToggleButtonGroup as MUIToggleButtonGroup, ToggleButton } from '@mui/material'
|
||||
import React from 'react'
|
||||
import { H4, P } from 'src/components/typography'
|
||||
|
||||
|
|
|
|||
|
|
@ -175,17 +175,22 @@ const Header = memo(({ tree, user }) => {
|
|||
className={classes.popper}
|
||||
disablePortal={false}
|
||||
placement="bottom-end"
|
||||
modifiers={{
|
||||
offset: {
|
||||
modifiers={[
|
||||
{
|
||||
name: 'offset',
|
||||
enabled: true,
|
||||
offset: '100vw'
|
||||
},
|
||||
preventOverflow: {
|
||||
enabled: true,
|
||||
boundariesElement: 'viewport',
|
||||
padding: 0
|
||||
options: {
|
||||
offset: ['100vw', '100vw']
|
||||
}
|
||||
}}>
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
enabled: true,
|
||||
options: {
|
||||
rootBoundary: 'viewport',
|
||||
},
|
||||
}
|
||||
]}>
|
||||
<NotificationCenter
|
||||
popperRef={popperRef}
|
||||
buttonCoords={notifButtonCoords}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default {
|
|||
fontWeight: 700
|
||||
},
|
||||
p: {
|
||||
extend: base,
|
||||
...base,
|
||||
fontSize: fontSize4,
|
||||
fontFamily: fontSecondary,
|
||||
fontWeight: 500
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,18 +37,24 @@ export default createTheme(adaptV4Theme({
|
|||
default: backgroundColor
|
||||
}
|
||||
},
|
||||
overrides: {
|
||||
MuiRadio: {
|
||||
colorSecondary: {
|
||||
color: secondaryColor
|
||||
components: {
|
||||
MuiTypography: {
|
||||
styleOverrides: {
|
||||
root: { ...p }
|
||||
}
|
||||
},
|
||||
MuiButtonBase: {
|
||||
defaultProps: {
|
||||
disableRipple: true
|
||||
}
|
||||
},
|
||||
MuiAutocomplete: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: fontColor
|
||||
},
|
||||
noOptions: {
|
||||
padding: [[6, 16]]
|
||||
padding: `6px 16px`
|
||||
},
|
||||
option: {
|
||||
'&[data-focus="true"]': {
|
||||
|
|
@ -75,26 +77,32 @@ export default createTheme(adaptV4Theme({
|
|||
borderRadius: 4,
|
||||
height: 18
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
label: {
|
||||
paddingLeft: 4,
|
||||
paddingRight: 4,
|
||||
color: fontColor,
|
||||
fontSize: fontSize5
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiInput: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: fontColor
|
||||
},
|
||||
underline: {
|
||||
'&:before': {
|
||||
borderBottom: [[2, 'solid', fontColor]]
|
||||
borderBottom: `2px solid ${fontColor}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiInputLabel: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
font: 'inherit',
|
||||
fontSize: fontSize3,
|
||||
|
|
@ -104,27 +112,33 @@ export default createTheme(adaptV4Theme({
|
|||
color: fontColor,
|
||||
transform: 'translate(0, 1.7px) scale(0.83)'
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiFormLabel: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&.Mui-focused': {
|
||||
color: fontColor
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiListItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&:nth-of-type(odd)': {
|
||||
backgroundColor: backgroundColor
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiToggleButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: zircon,
|
||||
borderColor: primaryColor,
|
||||
borderTopColor: [primaryColor, '!important'],
|
||||
borderTopColor: `${primaryColor} !important`,
|
||||
'&:hover': {
|
||||
backgroundColor: zircon2
|
||||
}
|
||||
|
|
@ -133,13 +147,16 @@ export default createTheme(adaptV4Theme({
|
|||
backgroundColor: zircon2
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiToggleButtonGroup: {
|
||||
groupedVertical: {
|
||||
styleOverrides: {
|
||||
vertical: {
|
||||
borderRadius: 8,
|
||||
border: '1px solid',
|
||||
border: 'none',
|
||||
borderColor: zircon,
|
||||
'&:not(:first-child)': {
|
||||
},
|
||||
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
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue