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,13 +81,24 @@ 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}>
+            <Link
+                to={`/sources/${id}/popular/`}
+                style={{
+                    textDecoration: 'none',
+                    color: theme.palette.text.primary,
+                }}
+            >
                 <CardContent className={classes.root}>
+
                     <div style={{ display: 'flex' }}>
                         <Avatar
                             variant="rounded"
@@ -79,16 +115,57 @@ export default function SourceCard(props: IProps) {
                             </Typography>
                         </div>
                     </div>
-                <div style={{ display: 'flex' }}>
+                    <div>
-                    {/* {isConfigurable &&
+                        <div className={classes.showMobile}>
-                        <Button variant="outlined" style={{ marginLeft: 20 }} onClick={()
+                            <IconButton
-                         => { window.location.href = `/sources/${id}/configure/`;
+                                style={{ width: 59, height: 59 }}
-                          }}>Configure</Button>} */}
+                                onClick={() => history.push(`/sources/${id}/search/`)}
-                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/search/`; }}>Search</Button>
+                                size="large"
-                    {supportsLatest && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/latest/`; }}>Latest</Button>}
+                                edge="end"
-                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/popular/`; }}>Browse</Button>
+                            >
+                                <SearchIcon
+                                    fontSize="medium"
+                                />
+                            </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>
     );
 }