updated styles

SoumavaBanerjee · Dec 26, 2020 · 19efd10 · 19efd10
1 parent 32126ca
commit 19efd10
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <!--

diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,8 @@ import {
   Grid,
   Grow,
   CssBaseline,
+  useMediaQuery,
+  useTheme,
 } from "@material-ui/core";
 
 import { useDispatch } from "react-redux";
@@ -18,6 +20,12 @@ import makeStyles from "./styles";
 const App = () => {
   const classes = makeStyles();
   const dispatch = useDispatch();
+  const theme = useTheme();
+  const isbigScreen = useMediaQuery(theme.breakpoints.up("sm"));
+
+  const gridProps = {
+    direction: isbigScreen ? "row" : "column-reverse",
+  };
 
   useEffect(() => {
     dispatch(getPosts());
@@ -44,6 +52,7 @@ const App = () => {
             justify="space-between"
             alignItems="stretch"
             spacing={3}
+            {...gridProps}
           >
             <Grid item xs={12} sm={7}>
               <Posts />

diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
@@ -1,14 +1,27 @@
-import { Container, TextField } from "@material-ui/core";
+import { TextField, Paper, Button, Typography } from "@material-ui/core";
 import React from "react";
 import makeStyles from "./styles";
 
 const Form = () => {
   const classes = makeStyles();
+  const handleSubmit = () => {};
   return (
-    <Container>
-      {" "}
-      <h1>FORM</h1>
-    </Container>
+    <Paper className={classes.paper}>
+      <form
+        autoComplete="off"
+        noValidate
+        className={classes.form}
+        onSubmit={handleSubmit()}
+      >
+        <Typography variant="h6">Memory!</Typography>
+        <TextField
+          name="creator"
+          label="Creator"
+          variant="outlined"
+          fullWidth
+        />
+      </form>
+    </Paper>
   );
 };
 

diff --git a/src/components/Posts/Posts.js b/src/components/Posts/Posts.js
@@ -7,7 +7,7 @@ const Posts = () => {
   const posts = useSelector((state) => state.posts);
   const classes = makeStyles();
 
-  console.log(posts);
+  // console.log(posts);
 
   return (
     <div>