From 18680ed321b55e9f24d86bf5fc02332441db42eb Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Mon, 15 Nov 2021 17:41:37 +0330
Subject: [PATCH] migrate ChapterCard.tsx to Mui 5

---
 src/components/ChapterCard.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ChapterCard.tsx b/src/components/ChapterCard.tsx
index 0d755a0588..3da91058c1 100644
--- a/src/components/ChapterCard.tsx
+++ b/src/components/ChapterCard.tsx
@@ -18,6 +18,7 @@ import MenuItem from '@mui/material/MenuItem';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 
 import client from 'util/client';
+import { Box } from '@mui/system';
 
 interface IProps{
     chapter: IChapter
@@ -102,7 +103,7 @@ export default function ChapterCard(props: IProps) {
                                 padding: 2,
                             }}
                         >
-                            <div style={{ display: 'flex' }}>
+                            <Box sx={{ display: 'flex' }}>
                                 <div style={{ display: 'flex', flexDirection: 'column' }}>
                                     <Typography variant="h5" component="h2">
                                         <span style={{ color: theme.palette.primary.dark }}>
@@ -117,7 +118,7 @@ export default function ChapterCard(props: IProps) {
                                         {downloadStatusString}
                                     </Typography>
                                 </div>
-                            </div>
+                            </Box>
 
                             <IconButton aria-label="more" onClick={handleClick} size="large">
                                 <MoreVertIcon />
@@ -131,9 +132,9 @@ export default function ChapterCard(props: IProps) {
                         onClose={handleClose}
                     >
                         {downloadStatusString.endsWith('Downloaded')
-                            && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
+                             && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
                         {downloadStatusString.length === 0
-                        && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
+                         && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
                         <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
                             {chapter.bookmarked && 'Remove bookmark'}
                             {!chapter.bookmarked && 'Bookmark'}