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

This reverts commit 72ef61e286.

src/components/ExtensionCard.tsx

@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
@@ -13,7 +14,35 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
-import { Box } from '@mui/system';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 14,
+    },
+    pos: {
+        marginBottom: 12,
+    },
+    icon: {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        flex: '0 0 auto',
+        marginRight: 16,
+    },
+    card: {
+        margin: '10px',
+    },
+}));
 
 interface IProps {
     extension: IExtension
@@ -38,6 +67,7 @@ export default function ExtensionCard(props: IProps) {
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
+    const classes = useStyles();
     const langPress = lang === 'all' ? 'All' : lang.toUpperCase();
 
     function install() {
@@ -88,27 +118,16 @@ export default function ExtensionCard(props: IProps) {
     }
 
     return (
-        <Card sx={{ margin: '10px' }}>
-            <CardContent sx={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                p: 2,
-            }}
-            >
-                <Box sx={{ display: 'flex' }}>
+        <Card className={classes.card}>
+            <CardContent className={classes.root}>
+                <div style={{ display: 'flex' }}>
                     <Avatar
                         variant="rounded"
-                        sx={{
-                            width: '56px',
-                            height: '56px',
-                            flex: '0 0 auto',
-                            mr: 2,
-                        }}
+                        className={classes.icon}
                         alt={name}
                         src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                     />
-                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <Typography variant="h5" component="h2">
                             {name}
                         </Typography>
@@ -117,8 +136,8 @@ export default function ExtensionCard(props: IProps) {
                             {' '}
                             {versionName}
                         </Typography>
-                    </Box>
-                </Box>
+                    </div>
+                </div>
 
                 <Button
                     variant="outlined"