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

src/screens/anime/AnimeSearchSingle.tsx

@@ -16,6 +16,10 @@ import client from 'util/client';
 
 const useStyles = makeStyles((theme) => ({
     root: {
+        margin: '20px 10px',
+        display: 'flex',
+        justifyContent: 'space-around',
+        width: '300px',
         TextField: {
             margin: theme.spacing(1),
             width: '25ch',
@@ -95,7 +99,9 @@ export default function AnimeSearchSingle() {
                 <TextField
                     inputRef={textInput}
                     error={error}
-                    id="standard-basic"
+                    id="filled-basic"
+                    variant="filled"
+                    size="small"
                     label="Search text.."
                     onKeyDown={(e) => e.key === 'Enter' && processInput()}
                 />

src/screens/manga/SearchSingle.tsx

@@ -16,6 +16,10 @@ import client from 'util/client';
 
 const useStyles = makeStyles((theme) => ({
     root: {
+        margin: '20px 10px',
+        display: 'flex',
+        justifyContent: 'space-around',
+        width: '300px',
         TextField: {
             margin: theme.spacing(1),
             width: '25ch',
@@ -95,7 +99,9 @@ export default function SearchSingle() {
                 <TextField
                     inputRef={textInput}
                     error={error}
-                    id="standard-basic"
+                    id="filled-basic"
+                    variant="filled"
+                    size="small"
                     label="Search text.."
                     onKeyDown={(e) => e.key === 'Enter' && processInput()}
                 />