partial: second batch of components

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

@@ -1,31 +1,10 @@
 import Radio from '@mui/material/Radio'
 import MRadioGroup from '@mui/material/RadioGroup'
 import FormControlLabel from '@mui/material/FormControlLabel'
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import { Label1 } from 'src/components/typography'
 
-import { offColor, secondaryColor } from 'src/styling/variables'
-const styles = {
-  label: {
-    height: 16,
-    lineHeight: '16px',
-    margin: [[0, 0, 4, 0]],
-    paddingLeft: 3
-  },
-  subtitle: {
-    marginTop: -8,
-    marginLeft: 32,
-    color: offColor
-  },
-  radio: {
-    color: secondaryColor
-  }
-}
-
-const useStyles = makeStyles(styles)
-
 const RadioGroup = ({
   name,
   label,
@@ -36,10 +15,11 @@ const RadioGroup = ({
   labelClassName,
   radioClassName
 }) => {
-  const classes = useStyles()
   return (
     <>
-      {label && <Label1 className={classes.label}>{label}</Label1>}
+      {label && (
+        <Label1 className="h-4 leading-4 m-0 mb-1 pl-1">{label}</Label1>
+      )}
       <MRadioGroup
         name={name}
         value={value}
@@ -51,12 +31,16 @@ const RadioGroup = ({
               <FormControlLabel
                 disabled={option.disabled}
                 value={option.code}
-                control={<Radio className={classnames(classes.radio, radioClassName)} />}
+                control={
+                  <Radio
+                    className={classnames('text-spring', radioClassName)}
+                  />
+                }
                 label={option.display}
                 className={classnames(labelClassName)}
               />
               {option.subtitle && (
-                <Label1 className={classes.subtitle}>{option.subtitle}</Label1>
+                <Label1 className="-mt-2 ml-8">{option.subtitle}</Label1>
               )}
             </div>
           </React.Fragment>