diff --git a/new-lamassu-admin/src/components/editableTable/Row.jsx b/new-lamassu-admin/src/components/editableTable/Row.jsx index 72dd5468..7be62e77 100644 --- a/new-lamassu-admin/src/components/editableTable/Row.jsx +++ b/new-lamassu-admin/src/components/editableTable/Row.jsx @@ -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' diff --git a/new-lamassu-admin/src/components/inputs/base/Switch.jsx b/new-lamassu-admin/src/components/inputs/base/Switch.jsx deleted file mode 100644 index 79e235f2..00000000 --- a/new-lamassu-admin/src/components/inputs/base/Switch.jsx +++ /dev/null @@ -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 ( - - ) -}) - -export default SwitchInput diff --git a/new-lamassu-admin/src/components/inputs/base/index.js b/new-lamassu-admin/src/components/inputs/base/index.js index 9dc6ecad..d670dcb5 100644 --- a/new-lamassu-admin/src/components/inputs/base/index.js +++ b/new-lamassu-admin/src/components/inputs/base/index.js @@ -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, diff --git a/new-lamassu-admin/src/components/inputs/index.js b/new-lamassu-admin/src/components/inputs/index.js index 00a8b1cb..32847d32 100644 --- a/new-lamassu-admin/src/components/inputs/index.js +++ b/new-lamassu-admin/src/components/inputs/index.js @@ -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, diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx b/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx index e4a64516..93ba75b7 100644 --- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx +++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx b/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx index 575f788b..cc3fe801 100644 --- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx +++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx index 5a8344e6..951b9ff4 100644 --- a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.jsx b/new-lamassu-admin/src/pages/Cashout/Cashout.jsx index 62678dce..e301c927 100644 --- a/new-lamassu-admin/src/pages/Cashout/Cashout.jsx +++ b/new-lamassu-admin/src/pages/Cashout/Cashout.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx index 67f47227..d748ba0f 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx +++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx @@ -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 diff --git a/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx b/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx index 05b0fdc2..130b7525 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx +++ b/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx index 5ef31d8f..91969087 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx index c00b1249..2b26b873 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx b/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx index c3561d0e..d66ed288 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx index b14ea9f4..3d22330e 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx index 1c76b064..0b33e062 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx index 8dab6f7a..f5b03a3d 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.jsx b/new-lamassu-admin/src/pages/Triggers/Triggers.jsx index 2c1cf485..1043caa1 100644 --- a/new-lamassu-admin/src/pages/Triggers/Triggers.jsx +++ b/new-lamassu-admin/src/pages/Triggers/Triggers.jsx @@ -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' diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx b/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx index ae0260cc..b6583e5c 100644 --- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx @@ -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' diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index 869547b7..e739bfbe 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/new-lamassu-admin/src/styling/theme.js @@ -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 \ No newline at end of file