A few more changes

alexkiriungi · Jan 17, 2024 · d1cb8c6 · d1cb8c6
1 parent 810ab76
commit d1cb8c6
Show file tree

Hide file tree

Showing 4 changed files with 300 additions and 293 deletions.
diff --git a/client/src/scenes/homePage/index.jsx b/client/src/scenes/homePage/index.jsx
@@ -3,40 +3,44 @@ import { useSelector } from "react-redux";
 import Navbar from "scenes/navbar";
 import UserWidget from "scenes/widgets/UserWidget";
 import MyPostWidget from "scenes/widgets/MyPostWidget";
-import PostWidget from "scenes/widgets/PostsWidget";
+import PostsWidget from "scenes/widgets/PostsWidget";
 import AdvertWidget from "scenes/widgets/AdvertWidget";
 import FriendListWidget from "scenes/widgets/FriendListWidget";
 
 const HomePage = () => {
-    const isNonMobileScreens = useMediaQuery("(min-width: 100px)");
-    const { _id, picturePath } = useSelector((state) => state.user);
-    return (<Box>
-        <Navbar />
+  const isNonMobileScreens = useMediaQuery("(min-width:1000px)");
+  const { _id, picturePath } = useSelector((state) => state.user);
+
+  return (
+    <Box>
+      <Navbar />
+      <Box
+        width="100%"
+        padding="2rem 6%"
+        display={isNonMobileScreens ? "flex" : "block"}
+        gap="0.5rem"
+        justifyContent="space-between"
+      >
+        <Box flexBasis={isNonMobileScreens ? "26%" : undefined}>
+          <UserWidget userId={_id} picturePath={picturePath} />
+        </Box>
         <Box
-            width="100%"
-            padding="2rem 6%"
-            display={isNonMobileScreens ? "flex" : "block"}
-            gap="0.5rem"
-            justifyContent="space-between"
+          flexBasis={isNonMobileScreens ? "42%" : undefined}
+          mt={isNonMobileScreens ? undefined : "2rem"}
         >
-            <Box flexBasis={isNonMobileScreens ? "26%" : undefined}>
-                <UserWidget userId={_id} picturePath={picturePath} />
-            </Box>
-            <Box 
-                flexBasis={isNonMobileScreens ? "42%" : undefined}
-                marginTop={isNonMobileScreens ? undefined : "2rem"}
-                >
-                    <MyPostWidget picturePath={picturePath} />
-                    <PostWidget userId={_id} />
-            </Box>
-            {isNonMobileScreens && (<Box flexBasis="26%">
-                <AdvertWidget />
-                <Box margin="2rem 0" />
-                <FriendListWidget userId={_id} />
-                </Box>)}
+          <MyPostWidget picturePath={picturePath} />
+          <PostsWidget userId={_id} />
         </Box>
+        {isNonMobileScreens && (
+          <Box flexBasis="26%">
+            <AdvertWidget />
+            <Box m="2rem 0" />
+            <FriendListWidget userId={_id} />
+          </Box>
+        )}
+      </Box>
     </Box>
-    );
+  );
 };
 
-export default HomePage;
+export default HomePage;