From d2b817a180d4a79d1bdf35e423bdeb74419ec2e0 Mon Sep 17 00:00:00 2001
From: Shuhaib T U <shuhaibtu79@gmail.com>
Date: Mon, 11 Mar 2024 03:15:02 +0530
Subject: [PATCH] style: improved responsiveness of user pages

---
 client/src/Services/communityService.js       |   2 +-
 client/src/components/UserHome/UserHome.jsx   |   6 +-
 .../ViewMarkModal/ViewMarkModal.jsx           |   2 +-
 .../community/NewDiscussion/NewDiscussion.jsx |   2 +-
 .../pages/UserPages/Community/Community.jsx   | 197 +++++++++---------
 .../UserPages/Community/ViewCommunity.jsx     |   6 +-
 .../pages/UserPages/MyBodyPage/MyBodyPage.jsx |   2 +-
 .../pages/UserPages/MyLawsPage/MyLawsPage.jsx |   2 +-
 .../pages/UserPages/MyMindPage/MyMindPage.jsx |   2 +-
 9 files changed, 108 insertions(+), 113 deletions(-)

diff --git a/client/src/Services/communityService.js b/client/src/Services/communityService.js
index d38765d..1375f8e 100644
--- a/client/src/Services/communityService.js
+++ b/client/src/Services/communityService.js
@@ -13,7 +13,7 @@ export const getRecentDiscussions = async (page) => {
 
 export const getCommunity = async function (communityId) {
     try {
-        const response = await thaliaAPI.get(`/community/get-details/${communityId}`);
+        const response = await thaliaAPI.get(`/community/get_details/${communityId}`);
         return response;
     } catch (error) {
         return error
diff --git a/client/src/components/UserHome/UserHome.jsx b/client/src/components/UserHome/UserHome.jsx
index a586096..e73d7a0 100644
--- a/client/src/components/UserHome/UserHome.jsx
+++ b/client/src/components/UserHome/UserHome.jsx
@@ -32,15 +32,15 @@ export default function UserHome() {
           className="absolute opacity-10 top-0 hidden md:inline-block md:w-full z-10"
           alt=""
         />
-        <div className="fixed chat-didi flex justify-center right-7 md:bottom-10 md:right-10 z-20">
+        <div className="fixed chat-didi flex justify-center right-7 md:bottom-24 md:right-14 z-20">
           <div className="bg-text my-tooltip mr-[-25px] pr-9 px-3 py-1 rounded-s-full">
-            <h1 className="text-secondary mt-2 font-semibold">
+            <h1 className="text-secondary mt-3 font-semibold">
               Chat with Didi
             </h1>
           </div>
           <div
             onClick={() => setOpenModal(true)}
-            className="w-12 h-12 cursor-pointer  rounded-full flex items-center justify-center bg-text"
+            className="w-14 h-14 cursor-pointer  rounded-full flex items-center justify-center bg-text"
           >
             <img src={Chat} alt="" className="w-8 z-40 " />
           </div>
diff --git a/client/src/components/ViewMarkModal/ViewMarkModal.jsx b/client/src/components/ViewMarkModal/ViewMarkModal.jsx
index ff89638..0b36881 100644
--- a/client/src/components/ViewMarkModal/ViewMarkModal.jsx
+++ b/client/src/components/ViewMarkModal/ViewMarkModal.jsx
@@ -22,7 +22,7 @@ export default function ViewMarkModal({
       >
         <Modal.Header>{content.name}</Modal.Header>
         <Modal.Body>
-          <ReactMarkdown className="prose lg:prose-xl">
+          <ReactMarkdown className="prose md:ps-32 lg:prose-xl">
             {content.content}
           </ReactMarkdown>
         </Modal.Body>
diff --git a/client/src/components/community/NewDiscussion/NewDiscussion.jsx b/client/src/components/community/NewDiscussion/NewDiscussion.jsx
index 652b720..e8b5dc5 100644
--- a/client/src/components/community/NewDiscussion/NewDiscussion.jsx
+++ b/client/src/components/community/NewDiscussion/NewDiscussion.jsx
@@ -58,7 +58,7 @@ export default function NewDiscussion({
                onClose={() => setOpenModal(false)}
                popup
           >
-               <Modal.Body className="bg-gray-800 border text-white">
+               <Modal.Body className="bg-gray-800 rounded-md shadow-xl text-white">
                     {isLoading ? (
                          <Loader />
                     ) : (
diff --git a/client/src/pages/UserPages/Community/Community.jsx b/client/src/pages/UserPages/Community/Community.jsx
index 72d2097..02946e4 100644
--- a/client/src/pages/UserPages/Community/Community.jsx
+++ b/client/src/pages/UserPages/Community/Community.jsx
@@ -11,114 +11,109 @@ import NewCommunity from "../../../components/community/NewCommunity";
 import RecentDiscussions from "../../../components/community/RecentDiscussions/RecentDiscussions";
 import YourCommunity from "../../../components/community/YourCommunity/YourCommunity";
 import DiscoverCommunity from "../../../components/community/DiscoverCommunity/DiscoverCommunity";
+import LayersIcon from "@mui/icons-material/Layers";
 
 export default function Community() {
-     const { tab } = useParams();
-     const navigate = useNavigate();
-     const [showSidebar, setShowSidebar] = useState("hidden");
-     const [currentTab, setCurrentTab] = useState(tab.toUpperCase());
-     const [showNewCommunity, setShowNewCommunity] = useState(false);
-     return (
-          <div className="community bg-background">
-               <NewCommunity
-                    showModal={showNewCommunity}
-                    setShowModal={setShowNewCommunity}
-               />
-               {/* <div className="flex gap-2 col-span-12">
-                    <button
-                         className="p-2 sm:hidden  flex rounded-sm mb-3"
-                         onClick={() =>
-                              setShowSidebar(
-                                   showSidebar === "block" ? "hidden" : "block"
-                              )
-                         }
-                    >
-                         <MenuIcon />
-                    </button>
-                    <h1
-                         className={`${
-                              showSidebar === "block" ? "hidden" : "block"
-                         } sm:hidden text-xl mt-2`}
-                    >
-                         Community
-                    </h1>
-               </div> */}
-               <section
-                    className={`sidebar fixed bg-background h-screen sm:w-96 text-text flex flex-col p-5 py-8 ${showSidebar} sm:block`}
-               >
-                    <h1 className="text-2xl mb-10">Community</h1>
-                    {/* <div className="search my-5">
+  const { tab } = useParams();
+  const navigate = useNavigate();
+  const [showSidebar, setShowSidebar] = useState("hidden");
+  const [currentTab, setCurrentTab] = useState(tab.toUpperCase());
+  const [showNewCommunity, setShowNewCommunity] = useState(false);
+  return (
+    <div className="community bg-background">
+      <NewCommunity
+        showModal={showNewCommunity}
+        setShowModal={setShowNewCommunity}
+      />
+      <div className="flex gap-2 col-span-12">
+        <button
+          className="p-2 sm:hidden text-text flex rounded-sm mb-3"
+          onClick={() =>
+            setShowSidebar(showSidebar === "block" ? "hidden" : "block")
+          }
+        >
+          <LayersIcon />
+        </button>
+        <h1
+          className={`${
+            showSidebar === "block" ? "hidden" : "block"
+          } sm:hidden text-xl mt-2`}
+        >
+          Community
+        </h1>
+      </div>
+      <section
+        className={`sidebar fixed bg-background h-screen w-screen sm:w-96 text-text flex flex-col p-5 py-8 ${showSidebar} sm:block`}
+      >
+        <h1 className="text-2xl mb-10">Community</h1>
+        {/* <div className="search my-5">
                          <input
                               type="text"
                               placeholder="search communities"
                               className="bg-gray-800 rounded-md w-full"
                          />
                     </div> */}
-                    <div
-                         className="nav flex flex-col gap-3"
-                         onClick={() =>
-                              setShowSidebar(
-                                   showSidebar === "block" ? "hidden" : "block"
-                              )
-                         }
-                    >
-                         <div
-                              className={`item hover:bg-gray-800 ${
-                                   currentTab === "RECENT_DISCUSSIONS" &&
-                                   "bg-gray-800"
-                              }  rounded-md p-5 py-3`}
-                              onClick={() => {
-                                   setCurrentTab("RECENT_DISCUSSIONS");
-                                   navigate("/community/recent_discussions");
-                              }}
-                         >
-                              <h2 className="text-lg">Recent Discussions</h2>
-                         </div>
-                         <div
-                              className={`item hover:bg-gray-800 ${
-                                   currentTab === "DISCOVER" && "bg-gray-800"
-                              }  rounded-md p-5 py-3`}
-                              onClick={() => {
-                                   setCurrentTab("DISCOVER");
-                                   navigate("/community/discover");
-                              }}
-                         >
-                              <h2 className="text-lg">Discover</h2>
-                         </div>
-                         <div
-                              className={`item hover:bg-gray-800 ${
-                                   currentTab === "YOUR_COMMUNITY" &&
-                                   "bg-gray-800"
-                              }  rounded-md p-5 py-3`}
-                              onClick={() => {
-                                   setCurrentTab("YOUR_COMMUNITY");
-                                   navigate("/community/your_community");
-                              }}
-                         >
-                              <h2 className="text-lg">Your Community</h2>
-                         </div>
-                    </div>
-                    <div className="new-community mt-7 px-5 py-3 bg-gray-800 hover:bg-gray-600 cursor-pointer rounded-md">
-                         <button
-                              className="text-lg flex gap-3"
-                              onClick={() => setShowNewCommunity(true)}
-                         >
-                              <div className="text-primary">
-                                   <AddCircle />
-                              </div>
-                              Community
-                         </button>
-                    </div>
-               </section>
-               <section className="page-body">
-                    {currentTab === "RECENT_DISCUSSIONS" ? (
-                         <RecentDiscussions />
-                    ) : currentTab === "YOUR_COMMUNITY" ? (
-                         <YourCommunity />
-                    ) : currentTab === "DISCOVER" ? (
-                         <DiscoverCommunity />
-                    ) : null}
-               </section>
+        <div
+          className="nav flex flex-col gap-3"
+          onClick={() =>
+            setShowSidebar(showSidebar === "block" ? "hidden" : "block")
+          }
+        >
+          <div
+            className={`item hover:bg-gray-800 ${
+              currentTab === "RECENT_DISCUSSIONS" && "bg-gray-800"
+            }  rounded-md p-5 py-3`}
+            onClick={() => {
+              setCurrentTab("RECENT_DISCUSSIONS");
+              navigate("/community/recent_discussions");
+            }}
+          >
+            <h2 className="text-lg">Recent Discussions</h2>
           </div>
-     );
+          <div
+            className={`item hover:bg-gray-800 ${
+              currentTab === "DISCOVER" && "bg-gray-800"
+            }  rounded-md p-5 py-3`}
+            onClick={() => {
+              setCurrentTab("DISCOVER");
+              navigate("/community/discover");
+            }}
+          >
+            <h2 className="text-lg">Discover</h2>
+          </div>
+          <div
+            className={`item hover:bg-gray-800 ${
+              currentTab === "YOUR_COMMUNITY" && "bg-gray-800"
+            }  rounded-md p-5 py-3`}
+            onClick={() => {
+              setCurrentTab("YOUR_COMMUNITY");
+              navigate("/community/your_community");
+            }}
+          >
+            <h2 className="text-lg">Your Community</h2>
+          </div>
+        </div>
+        <div className="new-community mt-7 px-5 py-3 bg-gray-800 hover:bg-gray-600 cursor-pointer rounded-md">
+          <button
+            className="text-lg flex gap-3"
+            onClick={() => setShowNewCommunity(true)}
+          >
+            <div className="text-primary">
+              <AddCircle />
+            </div>
+            Community
+          </button>
+        </div>
+      </section>
+      <section className="page-body">
+        {currentTab === "RECENT_DISCUSSIONS" ? (
+          <RecentDiscussions />
+        ) : currentTab === "YOUR_COMMUNITY" ? (
+          <YourCommunity />
+        ) : currentTab === "DISCOVER" ? (
+          <DiscoverCommunity />
+        ) : null}
+      </section>
+    </div>
+  );
 }
diff --git a/client/src/pages/UserPages/Community/ViewCommunity.jsx b/client/src/pages/UserPages/Community/ViewCommunity.jsx
index e63be66..6eebf52 100644
--- a/client/src/pages/UserPages/Community/ViewCommunity.jsx
+++ b/client/src/pages/UserPages/Community/ViewCommunity.jsx
@@ -132,7 +132,7 @@ export default function ViewCommunity() {
                               myCommunity.map((item, index) => {
                                    return (
                                         <div
-                                             className={`community-choose-card mb-3 flex gap-3 overflow-hidden items-center ${
+                                             className={`community-choose-card justify-center mb-3 flex gap-3 overflow-hidden items-center ${
                                                   item._id !== id
                                                        ? "bg-gray-800"
                                                        : "bg-gray-700"
@@ -156,7 +156,7 @@ export default function ViewCommunity() {
                                                        </h1>
                                                   )}
                                              </div>
-                                             <div className="deatils">
+                                             <div className="deatils flex items-center justify-center h-full">
                                                   <h1 className="text-lg">
                                                        {item.community_name}
                                                   </h1>
@@ -177,7 +177,7 @@ export default function ViewCommunity() {
                                              className="h-14 w-14 rounded-md"
                                         />
                                    ) : (
-                                        <h1 className="text-2xl bg-gray-700 px-8 py-3 rounded-md">
+                                        <h1 className="text-2xl bg-gray-700 text-text  px-8 py-3 rounded-md">
                                              {currentCommunity?.community_name[0].toUpperCase()}
                                         </h1>
                                    )}
diff --git a/client/src/pages/UserPages/MyBodyPage/MyBodyPage.jsx b/client/src/pages/UserPages/MyBodyPage/MyBodyPage.jsx
index 509cf5f..e98ed2b 100644
--- a/client/src/pages/UserPages/MyBodyPage/MyBodyPage.jsx
+++ b/client/src/pages/UserPages/MyBodyPage/MyBodyPage.jsx
@@ -85,7 +85,7 @@ export default function MyBodyPage() {
           {count > 0 && (
             <Pagination
               currentPage={currentPage}
-              totalPages={parseInt(count / 10)}
+              totalPages={Math.ceil(count / 10)}
               onPageChange={onPageChange}
             />
           )}
diff --git a/client/src/pages/UserPages/MyLawsPage/MyLawsPage.jsx b/client/src/pages/UserPages/MyLawsPage/MyLawsPage.jsx
index 120f34a..ad09913 100644
--- a/client/src/pages/UserPages/MyLawsPage/MyLawsPage.jsx
+++ b/client/src/pages/UserPages/MyLawsPage/MyLawsPage.jsx
@@ -85,7 +85,7 @@ export default function MyLawsPage() {
           {count > 0 && (
             <Pagination
               currentPage={currentPage}
-              totalPages={parseInt(count / 10)}
+              totalPages={Math.ceil(count / 10)}
               onPageChange={onPageChange}
             />
           )}
diff --git a/client/src/pages/UserPages/MyMindPage/MyMindPage.jsx b/client/src/pages/UserPages/MyMindPage/MyMindPage.jsx
index b671356..a94cd02 100644
--- a/client/src/pages/UserPages/MyMindPage/MyMindPage.jsx
+++ b/client/src/pages/UserPages/MyMindPage/MyMindPage.jsx
@@ -85,7 +85,7 @@ export default function MyMindPage() {
           {count > 0 && (
             <Pagination
               currentPage={currentPage}
-              totalPages={parseInt(count / 10)}
+              totalPages={Math.ceil(count / 10)}
               onPageChange={onPageChange}
             />
           )}