feat: align governance right (#2358)

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

@@ -105,7 +105,6 @@ interface AppNavLinkProps {
   path: string;
   navbarTheme: NavbarTheme;
   testId?: string;
-  alignRight?: boolean;
   target?: HTMLAttributeAnchorTarget;
 }
 
@@ -113,7 +112,6 @@ const AppNavLink = ({
   name,
   path,
   navbarTheme,
-  alignRight,
   target,
   testId = name,
 }: AppNavLinkProps) => {
@@ -125,7 +123,7 @@ const AppNavLink = ({
     <NavLink
       data-testid={testId}
       to={{ pathname: path }}
-      className={getNavLinkClassNames(navbarTheme, alignRight)}
+      className={getNavLinkClassNames(navbarTheme)}
       target={target}
       end={true}
     >

apps/trading/components/navbar/navbar.tsx

@@ -4,7 +4,7 @@ import { NetworkSwitcher, useEnvironment } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/react-helpers';
 import { useGlobalStore } from '../../stores/global';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
-import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
+import { NewTab, ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { Vega } from '../icons/vega';
 import type { HTMLAttributeAnchorTarget } from 'react';
 import { Routes } from '../../pages/client-router';
@@ -52,15 +52,18 @@ export const Navbar = ({
         path={Routes.PORTFOLIO}
         navbarTheme={navbarTheme}
       />
-      <div className="flex items-center gap-2 ml-auto">
+      <a
-        <a
+        href={`${VEGA_TOKEN_URL}/governance`}
-          href={`${VEGA_TOKEN_URL}/governance`}
+        target="_blank"
-          target="_blank"
+        rel="noreferrer"
-          rel="noreferrer"
+        className={getActiveNavLinkClassNames(false, navbarTheme)}
-          className={getActiveNavLinkClassNames(false, navbarTheme, true)}
+      >
-        >
+        <span className="flex items-center gap-2">
           {t('Governance')}
-        </a>
+          <NewTab />
+        </span>
+      </a>
+      <div className="flex items-center gap-2 ml-auto">
         <VegaWalletConnectButton />
         <ThemeSwitcher theme={theme} onToggle={toggleTheme} />
       </div>
@@ -73,7 +76,6 @@ interface AppNavLinkProps {
   path: string;
   navbarTheme: NavbarTheme;
   testId?: string;
-  alignRight?: boolean;
   target?: HTMLAttributeAnchorTarget;
 }
 
@@ -81,7 +83,6 @@ const AppNavLink = ({
   name,
   path,
   navbarTheme,
-  alignRight,
   target,
   testId = name,
 }: AppNavLinkProps) => {
@@ -93,7 +94,7 @@ const AppNavLink = ({
     <NavLink
       data-testid={testId}
       to={{ pathname: path }}
-      className={getNavLinkClassNames(navbarTheme, alignRight)}
+      className={getNavLinkClassNames(navbarTheme)}
       target={target}
     >
       {({ isActive }) => {

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

@@ -2,25 +2,22 @@ import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 export function getNavLinkClassNames(
-  navbarTheme: string,
+  navbarTheme: string
-  alignRight = false
 ): (props: { isActive?: boolean }) => string | undefined {
   return ({ isActive = false }) => {
-    return getActiveNavLinkClassNames(isActive, navbarTheme, alignRight);
+    return getActiveNavLinkClassNames(isActive, navbarTheme);
   };
 }
 
 export const getActiveNavLinkClassNames = (
   isActive: boolean,
-  navbarTheme: string,
+  navbarTheme: string
-  alignRight = false
 ): string | undefined => {
   return classNames('mx-2 py-3 self-end relative', {
     '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',
   });

libs/ui-toolkit/src/components/vega-icons/index.ts

@@ -1,3 +1,4 @@
 export * from './cross';
 export * from './diamond';
+export * from './new-tab';
 export * from './tick';

libs/ui-toolkit/src/components/vega-icons/new-tab.tsx

@@ -0,0 +1,7 @@
+export const NewTab = () => {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+      <path d="M7.30117 1.32961L1.05914 1.4101L1.04237 0.11021L8.92199 0.00860043L9.58891 0L9.58031 0.666927L9.47871 8.54654L8.17881 8.52978L8.26032 2.20894L0.919239 9.55002L0 8.63078L7.30117 1.32961Z" />
+    </svg>
+  );
+};