make bottom bar brighter
This commit is contained in:
parent
3dbae5a1a9
commit
22afdb8dac
|
@ -29,6 +29,30 @@ const StyledBarItemLabel = ({
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const BottomBarLink = ({
|
||||||
|
children,
|
||||||
|
isActive,
|
||||||
|
pathName,
|
||||||
|
}: {
|
||||||
|
children: ReactNode
|
||||||
|
isActive: boolean
|
||||||
|
pathName: string
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={{
|
||||||
|
pathname: pathName,
|
||||||
|
}}
|
||||||
|
className={`${
|
||||||
|
isActive ? 'text-th-active' : 'text-th-fgd-2'
|
||||||
|
} col-span-1 flex flex-col items-center justify-center`}
|
||||||
|
shallow={true}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const BottomBar = () => {
|
const BottomBar = () => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
const { asPath } = useRouter()
|
const { asPath } = useRouter()
|
||||||
|
@ -36,59 +60,32 @@ const BottomBar = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="grid grid-cols-5 grid-rows-1 bg-th-bkg-2 py-2.5">
|
<div className="grid h-12 grid-cols-5 grid-rows-1 bg-th-bkg-3 shadow-bottomBar">
|
||||||
<Link
|
<BottomBarLink isActive={asPath === '/'} pathName="/">
|
||||||
href={{
|
|
||||||
pathname: '/',
|
|
||||||
}}
|
|
||||||
className={`${
|
|
||||||
asPath === '/' ? 'text-th-active' : 'text-th-fgd-3'
|
|
||||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
|
||||||
>
|
|
||||||
<CurrencyDollarIcon className="mb-1 h-4 w-4" />
|
<CurrencyDollarIcon className="mb-1 h-4 w-4" />
|
||||||
<StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
|
<StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
|
||||||
</Link>
|
</BottomBarLink>
|
||||||
<Link
|
<BottomBarLink isActive={asPath === '/swap'} pathName="/swap">
|
||||||
href={{
|
|
||||||
pathname: '/swap',
|
|
||||||
}}
|
|
||||||
shallow={true}
|
|
||||||
className={`${
|
|
||||||
asPath === '/swap' ? 'text-th-active' : 'text-th-fgd-3'
|
|
||||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
|
||||||
>
|
|
||||||
<ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
|
<ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
|
||||||
<StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
|
<StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
|
||||||
</Link>
|
</BottomBarLink>
|
||||||
<Link
|
<BottomBarLink isActive={asPath === '/trade'} pathName="/trade">
|
||||||
href="/trade"
|
|
||||||
shallow={true}
|
|
||||||
className={`${
|
|
||||||
asPath === '/trade' ? 'text-th-active' : 'text-th-fgd-3'
|
|
||||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
|
||||||
>
|
|
||||||
<ArrowTrendingUpIcon className="mb-1 h-4 w-4" />
|
<ArrowTrendingUpIcon className="mb-1 h-4 w-4" />
|
||||||
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
|
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
|
||||||
</Link>
|
</BottomBarLink>
|
||||||
<Link
|
<BottomBarLink isActive={asPath === '/settings'} pathName="/settings">
|
||||||
href="/settings"
|
|
||||||
shallow={true}
|
|
||||||
className={`${
|
|
||||||
asPath === '/settings' ? 'text-th-active' : 'text-th-fgd-3'
|
|
||||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
|
||||||
>
|
|
||||||
<Cog8ToothIcon className="mb-1 h-4 w-4" />
|
<Cog8ToothIcon className="mb-1 h-4 w-4" />
|
||||||
<StyledBarItemLabel>{t('settings')}</StyledBarItemLabel>
|
<StyledBarItemLabel>{t('settings')}</StyledBarItemLabel>
|
||||||
</Link>
|
</BottomBarLink>
|
||||||
<a
|
<button
|
||||||
className={`${
|
className={`${
|
||||||
showPanel ? 'text-th-active' : 'text-th-fgd-3'
|
showPanel ? 'text-th-active' : 'text-th-fgd-2'
|
||||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
} col-span-1 flex cursor-pointer flex-col items-center justify-center`}
|
||||||
onClick={() => setShowPanel(!showPanel)}
|
onClick={() => setShowPanel(!showPanel)}
|
||||||
>
|
>
|
||||||
<Bars3Icon className="mb-1 h-4 w-4" />
|
<Bars3Icon className="mb-1 h-4 w-4" />
|
||||||
<StyledBarItemLabel>{t('more')}</StyledBarItemLabel>
|
<StyledBarItemLabel>{t('more')}</StyledBarItemLabel>
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
|
<MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -14,8 +14,14 @@ module.exports = {
|
||||||
shake: 'shake 0.4s linear 4',
|
shake: 'shake 0.4s linear 4',
|
||||||
'spin-fast': 'spin 0.5s linear infinite',
|
'spin-fast': 'spin 0.5s linear infinite',
|
||||||
},
|
},
|
||||||
cursor: {
|
backgroundImage: {
|
||||||
help: 'help',
|
'long-loss': "url('/share_images/bg-long-loss.png')",
|
||||||
|
'long-profit': "url('/share_images/bg-long-profit.png')",
|
||||||
|
'short-loss': "url('/share_images/bg-short-loss.png')",
|
||||||
|
'short-profit': "url('/share_images/bg-short-profit.png')",
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
bottomBar: '0px -4px 8px -1px rgba(0,0,0,0.2)',
|
||||||
},
|
},
|
||||||
// each color category in a theme has a single base color with the variations acheived by adjusting lightness (dark and hover variants) and lightness and saturation for muted variants
|
// each color category in a theme has a single base color with the variations acheived by adjusting lightness (dark and hover variants) and lightness and saturation for muted variants
|
||||||
colors: {
|
colors: {
|
||||||
|
@ -416,6 +422,9 @@ module.exports = {
|
||||||
'th-input-border': 'var(--input-border)',
|
'th-input-border': 'var(--input-border)',
|
||||||
'th-input-border-hover': 'var(--input-border-hover)',
|
'th-input-border-hover': 'var(--input-border-hover)',
|
||||||
},
|
},
|
||||||
|
cursor: {
|
||||||
|
help: 'help',
|
||||||
|
},
|
||||||
fontSize: {
|
fontSize: {
|
||||||
xxs: '.65rem',
|
xxs: '.65rem',
|
||||||
},
|
},
|
||||||
|
@ -437,12 +446,6 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
backgroundImage: {
|
|
||||||
'long-loss': "url('/share_images/bg-long-loss.png')",
|
|
||||||
'long-profit': "url('/share_images/bg-long-profit.png')",
|
|
||||||
'short-loss': "url('/share_images/bg-short-loss.png')",
|
|
||||||
'short-profit': "url('/share_images/bg-short-profit.png')",
|
|
||||||
},
|
|
||||||
screens: {
|
screens: {
|
||||||
xl: '1600px',
|
xl: '1600px',
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue