wallet font adjusted

src/components/MyWallet/FamilyWalletBox.jsx

@@ -5,6 +5,8 @@ import WalletItemCardFamily from "./WalletItemCardFamily";
 import { useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import SearchCom from "../Helpers/SearchCom";
+import { localImgLoad } from "../../lib";
+import background from "../../assets/images/bg-sky-blue.jpg";
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -36,6 +38,9 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
     // setFilteredRedeemData({value:target.value, data: filteredData})
   }
 
+  const image = selectedWallet.code
+  ? `${selectedWallet.code.toLowerCase()}.svg`
+  : "default.png";
 
 
   return (
@@ -55,15 +60,23 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
                         <button className="py-0.5 px-1 mb-1 rounded-lg border border-orange-500" key={item.wallet_uid} name={item.code}>{item.code}</button>
                       ))}
                     </div>
-                    <div className="p-5 rounded-2xl bg-white-opacity h-60">
+                    <div className="p-5 rounded-2xl bg-white-opacity"
+                        style={{
+                          background: `url(${background}) 0% 0% / cover no-repeat`,
+                        }}
+                      >
                       {/* image */}
-                      <div className="w-full flex">
-                        <div className="w-32 h-32 rounded-full bg-blue-900 flex justify-center items-center">
-                          <div className="w-20 h-20 bg-slate-600 rounded-sm"></div>
-                        </div>
+                      <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                        <img
+                          src={localImgLoad(`images/currency/${image}`)}
+                          className="w-full h-full"
+                          alt="currency-icon"
+                        />
                       </div>
-                      <p className="text-white py-2 text-base">Current Balance</p>
-                      <p className="text-white text-2xl">{PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code)}</p>
+                      <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
+                      <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
+                        {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
+                      </p>
                     </div>
                   </div>
                   <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px]">