paragraph text underlined

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
 import ModalCom from "../Helpers/ModalCom";
 import Layout from "../Partials/Layout";
 import { useLocation, useNavigate } from "react-router-dom";
+import ActiveJobMessage from "./ActiveJobMessage";
 
 function ActiveJobs() {
   let { userDetails } = useSelector((state) => state.userDetails);
@@ -82,9 +83,9 @@ function ActiveJobs() {
 
             <div className="mt-5 bg-white p-4 rounded-md shadow-md">
               <div className="">
-                <p className="text-lg font-bold text-slate-600 dark:text-blask tracking-wide">Message(s)</p>
+              <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
                 <textarea
-                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
+                  className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
                   rows="10"
                   style={{ resize: "none" }}
                 />
@@ -120,6 +121,7 @@ function ActiveJobs() {
                       <span className="text-white">Send</span>
                   </button>
                 </div>
+
               </div>
               {/* end of Buttons Sections  */}
             </div>
@@ -138,11 +140,7 @@ function ActiveJobs() {
             <div className="mt-5 bg-white p-4 rounded-md shadow-md">
               <div className="">
                 <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
-                <textarea
+                <ActiveJobMessage />
-                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
-                  rows="10"
-                  style={{ resize: "none" }}
-                />
               </div>
             </div>
 

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -96,6 +96,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         </td>
 
                         <td className="text-right py-4 px-2">
+                          <div className="flex justify-center items-center">
                             <button
                               type="button"
                               onClick={() => {
@@ -105,6 +106,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                             >
                               View
                             </button>
+                          </div>
                         </td>
                       </tr>
                     ))}

src/components/MyActiveJobs/index.jsx

@@ -24,13 +24,13 @@ export default function MyActiveJobs(props) {
                 >
                   Active Job(s)
                 </span>
-
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
+              <div
-
+                onClick={() => filterHandler("today")}
-                            </div>
+                className="relative"
+              ></div>
             </div>
           </div>
           <MyActiveJobTable MyJobList={props.MyJobList} />

src/components/MyJobs/index.jsx

@@ -25,15 +25,19 @@ export default function MyJobs(props) {
                   My Jobs
                 </span>
 
-                                <Link to='/add-job' className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
+                <Link
+                  to="/add-job"
+                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
                   Add Job
                 </Link>
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
+              <div
-
+                onClick={() => filterHandler("today")}
-                        </div>
+                className="relative"
+              ></div>
             </div>
           </div>
           <MyJobTable MyJobList={props.MyJobList} />

src/components/MyTasks/index.jsx

@@ -23,13 +23,13 @@ export default function MyTasks() {
                 >
                   My Tasks
                 </span>
-
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
+              <div
-
+                onClick={() => filterHandler("today")}
-                        </div>
+                className="relative"
+              ></div>
             </div>
           </div>
           <MyJobTable />

src/components/Partials/MobileSideBar.jsx

@@ -12,7 +12,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
 
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
-  let noOfJobs = marketData?.length;
+  let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
   return (
     <div className="w-full h-full">
@@ -163,19 +163,20 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           </div>
         </div>
 
-        {!userDetails.post_jobs ? 
+        {!userDetails.post_jobs ? (
           <div className="setting-item">
             <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
-            <NavLink to="/start-job" className="nav-item flex items-center justify-start space-x-3.5">
+              <NavLink
+                to="/start-job"
+                className="nav-item flex items-center justify-start space-x-3.5"
+              >
                 <span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
                   Enable Job Post
                 </span>
               </NavLink>
             </div>
           </div>
-        :
+        ) : jobLists?.result_list?.length ? (
-        jobLists?.result_list?.length ?
-          (
           <div className="setting-item">
             <div className="heading mb-5">
               <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -224,9 +225,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
-          )
+        ) : (
-          :
-          (
           <div className="setting-item">
             <div className="heading mb-5">
               <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -249,8 +248,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
-            )
+        )}
-      }
       </div>
       {/* signout area */}
       {sidebar ? (

src/components/Partials/Sidebar.jsx

@@ -13,7 +13,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
 
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
-  let noOfJobs = marketData?.length;
+  let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
   useEffect(() => {
     const title = document.querySelectorAll(".menu-setting-items .heading");
@@ -112,7 +112,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   title={name}
                   route={path}
                   bubble={bubble}
-                  sidebar
+                  sidebar = {sidebar}
                 />
               ))}
               {/*<li className="item group">*/}
@@ -220,26 +220,68 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
-        {/*<div className="setting-item">*/}
-        {/*  <div class="heading bg-pink dark:bg-dark-white   rounded-2xl p-6 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">*/}
-        {/*    <NavLink to="/acc-family">*/}
-        {/*      <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">*/}
-        {/*        Family Account*/}
-        {/*      </span>*/}
-        {/*    </NavLink>*/}
-        {/*  </div>*/}
-        {/*</div>*/}
 
-        <div className="setting-item">
+        {/* <div className="setting-item">
-          <div className="heading mb-5 bg-dark-blue   rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border">
+         <div class="heading bg-pink dark:bg-dark-white   rounded-2xl p-6 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
            <NavLink to="/acc-family">
-               <h1 className="title text-xl font-bold text-purple">Family Corner</h1>
+             <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
+               Family Account
+             </span>
            </NavLink>
          </div>
+        </div> */}
+
+        {/* menu and settings item */}
+        <div className="menu-setting-items mb-11">
+          {/* menus item */}
+          <div className={`menu-item transition-all duration-300 ease-in-out ${
+              sidebar ? "mb-14" : ""
+            }`}>
+            {/* <div className="heading mb-5 bg-dark-blue   rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border">
+              <NavLink to="/acc-family">
+                <h1 className="title text-xl font-bold text-purple">
+                  Family Corner
+                </h1>
+              </NavLink>
+            </div> */}
+            <div className="items">
+                <div className="heading mb-5">
+                  <h1 className="title text-xl font-bold text-purple">Family</h1>
+                </div>
+                <ul className="flex flex-col space-y-6">
+                  <li className="item group">
+                    <NavLink
+                      to="/acc-family"
+                      className={`nav-item flex items-center ${
+                        ((navData) => (navData.isActive ? "active" : ""),
+                        sidebar ? "justify-start space-x-3.5" : "justify-center")
+                      }`}
+                    >
+                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                        <Icons name="people-two" />
+                      </span>
+                      <span
+                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                          sidebar ? "active flex-1" : "w-0"
+                        }`}
+                      >
+                        Family Corner
+                      </span>
+                    </NavLink>
+                  </li>
+                </ul>
+              </div>
+          </div>
         </div>
 
-        {!userDetails.post_jobs ? 
+        {!userDetails.post_jobs ? (
-        <div className="setting-item">
+          
+          <div className="menu-setting-items mb-11">
+          {/* menus item */}
+            <div className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
+                sidebar ? "mb-14" : "rounded-none p-0"
+              }`}>
+              {/* <div className="setting-item">
                 <div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border">
                   <NavLink to="/start-job">
                     <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
@@ -247,10 +289,37 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     </span>
                   </NavLink>
                 </div>
+              </div> */}
+              <div className="items">
+                <div className="heading mb-5">
+                  <h1 className="title text-xl font-bold text-purple">Job Post</h1>
                 </div>
-        :
+                <ul className="flex flex-col space-y-6">
-        jobLists?.result_list?.length ?
+                  <li className="item group">
-          (
+                    <NavLink
+                      to="/start-job"
+                      className={`nav-item flex items-center ${
+                        ((navData) => (navData.isActive ? "active" : ""),
+                        sidebar ? "justify-start space-x-3.5" : "justify-center")
+                      }`}
+                    >
+                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                        <Icons name="people-two" />
+                      </span>
+                      <span
+                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                          sidebar ? "active flex-1" : "w-0"
+                        }`}
+                      >
+                        Enable Job Post
+                      </span>
+                    </NavLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        ) : jobLists?.result_list?.length ? (
           <div className="setting-item">
             <div className="heading mb-5">
               <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -360,9 +429,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
-          )
+        ) : (
-          :
-          (
           <div className="setting-item">
             <div className="heading mb-5">
               <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -392,9 +459,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
-          )
+        )}
-        }
-
       </div>
       {/* signout area */}
       {sidebar ? (