Update Cards and SearchSingle, AnimeSearchSingle (#22)

added margin to show the rounded corners of each cards
added styling to the search ( searching in sources )

src/components/anime/EpisodeCard.tsx

@@ -42,6 +42,9 @@ const useStyles = makeStyles((theme) => ({
         flex: '0 0 auto',
         marginRight: 16,
     },
+    card: {
+        margin: '10px',
+    },
 }));
 
 interface IProps{
@@ -79,7 +82,7 @@ export default function EpisodeCard(props: IProps) {
     return (
         <>
             <li>
-                <Card>
+                <Card className={classes.card}>
                     <CardContent className={classes.root}>
                         <Link
                             to={`/anime/${episode.animeId}/episode/${episode.index}`}

src/components/anime/ExtensionCard.tsx

@@ -39,6 +39,9 @@ const useStyles = makeStyles((theme) => ({
         flex: '0 0 auto',
         marginRight: 16,
     },
+    card: {
+        margin: '10px',
+    },
 }));
 
 interface IProps {
@@ -114,7 +117,7 @@ export default function ExtensionCard(props: IProps) {
     }
 
     return (
-        <Card>
+        <Card className={classes.card}>
             <CardContent className={classes.root}>
                 <div style={{ display: 'flex' }}>
                     <Avatar

src/components/anime/SourceCard.tsx

@@ -39,6 +39,9 @@ const useStyles = makeStyles((theme) => ({
         flex: '0 0 auto',
         marginRight: 16,
     },
+    card: {
+        margin: '10px',
+    },
 }));
 
 interface IProps {
@@ -57,7 +60,7 @@ export default function SourceCard(props: IProps) {
     const classes = useStyles();
 
     return (
-        <Card>
+        <Card className={classes.card}>
             <CardContent className={classes.root}>
                 <div style={{ display: 'flex' }}>
                     <Avatar

src/components/manga/ChapterCard.tsx

@@ -42,6 +42,9 @@ const useStyles = makeStyles((theme) => ({
         flex: '0 0 auto',
         marginRight: 16,
     },
+    card: {
+        margin: '10px',
+    },
 }));
 
 interface IProps{
@@ -85,7 +88,7 @@ export default function ChapterCard(props: IProps) {
     return (
         <>
             <li>
-                <Card>
+                <Card className={classes.card}>
                     <CardContent className={classes.root}>
                         <Link
                             to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}

src/components/manga/ExtensionCard.tsx

@@ -39,6 +39,9 @@ const useStyles = makeStyles((theme) => ({
         flex: '0 0 auto',
         marginRight: 16,
     },
+    card: {
+        margin: '10px',
+    },
 }));
 
 interface IProps {
@@ -114,7 +117,7 @@ export default function ExtensionCard(props: IProps) {
     }
 
     return (
-        <Card>
+        <Card className={classes.card}>
             <CardContent className={classes.root}>
                 <div style={{ display: 'flex' }}>
                     <Avatar

src/components/manga/SourceCard.tsx

@@ -39,6 +39,9 @@ const useStyles = makeStyles((theme) => ({
         flex: '0 0 auto',
         marginRight: 16,
     },
+    card: {
+        margin: '10px',
+    },
 }));
 
 interface IProps {
@@ -58,7 +61,7 @@ export default function SourceCard(props: IProps) {
     const classes = useStyles();
 
     return (
-        <Card>
+        <Card className={classes.card}>
             <CardContent className={classes.root}>
                 <div style={{ display: 'flex' }}>
                     <Avatar