Feat/725 network header styles (#1893)

* feat: add yellow theme for navbar, adjust dropdown and theme switcher styles

* feat: set yellow theme when network is testnet

* feat: adjust button styles to accomodate different color backgrounds
This commit is contained in:
Matthew Russell 2022-10-28 10:13:14 -05:00 committed by GitHub
parent a90970399c
commit f5ea0563b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 51 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View File

@ -9,13 +9,20 @@ import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
import { Vega } from '../icons/vega';
import type { HTMLAttributeAnchorTarget } from 'react';
import { useEffect, useState } from 'react';
import testnetBg from '../../assets/green-cloud.png';
type NavbarTheme = 'inherit' | 'dark' | 'yellow';
interface NavbarProps {
theme: 'light' | 'dark';
toggleTheme: () => void;
navbarTheme?: NavbarTheme;
}
export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
export const Navbar = ({
theme,
toggleTheme,
navbarTheme = 'inherit',
}: NavbarProps) => {
const { VEGA_TOKEN_URL } = useEnvironment();
const { marketId } = useGlobalStore((store) => ({
marketId: store.marketId,
@ -28,30 +35,60 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
}
}, [marketId]);
const themeWrapperClasses = classNames({
dark: navbarTheme === 'dark',
});
const isYellow = navbarTheme === 'yellow';
const navbarClasses = classNames(
'flex items-stretch border-b px-4 border-default',
{
'dark:bg-black dark:text-white': !isYellow,
'bg-vega-yellow text-black bg-right-top bg-no-repeat bg-contain':
isYellow,
}
);
return (
<div className="dark px-4 flex items-stretch border-b border-default bg-black text-white">
<div className="flex gap-4 items-center h-full">
<Link href="/" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<Vega className="w-13" />
</a>
</Link>
<NetworkSwitcher />
</div>
<nav className="flex items-center flex-1 px-2">
<NavLink name={t('Trading')} path={tradingPath} />
<NavLink name={t('Portfolio')} path="/portfolio" />
<NavLink
name={t('Governance')}
path={`${VEGA_TOKEN_URL}/governance`}
alignRight={true}
target="_blank"
/>
</nav>
<div className="flex items-center gap-2 ml-auto">
<VegaWalletConnectButton />
<ThemeSwitcher theme={theme} onToggle={toggleTheme} />
<div className={themeWrapperClasses}>
<div
className={navbarClasses}
style={{
backgroundImage: isYellow ? `url("${testnetBg.src}")` : '',
}}
>
<div className="flex gap-4 items-center">
<Link href="/" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<Vega className="w-13" />
</a>
</Link>
<NetworkSwitcher />
</div>
<nav className="flex items-center flex-1 px-2">
<NavLink
name={t('Trading')}
path={tradingPath}
navbarTheme={navbarTheme}
/>
<NavLink
name={t('Portfolio')}
path="/portfolio"
navbarTheme={navbarTheme}
/>
<NavLink
name={t('Governance')}
path={`${VEGA_TOKEN_URL}/governance`}
alignRight={true}
target="_blank"
navbarTheme={navbarTheme}
/>
</nav>
<div className="flex items-center gap-2 ml-auto">
<VegaWalletConnectButton />
<ThemeSwitcher theme={theme} onToggle={toggleTheme} />
</div>
</div>
</div>
);
@ -60,6 +97,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
interface NavLinkProps {
name: string;
path: string;
navbarTheme: NavbarTheme;
testId?: string;
alignRight?: boolean;
target?: HTMLAttributeAnchorTarget;
@ -68,6 +106,7 @@ interface NavLinkProps {
const NavLink = ({
name,
path,
navbarTheme,
alignRight,
target,
testId = name,
@ -75,18 +114,24 @@ const NavLink = ({
const router = useRouter();
const isActive = router.asPath?.includes(path);
const linkClasses = classNames('mx-2 py-3 self-end relative', {
'text-white cursor-default': isActive,
'text-neutral-400 hover:text-neutral-300': !isActive,
'cursor-default': isActive,
'text-black dark:text-white': isActive && navbarTheme !== 'yellow',
'text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-neutral-300':
!isActive && navbarTheme !== 'yellow',
'ml-auto': alignRight,
'text-black': isActive && navbarTheme === 'yellow',
'text-black/60 hover:text-black': !isActive && navbarTheme === 'yellow',
});
const borderClasses = classNames('absolute h-1 w-full bottom-[-1px] left-0', {
'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow',
'bg-black': navbarTheme === 'yellow',
});
return (
<Link data-testid={testId} href={path} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className={linkClasses} target={target}>
{name}
{isActive && (
<span className="absolute h-1 w-full bg-vega-yellow bottom-0 left-0" />
)}
{isActive && <span className={borderClasses} />}
</a>
</Link>
);

View File

@ -6,6 +6,7 @@ import { VegaWalletProvider } from '@vegaprotocol/wallet';
import {
EnvironmentProvider,
envTriggerMapping,
Networks,
useEnvironment,
} from '@vegaprotocol/environment';
import { AppLoader } from '../components/app-loader';
@ -38,6 +39,7 @@ const Title = () => {
};
function AppBody({ Component, pageProps }: AppProps) {
const { VEGA_ENV } = useEnvironment();
const [theme, toggleTheme] = useThemeSwitcher();
return (
<ThemeContext.Provider value={theme}>
@ -47,7 +49,11 @@ function AppBody({ Component, pageProps }: AppProps) {
<Title />
<div className="h-full relative dark:bg-black dark:text-white z-0 grid grid-rows-[min-content,1fr,min-content]">
<AppLoader>
<Navbar theme={theme} toggleTheme={toggleTheme} />
<Navbar
theme={theme}
toggleTheme={toggleTheme}
navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'}
/>
<main data-testid={pageProps.page}>
<Component {...pageProps} />
</main>

View File

@ -18,12 +18,10 @@ const md = 'px-10 py-2 text-base';
const lg = 'px-14 py-4';
const fillClasses = 'block w-full';
const defaultClasses = [
'text-black dark:text-white',
'border-black dark:border-white',
'bg-white dark:bg-black',
'enabled:hover:bg-neutral-200 dark:enabled:hover:bg-neutral-700',
'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-700',
'enabled:active:border-neutral-400',
'border-neutral-500',
'bg-transparent',
'enabled:hover:bg-neutral-500/20 dark:enabled:hover:bg-neutral-500/40',
'enabled:active:bg-neutral-500/20 dark:enabled:active:bg-neutral-500/40',
];
const primary = [
'text-black',

View File

@ -27,9 +27,8 @@ export const DropdownMenuTrigger = forwardRef<
>(({ className, children, ...props }, forwardedRef) => {
const triggerClasses = classNames(
className,
'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500',
'focus:border-black dark:focus:border-white whitespace-nowrap',
'hover:bg-neutral-200 dark:hover:bg-neutral-700'
'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500 whitespace-nowrap',
'hover:bg-neutral-500/20 dark:hover:bg-neutral-500/40'
);
return (
<DropdownMenuPrimitive.Trigger

View File

@ -10,24 +10,15 @@ export const ThemeSwitcher = ({
onToggle: () => void;
className?: string;
}) => {
const classes = 'text-neutral-800 dark:text-neutral-300';
return (
<button
type="button"
onClick={() => onToggle()}
onClick={onToggle}
className={className}
data-testid="theme-switcher"
>
{theme === 'dark' && (
<span className={classes}>
<SunIcon />
</span>
)}
{theme === 'light' && (
<span className={classes}>
<MoonIcon />
</span>
)}
{theme === 'dark' && <SunIcon />}
{theme === 'light' && <MoonIcon />}
</button>
);
};