partial: Dashboard and Locales css migration

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

@@ -1,10 +1,8 @@
-import Grid from '@mui/material/Grid'
-import { makeStyles } from '@mui/styles'
-import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { white } from 'src/styling/variables'
+import Paper from '@mui/material/Paper'
+import classnames from 'classnames'
 
 const cardState = Object.freeze({
   DEFAULT: 'default',
@@ -12,24 +10,11 @@ const cardState = Object.freeze({
   EXPANDED: 'expanded'
 })
 
-const styles = {
-  card: {
-    wordWrap: 'break-word',
-    boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)',
-    borderRadius: 12,
-    padding: 24,
-    backgroundColor: white
-  }
-}
-
-const useStyles = makeStyles(styles)
-
 const CollapsibleCard = ({ className, state, shrunkComponent, children }) => {
-  const classes = useStyles()
   return (
-    <Grid item className={classnames(className, classes.card)}>
+    <Paper className={classnames('p-6', className)}>
       {state === cardState.SHRUNK ? shrunkComponent : children}
-    </Grid>
+    </Paper>
   )
 }