From b9b7dcdcd73ad3bec35e10219b0fcc6ffefbaa21 Mon Sep 17 00:00:00 2001
From: Rafael Taranto <rafael.taranto@protonmail.com>
Date: Thu, 24 Apr 2025 15:44:54 +0100
Subject: [PATCH] partial: migrate AddMachine page css

---
 new-lamassu-admin/src/components/Stage.jsx    | 112 ------------------
 .../src/pages/AddMachine/AddMachine.jsx       | 106 ++++++++---------
 .../src/pages/AddMachine/styles.js            | 109 -----------------
 new-lamassu-admin/src/routing/routes.jsx      |  20 +---
 .../src/styling/global/global.css             |   9 ++
 5 files changed, 61 insertions(+), 295 deletions(-)
 delete mode 100644 new-lamassu-admin/src/components/Stage.jsx

diff --git a/new-lamassu-admin/src/components/Stage.jsx b/new-lamassu-admin/src/components/Stage.jsx
deleted file mode 100644
index e691e4b4..00000000
--- a/new-lamassu-admin/src/components/Stage.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { makeStyles } from '@mui/styles'
-import classnames from 'classnames'
-import * as R from 'ramda'
-import React, { memo } from 'react'
-import CompleteStageIconSpring from 'src/styling/icons/stage/spring/complete.svg?react'
-import CurrentStageIconSpring from 'src/styling/icons/stage/spring/current.svg?react'
-import EmptyStageIconSpring from 'src/styling/icons/stage/spring/empty.svg?react'
-import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
-import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
-import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
-
-import {
-  primaryColor,
-  secondaryColor,
-  offColor,
-  disabledColor
-} from 'src/styling/variables'
-
-const styles = {
-  stages: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  wrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    margin: 0
-  },
-  stage: {
-    display: 'flex',
-    height: 28,
-    width: 28,
-    zIndex: 2,
-    '& > svg': {
-      height: '100%',
-      width: '100%',
-      overflow: 'visible'
-    }
-  },
-  separator: {
-    width: 28,
-    height: 2,
-    border: [[2, 'solid']],
-    zIndex: 1
-  },
-  separatorSpring: {
-    borderColor: secondaryColor
-  },
-  separatorZodiac: {
-    borderColor: primaryColor
-  },
-  separatorSpringEmpty: {
-    borderColor: disabledColor
-  },
-  separatorZodiacEmpty: {
-    borderColor: offColor
-  }
-}
-
-const useStyles = makeStyles(styles)
-
-const Stage = memo(({ stages, currentStage, color = 'spring', className }) => {
-  if (currentStage < 1 || currentStage > stages)
-    throw Error('Value of currentStage is invalid')
-  if (stages < 1) throw Error('Value of stages is invalid')
-
-  const classes = useStyles()
-
-  const separatorClasses = {
-    [classes.separator]: true,
-    [classes.separatorSpring]: color === 'spring',
-    [classes.separatorZodiac]: color === 'zodiac'
-  }
-
-  const separatorEmptyClasses = {
-    [classes.separator]: true,
-    [classes.separatorSpringEmpty]: color === 'spring',
-    [classes.separatorZodiacEmpty]: color === 'zodiac'
-  }
-
-  return (
-    <div className={classnames(className, classes.stages)}>
-      {R.range(1, currentStage).map(idx => (
-        <div key={idx} className={classes.wrapper}>
-          {idx > 1 && <div className={classnames(separatorClasses)} />}
-          <div className={classes.stage}>
-            {color === 'spring' && <CompleteStageIconSpring />}
-            {color === 'zodiac' && <CompleteStageIconZodiac />}
-          </div>
-        </div>
-      ))}
-      <div className={classes.wrapper}>
-        {currentStage > 1 && <div className={classnames(separatorClasses)} />}
-        <div className={classes.stage}>
-          {color === 'spring' && <CurrentStageIconSpring />}
-          {color === 'zodiac' && <CurrentStageIconZodiac />}
-        </div>
-      </div>
-      {R.range(currentStage + 1, stages + 1).map(idx => (
-        <div key={idx} className={classes.wrapper}>
-          <div className={classnames(separatorEmptyClasses)} />
-          <div className={classes.stage}>
-            {color === 'spring' && <EmptyStageIconSpring />}
-            {color === 'zodiac' && <EmptyStageIconZodiac />}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-})
-
-export default Stage
diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx b/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx
index 03249806..55930c41 100644
--- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx
+++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx
@@ -1,12 +1,11 @@
-import { useMutation, useQuery, gql } from "@apollo/client";
+import { useMutation, useQuery, gql } from '@apollo/client'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import SvgIcon from '@mui/material/SvgIcon'
 import IconButton from '@mui/material/IconButton'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { Form, Formik, FastField } from 'formik'
-import {QRCodeSVG as QRCode} from 'qrcode.react'
+import { QRCodeSVG as QRCode } from 'qrcode.react'
 import * as R from 'ramda'
 import React, { memo, useState, useEffect, useRef } from 'react'
 import Title from 'src/components/Title'
@@ -25,8 +24,6 @@ import { Button } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
 import { primaryColor } from 'src/styling/variables'
 
-import styles from './styles'
-
 const SAVE_CONFIG = gql`
   mutation createPairingTotem($name: String!) {
     createPairingTotem(name: $name)
@@ -41,11 +38,9 @@ const GET_MACHINES = gql`
   }
 `
 
-const useStyles = makeStyles(styles)
-
 const getSize = R.compose(R.length, R.pathOr([], ['machines']))
 
-const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => {
+const QrCodeComponent = ({ qrCode, name, count, onPaired }) => {
   const timeout = useRef(null)
   const CLOSE_SCREEN_TIMEOUT = 2000
   const { data } = useQuery(GET_MACHINES, { pollInterval: 10000 })
@@ -69,43 +64,42 @@ const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => {
 
   return (
     <>
-      <Info2 className={classes.qrTitle}>
-        Scan QR code with your new cryptomat
-      </Info2>
-      <div className={classes.qrCodeWrapper}>
-        <div className={classes.qrCodeImageWrapper} data-cy={qrCode}>
+      <Info2>Scan QR code with your new cryptomat</Info2>
+      <div className="flex gap-20 pt-6">
+        <div
+          className="bg-white p-1 rounded-2xl border-solid border-zodiac border-5"
+          data-cy={qrCode}>
           <QRCode
             size={280}
             fgColor={primaryColor}
-            marginSize={4}
+            marginSize={3}
             value={qrCode}
-            className={classes.qrCodeBorder}
           />
-          <div className={classes.qrCodeScanMessage}>
+          <div className="flex items-center mb-5 ml-5">
             <CameraIcon />
-            <P noMargin>Snap a picture and scan</P>
+            <P noMargin className="ml-3">
+              Snap a picture and scan
+            </P>
           </div>
         </div>
-        <div className={classes.qrTextWrapper}>
-          <div className={classes.qrTextInfoWrapper}>
-            <div className={classes.qrTextIcon}>
+        <div className="max-w-100">
+          <div className="flex gap-4 mb-4">
+            <div>
               <WarningIcon />
             </div>
-            <div className={classes.textWrapper}>
-              <P className={classes.qrText}>
-                To pair the machine you need scan the QR code with your machine.
-                To do this either snap a picture of this QR code or download it
-                through the button above and scan it with the scanning bay on
-                your machine.
-              </P>
-            </div>
+            <P noMargin>
+              To pair the machine you need scan the QR code with your machine.
+              To do this either snap a picture of this QR code or download it
+              through the button above and scan it with the scanning bay on your
+              machine.
+            </P>
           </div>
           {hasNewMachine && (
-            <div className={classes.successMessageWrapper}>
-              <div className={classes.successMessageIcon}>
+            <div className="bg-spring3 flex gap-4 p-2">
+              <div className="flex items-center">
                 <CompleteStageIconSpring />
               </div>
-              <Info2 className={classes.successMessage}>
+              <Info2 className="text-spring2 m-0">
                 Machine has been successfully paired!
               </Info2>
             </div>
@@ -135,7 +129,7 @@ const validationSchema = Yup.object().shape({
     )
 })
 
-const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {
+const MachineNameComponent = ({ nextStep, setQrCode, setName }) => {
   const [register] = useMutation(SAVE_CONFIG, {
     onCompleted: ({ createPairingTotem }) => {
       if (process.env.NODE_ENV === 'development') {
@@ -162,9 +156,7 @@ const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {
 
   return (
     <>
-      <Info2 className={classes.nameTitle}>
-        Machine Name (ex: Coffee shop 01)
-      </Info2>
+      <Info2 className="mb-6">Machine Name (ex: Coffee shop 01)</Info2>
       <Formik
         validateOnBlur={false}
         validateOnChange={false}
@@ -175,7 +167,7 @@ const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {
           register({ variables: { name } })
         }}>
         {({ errors }) => (
-          <Form className={classes.form}>
+          <Form>
             <div>
               <FastField
                 name="name"
@@ -183,8 +175,8 @@ const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {
                 component={TextInput}
               />
             </div>
-            {errors && <P className={classes.errorMessage}>{errors.message}</P>}
-            <div className={classes.button}>
+            {errors && <P className="text-tomato">{errors.message}</P>}
+            <div className="mt-16">
               <Button type="submit">Submit</Button>
             </div>
           </Form>
@@ -205,18 +197,18 @@ const steps = [
   }
 ]
 
-const renderStepper = (step, it, idx, classes) => {
+const renderStepper = (step, it, idx) => {
   const active = step === idx
   const past = idx < step
   const future = idx > step
 
   return (
-    <div className={classes.item}>
+    <div className="flex relative my-3">
       <span
         className={classnames({
-          [classes.itemText]: true,
-          [classes.itemTextActive]: active,
-          [classes.itemTextPast]: past
+          'mr-6 text-comet': true,
+          'text-zodiac font-bold': active,
+          'text-zodiac': past
         })}>
         {it.label}
       </span>
@@ -226,8 +218,8 @@ const renderStepper = (step, it, idx, classes) => {
       {idx < steps.length - 1 && (
         <div
           className={classnames({
-            [classes.stepperPath]: true,
-            [classes.stepperPast]: past
+            'absolute h-7 w-px border border-comet border-solid right-2 top-[18px]': true,
+            'border-zodiac': past
           })}></div>
       )}
     </div>
@@ -235,7 +227,6 @@ const renderStepper = (step, it, idx, classes) => {
 }
 
 const AddMachine = memo(({ close, onPaired }) => {
-  const classes = useStyles()
   const { data } = useQuery(GET_MACHINES)
   const [qrCode, setQrCode] = useState('')
   const [name, setName] = useState('')
@@ -246,14 +237,12 @@ const AddMachine = memo(({ close, onPaired }) => {
 
   return (
     <div>
-      <Dialog
-        fullScreen
-        className={classes.dialog}
-        open={true}
-        aria-labelledby="form-dialog-title">
-        <DialogContent className={classes.dialog}>
-          <div className={classes.wrapper}>
-            <div className={classes.headerDiv}>
+      <Dialog fullScreen open={true} aria-labelledby="form-dialog-title">
+        <DialogContent className="p-0 pt-5 bg-ghost">
+          <div
+            className=" mx-auto flex flex-col flex-col flex-col flex-col
+              flex-col flex-col flex-col flex-col w-[1200px] h-full ">
+            <div className="flex items-center justify-between">
               <Title>Add Machine</Title>
               <IconButton onClick={close} size="large">
                 <SvgIcon color="error">
@@ -261,13 +250,12 @@ const AddMachine = memo(({ close, onPaired }) => {
                 </SvgIcon>
               </IconButton>
             </div>
-            <div className={classes.contentDiv}>
+            <div className="flex flex-1">
               <Sidebar>
-                {steps.map((it, idx) => renderStepper(step, it, idx, classes))}
+                {steps.map((it, idx) => renderStepper(step, it, idx))}
               </Sidebar>
-              <div className={classes.contentWrapper}>
+              <div className="px-12 flex-1">
                 <Component
-                  classes={classes}
                   nextStep={() => setStep(1)}
                   count={count}
                   onPaired={onPaired}
@@ -282,7 +270,7 @@ const AddMachine = memo(({ close, onPaired }) => {
         </DialogContent>
       </Dialog>
     </div>
-  );
+  )
 })
 
 export default AddMachine
diff --git a/new-lamassu-admin/src/pages/AddMachine/styles.js b/new-lamassu-admin/src/pages/AddMachine/styles.js
index 75d3c608..926e629e 100644
--- a/new-lamassu-admin/src/pages/AddMachine/styles.js
+++ b/new-lamassu-admin/src/pages/AddMachine/styles.js
@@ -1,7 +1,6 @@
 import typographyStyles from 'src/components/typography/styles'
 import {
   placeholderColor,
-  backgroundColor,
   primaryColor,
   mainWidth,
   spring2,
@@ -15,14 +14,6 @@ const fill = '100%'
 const flexDirection = 'column'
 
 const styles = {
-  dialog: {
-    backgroundColor,
-    width: fill,
-    minHeight: fill,
-    display: 'flex',
-    flexDirection,
-    padding: 0
-  },
   wrapper: {
     width: mainWidth,
     height: fill,
@@ -43,106 +34,6 @@ const styles = {
   },
   contentWrapper: {
     marginLeft: 48
-  },
-  button: {
-    marginTop: 64
-  },
-  nameTitle: {
-    marginTop: 16,
-    marginBottom: 25
-  },
-  qrTitle: {
-    marginTop: 12,
-    marginBottom: 40
-  },
-  qrCodeWrapper: {
-    display: 'flex'
-  },
-  qrTextInfoWrapper: {
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  qrTextWrapper: {
-    width: 381,
-    marginLeft: 80,
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  textWrapper: {
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  qrTextIcon: {
-    marginRight: 16
-  },
-  qrText: {
-    marginTop: 0
-  },
-  item: {
-    position: 'relative',
-    margin: '12px 0 12px 0',
-    display: 'flex'
-  },
-  itemText: {
-    extend: p,
-    color: placeholderColor,
-    marginRight: 24
-  },
-  itemTextActive: {
-    extend: tl2,
-    color: primaryColor
-  },
-  itemTextPast: {
-    color: primaryColor
-  },
-  stepperPath: {
-    position: 'absolute',
-    height: 25,
-    width: 1,
-    border: [[1, 'solid', placeholderColor]],
-    right: 8,
-    top: 18
-  },
-  stepperPast: {
-    border: [[1, 'solid', primaryColor]]
-  },
-  successMessageWrapper: {
-    backgroundColor: spring3,
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '0px 10px',
-    borderRadius: '8px'
-  },
-  successMessage: {
-    color: spring2,
-    margin: '8px 0px'
-  },
-  successMessageIcon: {
-    marginRight: 16,
-    marginBottom: 2,
-    display: 'flex',
-    flexDirection: 'col',
-    alignItems: 'center'
-  },
-  errorMessage: {
-    color: errorColor
-  },
-  qrCodeImageWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: 'white',
-    border: `5px solid ${primaryColor}`,
-    padding: 5,
-    borderRadius: 15
-  },
-  qrCodeScanMessage: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    margin: [[0, 0, 20, 20]],
-    '& > p': {
-      marginLeft: 10
-    }
   }
 }
 
diff --git a/new-lamassu-admin/src/routing/routes.jsx b/new-lamassu-admin/src/routing/routes.jsx
index 47d623d6..8fd3c366 100644
--- a/new-lamassu-admin/src/routing/routes.jsx
+++ b/new-lamassu-admin/src/routing/routes.jsx
@@ -1,6 +1,5 @@
 import Fade from '@mui/material/Fade'
 import Slide from '@mui/material/Slide'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
 import {
@@ -24,14 +23,7 @@ import PrivateRoute from './PrivateRoute'
 import PublicRoute from './PublicRoute'
 import getLamassuRoutes from './lamassu.routes'
 
-const useStyles = makeStyles({
-  wrapper: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%'
-  }
-})
+const wrapperClasses = 'flex flex-1 flex-col h-full'
 
 const tree = getLamassuRoutes()
 
@@ -65,8 +57,6 @@ const getParent = route =>
   )(flattened)
 
 const Routes = () => {
-  const classes = useStyles()
-
   const history = useHistory()
   const location = useLocation()
   const { wizardTested, userData } = useContext(AppContext)
@@ -115,12 +105,12 @@ const Routes = () => {
       </PrivateRoute>
       <PrivateRoute path={'/dashboard'}>
         <Transition
-          className={classes.wrapper}
+          className={wrapperClasses}
           {...transitionProps}
           in={true}
           mountOnEnter
           unmountOnExit>
-          <div className={classes.wrapper}>
+          <div className={wrapperClasses}>
             <Dashboard />
           </div>
         </Transition>
@@ -134,12 +124,12 @@ const Routes = () => {
       {getFilteredRoutes().map(({ route, component: Page, key }) => (
         <PrivateRoute path={route} key={key}>
           <Transition
-            className={classes.wrapper}
+            className={wrapperClasses}
             {...transitionProps}
             in={!!matchPath(location.pathname, { path: route })}
             mountOnEnter
             unmountOnExit>
-            <div className={classes.wrapper}>
+            <div className={wrapperClasses}>
               <PrivateRoute path={route} key={key}>
                 <Page name={key} />
               </PrivateRoute>
diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css
index 65504a87..4480411c 100644
--- a/new-lamassu-admin/src/styling/global/global.css
+++ b/new-lamassu-admin/src/styling/global/global.css
@@ -9,6 +9,11 @@
 :root {
   --zodiac: #1b2559;
   --spring: #48f694;
+  --spring2: #44e188;
+  --spring3: #ecfbef;
+
+  --comet: #5f668a;
+  --tomato: #ff584a;
 
   --ghost: #fafbff;
   --zircon: #ebefff;
@@ -17,6 +22,10 @@
 @theme {
   --color-zodiac: var(--zodiac);
   --color-spring: var(--spring);
+  --color-spring2: var(--spring2);
+  --color-spring3: var(--spring3);
+  --color-comet: var(--comet);
+  --color-tomato: var(--tomato);
   --color-ghost: var(--ghost);
   --color-zircon: var(--zircon);
 }