migrate SourceCard to Mui 5 (#82)

* migrate SourceCard to Mui 5

* give semantic meaning

src/components/SourceCard.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import { useHistory } from 'react-router-dom';
@@ -18,53 +17,23 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import useLocalStorage from 'util/useLocalStorage';
 import { langCodeToName } from 'util/language';
+import { Box, styled } from '@mui/system';
 
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 16,
+const MobileWidthButtons = styled('div')(({ theme }) => ({
+    display: 'flex',
+    [theme.breakpoints.up('sm')]: {
+        display: 'none',
     },
-    bullet: {
-        display: 'inline-block',
-        margin: '0 2px',
-        transform: 'scale(0.8)',
+}));
+
+const WiderWidthButtons = styled('div')(({ theme }) => ({
+    display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+        display: 'none',
     },
-    title: {
-        fontSize: 14,
-    },
-    pos: {
-        marginBottom: 12,
-    },
-    icon: {
-        width: theme.spacing(7),
-        height: theme.spacing(7),
-        flex: '0 0 auto',
-        marginRight: 16,
-    },
-    card: {
-        margin: '10px',
-        '&:hover': {
-            backgroundColor: theme.palette.action.hover,
-            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-        },
-        '&:active': {
-            backgroundColor: theme.palette.action.selected,
-            transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-        },
-    },
-    showMobile: {
-        display: 'flex',
-        [theme.breakpoints.up('sm')]: {
-            display: 'none',
-        },
-    },
-    showBigger: {
-        display: 'flex',
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
-        },
+
+    '& .MuiButton-root': {
+        marginLeft: '20px',
     },
 }));
 
@@ -84,8 +53,6 @@ export default function SourceCard(props: IProps) {
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
-    const classes = useStyles();
-
     const redirectTo = (e: any, to: string) => {
         history.push(to);
 
@@ -95,19 +62,40 @@ export default function SourceCard(props: IProps) {
 
     return (
         <Card
-            className={classes.card}
+            sx={{
+                margin: '10px',
+                '&:hover': {
+                    backgroundColor: 'action.hover',
+                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                },
+                '&:active': {
+                    backgroundColor: 'action.selected',
+                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                },
+            }}
             onClick={(e) => redirectTo(e, `/sources/${id}/popular/`)}
         >
-            <CardContent className={classes.root}>
+            <CardContent sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 2,
+            }}
+            >
 
-                <div style={{ display: 'flex' }}>
+                <Box sx={{ display: 'flex' }}>
                     <Avatar
                         variant="rounded"
-                        className={classes.icon}
                         alt={name}
+                        sx={{
+                            width: 56,
+                            height: 56,
+                            flex: '0 0 auto',
+                            mr: 2,
+                        }}
                         src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                     />
-                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                         <Typography variant="h5" component="h2">
                             {name}
                         </Typography>
@@ -116,12 +104,12 @@ export default function SourceCard(props: IProps) {
                                 {langCodeToName(lang)}
                             </Typography>
                         )}
-                    </div>
-                </div>
-                <div>
-                    <div className={classes.showMobile}>
+                    </Box>
+                </Box>
+                <>
+                    <MobileWidthButtons>
                         <IconButton
-                            style={{ width: 59, height: 59 }}
+                            sx={{ width: 59, height: 59 }}
                             onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                             size="large"
                             edge="end"
@@ -140,11 +128,10 @@ export default function SourceCard(props: IProps) {
                                 />
                             </IconButton>
                         )}
-                    </div>
-                    <div className={classes.showBigger}>
+                    </MobileWidthButtons>
+                    <WiderWidthButtons>
                         <Button
                             variant="outlined"
-                            style={{ marginLeft: 20 }}
                             onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                         >
                             Search
@@ -152,7 +139,6 @@ export default function SourceCard(props: IProps) {
                         {supportsLatest && (
                             <Button
                                 variant="outlined"
-                                style={{ marginLeft: 20 }}
                                 onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
                             >
                                 Latest
@@ -160,13 +146,12 @@ export default function SourceCard(props: IProps) {
                         )}
                         <Button
                             variant="outlined"
-                            style={{ marginLeft: 20 }}
                             onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
                         >
                             Browse
                         </Button>
-                    </div>
-                </div>
+                    </WiderWidthButtons>
+                </>
             </CardContent>
         </Card>
     );