From d313c5a69cccde912ab05c25469249c2cf9cefec Mon Sep 17 00:00:00 2001
From: 1010varun <varunagarwal10.2@gmail.com>
Date: Thu, 23 Feb 2023 12:18:14 +0530
Subject: [PATCH 1/4] updated new post modal

---
 src/App.jsx                  | 12 ++++++++++--
 src/components/ImgUpload.jsx | 29 ++++++++++++++++-------------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index ece9b4572..a67e1bef4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -294,8 +294,15 @@ function App() {
           </div>
         )}
       </div>
-      <Dialog open={openNewUpload} onClose={() => setOpenNewUpload(false)}>
-        <DialogTitle>New Upload</DialogTitle>
+      <Dialog style={{borderRadius: "100px"}} open={openNewUpload} onClose={() => setOpenNewUpload(false)}>
+        <div style={{padding: "20px", borderRadius: "10%"}}>
+        <center><img
+                src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
+                alt="instagram"
+                className="modal__signup__img"
+                style={{ width: "50%" }}
+              />
+          <p style={{fontSize: "25px", fontFamily: "monospace"}}>New Post</p></center>
         <DialogContent>
           {!loadingPosts &&
             (user ? (
@@ -307,6 +314,7 @@ function App() {
               <h3>Sorry you need to login to upload posts</h3>
             ))}
         </DialogContent>
+        </div>
       </Dialog>
 
       <Modal open={openSignUp} onClose={() => setOpenSignUp(false)}>
diff --git a/src/components/ImgUpload.jsx b/src/components/ImgUpload.jsx
index 7c4907747..653ed6d45 100644
--- a/src/components/ImgUpload.jsx
+++ b/src/components/ImgUpload.jsx
@@ -144,30 +144,33 @@ function ImgUpload(props) {
       )}
       {(!uploadingPost || (uploadingPost && image)) && (
         <>
-          <input
-            type="file"
-            name="file"
-            id="file"
-            onChange={handleChange}
-            multiple
-            accept="image/*"
-            ref={imgInput}
-            disabled={uploadingPost}
-          />
-          <caption>Allowed Types: jpg, jpeg, png</caption>
+          <center><div className="file-input">
+                <input
+                  type="file"
+                  className="file"
+                  name="file"
+                  id="file"
+                  onChange={handleChange}
+                  multiple
+                  accept="image/*"
+                  ref={imgInput}
+                  disabled={uploadingPost}
+                />
+                <label htmlFor="file">Upload Picture</label>
+          </div></center>
         </>
       )}
       {imagePreviews && (
         <div>
           {imagePreviews.map((img, i) => {
             return (
-              <img
+              <center><img
                 id="imgPreview"
                 className="preview"
                 src={img}
                 alt={`image-${i}`}
                 key={i}
-              />
+              /></center>
             );
           })}
         </div>

From 10629fbb912c217bb86386e3e31fca88ac64267c Mon Sep 17 00:00:00 2001
From: 1010varun <varunagarwal10.2@gmail.com>
Date: Fri, 24 Feb 2023 00:07:03 +0530
Subject: [PATCH 2/4] make suggested changes

---
 src/App.jsx   | 8 ++++----
 src/index.css | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index a67e1bef4..a7d031cb6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -294,15 +294,15 @@ function App() {
           </div>
         )}
       </div>
-      <Dialog style={{borderRadius: "100px"}} open={openNewUpload} onClose={() => setOpenNewUpload(false)}>
-        <div style={{padding: "20px", borderRadius: "10%"}}>
-        <center><img
+      <Dialog sx={{borderRadius: "100px"}} open={openNewUpload} onClose={() => setOpenNewUpload(false)}>
+        <div style={{padding: "20px", borderRadius: "10%", textAlign: "center"}}>
+        <img
                 src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
                 alt="instagram"
                 className="modal__signup__img"
                 style={{ width: "50%" }}
               />
-          <p style={{fontSize: "25px", fontFamily: "monospace"}}>New Post</p></center>
+          <p style={{fontSize: "25px", fontFamily: "monospace"}}>New Post</p>
         <DialogContent>
           {!loadingPosts &&
             (user ? (
diff --git a/src/index.css b/src/index.css
index 2049e7b0b..e7e24c0ba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -180,8 +180,6 @@
   margin-right: auto;
   margin-top: 10px;
   margin-bottom: 10px;
-  /* border: 1px solid #ccc; */
-  background-color: rgb(157, 237, 226);
 }
 
 .imageUpload-progress {
@@ -262,7 +260,7 @@ div#picker {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #cf0db5;
+  color: #ffffff;
   font-weight: bold;
   cursor: pointer;
   transition: transform 0.2s ease-out;

From 37e093503e7c9eff6438bf949cc4bea9dcde5deb Mon Sep 17 00:00:00 2001
From: 1010varun <varunagarwal10.2@gmail.com>
Date: Fri, 24 Feb 2023 12:57:22 +0530
Subject: [PATCH 3/4] removed center tag

---
 src/App.jsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6cf95c63c..2bfb93a83 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -29,6 +29,7 @@ function getModalStyle() {
     transform: `translate(-${top}%, -${left}%)`,
     padding: `${padding}%`,
     borderRadius: `${radius}%`,
+    textAlign: "center"
   };
 }
 
@@ -319,12 +320,11 @@ function App() {
       <Modal open={openSignUp} onClose={() => setOpenSignUp(false)}>
         <div style={modalStyle} className={classes.paper}>
           <form className="modal__signup" onSubmit={signUp}>
-            <center>
               <img
                 src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
                 alt="instagram"
                 className="modal__signup__img"
-                style={{ width: "80%" }}
+                style={{ width: "80%", marginLeft:"10%" }}
               />
               <div
                 style={{
@@ -334,6 +334,7 @@ function App() {
                   border: "2px",
                   borderColor: "black",
                   borderStyle: "solid",
+                  marginLeft:"22%"
                 }}
               >
                 {address ? (
@@ -390,19 +391,17 @@ function App() {
               >
                 Sign Up
               </AnimatedButton>
-            </center>
           </form>
         </div>
       </Modal>
       <Modal open={openSignIn} onClose={() => setOpenSignIn(false)}>
         <div style={getModalStyle()} className={classes.paper}>
           <form className="modal__signup">
-            <center>
               <img
                 src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
                 alt="dummygram"
                 className="modal__signup__img"
-                style={{ width: "80%" }}
+                style={{ width: "80%", marginLeft: "10%" }}
               />
               <Input
                 type="text"
@@ -427,12 +426,11 @@ function App() {
               >
                 Sign In
               </AnimatedButton>
-            </center>
           </form>
         </div>
       </Modal>
 
-      <center
+      <div
         style={
           !loadingPosts
             ? {}
@@ -448,13 +446,13 @@ function App() {
         {loadingPosts ? (
           <Loader />
         ) : (
-          <div className="app__posts">
+          <div className="app__posts" style={{marginLeft: "33%"}}>
             {posts.map(({ id, post }) => (
               <Post key={id} postId={id} user={user} post={post} />
             ))}
           </div>
         )}
-      </center>
+      </div>
       <FaArrowCircleUp
         fill="#777"
         // stroke="30"

From dcf340c5d7b8e35a37b294da9524f1c08742b605 Mon Sep 17 00:00:00 2001
From: 1010varun <varunagarwal10.2@gmail.com>
Date: Sat, 25 Feb 2023 00:03:37 +0530
Subject: [PATCH 4/4] added flex

---
 src/App.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2bfb93a83..2a1796ae1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -430,6 +430,7 @@ function App() {
         </div>
       </Modal>
 
+    <div style={{display: "flex", alignContent: "center", justifyContent: "center"}}>
       <div
         style={
           !loadingPosts
@@ -446,13 +447,14 @@ function App() {
         {loadingPosts ? (
           <Loader />
         ) : (
-          <div className="app__posts" style={{marginLeft: "33%"}}>
+          <div className="app__posts">
             {posts.map(({ id, post }) => (
               <Post key={id} postId={id} user={user} post={post} />
             ))}
           </div>
         )}
       </div>
+      </div>
       <FaArrowCircleUp
         fill="#777"
         // stroke="30"
@@ -464,6 +466,7 @@ function App() {
         }}
       />
     </div>
+    
   );
 }