make the whole chapter card into a button (#73)

* whole chapter card is a button

* return to anchor

src/components/ChapterCard.tsx

@@ -7,15 +7,16 @@
 
 import React from 'react';
 import { useTheme } from '@mui/material/styles';
+import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import Typography from '@mui/material/Typography';
-import { Link } from 'react-router-dom';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
+
 import client from 'util/client';
 
 interface IProps{
@@ -26,6 +27,7 @@ interface IProps{
 
 export default function ChapterCard(props: IProps) {
     const theme = useTheme();
+
     const { chapter, triggerChaptersUpdate, downloadStatusString } = props;
 
     const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toISOString().slice(0, 10);
@@ -33,6 +35,10 @@ export default function ChapterCard(props: IProps) {
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        // prevent parent tags from getting the event
+        event.stopPropagation();
+        event.preventDefault();
+
         setAnchorEl(event.currentTarget);
     };
 
@@ -63,27 +69,23 @@ export default function ChapterCard(props: IProps) {
     };
 
     const readChapterColor = theme.palette.mode === 'dark' ? '#acacac' : '#b0b0b0';
+
     return (
         <>
             <li>
-                <Card sx={{
+                <Card
+                    sx={{
                         margin: '10px',
                         ':hover': {
                             backgroundColor: 'action.hover',
                             transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                            cursor: 'pointer',
                         },
                         ':active': {
                             backgroundColor: 'action.selected',
                             transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
                         },
                     }}
-                >
-                    <CardContent sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        padding: 2,
-                    }}
                 >
                     <Link
                         to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
@@ -91,6 +93,14 @@ export default function ChapterCard(props: IProps) {
                             textDecoration: 'none',
                             color: chapter.read ? readChapterColor : theme.palette.text.primary,
                         }}
+                    >
+                        <CardContent
+                            sx={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                padding: 2,
+                            }}
                         >
                             <div style={{ display: 'flex' }}>
                                 <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -108,11 +118,12 @@ export default function ChapterCard(props: IProps) {
                                     </Typography>
                                 </div>
                             </div>
-                        </Link>
 
                             <IconButton aria-label="more" onClick={handleClick} size="large">
                                 <MoreVertIcon />
                             </IconButton>
+                        </CardContent>
+                    </Link>
                     <Menu
                         anchorEl={anchorEl}
                         keepMounted
@@ -134,7 +145,6 @@ export default function ChapterCard(props: IProps) {
                             Mark previous as Read
                         </MenuItem>
                     </Menu>
-                    </CardContent>
                 </Card>
             </li>
         </>