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

add symbol to account selectors, add max-height to listbox options and remove overflow-hidden from modal

This commit is contained in:
saml33 2021-04-19 13:21:22 +10:00
parent f6938720be
commit 54054880a7
3 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/AccountSelect.jsx
View File

@ -48,7 +48,7 @@ const AccountSelect = ({
{({ open }) => (
<>
<Listbox.Button
className={`border border-th-fgd-4 bg-th-bkg-1 rounded-md default-transition hover:border-th-primary focus:outline-none focus:border-th-primary p-2 h-10 w-full font-normal`}
className={`border border-th-fgd-4 bg-th-bkg-1 rounded-md default-transition hover:border-th-primary focus:outline-none focus:border-th-primary p-2 w-full font-normal`}
>
<div
className={`flex items-center text-th-fgd-1 justify-between`}
@ -64,7 +64,14 @@ const AccountSelect = ({
).toLowerCase()}.svg`}
className={`mr-2`}
/>
<div className="text-left">
{getSymbolForTokenMintAddress(
selectedAccount?.account?.mint.toString()
)}
<div className="text-xs text-th-fgd-4">
{abbreviateAddress(selectedAccount?.publicKey)}
</div>
</div>
<div className={`ml-4 text-right flex-grow`}>
{!hideBalance
? getBalanceForAccount(selectedAccount)
@ -92,7 +99,7 @@ const AccountSelect = ({
leaveTo="transform scale-95 opacity-0"
> */}
<Listbox.Options
className={`z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-full`}
className={`z-20 p-1 absolute right-0 top-13 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-full max-h-60 overflow-auto`}
>
<div className="flex justify-between">
<div className={`text-th-fgd-4 p-2`}>Accounts</div>
@ -123,13 +130,15 @@ const AccountSelect = ({
className="mr-2"
/>
<div className={`flex-grow text-left`}>
{symbolForAccount}
<div className="text-xs text-th-fgd-4">
{abbreviateAddress(selectedAccount?.publicKey)}
</div>
</div>
<div className={`text-sm`}>
{!hideBalance
? getBalanceForAccount(account)
: getMaxForSelectedAccount(account)}{' '}
{symbolForAccount}
</div>
</div>
</div>

14
components/MangoSrmAccountSelector.jsx
View File

@ -28,7 +28,7 @@ const MangoSrmAccountSelector = ({
{({ open }) => (
<>
<Listbox.Button
className={`border border-th-fgd-4 bg-th-bkg-1 rounded-md default-transition hover:border-th-primary focus:outline-none focus:border-th-primary p-2 h-10 w-full font-normal`}
className={`border border-th-fgd-4 bg-th-bkg-1 rounded-md default-transition hover:border-th-primary focus:outline-none focus:border-th-primary p-2 w-full font-normal`}
>
<div
className={`flex items-center text-th-fgd-1 justify-between`}
@ -41,7 +41,12 @@ const MangoSrmAccountSelector = ({
src={`/assets/icons/SRM.svg`}
className={`mr-2`}
/>
<div className="text-left">
SRM
<div className="text-xs text-th-fgd-4">
{abbreviateAddress(selectedAccount?.publicKey)}
</div>
</div>
<div className={`ml-4 text-right flex-grow`}>
{getBalanceForAccount(selectedAccount)}
</div>
@ -56,7 +61,7 @@ const MangoSrmAccountSelector = ({
{open ? (
<Listbox.Options
static
className={`z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-full`}
className={`z-20 p-1 absolute right-0 top-13 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-full max-h-60 overflow-auto`}
>
<div className={`text-th-fgd-4 p-2`}>SRM Accounts</div>
{accounts.map((account) => {
@ -80,10 +85,13 @@ const MangoSrmAccountSelector = ({
className="mr-2"
/>
<div className={`flex-grow text-left`}>
SRM
<div className="text-xs text-th-fgd-4">
{abbreviateAddress(account?.publicKey)}
</div>
</div>
<div className={`text-sm`}>
{getBalanceForAccount(account)} SRM
{getBalanceForAccount(account)}
</div>
</div>
</div>

2
components/Modal.tsx
View File

@ -29,7 +29,7 @@ const Modal = ({ isOpen, onClose, children, hideClose }) => {
{isOpen ? (
<div
className="inline-block bg-th-bkg-2
rounded-lg text-left overflow-hidden shadow-lg transform transition-all
rounded-lg text-left shadow-lg transform transition-all
sm:my-8 align-middle sm:max-w-md w-full"
>
{!hideClose ? (