wallet card adjustment

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 flex flex-wrap justify-center gap-2">
+          <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-[350px] 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="w-[350px]"> */}
-          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+          <div className="wallet w-full flex justify-between items-start gap-3">
-            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            <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">
+          <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
-              Current Balance
+            HOLDINGS :{" "}
-            </p>
+            <span className="mt-1">
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
               {PriceFormatter(
-                walletItem.amount * 0.01,
+                walletItem.escrow * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </p>
+            </span>
-            <p className="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
+          </p>
-              HOLDINGS :{" "}
+          {/* for white underline */}
-              <span className="mt-1">
+          <div className="my-2 w-full h-[1px] bg-white"></div> 
-                {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> */}
 
-        {/* for white underline */}
+          {!accountType ? (
-        <div className="my-2 w-full h-[1px] bg-white"></div> 
+            <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
-
+          )
-        {!accountType ? (
+          :
-          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+          null
-        )
+          }
-        :
+        {/* </div> */}
-        null
-      }
       </div>
       {creditPopup.show && (
         <CreditPopup