better UI on mobile for SourceCard

src/components/manga/MangaGrid.tsx

@@ -44,9 +44,20 @@ export default function MangaGrid(props: IProps) {
     } else {
         mapped = mangas.map((it, idx) => {
             if (idx === mangas.length - 1) {
-                return <MangaCard manga={it} ref={lastManga} />;
+                return (
+                    <MangaCard
+                        key={it.id}
+                        manga={it}
+                        ref={lastManga}
+                    />
+                );
             }
-            return <MangaCard manga={it} />;
+            return (
+                <MangaCard
+                    key={it.id}
+                    manga={it}
+                />
+            );
         });
     }
 

src/components/manga/SourceCard.tsx

@@ -6,10 +6,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
+import { useTheme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import { Link, useHistory } from 'react-router-dom';
+import SearchIcon from '@mui/icons-material/Search';
 import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import useLocalStorage from 'util/useLocalStorage';
@@ -41,6 +46,26 @@ const useStyles = makeStyles((theme) => ({
     },
     card: {
         margin: '10px',
+        '&:hover': {
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            transition: 'background-color 0ms ease',
+        },
+        '&:active': {
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            transition: 'background-color 100ms ease-out',
+        },
+    },
+    showMobile: {
+        display: 'flex',
+        [theme.breakpoints.up('sm')]: {
+            display: 'none',
+        },
+    },
+    showBigger: {
+        display: 'flex',
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
     },
 }));
 
@@ -56,39 +81,91 @@ export default function SourceCard(props: IProps) {
         },
     } = props;
 
+    const theme = useTheme();
+    const history = useHistory();
+
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
 
     const classes = useStyles();
 
     return (
         <Card className={classes.card}>
-            <CardContent className={classes.root}>
+            <Link
-                <div style={{ display: 'flex' }}>
+                to={`/sources/${id}/popular/`}
-                    <Avatar
+                style={{
-                        variant="rounded"
+                    textDecoration: 'none',
-                        className={classes.icon}
+                    color: theme.palette.text.primary,
-                        alt={name}
+                }}
-                        src={serverAddress + iconUrl}
+            >
-                    />
+                <CardContent className={classes.root}>
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+
-                        <Typography variant="h5" component="h2">
+                    <div style={{ display: 'flex' }}>
-                            {name}
+                        <Avatar
-                        </Typography>
+                            variant="rounded"
-                        <Typography variant="caption" display="block" gutterBottom>
+                            className={classes.icon}
-                            {langCodeToName(lang)}
+                            alt={name}
-                        </Typography>
+                            src={serverAddress + iconUrl}
+                        />
+                        <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <Typography variant="h5" component="h2">
+                                {name}
+                            </Typography>
+                            <Typography variant="caption" display="block" gutterBottom>
+                                {langCodeToName(lang)}
+                            </Typography>
+                        </div>
                     </div>
-                </div>
+                    <div>
-                <div style={{ display: 'flex' }}>
+                        <div className={classes.showMobile}>
-                    {/* {isConfigurable &&
+                            <IconButton
-                        <Button variant="outlined" style={{ marginLeft: 20 }} onClick={()
+                                style={{ width: 59, height: 59 }}
-                         => { window.location.href = `/sources/${id}/configure/`;
+                                onClick={() => history.push(`/sources/${id}/search/`)}
-                          }}>Configure</Button>} */}
+                                size="large"
-                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/search/`; }}>Search</Button>
+                                edge="end"
-                    {supportsLatest && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/latest/`; }}>Latest</Button>}
+                            >
-                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/popular/`; }}>Browse</Button>
+                                <SearchIcon
-                </div>
+                                    fontSize="medium"
-            </CardContent>
+                                />
+                            </IconButton>
+                            {supportsLatest && (
+                                <IconButton
+                                    onClick={() => history.push(`/sources/${id}/latest/`)}
+                                    size="large"
+                                >
+                                    <FiberNewOutlinedIcon
+                                        fontSize="large"
+                                    />
+                                </IconButton>
+                            )}
+                        </div>
+                        <div className={classes.showBigger}>
+                            <Button
+                                variant="outlined"
+                                style={{ marginLeft: 20 }}
+                                onClick={() => history.push(`/sources/${id}/search/`)}
+                            >
+                                Search
+                            </Button>
+                            {supportsLatest && (
+                                <Button
+                                    variant="outlined"
+                                    style={{ marginLeft: 20 }}
+                                    onClick={() => history.push(`/sources/${id}/latest/`)}
+                                >
+                                    Latest
+                                </Button>
+                            )}
+                            <Button
+                                variant="outlined"
+                                style={{ marginLeft: 20 }}
+                                onClick={() => history.push(`/sources/${id}/popular/`)}
+                            >
+                                Browse
+                            </Button>
+                        </div>
+                    </div>
+                </CardContent>
+            </Link>
         </Card>
     );
 }