lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

partial: use theme only for switch customization

Browse source
This commit is contained in:
Rafael Taranto 2025-04-22 09:38:01 +01:00
parent af21051989
commit 4bfb94182c
19 changed files with 75 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

2
new-lamassu-admin/src/components/editableTable/Row.jsx
View file

@ -1,4 +1,5 @@
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import classnames from 'classnames'
import { Field, useFormikContext } from 'formik'
import * as R from 'ramda'
@ -13,7 +14,6 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
import StripesSvg from 'src/styling/icons/stripes.svg?react'
import { Link, IconButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import TableCtx from './Context'
import styles from './Row.styles'

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

@ -1,81 +0,0 @@
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import React, { memo } from 'react'
import {
secondaryColor,
offColor,
disabledColor,
disabledColor2
} from '../../../styling/variables'
const useStyles = makeStyles(theme => ({
root: {
width: 32,
height: 20,
padding: 0,
margin: theme.spacing(1)
},
switchBase: {
padding: 2,
'&.Mui-disabled': {
color: disabledColor2,
'& + $track': {
backgroundColor: disabledColor,
opacity: 1
}
},
'&.Mui-checked': {
transform: 'translateX(58%)',
color: theme.palette.common.white,
'&.Mui-disabled': {
color: disabledColor2
},
'& + $track': {
backgroundColor: secondaryColor,
opacity: 1,
border: 'none'
}
},
'&.Mui-focusVisible $thumb': {
border: '6px solid #fff',
boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)'
}
},
thumb: {
width: 16,
height: 16
},
track: {
borderRadius: 17,
border: 'none',
backgroundColor: offColor,
opacity: 1,
transition: theme.transitions.create(['background-color', 'border'])
},
disabled: {},
checked: {},
focusVisible: {}
}))
const SwitchInput = memo(({ ...props }) => {
const classes = useStyles()
return (
<Switch
color="secondary"
focusVisibleClassName={classes.focusVisible}
disableRipple
classes={{
root: classes.root,
switchBase: classes.switchBase,
thumb: classes.thumb,
track: classes.track,
checked: classes.checked,
disabled: classes.disabled
}}
{...props}
/>
)
})
export default SwitchInput

2
new-lamassu-admin/src/components/inputs/base/index.js
View file

@ -5,7 +5,6 @@ import Dropdown from './Dropdown'
import NumberInput from './NumberInput'
import RadioGroup from './RadioGroup'
import SecretInput from './SecretInput'
import Switch from './Switch'
import TextInput from './TextInput'
import ToggleButtonGroup from './ToggleButtonGroup'
export {
@ -13,7 +12,6 @@ export {
CodeInput,
TextInput,
NumberInput,
Switch,
SecretInput,
RadioGroup,
Autocomplete,

2
new-lamassu-admin/src/components/inputs/index.js
View file

@ -3,7 +3,6 @@ import Checkbox from './base/Checkbox'
import CodeInput from './base/CodeInput'
import RadioGroup from './base/RadioGroup'
import Select from './base/Select'
import Switch from './base/Switch'
import TextInput from './base/TextInput'
import { CashIn, CashOut } from './cashbox/Cashbox'
@ -12,7 +11,6 @@ export {
TextInput,
Checkbox,
CodeInput,
Switch,
Select,
RadioGroup,
CashIn,

5
new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx
View file

@ -1,9 +1,10 @@
import { Box } from '@mui/material'
import Switch from '@mui/material/Switch'
import Box from '@mui/material/Box'
import { makeStyles } from '@mui/styles'
import React, { useState } from 'react'
import { H2 } from 'src/components/typography'
import { Select, Switch } from 'src/components/inputs'
import { Select } from 'src/components/inputs'
import { primaryColor } from 'src/styling/variables'
import styles from '../../Analytics.styles'

5
new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx
View file

@ -1,9 +1,10 @@
import { Box } from '@mui/material'
import Box from '@mui/material/Box'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import React, { useState } from 'react'
import { H2 } from 'src/components/typography'
import { Select, Switch } from 'src/components/inputs'
import { Select } from 'src/components/inputs'
import { neon, java } from 'src/styling/variables'
import styles from '../../Analytics.styles'

2
new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx
View file

@ -1,5 +1,6 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { Box, Dialog, DialogContent, DialogActions } from '@mui/material'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
@ -11,7 +12,6 @@ import ReverseSettingsIcon from 'src/styling/icons/circle buttons/settings/white
import SettingsIcon from 'src/styling/icons/circle buttons/settings/zodiac.svg?react'
import { Link, Button, IconButton, SupportLinkButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import { fromNamespace, toNamespace } from 'src/utils/config'
import styles from './Blacklist.styles'

2
new-lamassu-admin/src/pages/Cashout/Cashout.jsx
View file

@ -1,5 +1,6 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import * as R from 'ramda'
import React, { useState } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
@ -8,7 +9,6 @@ import { P, Label2 } from 'src/components/typography'
import { SupportLinkButton } from 'src/components/buttons'
import { NamespacedTable as EditableTable } from 'src/components/editableTable'
import { Switch } from 'src/components/inputs'
import { EmptyTable } from 'src/components/table'
import { fromNamespace, toNamespace } from 'src/utils/config'

2
new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx
View file

@ -6,6 +6,7 @@ import {
DialogContent,
Dialog
} from '@mui/material'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import * as R from 'ramda'
@ -22,7 +23,6 @@ import DataReversedIcon from 'src/styling/icons/button/data/white.svg?react'
import DataIcon from 'src/styling/icons/button/data/zodiac.svg?react'
import { Button, IconButton, ActionButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import {
OVERRIDE_AUTHORIZED,
OVERRIDE_REJECTED

2
new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx
View file

@ -1,4 +1,5 @@
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import * as R from 'ramda'
import React, { useContext } from 'react'
import {
@ -10,7 +11,6 @@ import {
Th
} from 'src/components/fake-table/Table'
import { Switch } from 'src/components/inputs'
import { fromNamespace, toNamespace } from 'src/utils/config'
import { sentenceCase } from 'src/utils/string'

2
new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx
View file

@ -1,11 +1,11 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import React, { memo } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
import { H4, P, Label2 } from 'src/components/typography'
import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
import { Switch } from 'src/components/inputs'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { SupportLinkButton } from '../../components/buttons'

2
new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx
View file

@ -1,5 +1,6 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import classnames from 'classnames'
import { Form, Formik, Field as FormikField } from 'formik'
import * as R from 'ramda'
@ -7,7 +8,6 @@ import React, { useState } from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { HelpTooltip } from 'src/components/Tooltip'
import Switch from 'src/components/inputs/base/Switch'
import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'

2
new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx
View file

@ -1,10 +1,10 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import * as R from 'ramda'
import React, { memo } from 'react'
import { H4, P, Label2 } from 'src/components/typography'
import { Switch } from 'src/components/inputs'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { global } from './OperatorInfo.styles'

2
new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx
View file

@ -1,12 +1,12 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import * as R from 'ramda'
import React, { memo } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
import { H4, P, Label2 } from 'src/components/typography'
import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
import { Switch } from 'src/components/inputs'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { SupportLinkButton } from '../../components/buttons'

4
new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx
View file

@ -1,5 +1,6 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { Paper } from '@mui/material'
import Paper from '@mui/material/Paper'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
@ -12,7 +13,6 @@ import ExpandIconOpen from 'src/styling/icons/action/expand/open.svg?react'
import WhiteLogo from 'src/styling/icons/menu/logo-white.svg?react'
import { IconButton, SupportLinkButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import { formatDate } from 'src/utils/timezones'
import styles from './SMSNotices.styles'

2
new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx
View file

@ -1,5 +1,6 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import classnames from 'classnames'
import { Form, Formik, Field as FormikField } from 'formik'
import * as R from 'ramda'
@ -12,7 +13,6 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
import * as Yup from 'yup'
import { Link, IconButton, SupportLinkButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import { TextInput } from 'src/components/inputs/formik'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'

4
new-lamassu-admin/src/pages/Triggers/Triggers.jsx
View file

@ -1,5 +1,6 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { Box } from '@mui/material'
import Box from '@mui/material/Box'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import * as R from 'ramda'
@ -15,7 +16,6 @@ import ReverseSettingsIcon from 'src/styling/icons/circle buttons/settings/white
import SettingsIcon from 'src/styling/icons/circle buttons/settings/zodiac.svg?react'
import { Link, SupportLinkButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import twilioSchema from 'src/pages/Services/schemas/twilio'
import { fromNamespace, toNamespace } from 'src/utils/config'

2
new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx
View file

@ -1,5 +1,6 @@
import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client";
import { Box, Chip } from '@mui/material'
import Switch from '@mui/material/Switch'
import { makeStyles } from '@mui/styles'
import { startAttestation } from '@simplewebauthn/browser'
import * as R from 'ramda'
@ -15,7 +16,6 @@ import UserRoleIcon from 'src/styling/icons/button/user-role/zodiac.svg?react'
import AppContext from 'src/AppContext'
import { ActionButton, Link } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import { IP_CHECK_REGEX } from 'src/utils/constants'
import styles from './UserManagement.styles'

56
new-lamassu-admin/src/styling/theme.js
View file

@ -13,12 +13,12 @@ import {
fontSize5,
zircon,
zircon2,
primaryColor
primaryColor, disabledColor2, disabledColor
} from './variables'
const { p } = typographyStyles
export default createTheme({
let theme = createTheme({
typography: {
fontFamily: inputFontFamily,
},
@ -37,6 +37,9 @@ export default createTheme({
default: backgroundColor
}
},
})
theme = createTheme({
components: {
MuiTypography: {
styleOverrides: {
@ -48,6 +51,53 @@ export default createTheme({
disableRipple: true
}
},
MuiSwitch: {
styleOverrides: {
root: {
width: 32,
height: 20,
padding: 0,
margin: theme.spacing(1)
},
thumb: {
width: 16,
height: 16
},
track: {
borderRadius: 17,
border: 'none',
backgroundColor: offColor,
opacity: 1,
transition: theme.transitions.create(['background-color', 'border'])
},
switchBase: {
padding: 2,
'&.Mui-disabled': {
color: disabledColor2,
'& + .MuiSwitch-track': {
backgroundColor: disabledColor,
opacity: 1
}
},
'&.Mui-checked': {
transform: 'translateX(58%)',
color: theme.palette.common.white,
'&.Mui-disabled': {
color: disabledColor2
},
'& + .MuiSwitch-track': {
backgroundColor: secondaryColor,
opacity: 1,
border: 'none'
}
},
'&.Mui-focusVisible .MuiSwitch-thumb': {
border: '6px solid #fff',
boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)'
}
}
}
},
MuiAutocomplete: {
styleOverrides: {
root: {
@ -184,3 +234,5 @@ export default createTheme({
}
}
})
export default theme