From 7710c287c58c04df363a534e873662cab5f97d8a Mon Sep 17 00:00:00 2001
From: voltrare <30526233+voltrare@users.noreply.github.com>
Date: Tue, 7 Sep 2021 05:08:54 +0800
Subject: [PATCH] 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    | 5 ++++-
 src/components/anime/ExtensionCard.tsx  | 5 ++++-
 src/components/anime/SourceCard.tsx     | 5 ++++-
 src/components/manga/ChapterCard.tsx    | 5 ++++-
 src/components/manga/ExtensionCard.tsx  | 5 ++++-
 src/components/manga/SourceCard.tsx     | 5 ++++-
 src/screens/anime/AnimeSearchSingle.tsx | 8 +++++++-
 src/screens/manga/SearchSingle.tsx      | 8 +++++++-
 8 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/anime/EpisodeCard.tsx b/src/components/anime/EpisodeCard.tsx
index 9aa44113..46f7d116 100644
--- a/src/components/anime/EpisodeCard.tsx
+++ b/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}`}
diff --git a/src/components/anime/ExtensionCard.tsx b/src/components/anime/ExtensionCard.tsx
index 0335e3aa..a4a5be51 100644
--- a/src/components/anime/ExtensionCard.tsx
+++ b/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
diff --git a/src/components/anime/SourceCard.tsx b/src/components/anime/SourceCard.tsx
index ecc08d8c..7b944292 100644
--- a/src/components/anime/SourceCard.tsx
+++ b/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
diff --git a/src/components/manga/ChapterCard.tsx b/src/components/manga/ChapterCard.tsx
index 949fb603..557cbaca 100644
--- a/src/components/manga/ChapterCard.tsx
+++ b/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}`}
diff --git a/src/components/manga/ExtensionCard.tsx b/src/components/manga/ExtensionCard.tsx
index 806c0750..26739aa8 100644
--- a/src/components/manga/ExtensionCard.tsx
+++ b/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
diff --git a/src/components/manga/SourceCard.tsx b/src/components/manga/SourceCard.tsx
index 254f3ae4..27bb7128 100644
--- a/src/components/manga/SourceCard.tsx
+++ b/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
diff --git a/src/screens/anime/AnimeSearchSingle.tsx b/src/screens/anime/AnimeSearchSingle.tsx
index a5e16cf5..3cffce1d 100644
--- a/src/screens/anime/AnimeSearchSingle.tsx
+++ b/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()}
                 />
diff --git a/src/screens/manga/SearchSingle.tsx b/src/screens/manga/SearchSingle.tsx
index 656b6294..e7b5532a 100644
--- a/src/screens/manga/SearchSingle.tsx
+++ b/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()}
                 />