Layout Readjusting

src/components/MyWallet/AddFundDollars.jsx

@@ -145,45 +145,73 @@ function AddFundDollars(props) {
     <>
       <div className="w-full">
         {/* switch button */}
-        <div className="my-1 flex items-center gap-2">
+        <div className="flex justify-between">
-          <label
+          <form className="add-fund-info flex items-center gap-3">
-            onClick={() => setTab("previous")}
+            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-            htmlFor="previous"
+              {props.currency == "US Dollars" && "Payment Method"}
-            className="cursor-pointer flex items-center gap-1"
+            </h1>
-          >
+            <div className="my-1 flex items-center gap-2">
-            <input
+              <label
-              type="radio"
+                onClick={() => setTab("previous")}
-              id="previous"
+                htmlFor="previous"
-              name="card-option"
+                className="cursor-pointer flex items-center gap-1"
-              checked={tab === "previous"}
+              >
-              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                <input
-                tab == "previous" ? "" : ""
+                  type="radio"
-              } tracking-wide transition duration-200`}
+                  id="previous"
-            />
+                  name="card-option"
-            Previous Cards
+                  checked={tab === "previous"}
-          </label>
+                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
-          <label
+                    tab == "previous" ? "" : ""
-            onClick={() => setTab("new")}
+                  } tracking-wide transition duration-200`}
-            htmlFor="new"
+                />
-            className="cursor-pointer flex items-center gap-1"
+                Previous Cards
-          >
+              </label>
-            <input
+              <label
-              id="new"
+                onClick={() => setTab("new")}
-              type="radio"
+                htmlFor="new"
-              name="card-option"
+                className="cursor-pointer flex items-center gap-1"
-              checked={tab === "new"}
+              >
-              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                <input
-                tab == "new" ? "" : ""
+                  id="new"
-              }  tracking-wide transition duration-200`}
+                  type="radio"
-            />
+                  name="card-option"
-            Add New Card
+                  checked={tab === "new"}
-          </label>
+                  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`}
+                />
+                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

@@ -96,7 +96,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //   }
   // }, []);
 
-  const ThePaymentText = ({value}) => (
+  const ThePaymentText = ({ value }) => (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details">
         <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
@@ -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