partial: cashout css migration

new-lamassu-admin/src/pages/Cashout/Cashout.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 Switch from '@mui/material/Switch'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -15,20 +14,6 @@ import { fromNamespace, toNamespace } from 'src/utils/config'
 import Wizard from './Wizard'
 import { DenominationsSchema, getElements } from './helper'
 
-const useStyles = makeStyles({
-  fudgeFactor: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  switchLabel: {
-    margin: 6,
-    width: 24
-  },
-  autoComplete: {
-    width: '100%'
-  }
-})
-
 const SAVE_CONFIG = gql`
   mutation Save($config: JSONObject) {
     saveConfig(config: $config)
@@ -61,7 +46,6 @@ const GET_INFO = gql`
 `
 
 const CashOut = ({ name: SCREEN_KEY }) => {
-  const classes = useStyles()
   const [wizard, setWizard] = useState(false)
   const { data, loading } = useQuery(GET_INFO)
 
@@ -107,7 +91,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
               />
             </HelpTooltip>
           }>
-          <div className={classes.fudgeFactor}>
+          <div className="flex items-center">
             <P>Transaction fudge factor</P>
             <Switch
               checked={fudgeFactorActive}
@@ -116,7 +100,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
               }}
               value={fudgeFactorActive}
             />
-            <Label2 className={classes.switchLabel}>
+            <Label2 className="m-1 w-6">
               {fudgeFactorActive ? 'On' : 'Off'}
             </Label2>
             <HelpTooltip width={304}>
@@ -150,7 +134,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
           error={error?.message}
           validationSchema={DenominationsSchema}
           disableRowEdit={R.compose(R.not, R.path(['active']))}
-          elements={getElements(machines, locale, classes)}
+          elements={getElements(machines, locale)}
         />
         {R.isEmpty(machines) && <EmptyTable message="No machines so far" />}
         {wizard && (

new-lamassu-admin/src/pages/Cashout/WizardSplash.jsx

@@ -1,64 +1,20 @@
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { H1, P, Info2 } from 'src/components/typography'
 import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'
 
 import { Button } from 'src/components/buttons'
-import { neon, spacer } from 'src/styling/variables'
-
-const styles = {
-  logo: {
-    maxHeight: 80,
-    maxWidth: 200
-  },
-  subtitle: {
-    margin: 0,
-    marginBottom: 42,
-    textAlign: 'center'
-  },
-  text: {
-    margin: 0
-  },
-  button: {
-    margin: [[0, 'auto']]
-  },
-  modalContent: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    flex: 1,
-    padding: [[0, 34, 107, 34]]
-  },
-  innerContent: {
-    paddingBottom: 72
-  },
-  title: {
-    color: neon,
-    marginBottom: 12,
-    marginTop: 30,
-    textAlign: 'center'
-  },
-  titleDecorator: {
-    verticalAlign: 'bottom',
-    marginRight: spacer * 1.5,
-    width: spacer * 3,
-    height: spacer * 3.25
-  }
-}
-
-const useStyles = makeStyles(styles)
 
 const WizardSplash = ({ name, onContinue }) => {
-  const classes = useStyles()
-
   return (
-    <div className={classes.modalContent}>
+    <div className="flex flex-col flex-1 px-8 gap-18">
-      <div className={classes.innerContent}>
+      <div>
-        <H1 className={classes.title}>
+        <H1 className="text-neon text-center mb-3 mt-8">
-          <TxOutIcon className={classes.titleDecorator} />
+          <TxOutIcon className="align-bottom mr-3 w-6 h-7" />
           <span>Enable cash-out</span>
         </H1>
-        <Info2 className={classes.subtitle}>{name}</Info2>
+        <Info2 noMargin className="mb-10 text-center">
+          {name}
+        </Info2>
         <P>
           You are about to activate cash-out functionality on your {name}{' '}
           machine which will allow your customers to sell crypto to you.
@@ -68,7 +24,7 @@ const WizardSplash = ({ name, onContinue }) => {
           denominations for the machine.
         </P>
       </div>
-      <Button className={classes.button} onClick={onContinue}>
+      <Button className="mx-auto" onClick={onContinue}>
         Start configuration
       </Button>
     </div>

new-lamassu-admin/src/pages/Cashout/WizardStep.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import React from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
@@ -18,9 +17,6 @@ import tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cas
 import tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg'
 import tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.svg'
 
-import styles from './WizardStep.styles'
-const useStyles = makeStyles(styles)
-
 const getCassetesArtworks = () => ({
   1: {
     1: cassetteOne
@@ -54,14 +50,12 @@ const WizardStep = ({
   options,
   numberOfCassettes
 }) => {
-  const classes = useStyles()
-
   const label = isLastStep ? 'Finish' : 'Next'
   const cassetteIcon = getCassetesArtworks()[numberOfCassettes]
   return (
     <>
-      <div className={classes.titleDiv}>
+      <div className="pb-8">
-        <Info2 className={classes.title}>{name}</Info2>
+        <Info2 className="m-0 mb-3">{name}</Info2>
         <Stepper steps={steps.length + 1} currentStep={step} />
       </div>
 
@@ -78,18 +72,18 @@ const WizardStep = ({
           }}
           enableReinitialize
           validationSchema={schema}>
-          <Form className={classes.column}>
+          <Form className="flex flex-col justify-between grow-2 pb-8">
-            <div className={classes.header}>
+            <div className="flex">
               {steps.map(
                 ({ type, display, component }, idx) =>
                   1 + idx === step && (
-                    <div key={idx} className={classes.step}>
+                    <div key={idx} className="flex-1">
-                      <H4 className={classes.edit}>Edit {display}</H4>
+                      <H4 noMargin>Edit {display}</H4>
 
                       <Label1>Choose bill denomination</Label1>
-                      <div className={classes.bill}>
+                      <div className="flex items-center justify-end w-33">
                         <Field
-                          className={classes.billInput}
+                          className="w-full"
                           type="text"
                           size="lg"
                           autoFocus={1 + idx === step}
@@ -102,7 +96,7 @@ const WizardStep = ({
                           options={options}
                           valueProp={'code'}
                           labelProp={'display'}></Field>
-                        <Info1 noMargin className={classes.suffix}>
+                        <Info1 noMargin className="pl-4">
                           {fiatCurrency}
                         </Info1>
                       </div>
@@ -110,14 +104,14 @@ const WizardStep = ({
                   )
               )}
               <img
-                className={classes.stepImage}
+                className="relative -top-5 right-4"
                 alt="cassette"
                 width="148"
                 height="205"
                 src={cassetteIcon ? cassetteIcon[step] : null}></img>
             </div>
 
-            <Button className={classes.submit} type="submit">
+            <Button className="self-end" type="submit">
               {label}
             </Button>
           </Form>
@@ -125,11 +119,11 @@ const WizardStep = ({
       )}
 
       {isLastStep && (
-        <div className={classes.column}>
+        <div className="flex flex-col justify-between grow-2 pb-8">
           <div>
-            <Info2 className={classes.title}>Cash Cassette Bill Count</Info2>
+            <Info2 className="m-0 mb-3">Cash Cassette Bill Count</Info2>
             <P>
-              <WarningIcon className={classes.disclaimerIcon} />
+              <WarningIcon className="float-left mr-4 mb-12" />
               When enabling cash-out, your bill count will be automatically set
               to zero. Make sure you physically put cash inside the cash
               cassettes to allow the machine to dispense it to your users. If
@@ -137,9 +131,9 @@ const WizardStep = ({
               count for this machine on your Cash boxes & cassettes tab under
               Maintenance.
             </P>
-            <Info2 className={classes.title}>Default Commissions</Info2>
+            <Info2 className="m-0 mb-3">Default Commissions</Info2>
             <P>
-              <WarningIcon className={classes.disclaimerIcon} />
+              <WarningIcon className="float-left mr-4 mb-12" />
               When enabling cash-out, default commissions will be set. To change
               commissions for this machine, please go to the Commissions tab
               under Settings where you can set exceptions for each of the
@@ -147,7 +141,7 @@ const WizardStep = ({
             </P>
           </div>
           {error && <ErrorMessage>Failed to save</ErrorMessage>}
-          <Button className={classes.submit} onClick={() => onContinue()}>
+          <Button className="self-end" onClick={() => onContinue()}>
             {label}
           </Button>
         </div>

new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js

@@ -1,61 +0,0 @@
-import { errorColor, spacer } from 'src/styling/variables'
-
-const LABEL_WIDTH = 150
-
-export default {
-  title: {
-    margin: [[0, 0, 12, 0]]
-  },
-  titleDiv: {
-    paddingBottom: 32
-  },
-  subtitle: {
-    margin: [[32, 0, 21, 0]]
-  },
-  edit: {
-    margin: [[0, 0, 0, 0]]
-  },
-  error: {
-    color: errorColor
-  },
-  bill: {
-    width: 131,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'end'
-  },
-  billInput: {
-    width: '100%'
-  },
-  suffix: {
-    paddingLeft: spacer * 2
-  },
-  submit: {
-    alignSelf: 'flex-end'
-  },
-  picker: {
-    width: LABEL_WIDTH
-  },
-  header: {
-    display: 'flex'
-  },
-  column: {
-    display: 'flex',
-    flexGrow: 2,
-    flexDirection: 'column',
-    paddingBottom: 32,
-    justifyContent: 'space-between'
-  },
-  step: {
-    flex: 1
-  },
-  stepImage: {
-    position: 'relative',
-    top: -20,
-    right: 14
-  },
-  disclaimerIcon: {
-    float: 'left',
-    margin: [[2, 16, 48, 0]]
-  }
-}

new-lamassu-admin/src/pages/Cashout/helper.js

@@ -102,7 +102,7 @@ const DenominationsSchema = Yup.object()
         })
   )
 
-const getElements = (machines, locale = {}, classes) => {
+const getElements = (machines, locale = {}) => {
   const fiatCurrency = R.prop('fiatCurrency')(locale)
   const maxNumberOfCassettes = Math.max(
     ...R.map(it => it.numberOfCassettes, machines),
@@ -122,7 +122,7 @@ const getElements = (machines, locale = {}, classes) => {
           options: options,
           labelProp: 'display',
           valueProp: 'code',
-          className: classes.autoComplete
+          className: 'w-full'
         }
       : { decimalPlaces: 0 }
 

new-lamassu-admin/src/styling/global/global.css

@@ -41,6 +41,7 @@
   --color-tomato: var(--tomato);
   --color-ghost: var(--ghost);
   --color-zircon: var(--zircon);
+  --color-neon: var(--neon);
   --color-malachite: var(--malachite);
   --color-orange-yellow: var(--orange-yellow);
 }