Revert "migrate some components to Mui5 new styling system (#72)"

This reverts commit 72ef61e286.

src/screens/settings/About.tsx

@@ -1,15 +1,26 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import { Box } from '@mui/system';
-import client from 'util/client';
-import ListItemLink from 'components/util/ListItemLink';
-import NavbarContext from 'components/context/NavbarContext';
+import client from '../../util/client';
+import ListItemLink from '../../components/util/ListItemLink';
+import NavbarContext from '../../components/context/NavbarContext';
+
+const useStyles = makeStyles({
+    loading: {
+        width: '100vw',
+        '& div': {
+            margin: '50px auto',
+            display: 'block',
+        },
+    },
+});
 
 export default function About() {
     const { setTitle, setAction } = useContext(NavbarContext);
+    const classes = useStyles();
 
     const [about, setAbout] = useState<IAbout>();
 
@@ -25,12 +36,9 @@ export default function About() {
 
     if (about === undefined) {
         return (
-            <Box sx={{
-                height: 'calc(100vh - 128px)', display: 'grid', placeItems: 'center',
-            }}
-            >
+            <div className={classes.loading}>
                 <CircularProgress thickness={5} />
-            </Box>
+            </div>
         );
     }