Merge pull request #169 from blockworks-foundation/align-menus

make menus consistent

components/ConnectWalletButton.tsx

@@ -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,6 +50,7 @@ const ConnectWalletButton = () => {
     <>
       {connected && wallet?.publicKey ? (
         <Menu>
+          {({ 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 ? (
@@ -58,10 +59,21 @@ const ConnectWalletButton = () => {
                   <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">
+              <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 rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
+                      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" />
@@ -70,7 +82,7 @@ const ConnectWalletButton = () => {
                   </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"
+                      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" />
@@ -79,7 +91,7 @@ const ConnectWalletButton = () => {
                   </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"
+                      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" />
@@ -92,7 +104,9 @@ const ConnectWalletButton = () => {
                     </button>
                   </Menu.Item>
                 </Menu.Items>
+              </Transition>
             </div>
+          )}
         </Menu>
       ) : (
         <div

components/DropMenu.tsx

@@ -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`}`}
                       >

components/NavDropMenu.tsx

@@ -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"

components/WalletSelect.tsx

@@ -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>

styles/index.css

@@ -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 {