partial: Wizard css migration

new-lamassu-admin/src/components/Modal.jsx

@@ -53,7 +53,7 @@ const styles = {
     padding: xl ? [[0, 60 + 28]] : small ? [[0, 16]] : [[0, 32]]
   }),
   button: ({ small, xl }) => ({
-    padding: [[0, 0, xl ? 26 : 0, 0]],
+    padding: [[0, 0, 0, 0]],
     margin: xl
       ? [[0, 0, 'auto', 'auto']]
       : small

new-lamassu-admin/src/pages/Wizard/Radio.module.css

@@ -0,0 +1,43 @@
+.radioGroup {
+  flex-direction: row;
+  width: 600px;
+}
+
+.radioLabel {
+  width: 150px;
+  height: 48px;
+}
+
+.mailgunRadioGroup {
+  flex-direction: row;
+  width: 768px;
+}
+
+.mailgunRadioLabel {
+  width: 300px;
+  height: 48px;
+}
+
+.mdForm {
+  width: 385px;
+}
+
+.infoMessage {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.infoMessage > p {
+  width: 330px;
+  margin-top: 4px;
+  margin-left: 16px;
+}
+
+.actionButton {
+  margin-bottom: 32px;
+}
+
+.actionButtonLink {
+  text-decoration: none;
+  color: var(--zodiac);
+}

new-lamassu-admin/src/pages/Wizard/Radio.styles.js

@@ -1,33 +0,0 @@
-import { spacer, primaryColor } from 'src/styling/variables'
-
-const LABEL_WIDTH = 150
-
-export default {
-  radioGroup: {
-    flexDirection: 'row',
-    width: 600
-  },
-  radioLabel: {
-    width: LABEL_WIDTH,
-    height: 48
-  },
-  mdForm: {
-    width: 385
-  },
-  infoMessage: {
-    display: 'flex',
-    marginBottom: 20,
-    '& > p': {
-      width: 330,
-      marginTop: 4,
-      marginLeft: 16
-    }
-  },
-  actionButton: {
-    marginBottom: spacer * 4
-  },
-  actionButtonLink: {
-    textDecoration: 'none',
-    color: primaryColor
-  }
-}

new-lamassu-admin/src/pages/Wizard/Wizard.jsx

@@ -1,36 +1,15 @@
 import { useQuery, gql } from '@apollo/client'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { useState, useContext } from 'react'
 import { useHistory } from 'react-router-dom'
 import { getWizardStep, STEPS } from 'src/pages/Wizard/helper'
 
 import AppContext from 'src/AppContext'
-import { backgroundColor } from 'src/styling/variables'
 
 import Footer from './components/Footer'
 
-const useStyles = makeStyles({
-  wrapper: {
-    display: 'flex',
-    padding: [[16, 0]],
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    backgroundColor: backgroundColor
-  },
-  welcomeBackground: {
-    background: 'url(/wizard-background.svg) no-repeat center center fixed',
-    backgroundColor: backgroundColor,
-    backgroundSize: 'cover'
-  },
-  blurred: {
-    filter: 'blur(4px)',
-    pointerEvents: 'none'
-  }
-})
-
 const GET_DATA = gql`
   query getData {
     config
@@ -43,7 +22,6 @@ const GET_DATA = gql`
 `
 
 const Wizard = ({ fromAuthRegister }) => {
-  const classes = useStyles()
   const { data, loading } = useQuery(GET_DATA)
   const history = useHistory()
   const { setWizardTested } = useContext(AppContext)
@@ -68,11 +46,6 @@ const Wizard = ({ fromAuthRegister }) => {
   }
 
   const isWelcome = step === 0
-  const classNames = {
-    [classes.blurred]: footerExp,
-    [classes.wrapper]: true,
-    [classes.welcomeBackground]: isWelcome
-  }
 
   const start = () => {
     setFooterExp(false)
@@ -91,6 +64,12 @@ const Wizard = ({ fromAuthRegister }) => {
   }
 
   const current = STEPS[step]
+  const classNames = {
+    'flex flex-col justify-between py-4 px-0 bg-white': true,
+    'bg-[url(/wizard-background.svg)] bg-no-repeat bg-center bg-fixed bg-cover':
+      isWelcome,
+    'blur-sm pointer-events-none': footerExp
+  }
 
   return (
     <Dialog fullScreen open={open}>

new-lamassu-admin/src/pages/Wizard/components/Commissions.jsx

@@ -1,5 +1,4 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React from 'react'
 import Section from 'src/components/layout/Section'
@@ -7,16 +6,8 @@ import TitleSection from 'src/components/layout/TitleSection'
 import { mainFields, defaults, getSchema } from 'src/pages/Commissions/helper'
 
 import { Table as EditableTable } from 'src/components/editableTable'
-import styles from 'src/pages/AddMachine/styles'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
-const useStyles = makeStyles(styles)
-const useCommissionStyles = makeStyles({
-  autoComplete: {
-    width: '100%'
-  }
-})
-
 const GET_DATA = gql`
   query getData {
     config
@@ -29,8 +20,6 @@ const SAVE_CONFIG = gql`
 `
 
 function Commissions({ isActive, doContinue }) {
-  const classes = useStyles()
-  const commissionClasses = useCommissionStyles()
   const { data } = useQuery(GET_DATA)
 
   const [saveConfig] = useMutation(SAVE_CONFIG, {
@@ -49,7 +38,7 @@ function Commissions({ isActive, doContinue }) {
   const locale = fromNamespace(namespaces.LOCALE)(data?.config)
 
   return (
-    <div className={classes.wrapper}>
+    <div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
       <TitleSection title="Commissions" />
       <Section>
         <EditableTable
@@ -63,7 +52,7 @@ function Commissions({ isActive, doContinue }) {
           save={save}
           validationSchema={getSchema(locale)}
           data={[]}
-          elements={mainFields(currency, locale, commissionClasses)}
+          elements={mainFields(currency)}
         />
       </Section>
     </div>

new-lamassu-admin/src/pages/Wizard/components/Footer.jsx

@@ -1,60 +1,27 @@
 import Drawer from '@mui/material/Drawer'
 import Grid from '@mui/material/Grid'
-import { makeStyles } from '@mui/styles'
-import classnames from 'classnames'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'
 import Stepper from 'src/components/Stepper'
 import { P, H2, Info2 } from 'src/components/typography'
 
 import { Button, Link } from 'src/components/buttons'
-import { spacer } from 'src/styling/variables'
-
-const useStyles = makeStyles(() => ({
-  drawer: {
-    borderTop: 'none',
-    boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)'
-  },
-  wrapper: {
-    padding: '32px 0',
-    flexGrow: 1,
-    height: 264
-  },
-  smallWrapper: {
-    height: 84
-  },
-  title: {
-    margin: [[0, spacer * 4, 0, 0]]
-  },
-  subtitle: {
-    marginTop: spacer,
-    marginBottom: 6,
-    lineHeight: 1.25,
-    display: 'inline'
-  },
-  modal: {
-    background: 'none',
-    boxShadow: 'none'
-  }
-}))
 
 function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
-  const classes = useStyles()
   const [fullExample, setFullExample] = useState(false)
 
-  const wrapperClassNames = {
-    [classes.wrapper]: true,
-    [classes.smallWrapper]: !open
-  }
-
   return (
     <Drawer
       anchor={'bottom'}
       open={true}
       variant={'persistent'}
-      classes={{ paperAnchorDockedBottom: classes.drawer }}>
+      classes={{ paperAnchorDockedBottom: 'border-t-0 shadow-sm' }}>
-      <div className={classnames(wrapperClassNames)}>
+      <div className={`py-8 flex-grow ${open ? 'h-[264px]' : 'h-[84px]'}`}>
-        <Grid container direction="row" justifyContent="center" alignItems="baseline">
+        <Grid
+          container
+          direction="row"
+          justifyContent="center"
+          alignItems="baseline">
           <Grid
             item
             xs={5}
@@ -62,8 +29,8 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
             direction={open ? 'column' : 'row'}
             justifyContent="flex-start"
             alignItems="baseline">
-            <H2 className={classes.title}>Setup Lamassu Admin</H2>
+            <H2 className="m-0 mr-8">Setup Lamassu Admin</H2>
-            <Info2 className={classes.subtitle}>{subtitle}</Info2>
+            <Info2 className="mt-2 mb-2 leading-tight inline">{subtitle}</Info2>
             {open && <P>{text}</P>}
           </Grid>
           <Grid
@@ -121,7 +88,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
       <Modal
         closeOnEscape={true}
         closeOnBackdropClick={true}
-        className={classes.modal}
+        className="bg-transparent shadow-none"
         xl={true}
         width={1152 + 120 + 56}
         handleClose={() => {
@@ -131,7 +98,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
         <img width={1152} src={exImage} alt="" />
       </Modal>
     </Drawer>
-  );
+  )
 }
 
 export default Footer

new-lamassu-admin/src/pages/Wizard/components/Locales.jsx

@@ -1,12 +1,10 @@
-import { useQuery, useMutation, gql } from "@apollo/client";
+import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React from 'react'
 import Section from 'src/components/layout/Section'
 import TitleSection from 'src/components/layout/TitleSection'
 
 import { Table as EditableTable } from 'src/components/editableTable'
-import styles from 'src/pages/AddMachine/styles'
 import {
   mainFields,
   localeDefaults as defaults,
@@ -16,8 +14,6 @@ import { toNamespace } from 'src/utils/config'
 
 import { getConfiguredCoins } from '../helper'
 
-const useStyles = makeStyles(styles)
-
 const GET_DATA = gql`
   query getData {
     config
@@ -52,7 +48,6 @@ const SAVE_CONFIG = gql`
 `
 
 function Locales({ isActive, doContinue }) {
-  const classes = useStyles()
   const { data } = useQuery(GET_DATA)
 
   const [saveConfig] = useMutation(SAVE_CONFIG, {
@@ -72,7 +67,7 @@ function Locales({ isActive, doContinue }) {
   const onChangeCoin = (prev, curr, setValue) => setValue(curr)
 
   return (
-    <div className={classes.wrapper}>
+    <div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
       <TitleSection title="Locales" />
       <Section>
         <EditableTable
@@ -87,7 +82,7 @@ function Locales({ isActive, doContinue }) {
           validationSchema={schema}
           data={[]}
           elements={mainFields(
-            R.merge(data, { cryptoCurrencies }),
+            R.mergeRight(data, { cryptoCurrencies }),
             onChangeCoin
           )}
         />

new-lamassu-admin/src/pages/Wizard/components/Mailgun.jsx

@@ -1,5 +1,4 @@
 import { useMutation, useQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/styles'
 import React, { useState, useEffect } from 'react'
 import { H4, Info3 } from 'src/components/typography'
 import FormRenderer from 'src/pages/Services/FormRenderer'
@@ -10,21 +9,9 @@ import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
 import { ActionButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import mailgunSchema from 'src/pages/Services/schemas/mailgun'
-import styles from 'src/pages/Wizard/Radio.styles'
+import classes from 'src/pages/Wizard/Radio.module.css'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
-const useStyles = makeStyles({
-  ...styles,
-  radioGroup: {
-    ...styles.radioGroup,
-    width: 768
-  },
-  radioLabel: {
-    ...styles.radioLabel,
-    width: 300
-  }
-})
-
 const GET_CONFIG = gql`
   {
     config
@@ -55,7 +42,6 @@ const options = [
 ]
 
 const Mailgun = () => {
-  const classes = useStyles()
   const { data } = useQuery(GET_CONFIG)
   const [saveConfig] = useMutation(SAVE_CONFIG)
   const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
@@ -90,8 +76,8 @@ const Mailgun = () => {
     <div className={classes.mdForm}>
       <H4>Do you want to get notifications via email?</H4>
       <RadioGroup
-        labelClassName={classes.radioLabel}
+        labelClassName={classes.mailgunRadioLabel}
-        className={classes.radioGroup}
+        className={classes.mailgunRadioGroup}
         options={options}
         value={emailActive}
         onChange={event => handleRadio(event.target.value)}

new-lamassu-admin/src/pages/Wizard/components/Notifications.jsx

@@ -1,29 +1,13 @@
-import { makeStyles } from '@mui/styles'
 import Grid from '@mui/material/Grid'
 import React, { useState } from 'react'
 import Sidebar from 'src/components/layout/Sidebar'
 import TitleSection from 'src/components/layout/TitleSection'
 import Notifications from 'src/pages/Notifications/Notifications'
 
-import addMachineStyles from 'src/pages/AddMachine/styles'
 import { namespaces } from 'src/utils/config'
 
 import Mailgun from './Mailgun'
 
-const styles = {
-  ...addMachineStyles,
-  grid: {
-    flex: 1,
-    height: '100%'
-  },
-  content: {
-    marginLeft: 48,
-    paddingTop: 15
-  }
-}
-
-const useStyles = makeStyles(styles)
-
 const EMAIL = 'Email'
 const SETUP_CHANNELS = 'Setup channels'
 const TRANSACTION_ALERTS = 'Transaction alerts'
@@ -40,21 +24,20 @@ const pages = [
 
 const N = () => {
   const [selected, setSelected] = useState(EMAIL)
-  const classes = useStyles()
 
   const isSelected = it => selected === it
 
   return (
-    <div className={classes.wrapper}>
+    <div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
       <TitleSection title="Notifications"></TitleSection>
-      <Grid container className={classes.grid}>
+      <Grid container className="flex-1 h-full">
         <Sidebar
           data={pages}
           isSelected={isSelected}
           displayName={it => it}
           onClick={it => setSelected(it)}
         />
-        <div className={classes.content}>
+        <div className="ml-12 pt-4">
           {isSelected(EMAIL) && <Mailgun />}
           {isSelected(SETUP_CHANNELS) && (
             <Notifications

new-lamassu-admin/src/pages/Wizard/components/OperatorInfo.jsx

@@ -1,16 +1,9 @@
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 // import OperatorInfo from 'src/pages/OperatorInfo'
 
-import styles from 'src/pages/AddMachine/styles'
-
-const useStyles = makeStyles(styles)
-
 function WizardOperatorInfo() {
-  const classes = useStyles()
-
   return (
-    <div className={classes.wrapper}>
+    <div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
       {/* <OperatorInfo wizard={true}></OperatorInfo> */}
     </div>
   )

new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx

@@ -1,5 +1,4 @@
 import { useMutation, useQuery, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'
@@ -11,7 +10,8 @@ import { Button, SupportLinkButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import twilio from 'src/pages/Services/schemas/twilio'
 
-import styles from './Wallet/Shared.styles'
+import sharedClasses from './Wallet/Shared.module.css'
+import classes from './Twilio.module.css'
 
 const GET_CONFIG = gql`
   {
@@ -26,30 +26,6 @@ const SAVE_ACCOUNTS = gql`
   }
 `
 
-const useStyles = makeStyles({
-  ...styles,
-  content: {
-    width: 820
-  },
-  radioLabel: {
-    ...styles.radioLabel,
-    width: 280
-  },
-  wrapper: {
-    width: 1200,
-    height: 100,
-    margin: [[0, 'auto']]
-  },
-  title: {
-    marginLeft: 8,
-    marginBottom: 5
-  },
-  info: {
-    marginTop: 20,
-    marginBottom: 20
-  }
-})
-
 const options = [
   {
     code: 'enable',
@@ -62,7 +38,6 @@ const options = [
 ]
 
 function Twilio({ doContinue }) {
-  const classes = useStyles()
   const [selected, setSelected] = useState(null)
   const [error, setError] = useState(false)
 
@@ -89,8 +64,8 @@ function Twilio({ doContinue }) {
   }
 
   const titleClasses = {
-    [classes.title]: true,
+    'ml-2 mb-2': true,
-    [classes.error]: error
+    [sharedClasses.error]: error
   }
 
   return (
@@ -115,7 +90,7 @@ function Twilio({ doContinue }) {
 
         <RadioGroup
           labelClassName={classes.radioLabel}
-          className={classes.radioGroup}
+          className={sharedClasses.radioGroup}
           options={options}
           value={selected}
           onChange={onSelect}
@@ -143,12 +118,15 @@ function Twilio({ doContinue }) {
               elements={twilio.elements}
               validationSchema={twilio.getValidationSchema(accounts.twilio)}
               buttonLabel={'Continue'}
-              buttonClass={classes.formButton}
+              buttonClass={sharedClasses.formButton}
             />
           </>
         )}
         {selected !== 'enable' && (
-          <Button size="lg" onClick={clickContinue} className={classes.button}>
+          <Button
+            size="lg"
+            onClick={clickContinue}
+            className={sharedClasses.button}>
             Continue
           </Button>
         )}

new-lamassu-admin/src/pages/Wizard/components/Twilio.module.css

@@ -0,0 +1,24 @@
+.content {
+  width: 820px;
+}
+
+.radioLabel {
+  width: 280px;
+  height: 48px;
+}
+
+.wrapper {
+  width: 1200px;
+  height: 100px;
+  margin: 0 auto;
+}
+
+.title {
+  margin-left: 8px;
+  margin-bottom: 5px;
+}
+
+.info {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}

new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.jsx

@@ -1,5 +1,4 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { P, H4 } from 'src/components/typography'
@@ -9,9 +8,7 @@ import { Button } from 'src/components/buttons'
 import { NamespacedTable as EditableTable } from 'src/components/editableTable'
 import { toNamespace, namespaces } from 'src/utils/config'
 
-import styles from './Shared.styles'
+import classes from './Shared.module.css'
-
-const useStyles = makeStyles(styles)
 const GET_INFO = gql`
   query getData {
     config
@@ -37,8 +34,6 @@ const SAVE_CONFIG = gql`
 `
 
 const AllSet = ({ data: currentData, doContinue }) => {
-  const classes = useStyles()
-
   const { data } = useQuery(GET_INFO)
   const [saveConfig] = useMutation(SAVE_CONFIG, {
     onCompleted: doContinue

new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.jsx

@@ -1,5 +1,4 @@
 import { useMutation, useQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/styles'
 import React, { useState } from 'react'
 import { P, H4 } from 'src/components/typography'
 import FormRenderer from 'src/pages/Services/FormRenderer'
@@ -8,16 +7,7 @@ import { SupportLinkButton, Button } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import blockcypherSchema from 'src/pages/Services/schemas/blockcypher'
 
-import styles from './Shared.styles'
+import classes from './Shared.module.css'
-
-const useStyles = makeStyles({
-  ...styles,
-  radioGroup: styles.radioGroup,
-  radioLabel: {
-    ...styles.radioLabel,
-    width: 200
-  }
-})
 
 const GET_CONFIG = gql`
   {
@@ -42,8 +32,6 @@ const options = [
 ]
 
 const Blockcypher = ({ addData }) => {
-  const classes = useStyles()
-
   const { data } = useQuery(GET_CONFIG)
   const [saveConfig] = useMutation(SAVE_ACCOUNTS, {
     onCompleted: () => addData({ zeroConf: 'blockcypher' })

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.jsx

@@ -1,5 +1,4 @@
 import { useQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import React, { useState } from 'react'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
@@ -9,9 +8,7 @@ import * as Yup from 'yup'
 import { Button } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs/formik'
 
-import styles from './Shared.styles'
+import classes from './Shared.module.css'
-
-const useStyles = makeStyles(styles)
 
 const GET_CONFIG = gql`
   {
@@ -27,7 +24,6 @@ const schema = Yup.object().shape({
 })
 
 const ChooseCoin = ({ addData }) => {
-  const classes = useStyles()
   const [error, setError] = useState(false)
 
   const { data } = useQuery(GET_CONFIG)

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.jsx

@@ -1,6 +1,5 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
 import { getEquivalentCode } from '@lamassu/coins/lightUtils'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H4, Info3 } from 'src/components/typography'
@@ -11,11 +10,9 @@ import { Button, SupportLinkButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import _schema from 'src/pages/Services/schemas'
 
-import styles from './Shared.styles'
+import classes from './Shared.module.css'
 import { getItems } from './getItems'
 
-const useStyles = makeStyles(styles)
-
 const GET_CONFIG = gql`
   {
     accounts
@@ -42,7 +39,6 @@ const isConfigurable = it =>
   !R.isNil(it) && !R.contains(it)(['mock-exchange', 'no-exchange'])
 
 const ChooseExchange = ({ data: currentData, addData }) => {
-  const classes = useStyles()
   const { data } = useQuery(GET_CONFIG)
   const [saveAccounts] = useMutation(SAVE_ACCOUNTS, {
     onCompleted: () => submit()

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.jsx

@@ -1,6 +1,5 @@
 import { useQuery, gql } from "@apollo/client";
 import { getEquivalentCode } from '@lamassu/coins/lightUtils'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H4 } from 'src/components/typography'
@@ -8,11 +7,9 @@ import { H4 } from 'src/components/typography'
 import { Button } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 
-import styles from './Shared.styles'
+import classes from './Shared.module.css'
 import { getItems } from './getItems'
 
-const useStyles = makeStyles(styles)
-
 const GET_CONFIG = gql`
   {
     accountsConfig {
@@ -25,7 +22,6 @@ const GET_CONFIG = gql`
 `
 
 const ChooseTicker = ({ data: currentData, addData }) => {
-  const classes = useStyles()
   const { data } = useQuery(GET_CONFIG)
 
   const [selected, setSelected] = useState(null)

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.jsx

@@ -1,5 +1,4 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H4, Info3 } from 'src/components/typography'
@@ -11,11 +10,9 @@ import { RadioGroup } from 'src/components/inputs'
 import _schema from 'src/pages/Services/schemas'
 import bitgo from 'src/pages/Services/schemas/singlebitgo'
 
-import styles from './Shared.styles'
+import classes from './Shared.module.css'
 import { getItems } from './getItems'
 
-const useStyles = makeStyles(styles)
-
 const GET_CONFIG = gql`
   {
     accounts
@@ -52,7 +49,6 @@ const isLocalHosted = it =>
   ])
 
 const ChooseWallet = ({ data: currentData, addData }) => {
-  const classes = useStyles()
   // no need to fetch exchange config here
   const schema = _schema()
   const { data } = useQuery(GET_CONFIG)

new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.module.css

@@ -0,0 +1,45 @@
+.radioGroup {
+  flex-direction: row;
+  width: 600px;
+}
+
+.radioLabel {
+  width: 150px;
+  height: 48px;
+}
+
+.mdForm {
+  width: 385px;
+}
+
+.infoMessage {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.infoMessage > p {
+  width: 330px;
+  margin-top: 4px;
+  margin-left: 16px;
+}
+
+.actionButton {
+  margin-bottom: 32px;
+}
+
+.actionButtonLink {
+  text-decoration: none;
+  color: var(--zodiac);
+}
+
+.error {
+  color: var(--tomato);
+}
+
+.button {
+  margin-top: 40px;
+}
+
+.formButton {
+  margin: 24px 0 0;
+}

new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js

@@ -1,42 +0,0 @@
-import { errorColor, spacer, primaryColor } from 'src/styling/variables'
-
-const LABEL_WIDTH = 150
-
-export default {
-  radioGroup: {
-    flexDirection: 'row',
-    width: 600
-  },
-  radioLabel: {
-    width: LABEL_WIDTH,
-    height: 48
-  },
-  mdForm: {
-    width: 385
-  },
-  infoMessage: {
-    display: 'flex',
-    marginBottom: 20,
-    '& > p': {
-      width: 330,
-      marginTop: 4,
-      marginLeft: 16
-    }
-  },
-  actionButton: {
-    marginBottom: spacer * 4
-  },
-  actionButtonLink: {
-    textDecoration: 'none',
-    color: primaryColor
-  },
-  error: {
-    color: errorColor
-  },
-  button: {
-    marginTop: spacer * 5
-  },
-  formButton: {
-    margin: [[spacer * 3, 0, 0]]
-  }
-}

new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.jsx

@@ -1,11 +1,8 @@
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Sidebar, { Stepper } from 'src/components/layout/Sidebar'
 import TitleSection from 'src/components/layout/TitleSection'
 
-import styles from 'src/pages/AddMachine/styles'
-
 import AllSet from './AllSet'
 import Blockcypher from './Blockcypher'
 import ChooseCoin from './ChooseCoin'
@@ -13,8 +10,6 @@ import ChooseExchange from './ChooseExchange'
 import ChooseTicker from './ChooseTicker'
 import ChooseWallet from './ChooseWallet'
 
-const useStyles = makeStyles(styles)
-
 const steps = [
   {
     label: 'Choose cryptocurrency',
@@ -46,7 +41,6 @@ const Wallet = ({ doContinue }) => {
   const [step, setStep] = useState(0)
   const [data, setData] = useState({})
 
-  const classes = useStyles()
   const mySteps = data?.coin === 'BTC' ? steps : R.remove(4, 1, steps)
 
   const Component = mySteps[step].component
@@ -57,17 +51,17 @@ const Wallet = ({ doContinue }) => {
   }
 
   return (
-    <div className={classes.wrapper}>
+    <div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
-      <div className={classes.headerDiv}>
+      <div className="flex justify-between items-center">
         <TitleSection title="Wallet settings"></TitleSection>
       </div>
-      <div className={classes.contentDiv}>
+      <div className="flex flex-1 flex-row">
         <Sidebar>
           {mySteps.map((it, idx) => (
             <Stepper key={idx} step={step} it={it} idx={idx} steps={mySteps} />
           ))}
         </Sidebar>
-        <div className={classes.contentWrapper}>
+        <div className="ml-12">
           <Component data={data} addData={addData} doContinue={doContinue} />
         </div>
       </div>

new-lamassu-admin/src/pages/Wizard/components/Welcome.jsx

@@ -1,36 +1,13 @@
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { H1, P } from 'src/components/typography'
 
 import { Button } from 'src/components/buttons'
-import { comet } from 'src/styling/variables'
-
-const styles = {
-  welcome: {
-    textAlign: 'center',
-    paddingTop: 256
-  },
-  title: {
-    lineHeight: 1,
-    fontSize: 48
-  },
-  getStarted: {
-    fontSize: 24,
-    fontWeight: 500,
-    marginBottom: 54,
-    color: comet
-  }
-}
-
-const useStyles = makeStyles(styles)
 
 function Welcome({ doContinue }) {
-  const classes = useStyles()
-
   return (
-    <div className={classes.welcome}>
+    <div className="text-center flex flex-col items-center justify-center w-full h-full">
-      <H1 className={classes.title}>Welcome to the Lamassu Admin</H1>
+      <H1 className="text-5xl">Welcome to the Lamassu Admin</H1>
-      <P className={classes.getStarted}>
+      <P className="text-2xl mb-14 text-comet">
         To get you started, we’ve put together a wizard that will
         <br />
         help set up what you need before pairing your machines.

new-lamassu-admin/src/pages/Wizard/helper.jsx

@@ -8,8 +8,6 @@ import { fromNamespace, namespaces } from 'src/utils/config'
 
 import Commissions from './components/Commissions'
 import Locale from './components/Locales'
-// import Notifications from './components/Notifications'
-// import WizardOperatorInfo from './components/OperatorInfo'
 import Twilio from './components/Twilio'
 import Wallet from './components/Wallet/Wallet'
 import Welcome from './components/Welcome'