src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -453,7 +453,7 @@ const AssignTaskPopout = ({
               </div>
 
               {/* BTN */}
-              <div className="py-2 px-4 border-t-2 flex justify-between items-center">
+              <div className="modal-footer-wrapper">
                 {/* error or success display */}
                 <div className="w-auto h-auto flex items-center">
                   {requestStatus.message != "" &&
@@ -480,7 +480,7 @@ const AssignTaskPopout = ({
                     disabled={requestStatus.loading}
                     onClick={action}
                     type="button"
-                    className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
+                    className="custom-btn border-gradient"
                   >
                     <span className="text-gradient">Close</span>
                   </button>
@@ -492,7 +492,7 @@ const AssignTaskPopout = ({
                         type="button"
                         disabled={requestStatus.loading}
                         onClick={assignFamilyTask}
-                        className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        className="custom-btn btn-gradient text-white"
                       >
                         Assign
                       </button>

src/components/MyJobs/index.jsx

@@ -4,6 +4,7 @@ import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
 import AddJobPage from "../../views/AddJobPage";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function MyJobs(props) {
   let { state } = useLocation();
@@ -32,8 +33,8 @@ export default function MyJobs(props) {
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
-          <div className="sm:flex items-center mb-6">
-            <div className="mb-5 sm:mb-0">
+          <div className="sm:flex items-center mb-2">
+            <div className="w-full">
               <h1 className="text-26 font-bold flex items-center space-x-1  text-dark-gray dark:text-white gap-2">
                 <span>My Jobs</span>
 
@@ -46,6 +47,17 @@ export default function MyJobs(props) {
               </h1>
             </div>
           </div>
+          <div className="mb-5">
+              <CustomBreadcrumb 
+              // title = 'My Jobs'
+              breadcrumb={
+                  [
+                  { link: "/", title: "Home" },
+                  { link: "/myjobs", title: "My Jobs", active: true},
+                  ]
+              }
+              />
+          </div>
           <MyJobTable MyJobList={props.MyJobList} />
         </div>
       </div>

src/index.css

@@ -160,7 +160,8 @@
     @apply flex items-center gap-2
   }
 
-  /* style for all modal header */
+  /* STYLES FOR MODAL */
+  /* Modal Header */
   .modal-header-con{
     @apply w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29]  border-light-purple
   }
@@ -170,7 +171,17 @@
   .modal-close-btn{
     @apply text-[#000] dark:text-red-500
   }
-  /* end of style for all modal header */
+
+  /* modal footer */
+  .modal-footer-wrapper{
+    @apply py-2 px-4 border-t-2 flex justify-between items-center
+  }
+  /* END OF STYLES FOR MODAL BOX */
+
+  /* STYLES FOR BUTTON */
+  .custom-btn {
+    @apply min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
+  }
 }
 
 /* =====================  EXTRA ===================== */