refactor: use theme for chips

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

@@ -1,34 +0,0 @@
-import Chip from '@mui/material/Chip'
-import { withStyles } from '@mui/styles'
-import React, { memo } from 'react'
-
-import {
-  fontColor,
-  inputFontWeight,
-  subheaderColor,
-  smallestFontSize,
-  inputFontFamily
-} from 'src/styling/variables'
-
-const styles = theme => ({
-  root: {
-    backgroundColor: subheaderColor,
-    borderRadius: 4,
-    margin: theme.spacing(0.5, 0.25),
-    height: 18
-  },
-  label: {
-    fontSize: smallestFontSize,
-    color: fontColor,
-    fontWeight: inputFontWeight,
-    fontFamily: inputFontFamily,
-    paddingRight: 4,
-    paddingLeft: 4
-  }
-})
-
-const LsChip = memo(({ classes, ...props }) => (
-  <Chip size="small" classes={classes} {...props} />
-))
-
-export default withStyles(styles)(LsChip)

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

@@ -1,6 +1,6 @@
 import { makeStyles } from '@mui/styles'
+import Chip from '@mui/material/Chip'
 import React from 'react'
-import Chip from 'src/components/Chip'
 import { P, Label3 } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 import FilterIcon from 'src/styling/icons/button/filter/white.svg?react'

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx

@@ -1,7 +1,7 @@
 import { makeStyles } from '@mui/styles'
+import Chip from '@mui/material/Chip'
 import classnames from 'classnames'
 import React from 'react'
-import Chip from 'src/components/Chip'
 import { Info2, Label1, Label2 } from 'src/components/typography'
 
 import { numberToFiatAmount } from 'src/utils/number'
@@ -136,10 +136,7 @@ const CashOut = ({
           <div className={classes.col2}>
             <div className={classes.innerRow}>
               <Info2 className={classes.noMarginText}>{notes}</Info2>
-              <Chip
+              <Chip label={`${denomination} ${currency.code}`} />
-                className={classes.chip}
-                label={`${denomination} ${currency.code}`}
-              />
             </div>
             <div className={classes.innerRow}>
               <Label1 className={classes.noMarginText}>

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js

@@ -79,9 +79,6 @@ const gridStyles = {
   },
   link: {
     marginTop: spacer
-  },
-  chip: {
-    margin: [[0, 0, 0, 7]]
   }
 }
 

new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx

@@ -1,7 +1,7 @@
 import { makeStyles } from '@mui/styles'
+import Chip from '@mui/material/Chip'
 import * as R from 'ramda'
 import React from 'react'
-import Chip from 'src/components/Chip'
 import { Label1, TL2 } from 'src/components/typography'
 
 import { CashOut } from 'src/components/inputs'

new-lamassu-admin/src/styling/theme.js

@@ -10,10 +10,13 @@ import {
   offColor,
   subheaderColor,
   fontSize3,
-  fontSize5,
   zircon,
   zircon2,
-  primaryColor, disabledColor2, disabledColor
+  primaryColor,
+  disabledColor2,
+  disabledColor,
+  smallestFontSize,
+  inputFontWeight
 } from './variables'
 
 const { p } = typographyStyles
@@ -150,11 +153,19 @@ theme = createTheme(theme, {
     },
     MuiChip: {
       styleOverrides: {
+        root: {
+          backgroundColor: subheaderColor,
+          borderRadius: 4,
+          margin: theme.spacing(0.5, 0.25),
+          height: 18
+        },
         label: {
-          paddingLeft: 4,
+          fontSize: smallestFontSize,
-          paddingRight: 4,
           color: fontColor,
-          fontSize: fontSize5
+          fontWeight: inputFontWeight,
+          fontFamily: inputFontFamily,
+          paddingRight: 4,
+          paddingLeft: 4
         }
       }
     },