WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

made balance container take whole width

Browse Source
This commit is contained in:
victorAnumudu
2023-10-24 17:45:10 +01:00
parent 54560b3fec
commit e59c83d216
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/Tabs/FamilyWallet.jsx
+9 -9
View File
@@ -28,14 +28,14 @@ function FamilyWallet({familyData}) {
</div> </div>
: :
familyWallet?.data?.length > 0 ? familyWallet?.data?.length > 0 ?
<div className='p-4 flex flex-col gap-2 md:flex-row'> <div className='w-full p-4 flex flex-col gap-2'>
{familyWallet?.data?.map((wallet, index)=>( {familyWallet?.data?.map((wallet, index)=>(
<div key={index} className='p-4 bg-[aliceblue] rounded-lg' <div key={index} className='w-full p-4 bg-[aliceblue] rounded-lg'
style={{ // style={{
background: `url(${background}) 0% 0% / cover no-repeat`, // background: `url(${background}) 0% 0% / cover no-repeat`,
}} // }}
> >
<div className="flex justify-between items-center gap-3"> <div className="w-full flex justify-start items-center gap-3">
<div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center"> <div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
<img <img
src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)} src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
@@ -45,18 +45,18 @@ function FamilyWallet({familyData}) {
</div> </div>
<div className="balance mt-2 flex justify-center"> <div className="balance mt-2 flex justify-center">
<div className="flex gap-2"> <div className="flex gap-2">
<p className="text-base sm:text-lg opacity-[70%] text-white tracking-wide mb-2 sm:mb-6"> <p className="text-base md:text-lg text-thin-light-gray tracking-wide mb-2 sm:mb-6">
Balance: Balance:
</p> </p>
<p <p
className="text-sm lg:text-base font-bold text-white tracking-wide leading-10" className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
// className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125" // className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
> >
{PriceFormatter( {PriceFormatter(
Number(wallet.amount) * 0.01, Number(wallet.amount) * 0.01,
wallet.code, wallet.code,
wallet.country, wallet.country,
"text-base" ""
)} )}
</p> </p>
</div> </div>