From 3775c520ff156bfd7735dd2e1cf9fab732e08127 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 1 Apr 2024 18:23:34 +0100
Subject: [PATCH] added modal style to wallet modal

---
 .../MyWallet/Popup/AddFundDollars.jsx         |  22 +-
 src/components/MyWallet/Popup/AddFundPop.jsx  |  86 +-
 .../MyWallet/Popup/CompleteConfirmCredit.jsx  |  18 +-
 .../MyWallet/Popup/ConfirmAddFund.jsx         | 182 ++--
 .../MyWallet/Popup/ConfirmNairaWithdraw.jsx   |  99 +-
 src/components/MyWallet/Popup/CreditPopup.jsx |   8 +-
 .../MyWallet/Popup/NairaWithdraw.jsx          | 907 +++++++++---------
 src/components/MyWallet/WalletAction.jsx      |   4 +-
 src/index.css                                 |   3 +
 9 files changed, 667 insertions(+), 662 deletions(-)

diff --git a/src/components/MyWallet/Popup/AddFundDollars.jsx b/src/components/MyWallet/Popup/AddFundDollars.jsx
index c5414fd..3fbc2cd 100644
--- a/src/components/MyWallet/Popup/AddFundDollars.jsx
+++ b/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">
-                        <div className="flex flex-col-reverse sm:flex-row">
+                      <Form className="w-full">
+                        <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" />
diff --git a/src/components/MyWallet/Popup/AddFundPop.jsx b/src/components/MyWallet/Popup/AddFundPop.jsx
index 15c2f3f..77b3001 100644
--- a/src/components/MyWallet/Popup/AddFundPop.jsx
+++ b/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,51 +149,51 @@ function AddFundPop({
                 </p>
               </div>
             </form>
-
-            {countryWallet === "US" && (
-              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
-                <AddFundDollars
-                  setInputError={setInputError}
-                  walletItem={walletItem}
-                  input={input}
-                  setInput={setInput}
-                  currency={currency}
-                  onClose={onClose}
-                  confirmCredit={confirmCredit}
-                  setConfirmCredit={setConfirmCredit}
-                />
-              </div>
-            )}
-
-            {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">
-                <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"
-                  onClick={onClose}
-                >
-                  Cancel
-                </button>
-                <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"
-                >
-                  {__awaitComponent.loader ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : (
-                    <>
-                      <span className="text-white">Continue</span>{" "}
-                      <Icons name="chevron-right" />
-                    </>
-                  )}
-                </button>
-              </div>
-            )}
           </div>
         </div>
       </div>
+
+      {countryWallet === "US" && (
+        <div className="w-full bg-white dark:bg-dark-white rounded-2xl">
+          <AddFundDollars
+            setInputError={setInputError}
+            walletItem={walletItem}
+            input={input}
+            setInput={setInput}
+            currency={currency}
+            onClose={onClose}
+            confirmCredit={confirmCredit}
+            setConfirmCredit={setConfirmCredit}
+          />
+        </div>
+      )}
+
+      {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>
+      )}
     </div>
   );
 }
diff --git a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
index 9302b17..64f92c8 100644
--- a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
+++ b/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,17 +97,17 @@ 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">
-              <button
-                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
-                onClick={onClose}
-              >
-                Ok
-              </button>
-            </div>
           </div>
         </div>
       </div>
+      <div className="modal-footer-wrapper w-full flex justify-end items-center gap-4">
+        <button
+          className="custom-btn btn-gradient text-white text-base"
+          onClick={onClose}
+        >
+          Ok
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
index 866f7fc..79f0e77 100644
--- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
@@ -356,103 +356,105 @@ 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">
-          <div className="px-4 md:p-8 py-4 add-fund-info">
-            <div className="field w-full mb-3 min-h-[45px]">
-              {confirmCredit?.show?.awaitConfirm?.state && (
-                <div className="flex flex-col gap-2">
-                  <AmountSection
-                    currency={__confirmData?.currency}
-                    amount={__confirmData?.amount}
-                    country={__confirmCountry}
-                  />
-                  <TransactionFeeSection
-                    currency={__confirmData?.currency}
-                    fee={__confirmData?.fee}
-                    country={__confirmCountry}
-                  />
-                  <TotalSection
-                    currency={__confirmData?.currency}
-                    amount={__confirmData?.amount}
-                    fee={__confirmData?.fee}
-                    country={__confirmCountry}
-                  />
-                  {__confirmCountry === "US" && (
-                    <div className="flex items-center gap-8">
-                      <label
-                        htmlFor="payment"
-                        className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
-                      >
-                        Payment Method
-                      </label>
-                      <span className="text-[#181c32] dark:text-white">
-                        <ThePaymentText
-                          value={__confirmCardDetails}
-                          type={__confirmData?.cardType}
-                        />
+    <>    
+      <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">
+            <div className="px-4 md:p-8 py-4 add-fund-info">
+              <div className="field w-full mb-3 min-h-[45px]">
+                {confirmCredit?.show?.awaitConfirm?.state && (
+                  <div className="flex flex-col gap-2">
+                    <AmountSection
+                      currency={__confirmData?.currency}
+                      amount={__confirmData?.amount}
+                      country={__confirmCountry}
+                    />
+                    <TransactionFeeSection
+                      currency={__confirmData?.currency}
+                      fee={__confirmData?.fee}
+                      country={__confirmCountry}
+                    />
+                    <TotalSection
+                      currency={__confirmData?.currency}
+                      amount={__confirmData?.amount}
+                      fee={__confirmData?.fee}
+                      country={__confirmCountry}
+                    />
+                    {__confirmCountry === "US" && (
+                      <div className="flex items-center gap-8">
+                        <label
+                          htmlFor="payment"
+                          className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                        >
+                          Payment Method
+                        </label>
+                        <span className="text-[#181c32] dark:text-white">
+                          <ThePaymentText
+                            value={__confirmCardDetails}
+                            type={__confirmData?.cardType}
+                          />
+                        </span>
+                      </div>
+                    )}
+                    <div
+                      className={`${
+                        __confirmCountry === "US"
+                          ? "gap-[3.7rem]"
+                          : "gap-[1.81rem]"
+                      } flex items-center`}
+                    >
+                      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        Reference No
+                      </h1>
+                      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+                        {__confirmData?.credit_reference}
                       </span>
                     </div>
-                  )}
-                  <div
-                    className={`${
-                      __confirmCountry === "US"
-                        ? "gap-[3.7rem]"
-                        : "gap-[1.81rem]"
-                    } flex items-center`}
-                  >
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Reference No
-                    </h1>
-                    <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
-                      {__confirmData?.credit_reference}
-                    </span>
                   </div>
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div
-            className={
-              __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
-            }
-          ></div>
-          <hr />
-          <div className="md:p-8 p-4 add-fund-btn 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 bg-[#f5a430] text-black items-center text-base rounded-full"
-              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"
-                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>
+
+            <div
+              className={
+                __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
+              }
+            ></div>
           </div>
         </div>
       </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" && (
+          <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>
+    </>
   );
 }
 
diff --git a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
index df4baed..a6fec7f 100644
--- a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
+++ b/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">
-            <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+          <div className="modal-header-con">
+            <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,53 +376,52 @@ function ConfirmNairaWithdraw({
                 </div>
               </div>
             )}
-
-            {!completeNairaWithdraw.load && (
-              <>
-                {" "}
-                <hr />
-                <p
-                  className={`text-base ${
-                    requestStatus.status ? "text-green-500" : "text-red-500"
-                  } px-4 md:px-8 py-4 h-5`}
-                >
-                  {requestStatus.message && requestStatus.message}
-                </p>
-                <div className="px-4 md:px-8 py-4 add-fund-btn 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"
-                    >
-                      Cancel
-                    </button>
-                  )}
-
-                  <button
-                    onClick={
-                      completeNairaWithdraw.show
-                        ? action
-                        : completeNairaWithdraw?.state?.internal_return < 0
-                        ? action
-                        : handleSubmit
-                    }
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
-                  >
-                    {requestStatus.loading ? (
-                      <LoadingSpinner size="6" color="sky-blue" />
-                    ) : completeNairaWithdraw.show ? (
-                      "Okay"
-                    ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
-                      "Cancel"
-                    ) : (
-                      "Transfer"
-                    )}
-                  </button>
-                </div>
-              </>
-            )}
           </div>
+
+          {!completeNairaWithdraw.load && (
+            <>
+              <p
+                className={`text-base ${
+                  requestStatus.status ? "text-green-500" : "text-red-500"
+                } px-4 md:px-8 py-4 h-5`}
+              >
+                {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"
+                  )}
+                </button>
+              </div>
+            </>
+          )}
+
         </div>
       </div>
     </ModalCom>
diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx
index 47b6549..c7a596f 100644
--- a/src/components/MyWallet/Popup/CreditPopup.jsx
+++ b/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">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+        <div className="modal-header-con">
+          <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" />
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx
index b222240..1a88f61 100644
--- a/src/components/MyWallet/Popup/NairaWithdraw.jsx
+++ b/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">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+          <div className="modal-header-con">
+            <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,479 +324,481 @@ 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">
-                    {/* Amount Form */}
-                    <div className="flex flex-col">
-                      <div className="field w-full">
-                        <InputCom
-                          fieldClass="px-4 text-end"
-                          parentClass="flex items-center gap-1 justify-between"
-                          labelClass="flex-[0.4] mb-0"
-                          inputClass="flex-[0.6] max-w-[12rem]"
-                          label="Amount:"
-                          type="number"
-                          name="amount"
-                          placeholder="0"
-                          value={props.values.amount}
-                          inputHandler={props.handleChange}
-                          blurHandler={(e) => {
-                            getSendMoneyFee(e);
-                          }}
-                          error={errorMsgs.amount && errorMsgs.amount}
-                        />
-                      </div>
-
-                      <div className="field w-full">
-                        <InputCom
-                          fieldClass="px-4 transfer-field"
-                          parentClass="flex items-center gap-1 justify-between"
-                          labelClass="flex-[0.2] mb-0"
-                          inputClass="flex-[0.8] transfer-field max-w-[12rem]"
-                          label="Fee:"
-                          type="text"
-                          name="fee"
-                          direction="rtl"
-                          value={
-                            sendMoneyFee.loading
-                              ? "loading"
-                              : (sendMoneyFee.fee * 0.01).toFixed(2)
-                          }
-                          disable={true}
-                        />
-                      </div>
-
-                      <div className="field w-full">
-                        <InputCom
-                          fieldClass="px-4 transfer-field"
-                          parentClass="flex items-center gap-1 justify-between"
-                          labelClass="flex-[0.2] mb-0"
-                          inputClass="flex-[0.8] transfer-field max-w-[12rem]"
-                          label="Total:"
-                          type="text"
-                          name="total"
-                          direction="rtl"
-                          value={
-                            sendMoneyFee.loading
-                              ? "loading"
-                              : (sendMoneyFee.total * 0.01).toFixed(2)
-                          }
-                          disable={true}
-                        />
-                      </div>
-
-                      <div className="field w-full mb-3 flex gap-1 justify-between">
-                        <label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
-                          Comment:
-                        </label>
-                        <textarea
-                          style={{ resize: "none" }}
-                          className="text-base px-4 py-2 rounded-md sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
-                          name="comment"
-                          value={props.values.comment}
-                          onChange={props.handleChange}
-                          onBlur={props.handleBlur}
-                          cols="30"
-                          rows="2"
-                        />
-                      </div>
-                    </div>
-
-                    {/* Account Selector */}
-                    <div className=" flex items-center gap-[8rem]">
-                      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                        To:
-                      </h1>
-                      <div className="my-1 flex items-center gap-2">
-                        <label
-                          onClick={() => setTab("previous")}
-                          htmlFor="previous"
-                          className="cursor-pointer flex items-center gap-1"
-                        >
-                          <input
-                            type="radio"
-                            id="previous"
-                            name="choice"
-                            value="previous"
-                            checked={tab === "previous"}
-                            className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
-                              tab == "previous" ? "" : ""
-                            } tracking-wide transition duration-200`}
+                    <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">
+                          <InputCom
+                            fieldClass="px-4 text-end"
+                            parentClass="flex items-center gap-1 justify-between"
+                            labelClass="flex-[0.4] mb-0"
+                            inputClass="flex-[0.6] max-w-[12rem]"
+                            label="Amount:"
+                            type="number"
+                            name="amount"
+                            placeholder="0"
+                            value={props.values.amount}
+                            inputHandler={props.handleChange}
+                            blurHandler={(e) => {
+                              getSendMoneyFee(e);
+                            }}
+                            error={errorMsgs.amount && errorMsgs.amount}
                           />
-                          Previous Account
-                        </label>
-                        <label
-                          onClick={() => setTab("new")}
-                          htmlFor="new"
-                          className={`cursor-pointer flex items-center gap-1 ${
-                            recipients.data.length >= MaxNoOfBanks
-                              ? "pointer-events-none"
-                              : ""
-                          }`}
-                        >
-                          <input
-                            id="new"
-                            type="radio"
-                            name="choice"
-                            value="new"
-                            checked={tab === "new"}
-                            className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
-                              tab == "new" ? "" : ""
-                            }  tracking-wide transition duration-200`}
-                          />
-                          New Account{" "}
-                          {recipients.data.length >= MaxNoOfBanks && (
-                            <span className="text-[14px] text-red-500">
-                              Max Reached
-                            </span>
-                          )}
-                        </label>
-                      </div>
-                    </div>
+                        </div>
 
-                    <div className="">
-                      {tab == "previous" && (
-                        <>
-                          <div className="w-full">
-                            <div className="relative my-3 md:flex items-center px-4">
-                              <div className="transfer-input w-full flex items-center justify-end">
-                                {/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
-                                <div className="flex flex-col gap-3 flex-[0.8] items-center">
-                                  <select
-                                    className="sm:w-full w-48 text-dark-gray border-slate-300 outline-0 flex-[0.8] my-3 rounded-full p-2 outline-none text-base dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border appearance-none"
-                                    value={
-                                      props.values.previousAccount?.recipientID
-                                    }
-                                    name="previousAccount.recipientID"
-                                    onChange={props.handleChange}
-                                    onBlur={props.handleBlur}
-                                  >
-                                    {recipients.loading ? (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        Loading...
-                                      </option>
-                                    ) : recipients.data.length ? (
-                                      <>
+                        <div className="field w-full">
+                          <InputCom
+                            fieldClass="px-4 transfer-field"
+                            parentClass="flex items-center gap-1 justify-between"
+                            labelClass="flex-[0.2] mb-0"
+                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            label="Fee:"
+                            type="text"
+                            name="fee"
+                            direction="rtl"
+                            value={
+                              sendMoneyFee.loading
+                                ? "loading"
+                                : (sendMoneyFee.fee * 0.01).toFixed(2)
+                            }
+                            disable={true}
+                          />
+                        </div>
+
+                        <div className="field w-full">
+                          <InputCom
+                            fieldClass="px-4 transfer-field"
+                            parentClass="flex items-center gap-1 justify-between"
+                            labelClass="flex-[0.2] mb-0"
+                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            label="Total:"
+                            type="text"
+                            name="total"
+                            direction="rtl"
+                            value={
+                              sendMoneyFee.loading
+                                ? "loading"
+                                : (sendMoneyFee.total * 0.01).toFixed(2)
+                            }
+                            disable={true}
+                          />
+                        </div>
+
+                        <div className="field w-full mb-3 flex gap-1 justify-between">
+                          <label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
+                            Comment:
+                          </label>
+                          <textarea
+                            style={{ resize: "none" }}
+                            className="text-base px-4 py-2 rounded-md sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
+                            name="comment"
+                            value={props.values.comment}
+                            onChange={props.handleChange}
+                            onBlur={props.handleBlur}
+                            cols="30"
+                            rows="2"
+                          />
+                        </div>
+                      </div>
+
+                      {/* Account Selector */}
+                      <div className=" flex items-center gap-[8rem]">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          To:
+                        </h1>
+                        <div className="my-1 flex items-center gap-2">
+                          <label
+                            onClick={() => setTab("previous")}
+                            htmlFor="previous"
+                            className="cursor-pointer flex items-center gap-1"
+                          >
+                            <input
+                              type="radio"
+                              id="previous"
+                              name="choice"
+                              value="previous"
+                              checked={tab === "previous"}
+                              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                                tab == "previous" ? "" : ""
+                              } tracking-wide transition duration-200`}
+                            />
+                            Previous Account
+                          </label>
+                          <label
+                            onClick={() => setTab("new")}
+                            htmlFor="new"
+                            className={`cursor-pointer flex items-center gap-1 ${
+                              recipients.data.length >= MaxNoOfBanks
+                                ? "pointer-events-none"
+                                : ""
+                            }`}
+                          >
+                            <input
+                              id="new"
+                              type="radio"
+                              name="choice"
+                              value="new"
+                              checked={tab === "new"}
+                              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                                tab == "new" ? "" : ""
+                              }  tracking-wide transition duration-200`}
+                            />
+                            New Account{" "}
+                            {recipients.data.length >= MaxNoOfBanks && (
+                              <span className="text-[14px] text-red-500">
+                                Max Reached
+                              </span>
+                            )}
+                          </label>
+                        </div>
+                      </div>
+
+                      <div className="">
+                        {tab == "previous" && (
+                          <>
+                            <div className="w-full">
+                              <div className="relative my-3 md:flex items-center px-4">
+                                <div className="transfer-input w-full flex items-center justify-end">
+                                  {/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
+                                  <div className="flex flex-col gap-3 flex-[0.8] items-center">
+                                    <select
+                                      className="sm:w-full w-48 text-dark-gray border-slate-300 outline-0 flex-[0.8] my-3 rounded-full p-2 outline-none text-base dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border appearance-none"
+                                      value={
+                                        props.values.previousAccount?.recipientID
+                                      }
+                                      name="previousAccount.recipientID"
+                                      onChange={props.handleChange}
+                                      onBlur={props.handleBlur}
+                                    >
+                                      {recipients.loading ? (
                                         <option
                                           className="text-slate-500 text-lg"
                                           value=""
                                         >
-                                          {errorMsgs.previousAccount
-                                            ?.recipientID
-                                            ? errorMsgs.previousAccount
-                                                .recipientID
-                                            : "Select an account"}
+                                          Loading...
                                         </option>
-                                        {recipients.data.map((item, index) => (
+                                      ) : recipients.data.length ? (
+                                        <>
                                           <option
-                                            key={index}
-                                            value={item.recipient_uid}
                                             className="text-slate-500 text-lg"
+                                            value=""
                                           >
-                                            {item.recipient}
-                                          </option>
-                                        ))}
-                                      </>
-                                    ) : recipients.error ? (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        Could'nt load, !
-                                      </option>
-                                    ) : (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        No Recipient Found!
-                                      </option>
-                                    )}
-                                  </select>
-                                  <div className="flex justify-end relative w-full">
-                                    {errorMsgs.previousAccount?.recipientID &&
-                                      errorMsgs.previousAccount
-                                        ?.recipientID && (
-                                        <p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
-                                          {
-                                            errorMsgs.previousAccount
+                                            {errorMsgs.previousAccount
                                               ?.recipientID
-                                          }
-                                        </p>
+                                              ? errorMsgs.previousAccount
+                                                  .recipientID
+                                              : "Select an account"}
+                                          </option>
+                                          {recipients.data.map((item, index) => (
+                                            <option
+                                              key={index}
+                                              value={item.recipient_uid}
+                                              className="text-slate-500 text-lg"
+                                            >
+                                              {item.recipient}
+                                            </option>
+                                          ))}
+                                        </>
+                                      ) : recipients.error ? (
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          Could'nt load, !
+                                        </option>
+                                      ) : (
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          No Recipient Found!
+                                        </option>
                                       )}
+                                    </select>
+                                    <div className="flex justify-end relative w-full">
+                                      {errorMsgs.previousAccount?.recipientID &&
+                                        errorMsgs.previousAccount
+                                          ?.recipientID && (
+                                          <p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
+                                            {
+                                              errorMsgs.previousAccount
+                                                ?.recipientID
+                                            }
+                                          </p>
+                                        )}
+                                    </div>
                                   </div>
                                 </div>
                               </div>
                             </div>
-                          </div>
-                          <div className="h-[6.1rem]"></div>
-                        </>
-                      )}
+                            <div className="h-[6.1rem]"></div>
+                          </>
+                        )}
 
-                      {tab == "new" &&
-                        (recipients.loading ? (
-                          <div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
-                            <LoadingSpinner size="10" color="sky-blue" />
-                          </div>
-                        ) : recipients.data.length < MaxNoOfBanks ? (
-                          <div className="w-full mt-3 rounded-md bg-slate-100">
-                            <div className="relative fields w-full flex flex-col p-4">
-                              <div className="flex flex-[2] min-h-[52px]">
-                                {/* country */}
-                                <div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
-                                  <label
-                                    htmlFor="newAccount.country"
-                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
-                                  >
-                                    Country{" "}
-                                    <span className="text-red-500">*</span>
-                                  </label>
-                                  <div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
-                                    <span className="text-slate-500 text-lg italic">
-                                      {wallet.walletCountry[0]?.country}
-                                    </span>
-                                  </div>
-                                  {/* <select
-                                    className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px]"
-                                    name="newAccount.country"
-                                    value={props.values.newAccount?.country}
-                                    onChange={(e) => {
-                                      props.handleChange(e);
-                                      handleBankOptions(e);
-                                    }}
-                                  >
-                                    {allCountries.loading ? (
-                                      <option
-                                      className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        Loading...
-                                      </option>
-                                    ) : allCountries.data?.length ? (
-                                      <>
-                                        <option
-                                          className="text-slate-500 text-lg"
-                                          value=""
-                                        >
-                                          {errorMsgs.newAccount?.country
-                                            ? errorMsgs.newAccount.country
-                                            : "Select..."}
-                                        </option>
-                                        {allCountries.data.map((item, index) => (
-                                          <option
-                                            key={index}
-                                            className="text-slate-500 text-lg"
-                                            value={item[0]}
-                                          >
-                                            {item[1]}
-                                          </option>
-                                        ))}
-                                      </>
-                                    ) : (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        No Options Found!
-                                      </option>
-                                    )}
-                                  </select> */}
-                                </div>
-
-                                {/* bank name */}
-                                <div className="add-recipient w-full flex items-center flex-1">
-                                  <label
-                                    htmlFor="newAccount.bank"
-                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4] tracking-[1.5px]"
-                                  >
-                                    Bank Name{" "}
-                                    <span className="text-red-500">*</span>
-                                  </label>
-                                  <select
-                                    className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
-                                    name="newAccount.bank"
-                                    value={props.values.newAccount?.bank}
-                                    onChange={props.handleChange}
-                                    onBlur={props.handleBlur}
-                                  >
-                                    {bankName.loading ? (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        Loading...
-                                      </option>
-                                    ) : bankName.data?.length ? (
-                                      <>
-                                        <option
-                                          className="text-slate-500 text-lg"
-                                          value=""
-                                        >
-                                          Select...
-                                        </option>
-                                        {bankName.data?.map((item, index) => (
-                                          <option
-                                            key={index}
-                                            className="text-slate-500 text-lg"
-                                            value={item.bank_uid}
-                                          >
-                                            {item.name}
-                                          </option>
-                                        ))}
-                                      </>
-                                    ) : (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        {allCountries.data?.length
-                                          ? "Select..."
-                                          : "No Options Found!"}
-                                      </option>
-                                    )}
-                                  </select>
-                                </div>
-                              </div>
-
-                              <div className="flex flex-[2] gap-4">
-                                {/* ACCOUNT NUMBER */}
-                                <div className="field w-full flex-[1.4] flex items-center gap-2">
-                                  <label
-                                    htmlFor="newAccount.accountNumber"
-                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1"
-                                  >
-                                    Account Number{" "}
-                                    <span className="text-red-500">*</span>
-                                  </label>
-                                  <InputCom
-                                    fieldClass="px-6 tracking-[1.5px]"
-                                    inputClass="flex items-center max-w-[15rem]"
-                                    type="text"
-                                    name="newAccount.accountNumber"
-                                    placeholder="Account No"
-                                    maxLength={10}
-                                    value={
-                                      props.values.newAccount?.accountNumber
-                                    }
-                                    inputHandler={props.handleChange}
-                                    blurHandler={props.handleBlur}
-                                  />
-                                </div>
-
-                                {/* Account Type */}
-                                <div className="add-recipient w-full flex flex-1 items-center">
-                                  <label
-                                    htmlFor="newAccount.accountType"
-                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
-                                  >
-                                    Type <span className="text-red-500">*</span>
-                                  </label>
-                                  <select
-                                    className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
-                                    name="newAccount.accountType"
-                                    value={props.values.newAccount?.accountType}
-                                    onChange={props.handleChange}
-                                    onBlur={props.handleBlur}
-                                  >
-                                    {accType.loading ? (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        Loading...
-                                      </option>
-                                    ) : accType.data?.length ? (
-                                      <>
-                                        <option
-                                          className="text-slate-500 text-lg"
-                                          value=""
-                                        >
-                                          Select...
-                                        </option>
-                                        {accType.data?.map((item, index) => (
-                                          <option
-                                            key={index}
-                                            className="text-slate-500 text-lg"
-                                            value={item.value}
-                                          >
-                                            {item.name}
-                                          </option>
-                                        ))}
-                                      </>
-                                    ) : (
-                                      <option
-                                        className="text-slate-500 text-lg"
-                                        value=""
-                                      >
-                                        No Options Found!
-                                      </option>
-                                    )}
-                                  </select>
-                                </div>
-                              </div>
-
-                              <div className="flex items-center flex-1">
-                                {/* state */}
-                                <div className="field w-full flex items-center gap-4 flex-[0.4]">
-                                  <label
-                                    htmlFor="newAccount.state"
-                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
-                                  >
-                                    State{" "}
-                                    <span className="text-red-500">*</span>
-                                  </label>
-                                  <InputCom
-                                    fieldClass="px-6 tracking-[1.5px]"
-                                    inputClass="max-w-[10rem]"
-                                    type="text"
-                                    name="newAccount.state"
-                                    placeholder="State/Province"
-                                    value={props.values.newAccount?.state}
-                                    inputHandler={props.handleChange}
-                                    blurHandler={props.handleBlur}
-                                  />
-                                </div>
-
-                                {/* city */}
-                                <div className="field w-full flex items-center flex-[0.4]">
-                                  <label
-                                    htmlFor="newAccount.city"
-                                    className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
-                                  >
-                                    City <span className="text-red-500">*</span>
-                                  </label>
-                                  <InputCom
-                                    fieldClass="px-6 tracking-[1.5px]"
-                                    type="text"
-                                    inputClass="max-w-[10rem]"
-                                    name="newAccount.city"
-                                    placeholder="City"
-                                    value={props.values.newAccount?.city}
-                                    inputHandler={props.handleChange}
-                                    blurHandler={props.handleBlur}
-                                  />
-                                </div>
-                              </div>
-
-                              {/* end of inputs for new accounts */}
+                        {tab == "new" &&
+                          (recipients.loading ? (
+                            <div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
+                              <LoadingSpinner size="10" color="sky-blue" />
                             </div>
-                          </div>
-                        ) : (
-                          <div className="mt-3 flex w-full h-[188px] justify-center items-center"></div>
-                        ))}
+                          ) : recipients.data.length < MaxNoOfBanks ? (
+                            <div className="w-full mt-3 rounded-md bg-slate-100">
+                              <div className="relative fields w-full flex flex-col p-4">
+                                <div className="flex flex-[2] min-h-[52px]">
+                                  {/* country */}
+                                  <div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
+                                    <label
+                                      htmlFor="newAccount.country"
+                                      className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
+                                    >
+                                      Country{" "}
+                                      <span className="text-red-500">*</span>
+                                    </label>
+                                    <div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
+                                      <span className="text-slate-500 text-lg italic">
+                                        {wallet.walletCountry[0]?.country}
+                                      </span>
+                                    </div>
+                                    {/* <select
+                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px]"
+                                      name="newAccount.country"
+                                      value={props.values.newAccount?.country}
+                                      onChange={(e) => {
+                                        props.handleChange(e);
+                                        handleBankOptions(e);
+                                      }}
+                                    >
+                                      {allCountries.loading ? (
+                                        <option
+                                        className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          Loading...
+                                        </option>
+                                      ) : allCountries.data?.length ? (
+                                        <>
+                                          <option
+                                            className="text-slate-500 text-lg"
+                                            value=""
+                                          >
+                                            {errorMsgs.newAccount?.country
+                                              ? errorMsgs.newAccount.country
+                                              : "Select..."}
+                                          </option>
+                                          {allCountries.data.map((item, index) => (
+                                            <option
+                                              key={index}
+                                              className="text-slate-500 text-lg"
+                                              value={item[0]}
+                                            >
+                                              {item[1]}
+                                            </option>
+                                          ))}
+                                        </>
+                                      ) : (
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          No Options Found!
+                                        </option>
+                                      )}
+                                    </select> */}
+                                  </div>
+
+                                  {/* bank name */}
+                                  <div className="add-recipient w-full flex items-center flex-1">
+                                    <label
+                                      htmlFor="newAccount.bank"
+                                      className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4] tracking-[1.5px]"
+                                    >
+                                      Bank Name{" "}
+                                      <span className="text-red-500">*</span>
+                                    </label>
+                                    <select
+                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
+                                      name="newAccount.bank"
+                                      value={props.values.newAccount?.bank}
+                                      onChange={props.handleChange}
+                                      onBlur={props.handleBlur}
+                                    >
+                                      {bankName.loading ? (
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          Loading...
+                                        </option>
+                                      ) : bankName.data?.length ? (
+                                        <>
+                                          <option
+                                            className="text-slate-500 text-lg"
+                                            value=""
+                                          >
+                                            Select...
+                                          </option>
+                                          {bankName.data?.map((item, index) => (
+                                            <option
+                                              key={index}
+                                              className="text-slate-500 text-lg"
+                                              value={item.bank_uid}
+                                            >
+                                              {item.name}
+                                            </option>
+                                          ))}
+                                        </>
+                                      ) : (
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          {allCountries.data?.length
+                                            ? "Select..."
+                                            : "No Options Found!"}
+                                        </option>
+                                      )}
+                                    </select>
+                                  </div>
+                                </div>
+
+                                <div className="flex flex-[2] gap-4">
+                                  {/* ACCOUNT NUMBER */}
+                                  <div className="field w-full flex-[1.4] flex items-center gap-2">
+                                    <label
+                                      htmlFor="newAccount.accountNumber"
+                                      className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1"
+                                    >
+                                      Account Number{" "}
+                                      <span className="text-red-500">*</span>
+                                    </label>
+                                    <InputCom
+                                      fieldClass="px-6 tracking-[1.5px]"
+                                      inputClass="flex items-center max-w-[15rem]"
+                                      type="text"
+                                      name="newAccount.accountNumber"
+                                      placeholder="Account No"
+                                      maxLength={10}
+                                      value={
+                                        props.values.newAccount?.accountNumber
+                                      }
+                                      inputHandler={props.handleChange}
+                                      blurHandler={props.handleBlur}
+                                    />
+                                  </div>
+
+                                  {/* Account Type */}
+                                  <div className="add-recipient w-full flex flex-1 items-center">
+                                    <label
+                                      htmlFor="newAccount.accountType"
+                                      className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
+                                    >
+                                      Type <span className="text-red-500">*</span>
+                                    </label>
+                                    <select
+                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
+                                      name="newAccount.accountType"
+                                      value={props.values.newAccount?.accountType}
+                                      onChange={props.handleChange}
+                                      onBlur={props.handleBlur}
+                                    >
+                                      {accType.loading ? (
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          Loading...
+                                        </option>
+                                      ) : accType.data?.length ? (
+                                        <>
+                                          <option
+                                            className="text-slate-500 text-lg"
+                                            value=""
+                                          >
+                                            Select...
+                                          </option>
+                                          {accType.data?.map((item, index) => (
+                                            <option
+                                              key={index}
+                                              className="text-slate-500 text-lg"
+                                              value={item.value}
+                                            >
+                                              {item.name}
+                                            </option>
+                                          ))}
+                                        </>
+                                      ) : (
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          No Options Found!
+                                        </option>
+                                      )}
+                                    </select>
+                                  </div>
+                                </div>
+
+                                <div className="flex items-center flex-1">
+                                  {/* state */}
+                                  <div className="field w-full flex items-center gap-4 flex-[0.4]">
+                                    <label
+                                      htmlFor="newAccount.state"
+                                      className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
+                                    >
+                                      State{" "}
+                                      <span className="text-red-500">*</span>
+                                    </label>
+                                    <InputCom
+                                      fieldClass="px-6 tracking-[1.5px]"
+                                      inputClass="max-w-[10rem]"
+                                      type="text"
+                                      name="newAccount.state"
+                                      placeholder="State/Province"
+                                      value={props.values.newAccount?.state}
+                                      inputHandler={props.handleChange}
+                                      blurHandler={props.handleBlur}
+                                    />
+                                  </div>
+
+                                  {/* city */}
+                                  <div className="field w-full flex items-center flex-[0.4]">
+                                    <label
+                                      htmlFor="newAccount.city"
+                                      className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
+                                    >
+                                      City <span className="text-red-500">*</span>
+                                    </label>
+                                    <InputCom
+                                      fieldClass="px-6 tracking-[1.5px]"
+                                      type="text"
+                                      inputClass="max-w-[10rem]"
+                                      name="newAccount.city"
+                                      placeholder="City"
+                                      value={props.values.newAccount?.city}
+                                      inputHandler={props.handleChange}
+                                      blurHandler={props.handleBlur}
+                                    />
+                                  </div>
+                                </div>
+
+                                {/* end of inputs for new accounts */}
+                              </div>
+                            </div>
+                          ) : (
+                            <div className="mt-3 flex w-full h-[188px] justify-center items-center"></div>
+                          ))}
+                      </div>
+
                     </div>
-
-                    <div className="transfer-fund-btn flex justify-end items-center gap-2 py-4">
+                    
+                    <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,10 +820,9 @@ function NairaWithdraw({
                       </button>
                     </div>
                   </Form>
-                );
+                )
               }}
             </Formik>
-          </div>
         </div>
       </div>
     </ModalCom>
diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx
index b897119..93de4b7 100644
--- a/src/components/MyWallet/WalletAction.jsx
+++ b/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,
diff --git a/src/index.css b/src/index.css
index 7cc9438..1bb90c9 100644
--- a/src/index.css
+++ b/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 ===================== */