Updated with nightmode and change Link to NavLink in leftbar to highlight active pages

client/src/App.jsx

@@ -26,7 +26,7 @@ const App = () => {
  )?.accessToken;
 
  return (
- <Suspense fallback={<FallbackLoading />}>
+ <Suspense fallback={<FallbackLoading />} >
  <Routes>
  <Route element={<PrivateRoute userData={userData} />}>
  {privateRoutes.map((route) => (

client/src/AppContainer.jsx

@@ -7,6 +7,7 @@ import App from "./App";
 import { getTitleFromRoute } from "./utils/docTitle";
 import { Helmet } from "react-helmet";
 import { useLocation } from "react-router-dom";
+import "./index.css"
 
 const ErrorComponent = ({ errorMessage }) => (
  <div className="text-red-500 font-bold text-center">{errorMessage}</div>
@@ -52,7 +53,7 @@ const AppContainer = () => {
 
  if (loading || error) {
  return (
- <div className="flex items-center justify-center h-screen">
+ <div className="flex items-center justify-center h-screen" >
  {loading ? <CommonLoading /> : <ErrorComponent errorMessage={error} />}
  </div>
  );

client/src/PrivateRoute.jsx

@@ -7,6 +7,7 @@ import Leftbar from "./components/shared/Leftbar";
 import Rightbar from "./components/shared/Rightbar";
 
 import ModeratorRightbar from "./components/moderator/Rightbar";
+import { useNightMode } from "./context/NightModeContext";
 
 const noRightbarRoutes = [
  /\/post\/[^/]+$/,
@@ -46,9 +47,9 @@ const PrivateRoute = ({ userData }) => {
  const toggleLeftbar = () => {
  setShowLeftbar(!showLeftbar);
  };
-
+ const {Night} = useNightMode()
  return isAuthenticated(userData, accessToken) ? (
- <div className="scroll-smooth">
+ <div className={Night ? "scroll-smooth h-fit bg-slate-900 text-white pb-10" :"scroll-smooth h-screen" }>
  <Navbar
  userData={userData}
  toggleLeftbar={toggleLeftbar}

client/src/components/community/CommunityCard.jsx

@@ -2,8 +2,10 @@ import { useState } from "react";
 import JoinModal from "../modals/JoinModal";
 import placeholder from "../../assets/placeholder.png";
 import { MdOutlineGroupAdd } from "react-icons/md";
+import { useNightMode } from "../../context/NightModeContext";
 const CommunityCard = ({ community }) => {
  const [joinModalVisibility, setJoinModalVisibility] = useState({});
+ const {Night} = useNightMode()
 
  const toggleJoinModal = (communityId, visible) => {
  setJoinModalVisibility((prev) => ({
@@ -12,7 +14,7 @@ const CommunityCard = ({ community }) => {
  }));
  };
  return (
- <div className="px-3 py-3 rounded-md border bg-white shadow-2xl shadow-[#f2f5fc] flex justify-between">
+ <div className={Night ? "px-3 py-3 rounded-md bg-slate-900 shadow-2xl shadow-[#f2f5fc] flex justify-between" : "px-3 py-3 rounded-md border bg-white shadow-2xl shadow-[#f2f5fc] flex justify-between"}>
  <div className="w-full flex items-start">
  <img
  className="object-cover rounded-full w-10 h-10 mr-4"
@@ -21,8 +23,8 @@ const CommunityCard = ({ community }) => {
  loading="lazy"
  />
  <div className="">
- <h4 className="text-base font-semibold line-clamp-1">{community.name}</h4>
- <p className="text-gray-700 ">
+ <h4 className={Night ? "text-base font-semibold line-clamp-1 text-white" : "text-base font-semibold line-clamp-1"}>{community.name}</h4>
+ <p className={Night ? "text-gray-300 " : "text-gray-700 "}>
  {community.members.length} members
  </p>
  </div>

client/src/components/community/FollowingUsersPosts.jsx

@@ -4,11 +4,13 @@ import { getFollowingUsersPostsAction } from "../../redux/actions/postActions";
 import CommonLoading from "../loader/CommonLoading";
 import Post from "../post/Post";
 import NoPost from "../../assets/nopost.jpg";
+import { useNightMode } from "../../context/NightModeContext";
 
 const MemoizedPost = memo(Post);
 
 const FollowingUsersPosts = ({ communityData }) => {
  const dispatch = useDispatch();
+ const {Night} = useNightMode()
 
  const followingUsersPosts = useSelector(
  (state) => state.posts?.followingUsersPosts
@@ -44,8 +46,8 @@ const FollowingUsersPosts = ({ communityData }) => {
  {followingUsersPosts.length > 0 ? (
  <div>{memoizedFollowingUsersPost}</div>
  ) : (
- <div className="text-center flex justify-center items-center flex-col">
- <p className="py-5 text-gray-500">
+ <div className={Night ? "text-center flex justify-center items-center flex-col bg-slate-800" : "text-center flex justify-center items-center flex-col"}>
+ <p className={Night ? "py-5 text-gray-200" : "py-5 text-gray-500"}>
  None of your following users have posted anything yet. Check
  back later!
  </p>

client/src/components/community/JoinedCommunityCard.jsx

@@ -1,12 +1,14 @@
 import { Link } from "react-router-dom";
+import { useNightMode } from "../../context/NightModeContext";
 
 const JoinedCommunityCard = ({ community }) => {
+ const {Night} = useNightMode()
  return (
 
- <Link to={`/community/${community.name}`} className="flex flex-col mb-5 bg-white w-full px-4 py-4 border shadow-2xl shadow-[#f2f5fc] rounded-md">
+ <Link to={`/community/${community.name}`} className={Night ? "flex flex-col mb-5 bg-slate-800 w-full px-4 py-4 shadow-2xl shadow-[#f2f5fc] rounded-md" : "flex flex-col mb-5 bg-white w-full px-4 py-4 border shadow-2xl shadow-[#f2f5fc] rounded-md" }>
  <img className="" src={community.banner} alt="" loading="lazy" />
- <h3 className="text-lg font-semibold mb-2">{community.name}</h3>
- <p className="text-gray-700 mb-2">{community.members.length} members</p>
+ <h3 className={Night ? "text-lg font-semibold mb-2 text-White" : "text-lg font-semibold mb-2"}>{community.name}</h3>
+ <p className={Night ? "text-gray-300 mb-2" : "text-gray-700 mb-2"}>{community.members.length} members</p>
  </Link>
 
 

client/src/components/community/MainSection.jsx

@@ -8,11 +8,13 @@ import PostForm from "../form/PostForm";
 import Post from "../post/Post";
 import FollowingUsersPosts from "./FollowingUsersPosts";
 import CommonLoading from "../loader/CommonLoading";
+import { useNightMode } from "../../context/NightModeContext";
 
 const MemoizedPost = memo(Post);
 
 const MainSection = () => {
  const dispatch = useDispatch();
+ const {Night} = useNightMode()
 
  const communityData = useSelector((state) => state.community?.communityData);
  const communityPosts = useSelector((state) => state.posts?.communityPosts);
@@ -74,24 +76,36 @@ const MainSection = () => {
  }
 
  return (
- <div className="flex flex-col">
+ <div className={Night ? "flex flex-col bg-slate-800" : "flex flex-col"}>
  <ul className="flex">
  <li
- className={`${
+ className={Night ? `${
+ activeTab === "All posts"
+ ? "border-blue-500 bg-primary rounded-md text-white"
+ : "border-transparent text-gray-300 hover:text-gray-700 hover:border-gray-300"
+ } flex-1 cursor-pointer text-center py-2 px-1 border-b-2 font-medium` :
+ `${
  activeTab === "All posts"
  ? "border-blue-500 bg-primary rounded-md text-white"
  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
- } flex-1 cursor-pointer text-center py-2 px-1 border-b-2 font-medium`}
+ } flex-1 cursor-pointer text-center py-2 px-1 border-b-2 font-medium`
+ }
  onClick={() => setActiveTab("All posts")}
  >
  All post
  </li>
  <li
- className={`${
+ className={Night ? `${
+ activeTab === "You're following"
+ ? "border-blue-500 bg-primary rounded-md text-white"
+ : "border-transparent text-gray-300 hover:text-gray-700 hover:border-gray-300"
+ } flex-1 cursor-pointer text-center py-2 px-1 border-b-2 font-medium` :
+ `${
  activeTab === "You're following"
  ? "border-blue-500 bg-primary rounded-md text-white"
  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
- } flex-1 cursor-pointer text-center py-2 px-1 border-b-2 font-medium`}
+ } flex-1 cursor-pointer text-center py-2 px-1 border-b-2 font-medium`
+ }
  onClick={() => setActiveTab("You're following")}
  >
  You're following

client/src/components/community/Rightbar.jsx

@@ -11,9 +11,11 @@ import {
  useIsModeratorUpdated,
 } from "../../hooks/useCommunityData";
 import { HiUserGroup, HiOutlineCheckBadge } from "react-icons/hi2";
+import { useNightMode } from "../../context/NightModeContext";
 
 const Rightbar = () => {
  const [showLeaveModal, setShowLeaveModal] = useState(false);
+ const {Night} = useNightMode()
 
  const dispatch = useDispatch();
  const { communityName } = useParams();
@@ -49,9 +51,9 @@ const Rightbar = () => {
  }
 
  return (
- <div className="bg-white rounded-md ">
+ <div className={Night ? "bg-slate-800 rounded-md " : "bg-white rounded-md "}>
  <div className="flex flex-col ">
- <h2 className="text-lg font-bold">{name}</h2>
+ <h2 className={Night ? "text-lg font-bold text-white" : "text-lg font-bold"}>{name}</h2>
  <div className="flex items-center gap-2 text-primary mb-4">
  <HiUserGroup />
  <span className="mr-2">
@@ -78,7 +80,7 @@ const Rightbar = () => {
  />
  )}
 
- <h3>{description}</h3>
+ <h3 className={Night ? "text-white" : "text-black"}>{description}</h3>
 
  <div className="my-4">
  {isModeratorOfThisCommunity && (
@@ -108,7 +110,7 @@ const Rightbar = () => {
  </div>
  {rules && rules.length > 0 && (
  <div className="text-slate-900 mb-4">
- <span className="font-bold">Community Guidelines:</span>
+ <span className={Night? "font-bold text-white" : "font-bold"}>Community Guidelines:</span>
  <ul className="flex flex-col gap-2 ">
  {rules.map((rule) => (
  <li key={rule._id} className="flex items-start gap-2 ">

client/src/components/form/PostForm.jsx

@@ -7,6 +7,7 @@ import {
 import InappropriatePostModal from "../modals/InappropriatePostModal";
 import TopicConflictModal from "../modals/TopicConflictModal";
 import EligibilityDetectionFailModal from "../modals/EligibilityDetectionFailModal";
+import { useNightMode } from "../../context/NightModeContext";
 
 const PostForm = ({ communityId, communityName }) => {
  const dispatch = useDispatch();
@@ -17,6 +18,7 @@ const PostForm = ({ communityId, communityName }) => {
  showEligibilityDetectionFailModal,
  setShowEligibilityDetectionFailModal,
  ] = useState(false);
+ const {Night} = useNightMode()
 
  const [formData, setFormData] = useState({
  content: "",
@@ -145,16 +147,16 @@ const PostForm = ({ communityId, communityName }) => {
  confirmationToken={confirmationToken}
  />
 
- <form onSubmit={handleSubmit} className="border-b bg-white p-6">
+ <form onSubmit={handleSubmit} className={Night ? "border-b bg-slate-800 p-6" : "border-b bg-white p-6"}>
  <div className="mb-4">
  <label
  htmlFor="content"
- className="mb-2 block font-bold text-gray-700"
+ className={Night ? "mb-2 block font-bold text-gray-200" : "mb-2 block font-bold text-gray-700"}
  >
  Share something with your community:
  </label>
  <textarea
- className="w-full resize-none rounded-md border p-2"
+ className={Night ? "w-full resize-none rounded-md  p-2 bg-slate-900 text-white" : "w-full resize-none rounded-md border p-2"}
  name="content"
  id="content"
  value={formData.content}
@@ -168,7 +170,7 @@ const PostForm = ({ communityId, communityName }) => {
  <div className="mb-4">
  <label
  htmlFor="file"
- className="mx-auto mt-6 flex cursor-pointer items-center rounded-lg border-2 border-dashed bg-white px-3 py-3 text-center"
+ className={Night ? "mx-auto mt-6 flex cursor-pointer items-center rounded-lg border-2 border-dashed bg-slate-900 px-3 py-3 text-center" : "mx-auto mt-6 flex cursor-pointer items-center rounded-lg border-2 border-dashed bg-white px-3 py-3 text-center"}
  >
  <svg
  xmlns="http://www.w3.org/2000/svg"

client/src/components/home/MainSection.jsx

@@ -7,6 +7,7 @@ import { useSelector, useDispatch } from "react-redux";
 import Post from "../post/Post";
 import CommonLoading from "../loader/CommonLoading";
 import Home from "../../assets/home.jpg";
+import { useNightMode } from "../../context/NightModeContext";
 
 const MemoizedPost = memo(Post);
 
@@ -26,6 +27,7 @@ const MainSection = ({ userData }) => {
  const posts = useSelector((state) => state.posts?.posts);
  const totalPosts = useSelector((state) => state.posts?.totalPosts);
  const [isLoadMoreLoading, setIsLoadMoreLoading] = useState(false);
+ const {Night} = useNightMode()
 
  const LIMIT = 10;
 
@@ -72,7 +74,7 @@ const MainSection = ({ userData }) => {
 
  {posts.length === 0 && (
  <div className="text-center text-gray-700 flex justify-center items-center flex-col">
- <p className="py-5 font-semibold">
+ <p className={Night ? "py-5 text-white font-semibold" : "py-5 font-semibold"}>
  No posts to show. Join a community and post something.
  </p>
  <img loading="lazy" src={Home} alt="no post" />

client/src/components/modals/ProfileUpdateModal.jsx

@@ -7,6 +7,7 @@ import {
 import { useDispatch } from "react-redux";
 import ButtonLoadingSpinner from "../loader/ButtonLoadingSpinner";
 import { FiUser, FiMapPin, FiEdit } from "react-icons/fi";
+import { useNightMode } from "../../context/NightModeContext";
 
 const suggestedInterests = [
  "🎨 Art",
@@ -40,7 +41,7 @@ const ProfileUpdateModal = ({ user, isOpen, onClose }) => {
  const [interests, setInterests] = useState(
  user.interests ? user.interests : ""
  );
-
+ const {Night} = useNightMode()
  const handleUpdateProfile = async () => {
  setIsUpdating(true);
 
@@ -62,7 +63,7 @@ const ProfileUpdateModal = ({ user, isOpen, onClose }) => {
  return (
  <Transition.Root show={isOpen} as={Fragment}>
  <Dialog as="div" className="fixed inset-0 z-50" onClose={onClose}>
- <div className="flex min-h-screen items-center justify-center px-4 pt-4 text-center sm:block sm:p-0 md:pb-20">
+ <div className={Night ? "flex min-h-screen items-center justify-center px-4 pt-4 text-center  text-white sm:block sm:p-0 md:pb-20" : "flex min-h-screen items-center justify-center px-4 pt-4 text-center sm:block sm:p-0 md:pb-20" }>
  <Transition.Child
  as={Fragment}
  enter="ease-out duration-300"
@@ -91,56 +92,56 @@ const ProfileUpdateModal = ({ user, isOpen, onClose }) => {
  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  >
- <div className="inline-block w-full transform overflow-hidden rounded-md bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle md:max-w-xl">
+ <div className={Night ?"inline-block w-full transform overflow-hidden rounded-md bg-slate-800 px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle md:max-w-xl" : "inline-block w-full transform overflow-hidden rounded-md bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle md:max-w-xl" }>
  <div className="w-full">
  <div className="mt-3 text-center sm:mt-0 sm:text-left">
  <Dialog.Title
  as="h3"
- className="text-lg font-medium leading-6 text-gray-900"
+ className={Night ? "text-lg font-medium leading-6 text-white" : "text-lg font-medium leading-6 text-gray-900"}
  >
  Update Profile
  </Dialog.Title>
 
  <div className="mt-4">
  <div className="flex items-center space-x-2">
- <FiUser className="text-gray-600" />
- <label className="block text-sm font-medium text-gray-700">
+ <FiUser className={Night ? "text-white" : "text-gray-600" }/>
+ <label className={Night ? "block text-sm font-medium text-white" : "block text-sm font-medium text-gray-700"}>
  Bio
  </label>
  </div>
  <input
  type="text"
- className="mt-1 block w-full rounded-md border-b border-gray-300 p-2 outline-none"
+ className={Night ? "mt-1 block w-full bg-slate-900 rounded-md p-2 outline-none" : "mt-1 block w-full rounded-md border-b border-gray-300 p-2 outline-none"}
  value={bio}
  onChange={(e) => setBio(e.target.value)}
  />
  </div>
 
  <div className="mt-4">
  <div className="flex items-center space-x-2">
- <FiMapPin className="text-gray-600" />
- <label className="block text-sm font-medium text-gray-700">
+ <FiMapPin className={Night ? "text-white" : "text-gray-600" } />
+ <label className={Night ? "block text-sm font-medium text-white" : "block text-sm font-medium text-gray-700"}>
  Location
  </label>
  </div>
  <input
  type="text"
- className="mt-1 block w-full rounded-md border-b border-gray-300 p-2 outline-none"
+ className={Night ? "mt-1 block w-full bg-slate-900 rounded-md p-2 outline-none" : "mt-1 block w-full rounded-md border-b border-gray-300 p-2 outline-none"}
  value={location}
  onChange={(e) => setLocation(e.target.value)}
  />
  </div>
 
  <div className="mt-4">
  <div className="flex items-center space-x-2">
- <FiEdit className="text-gray-600" />
- <label className="block text-sm font-medium text-gray-700">
+ <FiEdit className={Night ? "text-white" : "text-gray-600" } />
+ <label className={Night ? "block text-sm font-medium text-white" : "block text-sm font-medium text-gray-700"}>
  Interests (Separated by comma)
  </label>
  </div>
  <input
  type="text"
- className="mt-1 block w-full rounded-md border-b border-gray-300 p-2 outline-none"
+ className={Night ? "mt-1 block w-full bg-slate-900 rounded-md p-2 outline-none" : "mt-1 block w-full rounded-md border-b border-gray-300 p-2 outline-none"}
  value={interests}
  onChange={(e) => {
  if (e.target.value.length <= 50) {
@@ -157,7 +158,7 @@ const ProfileUpdateModal = ({ user, isOpen, onClose }) => {
  key={index}
  type="button"
  disabled={isUpdating || interests.length >= 50}
- className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+ className={Night ? "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-900 text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" : "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"}
  onClick={() =>
  setInterests(
  interests === ""