blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

give balances more space in action modals

This commit is contained in:
saml33 2023-01-06 12:19:39 +11:00
parent 8a04998374
commit a5e06517d3
11 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/BorrowForm.tsx
View File

@ -205,14 +205,14 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
<ArrowLeftIcon className={`h-6 w-6`} /> <ArrowLeftIcon className={`h-6 w-6`} />
</button> </button>
<h2 className="mb-4 text-center text-lg">{t('select-borrow-token')}</h2> <h2 className="mb-4 text-center text-lg">{t('select-borrow-token')}</h2>
<div className="grid auto-cols-fr grid-flow-col px-4 pb-2"> <div className="flex items-center px-4 pb-2">
<div className=""> <div className="w-1/4">
<p className="text-xs">{t('token')}</p> <p className="text-xs">{t('token')}</p>
</div> </div>
<div className="text-right"> <div className="w-1/4 text-right">
<p className="text-xs">{t('borrow-rate')}</p> <p className="text-xs">{t('borrow-rate')}</p>
</div> </div>
<div className="text-right"> <div className="w-1/2 text-right">
<p className="whitespace-nowrap text-xs">{t('max-borrow')}</p> <p className="whitespace-nowrap text-xs">{t('max-borrow')}</p>
</div> </div>
</div> </div>

8
components/DepositForm.tsx
View File

@ -221,14 +221,14 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
<h2 className="mb-4 text-center text-lg"> <h2 className="mb-4 text-center text-lg">
{t('select-deposit-token')} {t('select-deposit-token')}
</h2> </h2>
<div className="grid auto-cols-fr grid-flow-col px-4 pb-2"> <div className="flex items-center px-4 pb-2">
<div className="text-left"> <div className="w-1/4 text-left">
<p className="text-xs">{t('token')}</p> <p className="text-xs">{t('token')}</p>
</div> </div>
<div className="text-right"> <div className="w-1/4 text-right">
<p className="text-xs">{t('deposit-rate')}</p> <p className="text-xs">{t('deposit-rate')}</p>
</div> </div>
<div className="text-right"> <div className="w-1/2 text-right">
<p className="whitespace-nowrap text-xs">{t('wallet-balance')}</p> <p className="whitespace-nowrap text-xs">{t('wallet-balance')}</p>
</div> </div>
</div> </div>

6
components/RepayForm.tsx
View File

@ -194,11 +194,11 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
<ArrowLeftIcon className={`h-6 w-6`} /> <ArrowLeftIcon className={`h-6 w-6`} />
</button> </button>
<h2 className="mb-4 text-center text-lg">{t('select-repay-token')}</h2> <h2 className="mb-4 text-center text-lg">{t('select-repay-token')}</h2>
<div className="grid auto-cols-fr grid-flow-col px-4 pb-2"> <div className="flex items-center px-4 pb-2">
<div className="text-left"> <div className="w-1/2 text-left">
<p className="text-xs">{t('token')}</p> <p className="text-xs">{t('token')}</p>
</div> </div>
<div className="text-right"> <div className="w-1/2 text-right">
<p className="whitespace-nowrap text-xs">{t('amount-owed')}</p> <p className="whitespace-nowrap text-xs">{t('amount-owed')}</p>
</div> </div>
</div> </div>

6
components/WithdrawForm.tsx
View File

@ -183,11 +183,11 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
<h2 className="mb-4 text-center text-lg"> <h2 className="mb-4 text-center text-lg">
{t('select-withdraw-token')} {t('select-withdraw-token')}
</h2> </h2>
<div className="grid auto-cols-fr grid-flow-col px-4 pb-2"> <div className="flex items-center px-4 pb-2">
<div className="text-left"> <div className="w-1/2 text-left">
<p className="text-xs">{t('token')}</p> <p className="text-xs">{t('token')}</p>
</div> </div>
<div className="flex justify-end"> <div className="w-1/2 text-right">
<p className="text-xs">{t('available-balance')}</p> <p className="text-xs">{t('available-balance')}</p>
</div> </div>
</div> </div>

18
components/account/ActionTokenItem.tsx
View File

@ -30,11 +30,15 @@ const ActionTokenItem = ({
return ( return (
<button <button
className="default-transition flex grid w-full auto-cols-fr grid-flow-col items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4" className="default-transition flex w-full items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
onClick={() => onSelect(name)} onClick={() => onSelect(name)}
disabled={customValue <= 0} disabled={customValue <= 0}
> >
<div className="flex items-center"> <div
className={`flex ${
!showBorrowRates && !showDepositRates ? 'w-1/2' : 'w-1/4'
} items-center`}
>
<div className="mr-2.5 flex flex-shrink-0 items-center"> <div className="mr-2.5 flex flex-shrink-0 items-center">
<Image <Image
alt="" alt=""
@ -46,21 +50,23 @@ const ActionTokenItem = ({
<p className="text-th-fgd-1">{name}</p> <p className="text-th-fgd-1">{name}</p>
</div> </div>
{showDepositRates ? ( {showDepositRates ? (
<div className="text-right font-mono"> <div className="w-1/4 text-right font-mono">
<p className="text-th-up"> <p className="text-th-up">
{formatDecimal(bank.getDepositRate().toNumber(), 2)}% {formatDecimal(bank.getDepositRate().toNumber(), 2)}%
</p> </p>
</div> </div>
) : null} ) : null}
{showBorrowRates ? ( {showBorrowRates ? (
<div className="text-right font-mono"> <div className="w-1/4 text-right font-mono">
<p className="text-th-down"> <p className="text-th-down">
{formatDecimal(bank.getBorrowRate().toNumber(), 2)}% {formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
</p> </p>
</div> </div>
) : null} ) : null}
<div className="text-right"> <div className="w-1/2 pl-3 text-right">
<p className="font-mono text-th-fgd-1">{formatDecimal(customValue)}</p> <p className="truncate font-mono text-th-fgd-1">
{formatDecimal(customValue)}
</p>
</div> </div>
</button> </button>
) )

8
components/modals/UserSetupModal.tsx
View File

@ -546,14 +546,14 @@ const UserSetupModal = ({
className="thin-scroll absolute top-36 w-full overflow-auto" className="thin-scroll absolute top-36 w-full overflow-auto"
style={{ height: 'calc(100vh - 380px)' }} style={{ height: 'calc(100vh - 380px)' }}
> >
<div className="grid auto-cols-fr grid-flow-col px-4 pb-2"> <div className="flex items-center px-4 pb-2">
<div className=""> <div className="w-1/4">
<p className="text-xs">{t('token')}</p> <p className="text-xs">{t('token')}</p>
</div> </div>
<div className="text-right"> <div className="w-1/4 text-right">
<p className="text-xs">{t('deposit-rate')}</p> <p className="text-xs">{t('deposit-rate')}</p>
</div> </div>
<div className="text-right"> <div className="w-1/2 text-right">
<p className="whitespace-nowrap text-xs"> <p className="whitespace-nowrap text-xs">
{t('wallet-balance')} {t('wallet-balance')}
</p> </p>

4
public/locales/en/common.json
View File

@ -25,7 +25,7 @@
"borrow-amount": "Borrow Amount", "borrow-amount": "Borrow Amount",
"borrow-fee": "Borrow Fee", "borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds", "borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)", "borrow-rate": "Borrow APR",
"buy": "Buy", "buy": "Buy",
"cancel": "Cancel", "cancel": "Cancel",
"chart-unavailable": "Chart Unavailable", "chart-unavailable": "Chart Unavailable",
@ -55,7 +55,7 @@
"deposit": "Deposit", "deposit": "Deposit",
"deposit-amount": "Deposit Amount", "deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions", "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)", "deposit-rate": "Deposit APR",
"disconnect": "Disconnect", "disconnect": "Disconnect",
"edit-account": "Edit Account Name", "edit-account": "Edit Account Name",
"edit-profile-image": "Edit Profile Image", "edit-profile-image": "Edit Profile Image",

4
public/locales/es/common.json
View File

@ -25,7 +25,7 @@
"borrow-amount": "Borrow Amount", "borrow-amount": "Borrow Amount",
"borrow-fee": "Borrow Fee", "borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds", "borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)", "borrow-rate": "Borrow APR",
"buy": "Buy", "buy": "Buy",
"cancel": "Cancel", "cancel": "Cancel",
"chart-unavailable": "Chart Unavailable", "chart-unavailable": "Chart Unavailable",
@ -55,7 +55,7 @@
"deposit": "Deposit", "deposit": "Deposit",
"deposit-amount": "Deposit Amount", "deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions", "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)", "deposit-rate": "Deposit APR",
"disconnect": "Disconnect", "disconnect": "Disconnect",
"edit-account": "Edit Account Name", "edit-account": "Edit Account Name",
"edit-profile-image": "Edit Profile Image", "edit-profile-image": "Edit Profile Image",

4
public/locales/ru/common.json
View File

@ -25,7 +25,7 @@
"borrow-amount": "Borrow Amount", "borrow-amount": "Borrow Amount",
"borrow-fee": "Borrow Fee", "borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds", "borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)", "borrow-rate": "Borrow APR",
"buy": "Buy", "buy": "Buy",
"cancel": "Cancel", "cancel": "Cancel",
"chart-unavailable": "Chart Unavailable", "chart-unavailable": "Chart Unavailable",
@ -55,7 +55,7 @@
"deposit": "Deposit", "deposit": "Deposit",
"deposit-amount": "Deposit Amount", "deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions", "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)", "deposit-rate": "Deposit APR",
"disconnect": "Disconnect", "disconnect": "Disconnect",
"edit-account": "Edit Account Name", "edit-account": "Edit Account Name",
"edit-profile-image": "Edit Profile Image", "edit-profile-image": "Edit Profile Image",

4
public/locales/zh/common.json
View File

@ -25,7 +25,7 @@
"borrow-amount": "Borrow Amount", "borrow-amount": "Borrow Amount",
"borrow-fee": "Borrow Fee", "borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds", "borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)", "borrow-rate": "Borrow APR",
"buy": "Buy", "buy": "Buy",
"cancel": "Cancel", "cancel": "Cancel",
"chart-unavailable": "Chart Unavailable", "chart-unavailable": "Chart Unavailable",
@ -55,7 +55,7 @@
"deposit": "Deposit", "deposit": "Deposit",
"deposit-amount": "Deposit Amount", "deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions", "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)", "deposit-rate": "Deposit APR",
"disconnect": "Disconnect", "disconnect": "Disconnect",
"edit-account": "Edit Account Name", "edit-account": "Edit Account Name",
"edit-profile-image": "Edit Profile Image", "edit-profile-image": "Edit Profile Image",

4
public/locales/zh_tw/common.json
View File

@ -25,7 +25,7 @@
"borrow-amount": "Borrow Amount", "borrow-amount": "Borrow Amount",
"borrow-fee": "Borrow Fee", "borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds", "borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)", "borrow-rate": "Borrow APR",
"buy": "Buy", "buy": "Buy",
"cancel": "Cancel", "cancel": "Cancel",
"chart-unavailable": "Chart Unavailable", "chart-unavailable": "Chart Unavailable",
@ -55,7 +55,7 @@
"deposit": "Deposit", "deposit": "Deposit",
"deposit-amount": "Deposit Amount", "deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions", "deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)", "deposit-rate": "Deposit APR",
"disconnect": "Disconnect", "disconnect": "Disconnect",
"edit-account": "Edit Account Name", "edit-account": "Edit Account Name",
"edit-profile-image": "Edit Profile Image", "edit-profile-image": "Edit Profile Image",