partial: use theme only for switch customization

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'

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

@@ -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

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,

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,

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'

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'

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'

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'
 

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

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'
 

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'

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'

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'

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'

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'

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'
 

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'
 

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'

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