address team feedback

components/ConnectWalletButton.tsx

@@ -102,20 +102,20 @@ const ConnectWalletButton = () => {
           <button
             onClick={handleWalletConect}
             disabled={!wallet || !mangoGroup}
-            className="bg-th-bkg-4 rounded-none text-th-primary hover:brightness-[1.15] focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait"
+            className="bg-th-primary rounded-none text-th-bkg-1 hover:brightness-[1.15] focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait"
           >
-            <div className="flex flex-row items-center px-3 justify-center h-full default-transition hover:text-th-fgd-1">
+            <div className="flex flex-row items-center px-3 justify-center h-full default-transition hover:text-th-bkg-1">
               <WalletIcon className="w-4 h-4 mr-2 fill-current" />
               <div className="text-left">
                 <div className="mb-0.5 whitespace-nowrap">{t('connect')}</div>
-                <div className="font-normal text-th-fgd-3 leading-3 tracking-wider text-xxs">
+                <div className="font-normal text-th-bkg-2 leading-3 tracking-wider text-xxs">
                   {WALLET_PROVIDERS.find((p) => p.url === selectedWallet)?.name}
                 </div>
               </div>
             </div>
           </button>
           <div className="relative">
-            <WalletSelect isPrimary />
+            <WalletSelect />
           </div>
         </div>
       )}

components/TopBar.tsx

@@ -54,7 +54,6 @@ const TopBar = () => {
               <div
                 className={`hidden md:flex md:items-center md:space-x-4 lg:space-x-6 md:ml-4`}
               >
-                {/* <MenuItem href={defaultMarket.path}>{t('trade')}</MenuItem> */}
                 <TradeNavMenu />
                 <MenuItem href="/swap">{t('swap')}</MenuItem>
                 <MenuItem href="/account">{t('account')}</MenuItem>
@@ -134,7 +133,7 @@ const TopBar = () => {
                 </div>
               ) : null}
               <div className="flex">
-                <div className="pl-2">
+                <div className="pl-4">
                   <ConnectWalletButton />
                 </div>
               </div>

components/TradeNavMenu.tsx

@@ -21,14 +21,10 @@ const TradeNavMenu = () => {
   const [favoriteMarkets] = useLocalStorageState(FAVORITE_MARKETS_KEY, [])
   const [activeMenuCategory, setActiveMenuCategory] = useState('Spot')
   const [menuCategories, setMenuCategories] = useState(initialMenuCategories)
-  const [openState, setOpenState] = useState(false)
   const buttonRef = useRef(null)
   const groupConfig = useMangoGroupConfig()
   const { t } = useTranslation('common')
 
-  let timeout
-  const timeoutDuration = 200
-
   const markets =
     activeMenuCategory === 'Favorites'
       ? favoriteMarkets
@@ -41,7 +37,6 @@ const TradeNavMenu = () => {
   }
 
   const toggleMenu = () => {
-    setOpenState((openState) => !openState)
     buttonRef?.current?.click()
     if (favoriteMarkets.length > 0) {
       setActiveMenuCategory('Favorites')
@@ -50,18 +45,12 @@ const TradeNavMenu = () => {
     }
   }
 
-  const handleClick = (open) => {
-    setOpenState(!open)
-    clearTimeout(timeout)
-  }
-
   const onHoverMenu = (open, action) => {
     if (
-      (!open && !openState && action === 'onMouseEnter') ||
-      (open && openState && action === 'onMouseLeave')
+      (!open && action === 'onMouseEnter') ||
+      (open && action === 'onMouseLeave')
     ) {
-      clearTimeout(timeout)
-      timeout = setTimeout(() => toggleMenu(), timeoutDuration)
+      toggleMenu()
     }
   }
 
@@ -110,7 +99,6 @@ const TradeNavMenu = () => {
           >
             <div
               className={`flex h-14 items-center rounded-none hover:text-th-primary`}
-              onClick={() => handleClick(open)}
             >
               <span>{t('trade')}</span>
               <ChevronDownIcon
@@ -120,7 +108,6 @@ const TradeNavMenu = () => {
               />
             </div>
           </Popover.Button>
-
           <Transition
             appear={true}
             show={open}
@@ -143,7 +130,11 @@ const TradeNavMenu = () => {
               <div className="bg-th-bkg-3 col-span-2 p-4 rounded-br-lg">
                 <div className="grid grid-cols-2 grid-flow-row gap-x-6 gap-y-2.5">
                   {markets.map((mkt) => (
-                    <MarketNavItem market={mkt} key={mkt.name} />
+                    <MarketNavItem
+                      buttonRef={buttonRef}
+                      market={mkt}
+                      key={mkt.name}
+                    />
                   ))}
                 </div>
               </div>
@@ -187,13 +178,12 @@ const MenuCategories: FunctionComponent<MenuCategoriesProps> = ({
             key={cat.name}
             onClick={() => onChange(cat.name)}
             onMouseEnter={() => onChange(cat.name)}
-            className={`cursor-pointer default-transition flex flex-col h-14 justify-center px-4 relative rounded-none w-full whitespace-nowrap hover:bg-th-bkg-3
-                      ${
-                        activeCategory === cat.name
-                          ? `bg-th-bkg-3 text-th-primary`
-                          : `text-th-fgd-2 hover:text-th-primary`
-                      }
-                    `}
+            className={`cursor-pointer default-transition flex flex-col h-14 justify-center px-4 relative rounded-none w-full whitespace-nowrap hover:bg-th-bkg-3 ${
+              activeCategory === cat.name
+                ? `bg-th-bkg-3 text-th-primary`
+                : `text-th-fgd-2 hover:text-th-primary`
+            }
+          `}
           >
             {t(cat.name.toLowerCase().replace(' ', '-'))}
             <div className="text-th-fgd-4 text-xs">{t(cat.desc)}</div>

components/WalletSelect.tsx

@@ -4,7 +4,7 @@ import { ChevronDownIcon } from '@heroicons/react/solid'
 import useMangoStore from '../stores/useMangoStore'
 import { WALLET_PROVIDERS } from '../utils/wallet-adapters'
 
-export default function WalletSelect({ isPrimary = false }) {
+export default function WalletSelect() {
   const setMangoStore = useMangoStore((s) => s.set)
 
   const handleSelectProvider = (url) => {
@@ -18,14 +18,10 @@ export default function WalletSelect({ isPrimary = false }) {
       {({ open }) => (
         <>
           <Menu.Button
-            className={`bg-th-bkg-4 flex justify-center items-center h-full rounded-none focus:outline-none text-th-primary hover:brightness-[1.15] hover:text-th-fgd-1 ${
-              isPrimary
-                ? 'px-3 hover:bg-th-bkg-4'
-                : 'px-2 hover:bg-th-bkg-4 border-l border-th-fgd-4'
-            } cursor-pointer`}
+            className={`bg-th-primary flex justify-center items-center h-full rounded-none focus:outline-none text-th-bkg-1 hover:brightness-[1.15] hover:text-th-bkg-1 hover:bg-th-primary cursor-pointer w-10`}
           >
             <ChevronDownIcon
-              className={`default-transition h-4 w-4 ${
+              className={`default-transition h-5 w-5 ${
                 open ? 'transform rotate-180' : 'transform rotate-360'
               }`}
             />
@@ -41,7 +37,7 @@ export default function WalletSelect({ isPrimary = false }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Menu.Items className="absolute bg-th-bkg-1 divide-y divide-th-bkg-3 p-1 rounded-md right-0.5 mt-1 shadow-lg outline-none w-36 z-20">
+            <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">
               {WALLET_PROVIDERS.map(({ name, url, icon }) => (
                 <Menu.Item key={name}>
                   <button

components/mobile/MobileTradePage.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react'
 import { Disclosure } from '@headlessui/react'
 import dynamic from 'next/dynamic'
-import { XIcon } from '@heroicons/react/outline'
+import { SwitchHorizontalIcon, XIcon } from '@heroicons/react/outline'
 import useMangoStore from '../../stores/useMangoStore'
 import { getWeights, PerpMarket } from '@blockworks-foundation/mango-client'
 import { CandlesIcon } from '../icons'
@@ -55,34 +55,37 @@ const MobileTradePage = () => {
   return (
     <div className="pb-14 pt-4 px-2">
       <div className="relative">
-        <Link href="/select">
+        <div className="flex items-center">
+          <img
+            alt=""
+            width="30"
+            height="30"
+            src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
+            className="mr-2"
+          />
           <div className="flex items-center">
-            <img
-              alt=""
-              width="30"
-              height="30"
-              src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
-              className="mr-2"
-            />
-            <div className="flex items-center">
-              <div className="font-semibold pr-0.5 text-xl">{baseSymbol}</div>
-              <span className="text-th-fgd-4 text-xl">
-                {isPerpMarket ? '-' : '/'}
-              </span>
-              <div className="font-semibold pl-0.5 text-xl">
-                {isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
-              </div>
-            </div>
-            <span className="border border-th-primary ml-2 px-1 py-0.5 rounded text-xs text-th-primary">
-              {initLeverage}x
+            <div className="font-semibold pr-0.5 text-xl">{baseSymbol}</div>
+            <span className="text-th-fgd-4 text-xl">
+              {isPerpMarket ? '-' : '/'}
             </span>
+            <div className="font-semibold pl-0.5 text-xl">
+              {isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
+            </div>
           </div>
-        </Link>
+          <span className="border border-th-primary ml-2 px-1 py-0.5 rounded text-xs text-th-primary">
+            {initLeverage}x
+          </span>
+          <Link href="/select">
+            <div className="flex items-center justify-center h-10 ml-2 w-10">
+              <SwitchHorizontalIcon className="h-5 w-5" />
+            </div>
+          </Link>
+        </div>
         <Disclosure>
           {({ open }) => (
             <>
               <Disclosure.Button>
-                <div className="absolute right-0 top-0 bg-th-bkg-4 flex items-center justify-center rounded-full w-8 h-8 text-th-fgd-1 focus:outline-none hover:text-th-primary">
+                <div className="absolute right-0 top-1 bg-th-bkg-4 flex items-center justify-center rounded-full w-8 h-8 text-th-fgd-1 focus:outline-none hover:text-th-primary">
                   {open ? (
                     <XIcon className="h-4 w-4" />
                   ) : (