Refactor CacheSettingsComponent to use Box component

frontend/src/features/settings/system/CacheSettingsComponent.js

@@ -1,32 +1,30 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Paper, Button } from "@mui/material";
-import { makeStyles } from "@mui/material/styles";
+import { Paper, Button, Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { PaperTitle } from "components/common";
 import { usePermissions } from "hooks";
 
-const useStyles = makeStyles(theme => ({
+const styles = {
   content: {
     "& > *": {
-      margin: theme.spacing(1)
+      margin: 1
     }
   }
-}));
+};
 
 const CacheSettingsComponent = ({ onResetCache }) => {
-  const classes = useStyles();
   const { t } = useTranslation();
   const { sysAdmin } = usePermissions();
 
   return (
     <Paper variant="outlined">
       <PaperTitle text={t("Settings.Cache.Title")} />
-      <div className={classes.content}>
+      <Box sx={styles.content}>
         <Button variant="outlined" color="secondary" disabled={!sysAdmin} onClick={onResetCache}>
           {t("Settings.Cache.Reset")}
         </Button>
-      </div>
+      </Box>
     </Paper>
   );
 };