added media layout

src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx

@@ -144,7 +144,7 @@ export default function AssignMediaTask({
                                             </div>
                                             <div className="grid grid-cols-3 gap-3">
                                                 {/* Price */}
-                                                <div className="field w-full">
+                                                <div className="field w-full flex flex-col justify-between">
                                                     <label htmlFor="price" className="job-label flex gap-1">
                                                         Reward
                                                         <span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
@@ -164,7 +164,7 @@ export default function AssignMediaTask({
                                                 </div>
 
                                                 {/* Currency */}
-                                                <div className="field w-full">
+                                                <div className="field w-full flex flex-col justify-between">
                                                     <label
                                                     htmlFor="currency"
                                                     className="job-label flex gap-1 invisible"
@@ -224,7 +224,7 @@ export default function AssignMediaTask({
                                                 </div>
                                             
                                                 {/* Duration */}
-                                                <div className="field w-full">
+                                                <div className="field w-full flex flex-col justify-between">
                                                     <label
                                                     htmlFor="timeline_days"
                                                     className="job-label flex gap-1"

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -277,7 +277,7 @@ function ActiveJobsMedia(props) {
         state={props.details.accountDetails}
     >
         {/* job title */}
-            <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
+            {/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
                 <div className="w-full">
                     <div className="w-full flex justify-start space-x-3 items-start">
                         <button
@@ -310,7 +310,7 @@ function ActiveJobsMedia(props) {
                         </h1>
                     </div>
                 </div>
-            </div>
+            </div> */}
         {/* end of job title */}
 
         <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
@@ -320,7 +320,7 @@ function ActiveJobsMedia(props) {
                 <VideoElement videoId={props?.details?.media_uid} />
             </div>
 
-            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2">
+            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
                 <div className="w-full flex flex-col justify-between">
                     <div className="w-full">
                         <p className="w-full text-base text-right text-sky-blue">
@@ -330,15 +330,25 @@ function ActiveJobsMedia(props) {
                             <p className="font-semibold text-black dark:text-white">
                                 Description:{" "}
                             </p>
-                            <p className="p-2 border border-sky-blue">
+                            <p className="p-2 ml-8 border border-sky-blue">
                                 {props?.details && props.details.description}
                             </p>
                         </div>
+                        <div className="mt-6 w-full lg:flex gap-8">
+                            <div className="w-full text-base dark:text-white tracking-wide">
+                                <p className="font-semibold text-sky-blue dark:text-white">
+                                    Delivery Detail:{" "}
+                                </p>
+                                <p className="p-2 ml-8">
+                                    {props?.details && props.details.job_description}
+                                </p>
                             </div>
-                    <div className="my-2">
+                            <div className="my-2 lg:my-0">
                                 <IndexJobActions details={props.details} />
                             </div>
                         </div>
+                    </div>
+                </div>
 
                 {/* job details */}
                 <div className="w-full md:w-[200px]">
@@ -389,14 +399,14 @@ function ActiveJobsMedia(props) {
                         day(s)
                         </span>
                     </div>
-                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                    {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
                         <span className="font-semibold text-black dark:text-white">
                         No:{" "}
                         </span>
                         <span className="">
                         {props.details?.contract && props.details.contract}
                         </span>
-                    </div>
+                    </div> */}
                 </div>
                 {/* end of job details */}
             </div>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -65,7 +65,7 @@ function CurrentTaskAction({jobDetails}) {
           <div className="w-full text-sm text-left text-gray-500">
             {jobDetails.job_type == 'MEDIA' ?
             <div className="flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
+                <button onClick={popUpHandler} type="button" className="p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium text-orange-600 rounded-2xl hover:opacity-80 transition-all duration-300">
                     I have completed this task
                 </button>
             </div>

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -259,7 +259,7 @@ function AddFundDollars(props) {
       <div className="w-full">
         {/* switch button */}
         <div className="flex">
-          <form className="add-fund-info flex items-center gap-3">
+          <form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
             <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
               {countryWallet == "US" && "Payment Method"}
             </h1>
@@ -313,7 +313,7 @@ function AddFundDollars(props) {
 
         {/* previous selectedOption */}
         {selectedOption === "previous" && (
-          <div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
+          <div className="px-8 py-4 previous-details w-full h-[300px] flex flex-col">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
@@ -367,7 +367,7 @@ function AddFundDollars(props) {
         )}
 
         {selectedOption === "new" && (
-          <div className="new-details w-full max-h-[22rem]">
+          <div className="new-details w-full">
             {payListCards.loading ? (
               <div className="pt-10 flex w-full h-full justify-center items-center">
                 <LoadingSpinner size="10" color="sky-blue" />
@@ -381,8 +381,8 @@ function AddFundDollars(props) {
                 >
                   {(props) => {
                     return (
-                      <Form className="md:pl-8">
+                      <Form className="w-full">
-                        <div className="flex flex-col-reverse sm:flex-row">
+                        <div className="flex flex-col-reverse sm:flex-row md:px-8 md:pt-4 px-4 pt-2">
                           <div className="flex-1 sm:mr-10">
                             <div className="fields w-full">
                               {/* Inputs */}
@@ -588,16 +588,16 @@ function AddFundDollars(props) {
                           </div>
                         </div>
 
-                        <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
+                        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
                           <button
-                            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
+                            className="custom-btn bg-[#f5a430] text-black text-base"
                             onClick={handleClose}
                           >
                             Cancel
                           </button>
                           <button
                             type="submit"
-                            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            className="custom-btn btn-gradient text-base text-white"
                           >
                             {loadingState ? (
                               <LoadingSpinner size="6" color="sky-blue" />
@@ -620,9 +620,9 @@ function AddFundDollars(props) {
       </div>
 
       {selectedOption == "previous" && (
-        <div className="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
+        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
           <button
-            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
+            className="custom-btn bg-[#f5a430] text-black text-base"
             onClick={props.onClose}
           >
             Cancel
@@ -631,7 +631,7 @@ function AddFundDollars(props) {
             onClick={handleSubmit}
             name="previous"
             type="button"
-            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="custom-btn btn-gradient text-base text-white"
           >
             {loadingState ? (
               <LoadingSpinner size="6" color="sky-blue" />

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -126,7 +126,7 @@ function AddFundPop({
   };
 
   return (
-    <div className="h-[33rem] w-full">
+    <div className="w-full">
       <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
         <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
@@ -149,9 +149,12 @@ function AddFundPop({
                 </p>
               </div>
             </form>
+          </div>
+        </div>
+      </div>
 
       {countryWallet === "US" && (
-              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
+        <div className="w-full bg-white dark:bg-dark-white rounded-2xl">
           <AddFundDollars
             setInputError={setInputError}
             walletItem={walletItem}
@@ -168,9 +171,9 @@ function AddFundPop({
       {countryWallet == "NG" && <div className="h-[19rem]"></div>}
 
       {countryWallet == "NG" && (
-              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+        <div className="modal-footer-wrapper flex justify-end items-center py-4 gap-4">
           <button
-                  className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
+            className="custom-btn bg-[#f5a430] text-black text-base"
             onClick={onClose}
           >
             Cancel
@@ -178,7 +181,7 @@ function AddFundPop({
           <button
             onClick={handleSubmit}
             type="button"
-                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
+            className="custom-btn btn-gradient text-base text-white"
           >
             {__awaitComponent.loader ? (
               <LoadingSpinner size="6" color="sky-blue" />
@@ -192,9 +195,6 @@ function AddFundPop({
         </div>
       )}
     </div>
-        </div>
-      </div>
-    </div>
   );
 }
 

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -8,7 +8,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
     data?.result === "Charge success" || data?.status === "successful";
 
   return (
-    <div className="logout-modal-body w-full flex flex-col items-center">
+    <div className="logout-modal-body w-full">
       <div className="content-wrapper w-full h-[32rem]">
         <div className="w-full mb-10">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
@@ -97,18 +97,18 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                 </div>
               </div>
             </div>
-            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+          </div>
+        </div>
+      </div>
+      <div className="modal-footer-wrapper w-full flex justify-end items-center gap-4">
         <button
-                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
+          className="custom-btn btn-gradient text-white text-base"
           onClick={onClose}
         >
           Ok
         </button>
       </div>
     </div>
-        </div>
-      </div>
-    </div>
   );
 }
 

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -356,6 +356,7 @@ function ConfirmAddFund({
   };
 
   return (
+    <>    
       <div className="content-wrapper w-full h-[32rem]">
         <div className="w-full mb-10">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
@@ -419,17 +420,20 @@ function ConfirmAddFund({
                 __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
               }
             ></div>
-          <hr />
+          </div>
-          <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+        </div>
+      </div>
+
+      <div className="modal-footer-wrapper flex justify-end items-center gap-4">
         <button
-              className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
+          className="custom-btn bg-[#f5a430] text-black text-base"
           onClick={getBack}
         >
           Back
         </button>
         {__confirmCountry === "US" && (
           <button
-                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
+            className="custom-btn btn-gradient text-white text-base"
             onClick={
               __confirmData?.cardType === "prev"
                 ? handlePrevCard
@@ -450,9 +454,7 @@ function ConfirmAddFund({
           />
         )}
       </div>
-        </div>
+    </>
-      </div>
-    </div>
   );
 }
 

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -107,8 +107,8 @@ function ConfirmNairaWithdraw({
     <ModalCom action={action} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
-          <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+          <div className="modal-header-con">
-            <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            <h2 className="modal-title">
               {completeNairaWithdraw.load ? (
                 "Confirming..."
               ) : (
@@ -126,7 +126,7 @@ function ConfirmNairaWithdraw({
             </h2>
             <button
               type="button"
-              className="text-[#374557] dark:text-red-500"
+              className="modal-close-btn"
               onClick={action}
             >
               <svg
@@ -151,7 +151,7 @@ function ConfirmNairaWithdraw({
             </button>
           </div>
           <hr />
-          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+          <div className="add-fund w-full bg-white dark:bg-dark-white">
             {completeNairaWithdraw.load ? (
               <div className="h-[35rem] flex items-center justify-center">
                 <LoadingSpinner size="12" color="sky-blue" />
@@ -376,11 +376,10 @@ function ConfirmNairaWithdraw({
                 </div>
               </div>
             )}
+          </div>
 
           {!completeNairaWithdraw.load && (
             <>
-                {" "}
-                <hr />
               <p
                 className={`text-base ${
                   requestStatus.status ? "text-green-500" : "text-red-500"
@@ -388,12 +387,12 @@ function ConfirmNairaWithdraw({
               >
                 {requestStatus.message && requestStatus.message}
               </p>
-                <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
+              <div className="modal-footer-wrapper flex justify-end items-center gap-2">
                 {!completeNairaWithdraw.show && (
                   <button
                     type="button"
                     onClick={action}
-                      className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
+                    className="custom-btn bg-[#f5a430] text-black text-base"
                   >
                     Cancel
                   </button>
@@ -407,7 +406,7 @@ function ConfirmNairaWithdraw({
                       ? action
                       : handleSubmit
                   }
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
+                  className="custom-btn btn-gradient text-base text-white"
                 >
                   {requestStatus.loading ? (
                     <LoadingSpinner size="6" color="sky-blue" />
@@ -422,7 +421,7 @@ function ConfirmNairaWithdraw({
               </div>
             </>
           )}
-          </div>
+
         </div>
       </div>
     </ModalCom>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -36,15 +36,15 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       className="assign-task-popup"
     >
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+        <div className="modal-header-con">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+          <h1 className="modal-title">
             {confirmCredit?.show?.acceptConfirm?.loader
               ? "Confirming Credit..."
               : getTitle()}
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={onClose}
           >
             <svg
@@ -68,7 +68,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
             </svg>
           </button>
         </div>
-        <div className="logout-modal-body w-full flex flex-col items-center">
+        <div className="w-full">
           {confirmCredit?.show?.acceptConfirm?.loader ? (
             <div className="h-[32rem] flex items-center justify-center">
               <LoadingSpinner size="12" color="sky-blue" />

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -292,15 +292,15 @@ function NairaWithdraw({
     <ModalCom action={action} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
-          <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+          <div className="modal-header-con">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            <h1 className="modal-title">
               {`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
                 wallet.amount * 0.01
               ).toFixed(2)}`}
             </h1>
             <button
               type="button"
-              className="text-[#374557] dark:text-red-500"
+              className="modal-close-btn"
               onClick={action}
             >
               <svg
@@ -324,11 +324,11 @@ function NairaWithdraw({
               </svg>
             </button>
           </div>
-          <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
             <Formik initialValues={initialValues} onSubmit={handleSubmit}>
               {(props) => {
                 return (
                   <Form className="transfer-fund-info">
+                    <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
                       {/* Amount Form */}
                       <div className="flex flex-col">
                         <div className="field w-full">
@@ -792,11 +792,13 @@ function NairaWithdraw({
                           ))}
                       </div>
 
-                    <div className="transfer-fund-btn flex justify-end items-center gap-2 py-4">
+                    </div>
+                    
+                    <div className="modal-footer-wrapper flex justify-end items-center gap-2 py-4">
                       <button
                         type="button"
                         onClick={action}
-                        className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
+                        className="custom-btn bg-[#f5a430] text-black text-base"
                       >
                         Cancel
                       </button>
@@ -808,7 +810,7 @@ function NairaWithdraw({
                             ? true
                             : false
                         }
-                        className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px] flex justify-center items-center"
+                        className="custom-btn btn-gradient text-base text-white"
                       >
                         {requestStatus ? (
                           <LoadingSpinner size="6" color="sky-blue" />
@@ -818,12 +820,11 @@ function NairaWithdraw({
                       </button>
                     </div>
                   </Form>
-                );
+                )
               }}
             </Formik>
         </div>
       </div>
-      </div>
     </ModalCom>
   );
 }

src/components/MyWallet/WalletAction.jsx

@@ -23,14 +23,14 @@ function WalletAction({ walletItem, payment, openPopUp }) {
           }}
           className={`${
             walletItem.code != "NAIRA" && "invisible"
-          } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+          } custom-btn btn-gradient text-white`}
         >
           Spend
         </button>
       </div>
       <div className="w-1/2 flex justify-center items-center">
         <button
-          className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          className="custom-btn btn-gradient text-white"
           onClick={() => {
             openPopUp({
               payment: payment,

src/components/Partials/MediaHeader.jsx

@@ -165,7 +165,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
           </div>
 
           {/* Back BTN AND TITLE */}
-          {/* <div className="pl-4 w-full flex justify-start gap-3 items-center">
+          <div className="pl-4 w-full flex justify-start gap-3 items-center">
             <button
             type="button"
             className="min-w-[35px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
@@ -202,7 +202,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
             <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
             {title && title}
             </h1>
-          </div> */}
+          </div>
           
 
           {/* user info */}

src/index.css

@@ -182,6 +182,9 @@
   .custom-btn {
     @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
   }
+  .logout-btn {
+    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-base rounded-full cursor-pointer
+  }
 }
 
 /* =====================  EXTRA ===================== */