partial: dangling components css migration

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

@@ -1,27 +1,12 @@
-import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 
-import { spacer, offColor } from 'src/styling/variables'
-
 import { TL1 } from './typography'
 
-const useStyles = makeStyles({
-  subtitle: {
-    color: offColor,
-    marginTop: spacer * 2,
-    marginBottom: spacer * 2
-  },
-  extraMarginTop: {
-    marginTop: spacer * 9
-  }
-})
-
 const Subtitle = memo(({ children, className, extraMarginTop }) => {
-  const classes = useStyles()
   const classNames = {
-    [classes.subtitle]: true,
-    [classes.extraMarginTop]: extraMarginTop
+    'text-comet my-4': true,
+    'mt-18': extraMarginTop
   }
 
   return <TL1 className={classnames(classNames, className)}>{children}</TL1>