Fix: minors

AK-shat-JAIN · Mar 1, 2023 · 430b06d · 430b06d
1 parent 2369ed7
commit 430b06d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 110 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -36,19 +36,18 @@ function getModalStyle() {
     padding: `${padding}%`,
     borderRadius: `${radius}%`,
     textAlign: "center",
-    backgroundColor: "var(--bg-color)",
   };
 }
 
 const useStyles = makeStyles((theme) => ({
   paper: {
     position: "absolute",
     width: 200,
-    border: "1px solid var(--color)",
+    backgroundColor: theme.palette.background.paper,
+    border: "2px solid #000",
     borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[10],
+    boxShadow: theme.shadows[5],
     padding: theme.spacing(2, 4, 3),
-    color: "var(--color)",
   },
 }));
 
@@ -126,16 +125,12 @@ function App() {
   }, [user, username]);
 
   useEffect(() => {
+    window.document.body.style.setProperty("--bg-color", "rgb(145, 237, 203)");
     if (document.body.classList.contains("darkmode--activated")) {
-      window.document.body.style.setProperty("--bg-color", "black");
       window.document.body.style.setProperty("--color", "white");
-      window.document.body.style.setProperty("--val", 1);
       document.getElementsByClassName('app__header__img').item(0).style.filter="invert(100%)";
-
     } else {
-      window.document.body.style.setProperty("--bg-color", "white");
-      window.document.body.style.setProperty("--color", "#2B1B17");
-      window.document.body.style.setProperty("--val", 0);
+      window.document.body.style.setProperty("--color", "black");
       document.getElementsByClassName('app__header__img').item(0).style.filter="invert(0%)";
     }
 
@@ -367,37 +362,22 @@ function App() {
         )}
       </div>
 
-      <Dialog
+      {/* <Dialog
         sx={{ borderRadius: "100px" }}
         open={openNewUpload}
         onClose={() => setOpenNewUpload(false)}
       >
         <div
-          style={{ 
-            backgroundColor: "var(--bg-color)",
-            padding: "20px", 
-            textAlign: "center", 
-            color: "var(--color)",
-            border: "2px solid var(--color)"
-            }}
+          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%", filter: "invert(var(--val))" }}
+            style={{ width: "50%" }}
           />
-          <p style={{ 
-            fontSize: "25px", 
-            fontFamily: "monospace", 
-            color: "var(--color)" 
-            }}>
-            New Post
-          </p>
-
-          <DialogContent sx={{ 
-            // backgroundColor: "var(--bg-color)",
-            }}>
+          <p style={{ fontSize: "25px", fontFamily: "monospace" }}>New Post</p>
+          <DialogContent>
             {!loadingPosts &&
               (user ? (
                 <ImgUpload
@@ -408,7 +388,6 @@ function App() {
                 <h3>Sorry you need to login to upload posts</h3>
               ))}
           </DialogContent>
-
         </div>
       </Dialog>
 
@@ -419,7 +398,7 @@ function App() {
               src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
               alt="instagram"
               className="modal__signup__img"
-              style={{ width: "80%", marginLeft: "10%", filter: "invert(var(--val))" }}
+              style={{ width: "80%", marginLeft: "10%" }}
             />
             <div
               style={{
@@ -430,8 +409,6 @@ function App() {
                 borderColor: "black",
                 borderStyle: "solid",
                 marginLeft: "22%",
-                boxShadow: "0px 0px 5px 1px white",
-                zIndex: 1,
               }}
             >
               {address ? (
@@ -453,21 +430,21 @@ function App() {
               placeholder="USERNAME"
               required
               value={username}
-              style={{ margin: "5%", color: "var(--color)" }}
+              style={{ margin: "5%" }}
               onChange={(e) => setUsername(e.target.value)}
             />
             <Input
               type="text"
               placeholder="EMAIL"
               value={email}
-              style={{ margin: "5%", color: "var(--color)" }}
+              style={{ margin: "5%" }}
               onChange={(e) => setEmail(e.target.value)}
             />
             <Input
               type="password"
               placeholder="PASSWORD"
               value={password}
-              style={{ margin: "5%", color: "var(--color)" }}
+              style={{ margin: "5%" }}
               onChange={(e) => setPassword(e.target.value)}
             />
             <div className="file-input">
@@ -499,20 +476,20 @@ function App() {
               src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
               alt="dummygram"
               className="modal__signup__img"
-              style={{ width: "80%", marginLeft: "10%", filter: "invert(var(--val))" }}
+              style={{ width: "80%", marginLeft: "10%" }}
             />
             <Input
               type="text"
               placeholder="EMAIL"
               value={email}
-              style={{ margin: "5%", color: "var(--color)" }}
+              style={{ margin: "5%" }}
               onChange={(e) => setEmail(e.target.value)}
             />
             <Input
               type="password"
               placeholder="PASSWORD"
               value={password}
-              style={{ margin: "5%", color: "var(--color)", }}
+              style={{ margin: "5%" }}
               onChange={(e) => setPassword(e.target.value)}
             />
             <AnimatedButton
@@ -553,15 +530,14 @@ function App() {
               src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
               alt="dummygram"
               className="modal__signup__img"
-              style={{ width: "80%", marginLeft: "10%", filter: "invert(var(--val))" }}
+              style={{ width: "80%", marginLeft: "10%" }}
             />
 
             <p
               style={{
                 fontSize: "15px",
                 fontFamily: "monospace",
                 padding: "10%",
-                color: "var(--color)"
               }}
             >
               Are you sure you want to Logout?
@@ -578,7 +554,7 @@ function App() {
             </AnimatedButton>
           </form>
         </div>
-      </Modal>
+      </Modal> */}
 
       <div
         style={{

diff --git a/src/components/ImgUpload.jsx b/src/components/ImgUpload.jsx
@@ -187,15 +187,8 @@ function ImgUpload(props) {
         multiline
         rows={4}
         disabled={uploadingPost}
-        sx={{
-          backgroundColor: "white",
-          borderRadius: "8px",
-        }}
       />
-      <AnimatedButton 
-        onClick={handleUpload} 
-        loading={uploadingPost}
-        >
+      <AnimatedButton onClick={handleUpload} loading={uploadingPost}>
         Upload
       </AnimatedButton>
     </div>

diff --git a/src/components/Post.jsx b/src/components/Post.jsx
@@ -198,7 +198,7 @@ function Post(prop) {
   return (
     <div
       className="post"
-      style={{ boxShadow: "0px 0px 5px 1px rgba(0, 0, 0, 0.4)" }}
+      style={{ boxShadow: "0px 1px 4px 0.4px rgba(0, 0, 0, 0.4)" }}
     >
       <div className="post__header">
         <Avatar
@@ -228,9 +228,6 @@ function Post(prop) {
             aria-expanded={open ? "true" : undefined}
             aria-haspopup="true"
             onClick={(event) => setAnchorEl(event.currentTarget)}
-            sx={{
-              color: "var(--color)"
-            }}
           >
             <MoreHorizOutlinedIcon />
           </IconButton>
@@ -334,20 +331,18 @@ function Post(prop) {
               startIcon={<CommentIcon />}
               sx={{
                 backgroundColor: "rgba(	135, 206, 235, 0.2)",
-                margin: "12px 8px",
+                margin: "12px 0",
                 fontSize: "12px",
-                fontWeight: "bold",
               }}
             >
               View All comments
             </Button>
-
             <DialogBox
               open={isCommentOpen}
               onClose={handleCommentClose}
               title="All Comments"
             >
-              <Box sx={{ flexGrow: 1}}>
+              <Box sx={{ flexGrow: 1 }}>
                 <Grid container>
                   <Grid item xs={6} md={6}>
                     <Item>
@@ -388,7 +383,6 @@ function Post(prop) {
                   </Grid>
                 </Grid>
               </Box>
-
               {user && (
                 <form className="post__commentBox">
                   <div className="social__icon">
@@ -418,28 +412,17 @@ function Post(prop) {
                     placeholder="Add a comment..."
                     value={comment}
                     onChange={(e) => setComment(e.target.value)}
-                    style={{ 
-                      backgroundColor: "var(--bg-color)", 
-                      color: "var(--color)",
-                      borderRadius: "22px",
-                      marginTop: "4px",
-                     }}
                   />
                   <button
                     className="post__button"
                     disabled={!comment}
                     type="submit"
                     onClick={postComment}
-                    style={{
-                      fontWeight: 'bold', 
-                      textTransform: "uppercase", 
-                      }}
                   >
                     Comment
                   </button>
                 </form>
               )}
-
             </DialogBox>
           </>
         ) : (
@@ -474,28 +457,17 @@ function Post(prop) {
               placeholder="Add a comment..."
               value={comment}
               onChange={(e) => setComment(e.target.value)}
-              style={{
-                backgroundColor: "var(--bg-color)", 
-                color: "var(--color)",
-                borderRadius: "22px",
-                margin: "4px 0px",
-              }}
             />
             <button
               className="post__button"
               disabled={!comment}
               type="submit"
               onClick={postComment}
-              style={{
-                      fontWeight: 'bold', 
-                      textTransform: "uppercase", 
-                      }}
             >
               Post
             </button>
           </form>
         )}
-
       </div>
     </div>
   );

diff --git a/src/reusableComponents/DialogBox.jsx b/src/reusableComponents/DialogBox.jsx
@@ -20,27 +20,14 @@ const DialogBox = (props) => {
       onClose={props.onClose}
       aria-labelledby="responsive-dialog-title"
     >
-      <DialogTitle 
-        id="responsive-dialog-title" 
-        sx={{
-          fontWeight: "bold", 
-          backgroundColor: "var(--bg-color)", 
-          color: "var(--color)",
-          }}
-      >
-        {props.title}
-      </DialogTitle>
-
+      <DialogTitle id="responsive-dialog-title">{props.title}</DialogTitle>
       <Divider />
-
-      <DialogContent sx={{color: "var(--color)"}}>
+      <DialogContent>
         <DialogContentText>{props.children}</DialogContentText>
       </DialogContent>
-
-      <DialogActions sx={{backgroundColor: "var(--bg-color)"}}>
-        <Button onClick={props.onClose} sx={{fontWeight: "bold", color: 'var(--color)'}} >Cancel</Button>
+      <DialogActions>
+        <Button onClick={props.onClose}>Cancel</Button>
       </DialogActions>
-
     </Dialog>
   );
 };

diff --git a/src/script.js b/src/script.js
@@ -24,24 +24,16 @@ document
 
     if (document.body.classList.contains("darkmode--activated")) {
       document.getElementsByClassName('app__header__img').item(0).style.filter="invert(100%)";
+      document.body.style.setProperty("--bg-color", "rgb(41, 43, 42)");
       document.body.style.setProperty("--color", "white");
-      document.body.style.setProperty("--bg-color", "black");
-      window.document.body.style.setProperty("--val", 1);
       document.getElementById("scrollbar_style").innerHTML =
       "body::-webkit-scrollbar { width: 10px; } /* Track */ body::-webkit-scrollbar-track { background: black; } /* Handle */ body::-webkit-scrollbar-thumb { background: linear-gradient( 45deg, #f4f80c, #addb51, #a2b43a, #51c135, #5ce130, #1dfddf ); border-radius: 10px; }";
-
-
-    } 
-
-    else {
+    } else {
       document.getElementsByClassName('app__header__img').item(0).style.filter="invert(0%)";
       document.body.style.setProperty("--color", "black");
-      document.body.style.setProperty("--bg-color", "white");
-      window.document.body.style.setProperty("--val", 0);
+      document.body.style.setProperty("--bg-color", "rgb(145, 237, 203)");
       document.getElementById("scrollbar_style").innerHTML =
         "body::-webkit-scrollbar { width: 10px; } /* Track */ body::-webkit-scrollbar-track { background: white; } /* Handle */ body::-webkit-scrollbar-thumb { background: linear-gradient( 45deg, #405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d ); border-radius: 10px; }";
-
-
     }
 
   });