feat(governance): visual tweaks to main nav (#2839)

apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx

@@ -117,7 +117,7 @@ const NestedDataListItem = ({
           )}
         </h4>
         {!hasChildren && (
-          <code className="text-vega-light-400 mb-2 last:mb-0 dark:text-vega-dark-400 break-all">
+          <code className="text-vega-light-100 mb-2 last:mb-0 dark:text-vega-dark-100 break-all">
             {JSON.stringify(value, null, '  ')}
           </code>
         )}

apps/explorer/src/app/routes/txs/id/index.tsx

@@ -38,7 +38,7 @@ const Tx = () => {
         to={`/${Routes.TX}`}
       >
         <Icon
-          className="text-vega-light-300 dark:text-vega-light-300"
+          className="text-vega-light-150 dark:text-vega-light-150"
           name={IconNames.CHEVRON_LEFT}
         />
         All Transactions

apps/token/src/components/nav/nav-dropdown.tsx

@@ -18,7 +18,7 @@ export const NavDropDown = ({ navbarTheme }: { navbarTheme: NavbarTheme }) => {
       <AppNavLink
         name={
           <NavDropdownMenuTrigger
-            className="w-auto text-capMenu"
+            className="w-auto flex items-center"
             data-testid="state-trigger"
             onClick={() => setOpen(!isOpen)}
           >
@@ -38,6 +38,7 @@ export const NavDropDown = ({ navbarTheme }: { navbarTheme: NavbarTheme }) => {
               name={t(r.name)}
               path={r.path}
               navbarTheme={'inherit'}
+              subNav={true}
               end={true}
               fullWidth={true}
             />

apps/token/src/components/nav/nav-link.tsx

@@ -13,6 +13,7 @@ interface AppNavLinkProps {
   target?: HTMLAttributeAnchorTarget;
   end?: boolean;
   fullWidth?: boolean;
+  subNav?: boolean;
 }
 
 export const AppNavLink = ({
@@ -23,28 +24,32 @@ export const AppNavLink = ({
   testId,
   end = false,
   fullWidth = false,
+  subNav = false,
 }: AppNavLinkProps) => {
-  const borderClasses = classNames('absolute h-1 w-full bottom-[-1px] left-0', {
-    'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow',
-    'bg-black': navbarTheme === 'yellow',
-  });
+  const borderClasses = classNames(
+    'absolute h-0.5 w-full bottom-[-1px] left-0',
+    {
+      'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow',
+      'bg-black': navbarTheme === 'yellow',
+    }
+  );
   return (
     <NavLink
       key={path}
       data-testid={testId}
       to={{ pathname: path }}
-      className={getNavLinkClassNames(navbarTheme, fullWidth)}
+      className={getNavLinkClassNames(navbarTheme, fullWidth, subNav)}
       target={target}
       end={end}
     >
       {({ isActive }) => {
         return (
-          <>
+          <div className={subNav ? 'inline-block relative pb-1' : undefined}>
             {name}
             {isActive && (
               <span data-testid="link-active" className={borderClasses} />
             )}
-          </>
+          </div>
         );
       }}
     </NavLink>

apps/token/src/components/nav/nav.spec.tsx

@@ -22,9 +22,8 @@ const renderComponent = (initialEntries?: string[]) => {
 };
 
 describe('nav', () => {
-  it('Renders title and logo with link to home', () => {
+  it('Renders logo with link to home', () => {
     renderComponent();
-    expect(screen.getByText('Governance')).toBeInTheDocument();
     expect(screen.getByTestId('logo-link')).toHaveProperty(
       'href',
       'http://localhost/'

apps/token/src/components/nav/nav.tsx

@@ -3,7 +3,8 @@ import { NetworkSwitcher } from '@vegaprotocol/environment';
 import { useEffect, useState } from 'react';
 import { TOP_LEVEL_ROUTES } from '../../routes/routes';
 import { useTranslation } from 'react-i18next';
-import vegaWhite from '../../images/vega_white.png';
+import logoWhiteText from '../../images/logo-white-text.png';
+import logoBlackText from '../../images/logo-black-text.png';
 import debounce from 'lodash/debounce';
 import { NavDrawer } from './nav-draw';
 import { Nav as ToolkitNav } from '@vegaprotocol/ui-toolkit';
@@ -46,14 +47,19 @@ export const Nav = ({ navbarTheme = 'inherit' }: NavbarProps) => {
       navbarTheme={navbarTheme}
       icon={
         <Link to="/" data-testid="logo-link">
-          <img alt="Vega" src={vegaWhite} height={30} width={30} />
+          <img
+            alt="Vega"
+            src={navbarTheme === 'yellow' ? logoBlackText : logoWhiteText}
+            height={30}
+            width={250}
+          />
         </Link>
       }
-      title={t('Governance')}
+      title={undefined}
       titleContent={<NetworkSwitcher />}
     >
       {isDesktop ? (
-        <nav className="flex items-center flex-1 px-2">
+        <nav className="flex items-center flex-1 px-4">
           {TOP_LEVEL_ROUTES.map((r) => (
             <AppNavLink
               key={r.path}

apps/token/src/styles.css

@@ -13,3 +13,9 @@
     @apply mb-2 text-neutral-400;
   }
 }
+
+@layer components {
+  .border-default {
+    @apply border-vega-dark-200;
+  }
+}

apps/trading/components/navbar/navbar.tsx

@@ -8,7 +8,7 @@ import {
   useLinks,
 } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/react-helpers';
-import { useGlobalStore } from '../../stores/global';
+import { useGlobalStore } from '../../stores';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import {
   Drawer,
@@ -165,7 +165,7 @@ export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => {
         </Link>
       }
     >
-      <LinkList className="hidden md:flex" navbarTheme={navbarTheme} />
+      <LinkList className="hidden md:flex md:px-2" navbarTheme={navbarTheme} />
       <div className="flex items-center gap-2 ml-auto overflow-hidden">
         <VegaWalletConnectButton />
         <ThemeSwitcher className="hidden md:block" />

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

@@ -4,7 +4,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 
 const itemClass = classNames(
-  'relative flex items-center justify-between rounded-sm p-2 text-sm',
+  'relative flex items-center justify-between rounded-sm',
   'cursor-default hover:cursor-pointer',
   'hover:white dark:hover:white',
   'focus:white dark:focus:white',
@@ -53,7 +53,7 @@ export const NavDropdownMenuContent = forwardRef<
   <DropdownMenuPrimitive.Content
     {...contentProps}
     ref={forwardedRef}
-    className="min-w-[290px] bg-neutral-200 dark:bg-neutral-900 mt-4 p-2 rounded-xl border border-neutral-700 text-white"
+    className="bg-vega-dark-100 mt-4 py-4 rounded-xl border border-vega-dark-200 text-white"
     align="start"
     sideOffset={10}
   />

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

@@ -3,22 +3,26 @@ import type { ReactNode } from 'react';
 
 export function getNavLinkClassNames(
   navbarTheme: string,
-  fullWidth = false
+  fullWidth = false,
+  subNav = false
 ): (props: { isActive?: boolean }) => string | undefined {
   return ({ isActive = false }) => {
-    return getActiveNavLinkClassNames(isActive, navbarTheme, fullWidth);
+    return getActiveNavLinkClassNames(isActive, navbarTheme, fullWidth, subNav);
   };
 }
 
 export const getActiveNavLinkClassNames = (
   isActive: boolean,
   navbarTheme: string,
-  fullWidth = false
+  fullWidth = false,
+  subNav = false
 ): string | undefined => {
-  return classNames('mx-2 my-4 md:my-0 md:py-3 self-start relative', {
+  return classNames('mx-2 lg:mx-3 self-start relative', {
+    'my-4 md:my-0 md:py-3': !subNav,
+    'py-2 px-4': subNav,
     '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':
+    'text-vega-light-300 dark:text-vega-dark-300 hover:text-vega-light-400 dark:hover:text-vega-dark-400':
       !isActive && navbarTheme !== 'yellow',
     'text-black dark:text-white md:dark:text-black':
       isActive && navbarTheme === 'yellow',
@@ -35,7 +39,7 @@ interface NavbarProps {
   icon: ReactNode;
   titleContent: ReactNode;
   children: ReactNode;
-  title: string;
+  title?: string;
 }
 
 export const Nav = ({
@@ -46,7 +50,7 @@ export const Nav = ({
   title,
 }: NavbarProps) => {
   const themeWrapperClasses = classNames(
-    'w-full overflow-y-hidden overflow-x-auto md:overflow-x-hidden',
+    'w-full overflow-y-hidden overflow-x-auto md:overflow-x-hidden font-alpha lg:text-lg',
     {
       dark: navbarTheme === 'dark',
     }
@@ -54,10 +58,10 @@ export const Nav = ({
 
   const isYellow = navbarTheme === 'yellow';
   const navbarClasses = classNames(
-    'min-w-max w-full flex items-stretch border-b px-4 border-default',
+    'min-w-max w-full flex items-stretch border-b px-4',
     {
-      'dark:bg-black dark:text-white': !isYellow,
-      'bg-vega-yellow text-black bg-right-top bg-no-repeat bg-contain':
+      'dark:bg-black dark:text-white border-default': !isYellow,
+      'border-vega-yellow bg-vega-yellow text-black bg-right-top bg-no-repeat bg-contain':
         isYellow,
     }
   );
@@ -69,7 +73,7 @@ export const Nav = ({
           {icon}
           <h1
             className={classNames(
-              'h-full flex flex-col my-0 justify-center font-alpha calt uppercase',
+              'h-full flex flex-col my-0 justify-center font-alpha uppercase',
               { 'text-black': isYellow, 'text-white': !isYellow }
             )}
           >