layout margin centralized

src/components/AddJob/AddJob.jsx

@@ -72,9 +72,21 @@ function AddJob({ popUpHandler, categories }) {
     }
   };
 
+  // For form initial values
+  const initialValues = {
+    // initial values for formik
+    country: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
   return (
     <Formik
-        initialValues={IV}
+        initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
@@ -105,12 +117,13 @@ function AddJob({ popUpHandler, categories }) {
                           className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
                           onChange={props.handleChange}
                           onBlur={props.handleBlur}
+                          disabled={walletDetails.data.length == 1}
                         >
                           {walletDetails?.loading ? (
                             <option className="text-slate-500 text-lg" value="">
                               Loading...
                             </option>
-                          ) : walletDetails.data.length ? (
+                          ) : walletDetails.data.length > 1 ? (
                             <>
                               <option className="text-slate-500 text-lg" value="">
                                 Select a currency
@@ -125,7 +138,19 @@ function AddJob({ popUpHandler, categories }) {
                                 </option>
                               ))}
                             </>
-                          ) : (
+                          ) : walletDetails.data.length == 1 ?
+                          <>
+                            {walletDetails.data?.map((item, index) => (
+                              <option
+                                key={index}
+                                className="text-slate-500 text-lg"
+                                value={item?.country}
+                              >
+                                {item?.description}
+                              </option>
+                            ))}
+                          </>
+                          :(
                             <option className="text-slate-500 text-lg" value="">
                               No Options Found! Try Again
                             </option>

src/components/Home/index.jsx

@@ -67,7 +67,7 @@ export default function Home(props) {
 
   return (
     <Layout>
-      <div className="home-page-wrapper">
+      <div className="w-full">
         {userDetails && userDetails?.account_type == "FAMILY" ? (
           <FamilyDash
             account={userDetails}

src/components/MyWallet/WalletBox.jsx

@@ -15,14 +15,14 @@ export default function WalletBox({ wallet, payment, countries }) {
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">
-        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
+        <div className="balance-inquery w-auto grid md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
           {loading ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size="16" color="sky-blue" />
             </div>
           ) : (
             data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+              <div key={item.wallet_uid} className="w-full md:max-w-[450px] h-full mb-10 lg:mb-0">
                 <WalletItemCard walletItem={item} payment={payment} countries={countries} />
               </div>
             ))

src/components/Partials/Layout.jsx

@@ -31,54 +31,34 @@ export default function Layout({ children }) {
     navigate("/login", { replace: true });
   };
 
-  //---------------------------------------
-  /* LET U DEAL WITH JOB LIST - we need to centralize this list  */
-  // const {jobListTable} = useSelector((state) => state.tableReload)
-  // const [myJobList, setMyJobList] = useState({loading: true, data:[]});
-  // const api = new usersService();
-
-  // const getMyJobList = async () => {
-  //   setMyJobList({loading: true, data:[]})
-  //   try {
-  //     const res = await api.getMyJobList();
-  //     setMyJobList({loading: false, data:res.data})
-  //     // setMyJobList(res.data);
-  //   } catch (error) {
-  //     setMyJobList({loading: false, data:[]})
-  //     console.log("Error getting mode");
-  //   }
-  // };
-  // useEffect(() => {
-  //   getMyJobList();
-  // }, [jobListTable]);
-
   return (
     <>
-      <div className="nft-main-wrapper-layout container mx-auto">
+      <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
-        <div className={`relative nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
+        <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
           {/* sidebar */}
-          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
+          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-screen overflow-y-scroll overflow-style-none sticky left-0 top-0 pt-[30px]`}>
             <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
           </div>
           {MobileSideBar && (
             <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>
           )}
-          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
+          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] 2xl:pl-20 pl-10 pr-6 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
             <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />
           </div>
           {/* end sidebar */}
-          <div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
+          {/* FORMER CLASS NAME `w-full nft-header-container-wrapper ${drawer ? "2xl:ml-[335px] xl:ml-[280px]" : "xl:ml-[70px]"} h-full` */}
+          <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
             {/* header */}
             <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
-              <div className="flex-[80%] w-full">
+              <div className="flex-[80%] 2xl:flex-[85%] w-full">
                 {children && children}
               </div>
 
-              <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
+              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
                 <RightSideBar myJobList={userJobList} />
               </div>
             </div>

src/components/Partials/Sidebar.jsx

@@ -275,7 +275,7 @@ export default function Sidebar({
         <button
           onClick={logoutModalHandler}
           type="button"
-          className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
+          className="signout-btn flex items-center space-x-1  p-2.5 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
         >
           <span className="">
             <Icons name="new-logout" />