From 150e59454e51ad8d8a1349df93a25a8b7ba89358 Mon Sep 17 00:00:00 2001
From: tjs <tjshipe@gmail.com>
Date: Wed, 9 Feb 2022 22:33:43 -0500
Subject: [PATCH] condense top nav bar items

---
 components/MenuItem.tsx           |  2 +-
 components/NavDropMenu.tsx        | 21 +++++++++---
 components/Orderbook.tsx          |  2 +-
 components/RecentMarketTrades.tsx |  2 +-
 components/TopBar.tsx             | 54 ++++++-------------------------
 components/TradeHistoryTable.tsx  |  4 ++-
 styles/index.css                  |  2 +-
 tailwind.config.js                |  6 ++--
 8 files changed, 35 insertions(+), 58 deletions(-)

diff --git a/components/MenuItem.tsx b/components/MenuItem.tsx
index 4a1ee7b8..378c8d4d 100644
--- a/components/MenuItem.tsx
+++ b/components/MenuItem.tsx
@@ -8,7 +8,7 @@ const MenuItem = ({ href, children, newWindow = false }) => {
   return (
     <Link href={href} shallow={true}>
       <a
-        className={`border-b border-th-bkg-4 md:border-none flex justify-between text-th-fgd-1 font-bold items-center md:px-1 py-3 md:py-0 hover:text-th-primary
+        className={`h-full border-b border-th-bkg-4 md:border-none flex justify-between text-th-fgd-1 font-bold items-center md:px-2 lg:px-4 py-3 md:py-0 hover:text-th-primary
           ${asPath === href ? `text-th-primary` : `border-transparent`}
         `}
         target={newWindow ? '_blank' : ''}
diff --git a/components/NavDropMenu.tsx b/components/NavDropMenu.tsx
index 207784bc..6b03b90e 100644
--- a/components/NavDropMenu.tsx
+++ b/components/NavDropMenu.tsx
@@ -1,9 +1,17 @@
 import { useRef, useState } from 'react'
 import { Popover } from '@headlessui/react'
-import { DotsHorizontalIcon } from '@heroicons/react/solid'
+import { ChevronDownIcon } from '@heroicons/react/outline'
 import Link from 'next/link'
 
-export default function NavDropMenu({ menuTitle = '', linksArray = [] }) {
+type NavDropMenuProps = {
+  menuTitle: string | React.ReactNode
+  linksArray: [string, string, boolean][]
+}
+
+export default function NavDropMenu({
+  menuTitle = '',
+  linksArray = [],
+}: NavDropMenuProps) {
   const buttonRef = useRef(null)
   const [openState, setOpenState] = useState(false)
 
@@ -34,13 +42,16 @@ export default function NavDropMenu({ menuTitle = '', linksArray = [] }) {
             onMouseLeave={() => onHover(open, 'onMouseLeave')}
             className="flex flex-col"
           >
-            <Popover.Button className="h-10 focus:outline-none" ref={buttonRef}>
+            <Popover.Button
+              className="h-10 text-th-fgd-1 hover:text-th-primary md:px-2 lg:px-4 focus:outline-none transition-none"
+              ref={buttonRef}
+            >
               <div
-                className="flex items-center text-th-fgd-1 hover:text-th-primary"
+                className="flex items-center"
                 onClick={() => handleClick(open)}
               >
                 <span className="font-bold">{menuTitle}</span>
-                <DotsHorizontalIcon
+                <ChevronDownIcon
                   className="h-4 w-4 default-transition ml-1.5"
                   aria-hidden="true"
                 />
diff --git a/components/Orderbook.tsx b/components/Orderbook.tsx
index ef1ed058..13605377 100644
--- a/components/Orderbook.tsx
+++ b/components/Orderbook.tsx
@@ -691,7 +691,7 @@ const OrderbookRow = React.memo<any>(
             <div className="flex justify-between w-full hover:font-semibold">
               <div
                 onClick={handlePriceClick}
-                className={`z-10 text-xs leading-5 md:leading-6 text-th-fgd-1 md:pl-5 ${
+                className={`z-10 text-xs leading-5 md:leading-6 md:pl-5 ${
                   side === 'buy'
                     ? `text-th-green`
                     : `text-th-red brightness-125`
diff --git a/components/RecentMarketTrades.tsx b/components/RecentMarketTrades.tsx
index 57761107..25c600b4 100644
--- a/components/RecentMarketTrades.tsx
+++ b/components/RecentMarketTrades.tsx
@@ -78,7 +78,7 @@ export default function RecentMarketTrades() {
                     )
                   : ''}
               </div>
-              <div className={`text-right text-th-fgd-4`}>
+              <div className={`text-right text-th-fgd-3`}>
                 {trade.time && new Date(trade.time).toLocaleTimeString()}
               </div>
             </div>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 6d40a964..48851f29 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -13,11 +13,11 @@ import { DEFAULT_MARKET_KEY, initialMarket } from './SettingsModal'
 import { useTranslation } from 'next-i18next'
 import Settings from './Settings'
 
-const StyledNewLabel = ({ children, ...props }) => (
-  <div style={{ fontSize: '0.5rem', marginLeft: '1px' }} {...props}>
-    {children}
-  </div>
-)
+// const StyledNewLabel = ({ children, ...props }) => (
+//   <div style={{ fontSize: '0.5rem', marginLeft: '1px' }} {...props}>
+//     {children}
+//   </div>
+// )
 
 const TopBar = () => {
   const { t } = useTranslation('common')
@@ -50,58 +50,22 @@ const TopBar = () => {
                   />
                 </div>
               </Link>
-              <div
-                className={`hidden md:flex md:items-center md:space-x-4 lg:space-x-6 md:ml-4`}
-              >
+              <div className={`hidden md:flex md:items-center md:ml-4`}>
                 <MenuItem href={defaultMarket.path}>{t('trade')}</MenuItem>
                 <MenuItem href="/swap">{t('swap')}</MenuItem>
                 <MenuItem href="/account">{t('account')}</MenuItem>
                 <MenuItem href="/borrow">{t('borrow')}</MenuItem>
-                <div className="relative">
-                  <MenuItem href="/risk-calculator">
-                    {t('calculator')}
-                    <div>
-                      <div className="absolute flex items-center justify-center h-4 px-1.5 bg-gradient-to-br from-red-500 to-yellow-500 rounded-full -right-5 -top-3">
-                        <StyledNewLabel className="text-white uppercase">
-                          new
-                        </StyledNewLabel>
-                      </div>
-                    </div>
-                  </MenuItem>
-                </div>
                 <MenuItem href="/stats">{t('stats')}</MenuItem>
-                <MenuItem href="https://docs.mango.markets/" newWindow>
-                  {t('learn')}
-                </MenuItem>
                 <NavDropMenu
                   menuTitle={t('more')}
                   // linksArray: [name: string, href: string, isExternal: boolean]
                   linksArray={[
-                    ['Mango v1', 'https://v1.mango.markets', true],
+                    [t('calculator'), '/risk-calculator', false],
+                    [t('learn'), 'https://docs.mango.markets/', true],
                     ['Mango v2', 'https://v2.mango.markets', true],
+                    ['Mango v1', 'https://v1.mango.markets', true],
                   ]}
                 />
-                {/* <button
-                  onClick={() => {
-                    handleLocaleChange('en')
-                  }}
-                >
-                  English
-                </button>
-                <button
-                  onClick={() => {
-                    handleLocaleChange('zh')
-                  }}
-                >
-                  简体中文
-                </button>
-                <button
-                  onClick={() => {
-                    handleLocaleChange('zh_tw')
-                  }}
-                >
-                  繁體中文
-                </button> */}
               </div>
             </div>
             <div className="flex items-center">
diff --git a/components/TradeHistoryTable.tsx b/components/TradeHistoryTable.tsx
index 3ccd8ad5..278b908f 100644
--- a/components/TradeHistoryTable.tsx
+++ b/components/TradeHistoryTable.tsx
@@ -263,7 +263,9 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
                           <Td className="!py-2 ">
                             {formatUsdValue(trade.value)}
                           </Td>
-                          <Td className="!py-2 ">{t(trade.liquidity.toLowerCase())}</Td>
+                          <Td className="!py-2 ">
+                            {t(trade.liquidity.toLowerCase())}
+                          </Td>
                           <Td className="!py-2 ">
                             {formatUsdValue(trade.feeCost)}
                           </Td>
diff --git a/styles/index.css b/styles/index.css
index 5e66d303..51549ada 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -88,7 +88,7 @@ a {
 
 button {
   transition: all 0.3s ease;
-  @apply font-semibold rounded-md tracking-wider;
+  @apply rounded-md tracking-wider;
 }
 
 button.transition-none {
diff --git a/tailwind.config.js b/tailwind.config.js
index 8ef28068..581fbbc4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,7 +31,7 @@ module.exports = {
           red: { DEFAULT: '#CC2929', dark: '#AA2222', muted: '#eba9a9' },
           green: { DEFAULT: '#5EBF4D', dark: '#4BA53B', muted: '#bfe5b8' },
           'bkg-1': '#f7f7f7',
-          'bkg-2': '#FFFFFF',
+          'bkg-2': '#FDFDFD',
           'bkg-3': '#F0F0F0',
           'bkg-4': '#E6E6E6',
           'fgd-1': '#061f23',
@@ -51,8 +51,8 @@ module.exports = {
           'bkg-2': '#1B1B1F',
           'bkg-3': '#27272B',
           'bkg-4': '#38383D',
-          'fgd-1': '#E1E1E1',
-          'fgd-2': '#D1D1D1',
+          'fgd-1': '#D1D1D1',
+          'fgd-2': '#C8C8C8',
           'fgd-3': '#B3B3B3',
           'fgd-4': '#878787',
         },