wallet card adjustment

src/components/MyWallet/AddFundDollars.jsx

@@ -191,7 +191,7 @@ function AddFundDollars(props) {
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
               <select
-                className="my-3 w-full rounded-full p-4 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
+                className="my-3 w-full rounded-full p-2 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
                 value={prevCardDetails["payment-card"]?.card_uid}
                 id="payment-card"
                 name="payment-card"
@@ -233,7 +233,7 @@ function AddFundDollars(props) {
             )}
           </div>
         ) : (
-          <div className="new-details w-full max-h-[23rem] overflow-y-scroll">
+          <div className="new-details w-full max-h-[23rem]">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}
@@ -255,7 +255,7 @@ function AddFundDollars(props) {
                               <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
                             </div>
 
-                            <div className="flex items-center flex-1 gap-3 my-[10px]">
+                            <div className="flex items-center flex-1 gap-3 my-2">
                               {/* Card Number */}
                               <div className="field w-full flex-[0.6]">
                                 <InputCom
@@ -368,7 +368,7 @@ function AddFundDollars(props) {
                               </div>
                             </div>
 
-                            <div className="flex items-center flex-1 gap-3 my-[10px]">
+                            <div className="flex items-center flex-1 gap-3 my-2">
                               {/* Address and CVV */}
                               <div className="field w-full col-span-1 flex-[0.4]">
                                 <InputCom
@@ -402,7 +402,7 @@ function AddFundDollars(props) {
                             </div>
 
                             {/* Postal Code and State */}
-                            <div className="sm:grid gap-5 grid-cols-3 my-[10px]">
+                            <div className="sm:grid gap-5 grid-cols-3 my-2">
                               <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                 <InputCom
                                   fieldClass="px-6"

src/components/MyWallet/AddFundPop.jsx

@@ -40,6 +40,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       amount: Number(input),
       currency: currency,
     };
+
     return setTimeout(
       () =>
         setConfirmCredit({
@@ -59,7 +60,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
             {/*<hr />*/}
             <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
               <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                {currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"}
+                Amount({currency})
               </h1>
               <div className="field w-full max-w-[250px]">
                 <InputCom
@@ -90,6 +91,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             )}
 
+            {currency != "US Dollars" && <div className="h-[18rem]"></div>}
             {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
             {currency != "US Dollars" && (
               <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
@@ -111,7 +113,6 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
           </div>
         </div>
       </div>
-
       {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
       {currency != "US Dollars" &&
         // <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">

src/components/MyWallet/ConfirmAddFund.jsx

@@ -96,7 +96,10 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //   }
   // }, []);
 
-  let __confirmCard = JSON.parse(confirmCredit?.data.card) || "";
+  const __confirmCard = confirmCredit?.data.card
+    ? JSON.parse(confirmCredit?.data.card)
+    : "";
+
   const ThePaymentText = ({ value }) => (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
@@ -124,9 +127,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center gap-4">
                     <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {confirmCredit?.data?.currency == "naira"
-                        ? "Amount (Naira):"
-                        : "Amount (Dollars):"}
+                      Amount({confirmCredit?.data?.currency})
                     </h1>
                     <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {`${walletItem?.symbol} ${
@@ -144,20 +145,16 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                       {confirmCredit?.data?.currency && "Payment Method:"}
                     </label>
                     <span className="text-[#181c32] dark:text-white ">
-                      {__confirmCard && (
+                      {__confirmCard ? (
                         <ThePaymentText value={__confirmCard} />
-                      )}
+                      ) : null}
                     </span>
                   </div>
                 </div>
               ) : (
                 <InputCom
                   fieldClass="px-6"
-                  label={
-                    confirmCredit?.data?.currency == "naira"
-                      ? "Amount (Naira):"
-                      : "Amount (Dollars):"
-                  }
+                  label={` Amount${confirmCredit?.data?.currency}`}
                   type="text"
                   name="amount"
                   value={confirmCredit?.data?.amount || ""}
@@ -178,18 +175,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             >
               Cancel
             </button>
-            {confirmCredit?.data?.currency == "naira" ? (
+
+            {confirmCredit?.data?.currency == "Naira" && (
               <FlutterWaveButton
                 {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
               />
-            ) : (
-              <button
-                className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={() => console.log("WORKING")}
-              >
-                Continue
-              </button>
             )}
           </div>
         </div>

src/components/MyWallet/Popup/CreditPopup.jsx

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

src/components/MyWallet/WalletAction.jsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function WalletAction({walletItem, payment, openPopUp}) {
   return (
-    <div className="counters flex justify-between gap-2">
+    <div className="counters w-full flex justify-between gap-2">
         <div className='w-1/2 flex justify-center items-center'>
         <Link
             to="transfer-fund"

src/components/MyWallet/WalletBox.jsx

@@ -10,14 +10,14 @@ export default function WalletBox({ wallet, coupon, payment }) {
     <>
       <div className="my-wallet-wrapper w-full mb-10">
         <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full grid md:grid-cols-2 gap-5">
+          <div className="balance-inquery w-full flex flex-wrap gap-2 justify-center md:justify-start">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div className="w-full h-full flex justify-center">
+                <div className="w-[350px] h-full">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))

src/components/MyWallet/WalletItemCard.jsx

@@ -36,76 +36,54 @@ export default function WalletItemCard({ walletItem, payment }) {
   return (
     <>
       <div
-        className={`current-balance-widget w-[350px] h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 pt-9 pb-20`}
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet xxs:flex justify-between items-start gap-3">
-          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+        {/* <div className="w-[350px]"> */}
+          <div className="wallet w-full flex justify-between items-start gap-3">
+            <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+              <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            </div>
+            <div className="balance w-full mt-2 flex justify-center">
+              <div className="">
+                <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+                  Current Balance
+                </p>
+                <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+                  {PriceFormatter(
+                    walletItem.amount * 0.01,
+                    walletItem.code,
+                    undefined,
+                    "text-[2rem]"
+                  )}
+                </p>
+              </div>
+            </div>
           </div>
-          <div className="balance mt-2">
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-              Current Balance
-            </p>
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+
+          <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
+            HOLDINGS :{" "}
+            <span className="mt-1">
               {PriceFormatter(
-                walletItem.amount * 0.01,
+                walletItem.escrow * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </p>
-            <p className="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
-              HOLDINGS :{" "}
-              <span className="mt-1">
-                {PriceFormatter(
-                  walletItem.escrow * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </span>
-            </p>
-          </div>
-        </div>
-        {/* <div className="flex justify-center items-center">
-          <div className="balance">
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-              Current Balance
-            </p>
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-              {PriceFormatter(
-                walletItem.amount * 0.01,
-                walletItem.code,
-                undefined,
-                "text-[2rem]"
-              )}
-            </p>
-            <p className="text-lg text-white tracking-wide">
-              HOLDINGS :{" "}
-              <span className="mt-1">
-                {PriceFormatter(
-                  walletItem.escrow * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </span>
-            </p>
-          </div>
-        </div> */}
+            </span>
+          </p>
+          {/* for white underline */}
+          <div className="my-2 w-full h-[1px] bg-white"></div> 
 
-        {/* for white underline */}
-        <div className="my-2 w-full h-[1px] bg-white"></div> 
-
-        {!accountType ? (
-          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
-        )
-        :
-        null
-      }
+          {!accountType ? (
+            <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+          )
+          :
+          null
+          }
+        {/* </div> */}
       </div>
       {creditPopup.show && (
         <CreditPopup