removed contract code display

src/components/AddJob/AddJob.jsx

@@ -73,7 +73,6 @@ function AddJob({ popUpHandler, categories }) {
   };
 
   return (
-    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
     <Formik
         initialValues={IV}
         validationSchema={validationSchema}
@@ -82,6 +81,7 @@ function AddJob({ popUpHandler, categories }) {
         {(props) => {
           return (
             <Form>
+              <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
                 <div className="flex flex-col-reverse sm:flex-row">
                   <div className="fields w-full">
                     {/* inputs starts here */}
@@ -324,11 +324,13 @@ function AddJob({ popUpHandler, categories }) {
                     ))}
                   {/* End of error or success display */}
 
-                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                </div>
-                  <div className="flex items-center space-x-4 mr-9">
+              </div>
+              <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+                <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
                   <button
                     type="button"
-                      className="text-18 tracking-wide h-11 flex justify-center items-center border border-light-red text-base rounded-full text-light-red cursor-pointer"
+                    className="custom-btn border border-light-red text-light-red"
                   >
                     <span
                       className="px-2"
@@ -344,19 +346,17 @@ function AddJob({ popUpHandler, categories }) {
                   ) : (
                     <button
                       type="submit"
-                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      className="custom-btn btn-gradient text-white"
                     >
                       Add Job
                     </button>
                   )}
                 </div>
               </div>
-              </div>
             </Form>
           );
         }}
       </Formik>
-    </div>
   );
 }
 

src/components/Cards/OfferCard.jsx

@@ -46,15 +46,15 @@ export default function OfferCard({
           </h1>
 
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-2 gap-2">
+            <div className="grid grid-cols-1 gap-2">
-              <div className="flex flex-col justify-between items-center border-r-2">
+              {/* <div className="flex flex-col justify-between items-center border-r-2">
                 <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                   Task Code
                 </p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                   {datas.contract}
                 </p>
-              </div>
+              </div> */}
               <div className="flex flex-col justify-between items-center">
                 <p className="text-sm text-red-500 tracking-wide">Expires</p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -350,7 +350,7 @@ function ActiveJobsMedia(props) {
                 </div>
 
                 {/* job details */}
-                <div className="w-full md:w-[200px]">
+                <div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
                     {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                     {passDue ? (
                         <div className="my-1">

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -119,7 +119,7 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
             </div>
           </div>
           {/* trending products */}
-          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
+          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue dark:bg-dark-white/50 transition-all duration-300">
             <SliderCom selector={trendingSlider} settings={settings}>
               {familyOffers &&
                 familyOffers.length > 0 &&

src/components/Partials/Layout.jsx

@@ -54,8 +54,8 @@ export default function Layout({ children }) {
 
   return (
     <>
-      <div className="nft-main-wrapper-layout w-full mx-auto">
+      <div className="nft-main-wrapper-layout container mx-auto">
-        <div className={`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={`relative nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 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]`}>
             <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
@@ -73,7 +73,7 @@ export default function Layout({ children }) {
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container 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 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="flex-[80%] w-full">
                 {children && children}
               </div>

src/components/Partials/MediaLayout.jsx

@@ -53,7 +53,7 @@ export default function MediaLayout({backpath, title, children }) {
 
     return (
         <>
-            <div className="nft-main-wrapper-layout media">
+            <div className="nft-main-wrapper-layout media container mx-auto">
                 <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 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]`}>*/}
@@ -72,7 +72,7 @@ export default function MediaLayout({backpath, title, children }) {
                             <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                         </div>
                         {/* container */}
-                        <div className="nft-container 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 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-main-container_media flex-[100%] w-full">
                                 {children && children}
                             </div>

src/components/familyResources/FamGames.jsx

@@ -247,7 +247,7 @@ export default function FamGames() {
         <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
             <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             
-            <div className="mb-4 w-full h-screen max-h-[600px]">
+              <div className="mb-4 w-full h-screen max-h-[650px]">
                 <Suspense fallback={<Fallback />}>
                   <Iframe 
                     src={process.env.REACT_APP_FAM_GAME_LINK}
@@ -341,7 +341,7 @@ export default function FamGames() {
               </div>
             </div>
 
-            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+            <div className="w-full lg:w-1/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
                 {/* TEXTAREA SECTION */}
                 <div className="w-full mb-3 hidden">
                     <div className="w-full">

src/components/jobPopout/DeleteJobPopout.jsx

@@ -125,27 +125,6 @@ function DeleteJobPopout({ details, onClose, situation }) {
               <span className="job-label">Duration: </span>{details.timeline_days} day(s)
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={onClose}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteJob(details)}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Confirm Delete
-              </button>
-            )}
-          </div>
-
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
             (!requestStatus.status ? (
@@ -165,6 +144,28 @@ function DeleteJobPopout({ details, onClose, situation }) {
             ))}
           {/* End of error or success display */}
         </div>
+        <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+            <button
+              onClick={onClose}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteJob(details)}
+                type="button"
+                className="custom-btn text-white primary-gradient"
+              >
+                Confirm Delete
+              </button>
+            )}
+            </div>
+        </div>
       </div>
     </ModalCom>
   );

src/components/jobPopout/EditJobPopout.jsx

@@ -242,7 +242,6 @@ const EditJobPopOut = ({
             </svg>
           </button>
         </div>
-        <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -250,6 +249,7 @@ const EditJobPopOut = ({
           >
             {(props) => (
               <Form className="w-full">
+                <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
                   <div className="flex flex-col-reverse sm:flex-row">
                     <div className="fields w-full">
                       <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
@@ -498,8 +498,9 @@ const EditJobPopOut = ({
                       )}
                     </div>
 
-                  <div className="w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                  </div>
-                    <div className="flex items-center space-x-4 mr-2 mt-2">
+                </div>
+                <div className="modal-footer-wrapper justify-end">
                     {requestStatus.loading ? (
                       <LoadingSpinner size="6" color="sky-blue" />
                     ) : (
@@ -515,13 +516,10 @@ const EditJobPopOut = ({
                       </button>
                     )}
                 </div>
-                  </div>
-                </div>
               </Form>
             )}
           </Formik>
       </div>
-      </div>
     </ModalCom>
   );
 };

src/index.css

@@ -174,7 +174,7 @@
 
   /* modal footer */
   .modal-footer-wrapper{
-    @apply py-2 px-4 border-t-2 flex justify-between items-center
+    @apply p-4 border-t-2 flex justify-between items-center
   }
   /* END OF STYLES FOR MODAL BOX */