From f74dedfce4ade65cfe023c973a6c137a56c88ab5 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 22:09:54 +0300
Subject: feat: adapt HomePage for mobile devices

---
 src/pages/HomePage/HomePage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/pages/HomePage/HomePage.tsx')

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 8995630..35130d8 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -61,7 +61,7 @@ const HomePage: React.FC = () => {
 
   return (
     <Grid container spacing={4}>
-      <Grid item xs={4}>
+      <Grid item xs={12} md={4}>
         <Grid container direction="column" spacing={1} alignItems="center">
           <Grid item>
             <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} />
@@ -76,7 +76,7 @@ const HomePage: React.FC = () => {
           </Grid>
         </Grid>
       </Grid>
-      <Grid item xs={5}>
+      <Grid item xs={12} md={5}>
         <Grid container direction="column" spacing={6}>
           <Grid item>
             <Typography variant="h4"> Which one to choose? </Typography>
-- 
cgit v1.2.3


From f95dbb6c7f119276dd9a15dc82f48c61b745d8c1 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 23:42:06 +0300
Subject: feat: hide grid overflow in HomePage

---
 src/pages/HomePage/HomePage.tsx | 128 +++++++++++++++++++++-------------------
 1 file changed, 67 insertions(+), 61 deletions(-)

(limited to 'src/pages/HomePage/HomePage.tsx')

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 35130d8..f00289a 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -16,6 +16,10 @@ import { useAuth } from '../../hooks/useAuth';
 import { get } from '../../requests';
 
 const useStyles = makeStyles(theme => ({
+  root: {
+    overflow: 'hidden',
+    padding: theme.spacing(0, 2)
+  },
   logo: {
     width: theme.spacing(20),
     height: theme.spacing(20)
@@ -60,77 +64,79 @@ const HomePage: React.FC = () => {
   const MUILink = <Link href="https://material-ui.com">Material-UI</Link>;
 
   return (
-    <Grid container spacing={4}>
-      <Grid item xs={12} md={4}>
-        <Grid container direction="column" spacing={1} alignItems="center">
-          <Grid item>
-            <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} />
-          </Grid>
-          <Grid item>
-            <Rating value={rating} readOnly size="large" />
-          </Grid>
-          <Grid item>
-            <Typography variant="h5" className={classes.score}>
-              User score: {rating.toFixed(1)}
-            </Typography>
+    <div className={classes.root}>
+      <Grid container spacing={4}>
+        <Grid item xs={12} md={4}>
+          <Grid container direction="column" spacing={1} alignItems="center">
+            <Grid item>
+              <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} />
+            </Grid>
+            <Grid item>
+              <Rating value={rating} readOnly size="large" />
+            </Grid>
+            <Grid item>
+              <Typography variant="h5" className={classes.score}>
+                User score: {rating.toFixed(1)}
+              </Typography>
+            </Grid>
           </Grid>
         </Grid>
-      </Grid>
-      <Grid item xs={12} md={5}>
-        <Grid container direction="column" spacing={6}>
-          <Grid item>
-            <Typography variant="h4"> Which one to choose? </Typography>
-            <Divider />
-            <Typography>
-              <p>
-                Have you ever found yourself stuck between two options, not being able to choose any?
-                This is exactly the problem we are going to solve!
-              </p>
-              <p>Share your minor everyday uncertainties with the whole world and see what others think!</p>
-              <Button variant="contained" color="primary" size="large" onClick={handleLetsGo}>
-                {'let\'s go!'}
-              </Button>
-              {!isAuthenticated() && (
+        <Grid item xs={12} md={5}>
+          <Grid container direction="column" spacing={6}>
+            <Grid item>
+              <Typography variant="h4"> Which one to choose? </Typography>
+              <Divider />
+              <Typography>
+                <p>
+                  Have you ever found yourself stuck between two options, not being able to choose any?
+                  This is exactly the problem we are going to solve!
+                </p>
+                <p>Share your minor everyday uncertainties with the whole world and see what others think!</p>
+                <Button variant="contained" color="primary" size="large" onClick={handleLetsGo}>
+                  {'let\'s go!'}
+                </Button>
+                {!isAuthenticated() && (
+                  <Button
+                    variant="outlined"
+                    color="primary"
+                    size="large"
+                    className={classes.signup}
+                    onClick={handleSignUp}
+                  >
+                    sign up
+                  </Button>
+                )}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Typography variant="h4"> About the project </Typography>
+              <Divider />
+              <Typography>
+                <p>
+                  The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}.
+                  It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)!
+                </p>
+                <p>
+                  We encourage any developer to check it out. Feel free to open issues and create Pull Requests!
+                </p>
+                <p>
+                  All the development process is being tracked on the KanBan board (thanks GitHub).
+                  You can always check it to see what is the current state of the project.
+                </p>
                 <Button
                   variant="outlined"
                   color="primary"
-                  size="large"
-                  className={classes.signup}
-                  onClick={handleSignUp}
+                  startIcon={<TrendingUpIcon />}
+                  href="https://github.com/orgs/which-ecosystem/projects/1"
                 >
-                  sign up
+                  track our progress
                 </Button>
-              )}
-            </Typography>
-          </Grid>
-          <Grid item>
-            <Typography variant="h4"> About the project </Typography>
-            <Divider />
-            <Typography>
-              <p>
-                The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}.
-                It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)!
-              </p>
-              <p>
-                We encourage any developer to check it out. Feel free to open issues and create Pull Requests!
-              </p>
-              <p>
-                All the development process is being tracked on the KanBan board (thanks GitHub).
-                You can always check it to see what is the current state of the project.
-              </p>
-              <Button
-                variant="outlined"
-                color="primary"
-                startIcon={<TrendingUpIcon />}
-                href="https://github.com/orgs/which-ecosystem/projects/1"
-              >
-                track our progress
-              </Button>
-            </Typography>
+              </Typography>
+            </Grid>
           </Grid>
         </Grid>
       </Grid>
-    </Grid>
+    </div>
   );
 };
 
-- 
cgit v1.2.3