added space between buttons

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -326,17 +326,17 @@ function ActiveJobsMedia(props) {
                         <p className="w-full text-base text-right text-sky-blue">
                         {props?.details && props.details.job_to}
                         </p>
-                        <div className="text-base text-slate-700 dark:text-white tracking-wide">
+                        <div className="text-base tracking-wide">
-                            <p className="font-semibold text-black dark:text-white">
+                            <p className="font-semibold text-black dark:text-white tracking-wider">
                                 Description:{" "}
                             </p>
-                            <p className="p-2 ml-8 border border-sky-blue">
+                            <p className="p-2 ml-8 border-b 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">
+                            <div className="w-full text-base tracking-wide">
-                                <p className="font-semibold text-sky-blue dark:text-white">
+                                <p className="font-semibold text-black dark:text-white tracking-wider">
                                     Delivery Detail:{" "}
                                 </p>
                                 <p className="p-2 ml-8">
@@ -352,7 +352,7 @@ function ActiveJobsMedia(props) {
 
                 {/* job details */}
                 <div className="w-full md:w-[200px]">
-                    <p className="text-base text-sky-blue">Delivery Detail</p>
+                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                     {passDue ? (
                         <div className="my-1">
                             <p className="text-base text-slate-700">
@@ -385,7 +385,7 @@ function ActiveJobsMedia(props) {
 
                     <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">
-                        Price:{" "}
+                        Reward:{" "}
                         </span>
                         <span className="">{thePrice}</span>
                     </div>
@@ -442,7 +442,7 @@ function ActiveJobsMedia(props) {
                         </div>
                         {tab == "message" ? (
                         <textarea
-                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-[#4687ba] outline-none"
+                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
                             // rows="10"
                             style={{ resize: "none" }}
                             name="message"
@@ -451,7 +451,7 @@ function ActiveJobsMedia(props) {
                             autoFocus
                         />
                         ) : (
-                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border border-[#4687ba]">
+                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
                             <div className="files flex">
                             <label
                                 htmlFor="file"
@@ -509,8 +509,8 @@ function ActiveJobsMedia(props) {
                     {/* End of error or success display */}
 
                     {/* Buttons Sections */}
-                    <div className="py-1 sm:flex sm:justify-end sm:items-center">
+                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
-                        <div className="w-full flex justify-center items-center gap-4">
+                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
                             <button
                                 type="button"
                                 onClick={handleClearAll}

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="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">
+                <button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                     I have completed this task
                 </button>
             </div>

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -588,7 +588,8 @@ function AddFundDollars(props) {
                           </div>
                         </div>
 
-                        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
+                        <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
                               className="custom-btn bg-[#f5a430] text-black text-base"
                               onClick={handleClose}
@@ -609,6 +610,7 @@ function AddFundDollars(props) {
                               )}
                             </button>
                           </div>
+                        </div>
                       </Form>
                     );
                   }}
@@ -620,7 +622,8 @@ function AddFundDollars(props) {
       </div>
 
       {selectedOption == "previous" && (
-        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
+        <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
               className="custom-btn bg-[#f5a430] text-black text-base"
               onClick={props.onClose}
@@ -640,6 +643,7 @@ function AddFundDollars(props) {
               )}
             </button>
           </div>
+        </div>
       )}
     </>
   );

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -171,7 +171,8 @@ function AddFundPop({
       {countryWallet == "NG" && <div className="h-[19rem]"></div>}
 
       {countryWallet == "NG" && (
-        <div className="modal-footer-wrapper flex justify-end items-center py-4 gap-4">
+        <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
               className="custom-btn bg-[#f5a430] text-black text-base"
               onClick={onClose}
@@ -193,6 +194,7 @@ function AddFundPop({
               )}
             </button>
           </div>
+        </div>
       )}
     </div>
   );

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -424,7 +424,8 @@ function ConfirmAddFund({
         </div>
       </div>
 
-      <div className="modal-footer-wrapper flex justify-end items-center gap-4">
+      <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
             className="custom-btn bg-[#f5a430] text-black text-base"
             onClick={getBack}
@@ -454,6 +455,7 @@ function ConfirmAddFund({
             />
           )}
         </div>
+      </div>
     </>
   );
 }

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -387,7 +387,8 @@ function ConfirmNairaWithdraw({
               >
                 {requestStatus.message && requestStatus.message}
               </p>
-              <div className="modal-footer-wrapper flex justify-end items-center gap-2">
+              <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">
                   {!completeNairaWithdraw.show && (
                     <button
                       type="button"
@@ -419,6 +420,7 @@ function ConfirmNairaWithdraw({
                     )}
                   </button>
                 </div>
+              </div>
             </>
           )}
 

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -794,7 +794,8 @@ function NairaWithdraw({
 
                     </div>
                     
-                    <div className="modal-footer-wrapper flex justify-end items-center gap-2 py-4">
+                    <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"
                           onClick={action}
@@ -819,6 +820,7 @@ function NairaWithdraw({
                           )}
                         </button>
                       </div>
+                    </div>
                   </Form>
                 )
               }}

src/components/Partials/MediaHeader.jsx

@@ -110,7 +110,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
     <>
       <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
         <div className="flex justify-between items-center w-full">
-          <button
+          {/* <button
             className="xl:hidden block mr-10"
             type="button"
             onClick={sidebarHandler}
@@ -157,12 +157,12 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                 </linearGradient>
               </defs>
             </svg>
-          </button>
+          </button> */}
 
-          <div className="search-bar xl:hidden justify-center items-center w-[376px]">
           {/* Home */}
+          {/* <div className="search-bar xl:hidden justify-center items-center w-[376px]">
             <HomeButton />
-          </div>
+          </div> */}
 
           {/* Back BTN AND TITLE */}
           <div className="pl-4 w-full flex justify-start gap-3 items-center">
@@ -199,7 +199,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                 )}
             </div>
 
-            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
+            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide line-clamp-1">
             {title && title}
             </h1>
           </div>