Update AppearanceComponent.js with MUI Box component

frontend/src/features/settings/appearance/AppearanceComponent.js

@@ -1,21 +1,19 @@
 import React from "react";
 import { useApplicationTheme } from "../../../providers/ThemeProvider";
-import { Grid, Paper, FormControlLabel, Switch } from "@mui/material";
+import { Grid, Paper, FormControlLabel, Switch, Box } from "@mui/material";
 import LanguageContainer from "./language/LanguageContainer";
 import { PaperTitle } from "components/common";
-import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
-const useStyles = makeStyles(theme => ({
+const styles = {
   language: {
-    paddingLeft: theme.spacing(1)
+    paddingLeft: 1
   }
-}));
+};
 
 const AppearanceComponent = () => {
   const { isDark, onDarkModeChanged } = useApplicationTheme();
   const { t } = useTranslation();
-  const classes = useStyles();
 
   const handleChange = event => {
     const { checked } = event.target;
@@ -38,9 +36,9 @@ const AppearanceComponent = () => {
           <FormControlLabel
             value="start"
             control={
-              <div className={classes.language}>
+              <Box sx={styles.language}>
                 <LanguageContainer />
-              </div>
+              </Box>
             }
             label="Language:"
             labelPlacement="start"