From d675410a78f0454c8e417a208dead02993560793 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Wed, 13 Sep 2023 10:24:56 -0700
Subject: [PATCH 1/2] chore: adjust NavbarLinkExternal to be able to be used at
 top level

---
 apps/trading/components/navbar/navbar.tsx | 30 +++++++++--------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index 0675fa6d4..904ea9e68 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -65,14 +65,14 @@ export const Navbar = ({
         <VLogo className="w-4" />
       </NavLink>
       {/* Left section */}
-      <div className="lg:hidden flex items-center">{children}</div>
+      <div className="flex items-center lg:hidden">{children}</div>
       {/* Used to show header in nav on mobile */}
       <div className="hidden lg:block">
         <NavbarMenu onClick={() => setMenu(null)} />
       </div>
 
       {/* Right section */}
-      <div className="ml-auto flex justify-end items-center gap-2">
+      <div className="flex items-center justify-end ml-auto gap-2">
         <ProtocolUpgradeCountdown />
         <NavbarMobileButton
           onClick={() => {
@@ -106,7 +106,7 @@ export const Navbar = ({
           onOpenChange={(open) => setMenu((x) => (open ? x : null))}
         >
           <D.Overlay
-            className="lg:hidden fixed inset-0 dark:bg-black/80 bg-black/50 z-20"
+            className="fixed inset-0 z-20 lg:hidden dark:bg-black/80 bg-black/50"
             data-testid="navbar-menu-overlay"
           />
           <D.Content
@@ -117,7 +117,7 @@ export const Navbar = ({
             )}
             data-testid="navbar-menu-content"
           >
-            <div className="flex justify-end items-center h-10 p-1">
+            <div className="flex items-center justify-end h-10 p-1">
               <NavbarMobileButton onClick={() => setMenu(null)}>
                 <span className="sr-only">{t('Close menu')}</span>
                 <VegaIcon name={VegaIconNames.CROSS} size={24} />
@@ -186,17 +186,9 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
           </NavbarLink>
         </NavbarItem>
         <NavbarItem>
-          <span
-            className={classNames(
-              'block lg:flex lg:h-full flex-col justify-center',
-              'px-6 py-2 lg:p-0 text-lg lg:text-sm',
-              'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
-            )}
-          >
-            <NavbarLinkExternal to={useLinks(DApp.Token)()}>
-              {t('Governance')}
-            </NavbarLinkExternal>
-          </span>
+          <NavbarLinkExternal to={useLinks(DApp.Token)()}>
+            {t('Governance')}
+          </NavbarLinkExternal>
         </NavbarItem>
         <NavbarItem>
           <NavbarTrigger>{t('Resources')}</NavbarTrigger>
@@ -355,7 +347,7 @@ const NavbarLinkExternal = ({
       <NavLink
         to={to}
         className={classNames(
-          'flex lg:inline-flex gap-2 justify-between items-center relative',
+          'flex gap-2 lg:h-full items-center',
           'px-6 py-2 lg:p-0 text-lg lg:text-sm',
           'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
         )}
@@ -363,7 +355,7 @@ const NavbarLinkExternal = ({
         target="_blank"
       >
         <span>{children}</span>
-        <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+        <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={14} />
       </NavLink>
     </N.Link>
   );
@@ -383,8 +375,8 @@ const BurgerIcon = () => (
 
 const NavbarListDivider = () => {
   return (
-    <div className="py-2 px-6 lg:px-0" role="separator">
-      <div className="h-px lg:h-full w-full lg:w-px bg-vega-clight-500 dark:bg-vega-cdark-500" />
+    <div className="px-6 py-2 lg:px-0" role="separator">
+      <div className="w-full h-px lg:h-full lg:w-px bg-vega-clight-500 dark:bg-vega-cdark-500" />
     </div>
   );
 };

From 13b1269a587af16df71027c7c131c4c9baeee0a3 Mon Sep 17 00:00:00 2001
From: Madalina Raicu <madalina@raygroup.uk>
Date: Wed, 13 Sep 2023 18:51:39 +0100
Subject: [PATCH 2/2] chore: update navbar spec

---
 apps/trading/components/navbar/navbar.spec.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/trading/components/navbar/navbar.spec.tsx b/apps/trading/components/navbar/navbar.spec.tsx
index cb8d40a87..4589f5d98 100644
--- a/apps/trading/components/navbar/navbar.spec.tsx
+++ b/apps/trading/components/navbar/navbar.spec.tsx
@@ -57,6 +57,7 @@ describe('Navbar', () => {
       ['/markets/all', 'Markets'],
       [`/markets/${marketId}`, 'Trading'],
       ['/portfolio', 'Portfolio'],
+      ['/', 'Governance'],
     ];
 
     const links = screen.getAllByRole('link');
@@ -88,6 +89,7 @@ describe('Navbar', () => {
       ['/markets/all', 'Markets'],
       [`/markets/${marketId}`, 'Trading'],
       ['/portfolio', 'Portfolio'],
+      ['/', 'Governance'],
     ];
     const links = menu.getAllByRole('link');
     links.forEach((link, i) => {