partial: blacklist css migration

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

@@ -1,9 +1,8 @@
 import { useQuery, useMutation, gql } from '@apollo/client'
 import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
-import DialogActions from '@mui/material/DialogActions'
 import Switch from '@mui/material/Switch'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'
@@ -21,13 +20,10 @@ import {
 } from 'src/components/buttons'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
-import styles from './Blacklist.styles'
 import BlackListAdvanced from './BlacklistAdvanced'
 import BlackListModal from './BlacklistModal'
 import BlacklistTable from './BlacklistTable'
 
-const useStyles = makeStyles(styles)
-
 const DELETE_ROW = gql`
   mutation DeleteBlacklistRow($address: String!) {
     deleteBlacklistRow(address: $address) {
@@ -88,8 +84,6 @@ const EDIT_BLACKLIST_MESSAGE = gql`
 `
 
 const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
-  const classes = useStyles()
-
   return (
     <Dialog
       open={open}
@@ -103,28 +97,32 @@ const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
         }
       }}
       {...props}>
-      <div className={classes.closeButton}>
-        <IconButton size={16} aria-label="close" onClick={onDissmised}>
+      <div className="p-2">
+        <DialogTitle className="flex flex-col">
+          <IconButton
+            size={30}
+            aria-label="close"
+            onClick={onDissmised}
+            className="-mt-2 -mr-4 ml-auto">
             <CloseIcon />
           </IconButton>
-      </div>
-      <H2 className={classes.dialogTitle}>
-        {'Are you sure you want to enable this?'}
-      </H2>
-      <DialogContent className={classes.dialogContent}>
+          <H2 noMargin>{'Are you sure you want to enable this?'}</H2>
+        </DialogTitle>
+        <DialogContent>
           <Info3>{`This mode means that only paper wallets will be printed for users, and they won't be permitted to scan an address from their own wallet.`}</Info3>
           <Info3>{`This mode is only useful for countries like Switzerland which mandates such a feature.\n`}</Info3>
           <Info2>{`Don't enable this if you want users to be able to scan an address of their choosing.`}</Info2>
-      </DialogContent>
-      <DialogActions className={classes.dialogActions}>
+          <div className="flex justify-end mt-8">
             <Button
               backgroundColor="grey"
-          className={classes.cancelButton}
+              className="mr-2 p-0"
               onClick={() => onDissmised()}>
               Cancel
             </Button>
             <Button onClick={() => onConfirmed(true)}>Confirm</Button>
-      </DialogActions>
+          </div>
+        </DialogContent>
+      </div>
     </Dialog>
   )
 }
@@ -162,8 +160,6 @@ const Blacklist = () => {
     refetchQueries: () => ['getBlacklistData']
   })
 
-  const classes = useStyles()
-
   const blacklistData = R.path(['blacklist'])(blacklistResponse) ?? []
 
   const complianceConfig =
@@ -289,7 +285,7 @@ const Blacklist = () => {
         )}
       </TitleSection>
       {!advancedSettings && (
-        <div className={classes.content}>
+        <div className="flex flex-col flex-1">
           <BlacklistTable
             data={blacklistData}
             handleDeleteEntry={handleDeleteEntry}

new-lamassu-admin/src/pages/Blacklist/Blacklist.styles.js

@@ -1,75 +0,0 @@
-import { spacer, white } from 'src/styling/variables'
-const styles = {
-  grid: {
-    flex: 1,
-    height: '100%'
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
-  advancedForm: {
-    '& > *': {
-      marginTop: 20
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%'
-  },
-  footer: {
-    display: 'flex',
-    flexDirection: 'row',
-    margin: [['auto', 0, spacer * 3, 0]]
-  },
-  submit: {
-    margin: [['auto', 0, 0, 'auto']]
-  },
-  modalTitle: {
-    margin: [['auto', 0, 8.5, 'auto']]
-  },
-  subtitle: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row'
-  },
-  white: {
-    color: white
-  },
-  deleteButton: {
-    paddingLeft: 13
-  },
-  addressRow: {
-    marginLeft: 8
-  },
-  error: {
-    marginTop: 20
-  },
-  closeButton: {
-    display: 'flex',
-    padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],
-    paddingRight: spacer * 1.5,
-    justifyContent: 'end'
-  },
-  dialogTitle: {
-    margin: [[0, spacer * 2, spacer, spacer * 4 + spacer]]
-  },
-  dialogContent: {
-    width: 615,
-    marginLeft: 16
-  },
-  dialogActions: {
-    padding: spacer * 4,
-    paddingTop: spacer * 2
-  },
-  cancelButton: {
-    marginRight: 8,
-    padding: 0
-  },
-  resetToDefault: {
-    width: 145
-  }
-}
-
-export default styles

new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import { Form, Formik, Field } from 'formik'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -15,10 +14,6 @@ import * as Yup from 'yup'
 import { ActionButton, IconButton, Button } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
 
-import styles from './Blacklist.styles'
-
-const useStyles = makeStyles(styles)
-
 const DEFAULT_MESSAGE = `This address may be associated with a deceptive offer or a prohibited group. Please make sure you're using an address from your own wallet.`
 
 const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
@@ -35,7 +30,6 @@ const BlacklistAdvanced = ({
   onClose,
   mutationError
 }) => {
-  const classes = useStyles()
   const [selectedMessage, setSelectedMessage] = useState(null)
 
   const elements = [
@@ -63,7 +57,7 @@ const BlacklistAdvanced = ({
       size: 'sm',
       view: it => (
         <IconButton
-          className={classes.deleteButton}
+          className="pl-3"
           onClick={() => setSelectedMessage(it)}
           size="large">
           <EditIcon />
@@ -78,7 +72,7 @@ const BlacklistAdvanced = ({
       size: 'sm',
       view: it => (
         <IconButton
-          className={classes.deleteButton}
+          className="pl-3"
           disabled={
             !R.isNil(R.path(['allowToggle'], it)) &&
             !R.path(['allowToggle'], it)
@@ -138,12 +132,12 @@ const BlacklistAdvanced = ({
               handleSubmit({ id: selectedMessage.id, ...values })
             }>
             {({ errors, touched, setFieldValue }) => (
-              <Form className={classes.advancedForm}>
+              <Form className="flex flex-col h-full gap-5 py-5">
                 <ActionButton
                   color="primary"
                   Icon={DefaultIcon}
                   InverseIcon={DefaultIconReverse}
-                  className={classes.resetToDefault}
+                  className="w-36"
                   type="button"
                   onClick={() => setFieldValue('content', DEFAULT_MESSAGE)}>
                   Reset to default
@@ -156,15 +150,13 @@ const BlacklistAdvanced = ({
                   rows={6}
                   component={TextInput}
                 />
-                <div className={classes.footer}>
+                <div className="flex flex-row ml-auto mt-auto">
                   {getErrorMsg(errors, touched, mutationError) && (
                     <ErrorMessage>
                       {getErrorMsg(errors, touched, mutationError)}
                     </ErrorMessage>
                   )}
-                  <Button type="submit" className={classes.submit}>
-                    Confirm
-                  </Button>
+                  <Button type="submit">Confirm</Button>
                 </div>
               </Form>
             )}

new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import * as R from 'ramda'
 import React from 'react'
@@ -10,11 +9,7 @@ import * as Yup from 'yup'
 import { Link } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
 
-import styles from './Blacklist.styles'
-const useStyles = makeStyles(styles)
-
 const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
-  const classes = useStyles()
   const handleAddToBlacklist = address => {
     addToBlacklist(address)
   }
@@ -40,8 +35,8 @@ const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
         onSubmit={({ address }) => {
           handleAddToBlacklist(address.trim())
         }}>
-        <Form id="address-form">
-          <H3 className={classes.modalTitle}>Blacklist new address</H3>
+        <Form id="address-form" className="flex flex-col">
+          <H3 className="mt-auto mb-2">Blacklist new address</H3>
           <Field
             name="address"
             fullWidth
@@ -50,16 +45,16 @@ const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
             placeholder={`ex: ${placeholderAddress}`}
             component={TextInput}
           />
-        </Form>
-      </Formik>
-      <div className={classes.footer}>
+          <div className="flex flex-row mt-auto">
             {!R.isNil(errorMsg) && <ErrorMessage>{errorMsg}</ErrorMessage>}
-        <div className="flex ml-auto">
+            <div className="flex ml-auto mt-12">
               <Link type="submit" form="address-form">
                 Blacklist address
               </Link>
             </div>
           </div>
+        </Form>
+      </Formik>
     </Modal>
   )
 }

new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx

@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'
@@ -8,10 +7,6 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
 
 import { IconButton } from 'src/components/buttons'
 
-import styles from './Blacklist.styles'
-
-const useStyles = makeStyles(styles)
-
 const BlacklistTable = ({
   data,
   handleDeleteEntry,
@@ -20,8 +15,6 @@ const BlacklistTable = ({
   deleteDialog,
   setDeleteDialog
 }) => {
-  const classes = useStyles()
-
   const [toBeDeleted, setToBeDeleted] = useState()
 
   const elements = [
@@ -32,7 +25,7 @@ const BlacklistTable = ({
       textAlign: 'left',
       size: 'sm',
       view: it => (
-        <div className={classes.addressRow}>
+        <div className="ml-2">
           <CopyToClipboard>{R.path(['address'], it)}</CopyToClipboard>
         </div>
       )
@@ -45,7 +38,7 @@ const BlacklistTable = ({
       size: 'sm',
       view: it => (
         <IconButton
-          className={classes.deleteButton}
+          className="pl-3"
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted(it)