Layout Readjusting

src/components/MyWallet/AddFundDollars.jsx

@@ -145,6 +145,11 @@ function AddFundDollars(props) {
     <>
       <div className="w-full">
         {/* switch button */}
+        <div className="flex justify-between">
+          <form className="add-fund-info flex items-center gap-3">
+            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              {props.currency == "US Dollars" && "Payment Method"}
+            </h1>
             <div className="my-1 flex items-center gap-2">
               <label
                 onClick={() => setTab("previous")}
@@ -179,11 +184,34 @@ function AddFundDollars(props) {
                 Add New Card
               </label>
             </div>
+          </form>
+          <form className="add-fund-info flex items-center gap-3">
+            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              {props.currency == "US Dollars"
+                ? "Amount (USD)"
+                : "Amount (Naira)"}
+            </h1>
+            <div className="field w-full max-w-[8rem]">
+              <InputCom
+                fieldClass="px-6"
+                type="text"
+                name="amount"
+                placeholder="0"
+                value={props.input}
+                inputHandler={props.handleChange}
+              />
+              <p className="text-base text-red-500 h-5">
+                {props.inputError && props.inputError}
+              </p>
+            </div>
+          </form>
+        </div>
+        <hr />
         {/* END OF switch button */}
 
         {/* previous tab */}
         {tab == "previous" ? (
-          <div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center">
+          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
@@ -253,7 +281,7 @@ function AddFundDollars(props) {
             )}
           </div>
         ) : (
-          <div className="new-details w-full max-h-[19.063rem] overflow-y-scroll">
+          <div className="new-details w-full max-h-[23rem] overflow-y-scroll">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}

src/components/MyWallet/AddFundPop.jsx

@@ -53,35 +53,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   };
 
   return (
-    <div className="h-[36rem] w-full">
+    <div className="h-[32rem] 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">
             {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
             {/*<hr />*/}
-            <form className="md:p-8 p-4 add-fund-info">
-              <div className="field w-full">
-                <InputCom
-                  fieldClass="px-6"
-                  label={
-                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
-                  }
-                  type="text"
-                  name="amount"
-                  placeholder="0"
-                  value={input}
-                  inputHandler={handleChange}
-                />
-                {inputError && (
-                  <p className="text-base text-red-500">{inputError}</p>
-                )}
-              </div>
-            </form>
-            <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
-              {currency == "US Dollars" && "Payment Method"}
-            </h1>
-            <hr />
-
             {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
             {currency == "US Dollars" && (
               <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl">
@@ -91,6 +68,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
                   setInput={setInput}
                   currency={currency}
                   onClose={onClose}
+                  handleChange={handleChange}
                   setConfirmCredit={setConfirmCredit}
                 />
               </div>

src/components/MyWallet/ConfirmAddFund.jsx

@@ -109,7 +109,9 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
-  console.log("data on confirm", confirmCredit?.data?.card.card_uid);
+  let __something = JSON.parse(confirmCredit?.data.card);
+
+  console.log("data on confirm", __something["card_uid"], __something.card_uid);
 
   return (
     <div className="content-wrapper w-full h-[36rem]">
@@ -122,7 +124,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
           <div className="px-4 md:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
               {confirmCredit?.show ? (
-                <div className="flex flex-col items-center gap-4">
+                <div className="flex flex-col gap-4">
                   <div className="flex items-center gap-4">
                     <label
                       htmlFor="amount"

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -47,7 +47,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     onClose();
   };
 
-  console.log("prop drills >> ", confirmCredit);
+  console.log("prop drills >> ", state);
 
   return (
     <ModalCom