From 47df0a1c75aaa62d1ab245bd97e5006309675984 Mon Sep 17 00:00:00 2001
From: Aybrea <wrenchou22@gmail.com>
Date: Thu, 17 Oct 2024 09:49:12 +0800
Subject: [PATCH] style: mobile responsiveness of Home Page

---
 frontend/src/components/Pages/Home/index.js    | 18 +++++++++---------
 .../components/organisms/TemplateCard/index.js | 12 +++++-------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Pages/Home/index.js b/frontend/src/components/Pages/Home/index.js
index 0d71bfe..19c74c3 100644
--- a/frontend/src/components/Pages/Home/index.js
+++ b/frontend/src/components/Pages/Home/index.js
@@ -37,7 +37,7 @@ const Home = () => {
                         id="theme"
                         options={themes}
                         value={theme}
-                        style={{ width: 300 }}
+                        style={{ width: 300, margin: '0 auto' }}
                         onChange={(_event, newValue) => {
                             if (newValue != null)
                                 setTheme(newValue)
@@ -54,7 +54,7 @@ const Home = () => {
                             if (newValue != null)
                                 setLayout(newValue)
                         }}
-                        style={{ width: 300 }}
+                        style={{ width: 300, margin: '0 auto' }}
                         renderInput={(params) => <TextField {...params} label="Layout" variant="outlined" />}
                     />
                 </Grid>
@@ -67,7 +67,7 @@ const Home = () => {
                             if (newValue != null)
                                 setAnimation(newValue)
                         }}
-                        style={{ width: 300 }}
+                        style={{ width: 300, margin: '0 auto' }}
                         renderInput={(params) => <TextField {...params} label="Animation" variant="outlined" />}
                     />
 
@@ -78,7 +78,7 @@ const Home = () => {
                         id="font"
                         options={fonts}
                         value={font}
-                        style={{ width: 300 }}
+                        style={{ width: 300, margin: '0 auto' }}
                         onChange={(_event, newValue) => {
                             if (newValue != null)
                                 setFont(newValue)
@@ -92,7 +92,7 @@ const Home = () => {
                         id="font-color"
                         options={colorValues}
                         value={fontColor}
-                        style={{ width: 300 }}
+                        style={{ width: 300, margin: '0 auto' }}
                         onChange={(_event, newValue) => {
                             setFontColor(newValue)
                         }}
@@ -104,7 +104,7 @@ const Home = () => {
                         id="bg-color"
                         options={colorValues}
                         value={bgColor}
-                        style={{ width: 300 }}
+                        style={{ width: 300, margin: '0 auto' }}
                         onChange={(_event, newValue) => {
                             setBgColor(newValue)
                         }}
@@ -117,7 +117,7 @@ const Home = () => {
                         id="quote-type"
                         options={quoteTypes}
                         value={quoteType}
-                        style={{ width: 300 }}
+                        style={{ width: 300, margin: '0 auto' }}
                         onChange={(_event, newValue) => {
                             if (newValue != null)
                                 setQuoteType(newValue)
@@ -129,7 +129,7 @@ const Home = () => {
             </Grid>
 
             <Grid container spacing={4}>
-                <Grid item xs={12} style={{ margin: '20px' }}>
+                <Grid item xs={12} style={{ marginTop: '20px' }}>
                     <TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} />
                 </Grid>
                 <Grid item xs={12}>
@@ -150,4 +150,4 @@ const Home = () => {
     )
 }
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/frontend/src/components/organisms/TemplateCard/index.js b/frontend/src/components/organisms/TemplateCard/index.js
index f20d33d..df03935 100644
--- a/frontend/src/components/organisms/TemplateCard/index.js
+++ b/frontend/src/components/organisms/TemplateCard/index.js
@@ -98,18 +98,16 @@ const TemplateCard = (props) => {
           style={{ display: isImageLoaded ? "none" : "" }}
         />
       </div>
-      <Grid container alignContent="center" style={{ margin: "20px" }}>
-        <Grid item sm={8} xs={12}>
-          <TextField fullWidth value={"![Quote](" + quoteUrl + ")"}></TextField>
+      <Grid container spacing={2} alignContent="center" justifyContent="center">
+        <Grid item style={{ flexGrow: 1 }}>
+          <TextField fullWidth value={"![Quote](" + quoteUrl + ")"} />
         </Grid>
-        <Grid item sm={4} xs={12} style={{ textAlign: "center" }}>
+        <Grid item>
           <Button
             variant="contained"
             color="primary"
             disableElevation
-            onClick={() => {
-              copyToClipboard();
-            }}
+            onClick={copyToClipboard}
           >
             Copy Text
           </Button>