Merge pull request #169 from blockworks-foundation/align-menus
make menus consistent
This commit is contained in:
saml33
GitHub
commit
11d9a1bff8
|
|
@ -1,6 +1,6 @@
|
|||
import { useCallback, useState } from 'react'
|
||||
import { Fragment, useCallback, useState } from 'react'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { Menu } from '@headlessui/react'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
import {
|
||||
CurrencyDollarIcon,
|
||||
DuplicateIcon,
|
||||
|
|
@ -50,49 +50,63 @@ const ConnectWalletButton = () => {
|
|||
<>
|
||||
{connected && wallet?.publicKey ? (
|
||||
<Menu>
|
||||
<div className="relative" id="profile-menu-tip">
|
||||
<Menu.Button className="bg-th-bkg-4 flex items-center justify-center rounded-full w-10 h-10 text-white focus:outline-none hover:bg-th-bkg-4 hover:text-th-fgd-3">
|
||||
{pfp?.isAvailable ? (
|
||||
<img alt="" src={pfp.url} className="rounded-full" />
|
||||
) : (
|
||||
<ProfileIcon className="h-6 w-6" />
|
||||
)}
|
||||
</Menu.Button>
|
||||
<Menu.Items className="bg-th-bkg-1 mt-2 p-1 absolute right-0 shadow-lg outline-none rounded-md w-48 z-20">
|
||||
<Menu.Item>
|
||||
<button
|
||||
className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
|
||||
onClick={() => setShowAccountsModal(true)}
|
||||
>
|
||||
<CurrencyDollarIcon className="h-4 w-4" />
|
||||
<div className="pl-2 text-left">{t('accounts')}</div>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<button
|
||||
className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
|
||||
onClick={() => copyToClipboard(wallet?.publicKey)}
|
||||
>
|
||||
<DuplicateIcon className="h-4 w-4" />
|
||||
<div className="pl-2 text-left">{t('copy-address')}</div>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<button
|
||||
className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
|
||||
onClick={() => wallet.disconnect()}
|
||||
>
|
||||
<LogoutIcon className="h-4 w-4" />
|
||||
<div className="pl-2 text-left">
|
||||
<div className="pb-0.5">{t('disconnect')}</div>
|
||||
<div className="text-th-fgd-4 text-xs">
|
||||
{abbreviateAddress(wallet?.publicKey)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</div>
|
||||
{({ open }) => (
|
||||
<div className="relative" id="profile-menu-tip">
|
||||
<Menu.Button className="bg-th-bkg-4 flex items-center justify-center rounded-full w-10 h-10 text-white focus:outline-none hover:bg-th-bkg-4 hover:text-th-fgd-3">
|
||||
{pfp?.isAvailable ? (
|
||||
<img alt="" src={pfp.url} className="rounded-full" />
|
||||
) : (
|
||||
<ProfileIcon className="h-6 w-6" />
|
||||
)}
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
appear={true}
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition-all ease-in duration-200"
|
||||
enterFrom="opacity-0 transform scale-75"
|
||||
enterTo="opacity-100 transform scale-100"
|
||||
leave="transition ease-out duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Menu.Items className="absolute bg-th-bkg-3 mt-1 px-4 py-2.5 right-0 rounded-md space-y-1.5 w-48 z-20">
|
||||
<Menu.Item>
|
||||
<button
|
||||
className="flex flex-row font-normal items-center py-0.5 rounded-none w-full hover:text-th-primary hover:cursor-pointer focus:outline-none"
|
||||
onClick={() => setShowAccountsModal(true)}
|
||||
>
|
||||
<CurrencyDollarIcon className="h-4 w-4" />
|
||||
<div className="pl-2 text-left">{t('accounts')}</div>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<button
|
||||
className="flex flex-row font-normal items-center py-0.5 rounded-none w-full hover:text-th-primary hover:cursor-pointer focus:outline-none"
|
||||
onClick={() => copyToClipboard(wallet?.publicKey)}
|
||||
>
|
||||
<DuplicateIcon className="h-4 w-4" />
|
||||
<div className="pl-2 text-left">{t('copy-address')}</div>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<button
|
||||
className="flex flex-row font-normal items-center py-0.5 rounded-none w-full hover:text-th-primary hover:cursor-pointer focus:outline-none"
|
||||
onClick={() => wallet.disconnect()}
|
||||
>
|
||||
<LogoutIcon className="h-4 w-4" />
|
||||
<div className="pl-2 text-left">
|
||||
<div className="pb-0.5">{t('disconnect')}</div>
|
||||
<div className="text-th-fgd-4 text-xs">
|
||||
{abbreviateAddress(wallet?.publicKey)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Menu>
|
||||
) : (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const DropMenu: FunctionComponent<DropMenuProps> = ({
|
|||
>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`default-transition py-1.5 hover:text-th-primary hover:cursor-pointer tracking-wider whitespace-nowrap ${
|
||||
className={`default-transition text-th-fgd-1 hover:text-th-primary hover:cursor-pointer tracking-wider whitespace-nowrap ${
|
||||
selected && `text-th-primary`
|
||||
} ${option.icon && `flex items-center`}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -69,13 +69,13 @@ export default function NavDropMenu({
|
|||
{linksArray.map(([name, href, isExternal]) =>
|
||||
!isExternal ? (
|
||||
<Link href={href} key={href}>
|
||||
<a className="block py-1.5 text-th-fgd-1 whitespace-nowrap hover:text-th-primary">
|
||||
<a className="block py-1 text-th-fgd-1 whitespace-nowrap hover:text-th-primary">
|
||||
{name}
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<a
|
||||
className="block py-1.5 text-th-fgd-1 whitespace-nowrap hover:text-th-primary"
|
||||
className="block py-1 text-th-fgd-1 whitespace-nowrap hover:text-th-primary"
|
||||
href={href}
|
||||
key={href}
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -37,14 +37,14 @@ export default function WalletSelect() {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Menu.Items className="absolute bg-th-bkg-1 divide-y divide-th-bkg-3 rounded-md right-0 mt-1 shadow-lg outline-none w-44 z-20">
|
||||
<Menu.Items className="absolute bg-th-bkg-3 px-4 py-2.5 rounded-b-md right-0 outline-none w-44 z-20">
|
||||
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
|
||||
<Menu.Item key={name}>
|
||||
<button
|
||||
className="flex flex-row items-center justify-between rounded-none text-xs w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
|
||||
className="flex flex-row items-center justify-between py-1 rounded-none w-full hover:text-th-primary hover:cursor-pointer font-normal focus:outline-none"
|
||||
onClick={() => handleSelectProvider(url)}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex items-center">
|
||||
<img src={icon} className="w-4 h-4 mr-2" />
|
||||
{name}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ a {
|
|||
}
|
||||
|
||||
li {
|
||||
@apply mb-2 text-sm text-th-fgd-3 last:mb-0;
|
||||
@apply mb-2.5 text-sm text-th-fgd-3 last:mb-0;
|
||||
}
|
||||
|
||||
tbody {
|
||||
|
|
|
|||
Loading…
Reference in New Issue