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

apps/trading/components/navbar/navbar.tsx

@@ -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={themeWrapperClasses}>
-      <div className="flex gap-4 items-center h-full">
+      <div
-        <Link href="/" passHref={true}>
+        className={navbarClasses}
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        style={{
-          <a>
+          backgroundImage: isYellow ? `url("${testnetBg.src}")` : '',
-            <Vega className="w-13" />
+        }}
-          </a>
+      >
-        </Link>
+        <div className="flex gap-4 items-center">
-        <NetworkSwitcher />
+          <Link href="/" passHref={true}>
-      </div>
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <nav className="flex items-center flex-1 px-2">
+            <a>
-        <NavLink name={t('Trading')} path={tradingPath} />
+              <Vega className="w-13" />
-        <NavLink name={t('Portfolio')} path="/portfolio" />
+            </a>
-        <NavLink
+          </Link>
-          name={t('Governance')}
+          <NetworkSwitcher />
-          path={`${VEGA_TOKEN_URL}/governance`}
+        </div>
-          alignRight={true}
+        <nav className="flex items-center flex-1 px-2">
-          target="_blank"
+          <NavLink
-        />
+            name={t('Trading')}
-      </nav>
+            path={tradingPath}
-      <div className="flex items-center gap-2 ml-auto">
+            navbarTheme={navbarTheme}
-        <VegaWalletConnectButton />
+          />
-        <ThemeSwitcher theme={theme} onToggle={toggleTheme} />
+          <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,
+    'cursor-default': isActive,
-    'text-neutral-400 hover:text-neutral-300': !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 && (
+        {isActive && <span className={borderClasses} />}
-          <span className="absolute h-1 w-full bg-vega-yellow bottom-0 left-0" />
-        )}
       </a>
     </Link>
   );

apps/trading/pages/_app.page.tsx

@@ -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>

libs/ui-toolkit/src/components/button/button.tsx

@@ -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-neutral-500',
-  'border-black dark:border-white',
+  'bg-transparent',
-  'bg-white dark:bg-black',
+  'enabled:hover:bg-neutral-500/20 dark:enabled:hover:bg-neutral-500/40',
-  'enabled:hover:bg-neutral-200 dark:enabled:hover:bg-neutral-700',
+  'enabled:active:bg-neutral-500/20 dark:enabled:active:bg-neutral-500/40',
-  'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-700',
-  'enabled:active:border-neutral-400',
 ];
 const primary = [
   'text-black',

libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx

@@ -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',
+    'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500 whitespace-nowrap',
-    'focus:border-black dark:focus:border-white whitespace-nowrap',
+    'hover:bg-neutral-500/20 dark:hover:bg-neutral-500/40'
-    'hover:bg-neutral-200 dark:hover:bg-neutral-700'
   );
   return (
     <DropdownMenuPrimitive.Trigger

libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx

@@ -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' && (
+      {theme === 'dark' && <SunIcon />}
-        <span className={classes}>
+      {theme === 'light' && <MoonIcon />}
-          <SunIcon />
-        </span>
-      )}
-      {theme === 'light' && (
-        <span className={classes}>
-          <MoonIcon />
-        </span>
-      )}
     </button>
   );
 };