condense top nav bar items
This commit is contained in:
tjs
parent
366617dc5c
commit
150e59454e
|
|
@ -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' : ''}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue