From 359344772e40fa38cc9e4389f690b2f9e6bf246e Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 2 Apr 2024 14:56:07 +0100
Subject: [PATCH] added space between buttons

---
 .../MyActiveJobs/ActiveJobsMedia.jsx          |  2 +-
 .../MyWallet/Popup/AddFundDollars.jsx         | 82 ++++++++++---------
 src/components/MyWallet/Popup/AddFundPop.jsx  | 44 +++++-----
 .../MyWallet/Popup/ConfirmAddFund.jsx         | 54 ++++++------
 .../MyWallet/Popup/ConfirmNairaWithdraw.jsx   | 62 +++++++-------
 .../MyWallet/Popup/NairaWithdraw.jsx          | 48 +++++------
 6 files changed, 152 insertions(+), 140 deletions(-)

diff --git a/src/components/MyActiveJobs/ActiveJobsMedia.jsx b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
index 9490eb7..3e545eb 100644
--- a/src/components/MyActiveJobs/ActiveJobsMedia.jsx
+++ b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
@@ -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>
diff --git a/src/components/MyWallet/Popup/AddFundDollars.jsx b/src/components/MyWallet/Popup/AddFundDollars.jsx
index 3fbc2cd..b981dcd 100644
--- a/src/components/MyWallet/Popup/AddFundDollars.jsx
+++ b/src/components/MyWallet/Popup/AddFundDollars.jsx
@@ -588,26 +588,28 @@ function AddFundDollars(props) {
                           </div>
                         </div>
 
-                        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
-                          <button
-                            className="custom-btn bg-[#f5a430] text-black text-base"
-                            onClick={handleClose}
-                          >
-                            Cancel
-                          </button>
-                          <button
-                            type="submit"
-                            className="custom-btn btn-gradient text-base text-white"
-                          >
-                            {loadingState ? (
-                              <LoadingSpinner size="6" color="sky-blue" />
-                            ) : (
-                              <>
-                                <span className="text-white">Continue</span>{" "}
-                                <Icons name="chevron-right" />
-                              </>
-                            )}
-                          </button>
+                        <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}
+                            >
+                              Cancel
+                            </button>
+                            <button
+                              type="submit"
+                              className="custom-btn btn-gradient text-base text-white"
+                            >
+                              {loadingState ? (
+                                <LoadingSpinner size="6" color="sky-blue" />
+                              ) : (
+                                <>
+                                  <span className="text-white">Continue</span>{" "}
+                                  <Icons name="chevron-right" />
+                                </>
+                              )}
+                            </button>
+                          </div>
                         </div>
                       </Form>
                     );
@@ -620,25 +622,27 @@ function AddFundDollars(props) {
       </div>
 
       {selectedOption == "previous" && (
-        <div className="modal-footer-wrapper flex justify-end items-center gap-2">
-          <button
-            className="custom-btn bg-[#f5a430] text-black text-base"
-            onClick={props.onClose}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSubmit}
-            name="previous"
-            type="button"
-            className="custom-btn btn-gradient text-base text-white"
-          >
-            {loadingState ? (
-              <LoadingSpinner size="6" color="sky-blue" />
-            ) : (
-              <span className="text-white">Continue</span>
-            )}
-          </button>
+        <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}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              name="previous"
+              type="button"
+              className="custom-btn btn-gradient text-base text-white"
+            >
+              {loadingState ? (
+                <LoadingSpinner size="6" color="sky-blue" />
+              ) : (
+                <span className="text-white">Continue</span>
+              )}
+            </button>
+          </div>
         </div>
       )}
     </>
diff --git a/src/components/MyWallet/Popup/AddFundPop.jsx b/src/components/MyWallet/Popup/AddFundPop.jsx
index 77b3001..5b41611 100644
--- a/src/components/MyWallet/Popup/AddFundPop.jsx
+++ b/src/components/MyWallet/Popup/AddFundPop.jsx
@@ -171,27 +171,29 @@ 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">
-          <button
-            className="custom-btn bg-[#f5a430] text-black text-base"
-            onClick={onClose}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSubmit}
-            type="button"
-            className="custom-btn btn-gradient text-base text-white"
-          >
-            {__awaitComponent.loader ? (
-              <LoadingSpinner size="6" color="sky-blue" />
-            ) : (
-              <>
-                <span className="text-white">Continue</span>{" "}
-                <Icons name="chevron-right" />
-              </>
-            )}
-          </button>
+        <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}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              type="button"
+              className="custom-btn btn-gradient text-base text-white"
+            >
+              {__awaitComponent.loader ? (
+                <LoadingSpinner size="6" color="sky-blue" />
+              ) : (
+                <>
+                  <span className="text-white">Continue</span>{" "}
+                  <Icons name="chevron-right" />
+                </>
+              )}
+            </button>
+          </div>
         </div>
       )}
     </div>
diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
index 79f0e77..37f414a 100644
--- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
@@ -424,35 +424,37 @@ function ConfirmAddFund({
         </div>
       </div>
 
-      <div className="modal-footer-wrapper flex justify-end items-center gap-4">
-        <button
-          className="custom-btn bg-[#f5a430] text-black text-base"
-          onClick={getBack}
-        >
-          Back
-        </button>
-        {__confirmCountry === "US" && (
+      <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 btn-gradient text-white text-base"
-            onClick={
-              __confirmData?.cardType === "prev"
-                ? handlePrevCard
-                : handleNewCard
-            }
+            className="custom-btn bg-[#f5a430] text-black text-base"
+            onClick={getBack}
           >
-            {confirmCredit?.show?.acceptConfirm?.loader ? (
-              <LoadingSpinner size="6" color="sky-blue" />
-            ) : (
-              "Proceed"
-            )}
+            Back
           </button>
-        )}
-        {__confirmCountry === "NG" && (
-          <FlutterWaveButton
-            {...fwConfig}
-            className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-          />
-        )}
+          {__confirmCountry === "US" && (
+            <button
+              className="custom-btn btn-gradient text-white text-base"
+              onClick={
+                __confirmData?.cardType === "prev"
+                  ? handlePrevCard
+                  : handleNewCard
+              }
+            >
+              {confirmCredit?.show?.acceptConfirm?.loader ? (
+                <LoadingSpinner size="6" color="sky-blue" />
+              ) : (
+                "Proceed"
+              )}
+            </button>
+          )}
+          {__confirmCountry === "NG" && (
+            <FlutterWaveButton
+              {...fwConfig}
+              className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            />
+          )}
+        </div>
       </div>
     </>
   );
diff --git a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
index a6fec7f..08f9f5b 100644
--- a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
+++ b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
@@ -387,37 +387,39 @@ function ConfirmNairaWithdraw({
               >
                 {requestStatus.message && requestStatus.message}
               </p>
-              <div className="modal-footer-wrapper flex justify-end items-center gap-2">
-                {!completeNairaWithdraw.show && (
-                  <button
-                    type="button"
-                    onClick={action}
-                    className="custom-btn bg-[#f5a430] text-black text-base"
-                  >
-                    Cancel
-                  </button>
-                )}
-
-                <button
-                  onClick={
-                    completeNairaWithdraw.show
-                      ? action
-                      : completeNairaWithdraw?.state?.internal_return < 0
-                      ? action
-                      : handleSubmit
-                  }
-                  className="custom-btn btn-gradient text-base text-white"
-                >
-                  {requestStatus.loading ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : completeNairaWithdraw.show ? (
-                    "Okay"
-                  ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
-                    "Cancel"
-                  ) : (
-                    "Transfer"
+              <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"
+                      onClick={action}
+                      className="custom-btn bg-[#f5a430] text-black text-base"
+                    >
+                      Cancel
+                    </button>
                   )}
-                </button>
+
+                  <button
+                    onClick={
+                      completeNairaWithdraw.show
+                        ? action
+                        : completeNairaWithdraw?.state?.internal_return < 0
+                        ? action
+                        : handleSubmit
+                    }
+                    className="custom-btn btn-gradient text-base text-white"
+                  >
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="6" color="sky-blue" />
+                    ) : completeNairaWithdraw.show ? (
+                      "Okay"
+                    ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
+                      "Cancel"
+                    ) : (
+                      "Transfer"
+                    )}
+                  </button>
+                </div>
               </div>
             </>
           )}
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx
index 1a88f61..4ce4067 100644
--- a/src/components/MyWallet/Popup/NairaWithdraw.jsx
+++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx
@@ -794,30 +794,32 @@ function NairaWithdraw({
 
                     </div>
                     
-                    <div className="modal-footer-wrapper flex justify-end items-center gap-2 py-4">
-                      <button
-                        type="button"
-                        onClick={action}
-                        className="custom-btn bg-[#f5a430] text-black text-base"
-                      >
-                        Cancel
-                      </button>
+                    <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}
+                          className="custom-btn bg-[#f5a430] text-black text-base"
+                        >
+                          Cancel
+                        </button>
 
-                      <button
-                        type="submit"
-                        disabled={
-                          props.isSubmitting || sendMoneyFee.loading
-                            ? true
-                            : false
-                        }
-                        className="custom-btn btn-gradient text-base text-white"
-                      >
-                        {requestStatus ? (
-                          <LoadingSpinner size="6" color="sky-blue" />
-                        ) : (
-                          "Continue"
-                        )}
-                      </button>
+                        <button
+                          type="submit"
+                          disabled={
+                            props.isSubmitting || sendMoneyFee.loading
+                              ? true
+                              : false
+                          }
+                          className="custom-btn btn-gradient text-base text-white"
+                        >
+                          {requestStatus ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            "Continue"
+                          )}
+                        </button>
+                      </div>
                     </div>
                   </Form>
                 )