From ee78f4bb4d5c53de5bc899345e32a78374e18c4b Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Sun, 21 May 2023 11:53:11 -0700
Subject: [PATCH] chore: use vega icons in nav

---
 apps/trading/components/navbar/navbar.tsx                  | 4 +++-
 .../icon/vega-icons/svg-icons/icon-arrow-down.tsx          | 7 +++++++
 .../src/components/icon/vega-icons/vega-icon-record.ts     | 3 +++
 libs/ui-toolkit/src/components/navigation/navigation.tsx   | 6 +++---
 4 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-arrow-down.tsx

diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index 0a6ce49ca..7c193d221 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -20,6 +20,8 @@ import {
   NavigationBreakpoint,
   NavigationTrigger,
   NavigationContent,
+  VegaIconNames,
+  VegaIcon,
 } from '@vegaprotocol/ui-toolkit';
 
 import { Links, Routes } from '../../pages/client-router';
@@ -146,7 +148,7 @@ const NavExternalLink = ({
     <ExternalLink href={href}>
       <span className="flex items-center gap-2">
         <span>{children}</span>
-        <Icon name="arrow-top-right" size={3} />
+        <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
       </span>
     </ExternalLink>
   );
diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-arrow-down.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-arrow-down.tsx
new file mode 100644
index 000000000..8f78f1cb3
--- /dev/null
+++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-arrow-down.tsx
@@ -0,0 +1,7 @@
+export const IconArrowDown = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path d="M8.53 12.3705L13.6252 7.27524L14.3748 8.02477L8 14.3995L1.62523 8.02477L2.37477 7.27524L7.47 12.3705V1.64999H8.53V12.3705Z" />
+    </svg>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts
index 4fff5532f..c457bf890 100644
--- a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts
+++ b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts
@@ -16,6 +16,7 @@ import { IconChevronUp } from './svg-icons/icon-chevron-up';
 import { IconTrendUp } from './svg-icons/icon-trend-up';
 import { IconCross } from './svg-icons/icon-cross';
 import { IconKebab } from './svg-icons/icon-kebab';
+import { IconArrowDown } from './svg-icons/icon-arrow-down';
 
 export enum VegaIconNames {
   BREAKDOWN = 'breakdown',
@@ -32,6 +33,7 @@ export enum VegaIconNames {
   OPEN_EXTERNAL = 'open-external',
   QUESTION_MARK = 'question-mark',
   ARROW_RIGHT = 'arrow-right',
+  ARROW_DOWN = 'arrow-down',
   CHEVRON_UP = 'chevron-up',
   TREND_UP = 'trend-up',
   CROSS = 'cross',
@@ -56,6 +58,7 @@ export const VegaIconNameMap: Record<
   forum: IconForum,
   'open-external': IconOpenExternal,
   'arrow-right': IconArrowRight,
+  'arrow-down': IconArrowDown,
   'chevron-up': IconChevronUp,
   'trend-up': IconTrendUp,
   cross: IconCross,
diff --git a/libs/ui-toolkit/src/components/navigation/navigation.tsx b/libs/ui-toolkit/src/components/navigation/navigation.tsx
index de3b7029f..7d907fe4f 100644
--- a/libs/ui-toolkit/src/components/navigation/navigation.tsx
+++ b/libs/ui-toolkit/src/components/navigation/navigation.tsx
@@ -5,7 +5,7 @@ import { useContext } from 'react';
 import { useRef } from 'react';
 import { VegaLogo } from '../vega-logo';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
-import { Icon } from '../icon';
+import { Icon, VegaIcon, VegaIconNames } from '../icon';
 import { Drawer } from '../drawer';
 import { NavLink } from 'react-router-dom';
 import type {
@@ -152,8 +152,8 @@ export const NavigationTrigger = ({
       {...props}
     >
       <span>{children}</span>
-      <span className="rotate-90 group-data-open/drawer:hidden">
-        <Icon name="arrow-right" size={3} />
+      <span className="flex items-center group-data-open/drawer:hidden">
+        <VegaIcon name={VegaIconNames.ARROW_DOWN} />
       </span>
       <div
         aria-hidden="true"