chore(ui-toolkit): adjust nav styles and banner (#3865)

apps/trading/components/navbar/navbar.tsx

@@ -16,10 +16,11 @@ import {
   NavigationItem,
   NavigationLink,
   ExternalLink,
-  Icon,
   NavigationBreakpoint,
   NavigationTrigger,
   NavigationContent,
+  VegaIconNames,
+  VegaIcon,
 } from '@vegaprotocol/ui-toolkit';
 
 import { Links, Routes } from '../../pages/client-router';
@@ -146,7 +147,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>
   );

libs/announcements/src/lib/announcements.tsx

@@ -2,9 +2,10 @@ import { useEffect, useState } from 'react';
 import type { AppNameType, Announcement } from './schema';
 import { useAnnouncement } from './hooks/use-announcement';
 import {
-  Icon,
   AnnouncementBanner as Banner,
   ExternalLink,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 
 export type AnnouncementBannerProps = {
@@ -75,22 +76,22 @@ export const AnnouncementBanner = ({
 
   return (
     <Banner className="relative px-10">
-      <button
-        className="absolute left-0 top-0 w-10 h-full flex items-center justify-center"
-        data-testid="app-announcement-close"
-        onClick={() => setVisible(false)}
-      >
-        <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
-      </button>
       <div
         data-testid="app-announcement"
-        className="relative font-alpha flex gap-2 justify-center calt uppercase text-center text-lg text-white"
+        className="relative font-alpha flex gap-2 justify-center text-center text-lg text-white"
       >
-        <span className="pr-4">{data.text}</span>
+        <span>{data.text}</span>{' '}
         {data.urlText && data.url && (
           <ExternalLink href={data.url}>{data.urlText}</ExternalLink>
         )}
       </div>
+      <button
+        className="absolute right-0 top-0 p-4 w-10 h-full flex items-center justify-center text-white"
+        data-testid="app-announcement-close"
+        onClick={() => setVisible(false)}
+      >
+        <VegaIcon name={VegaIconNames.CROSS} size={24} />
+      </button>
     </Banner>
   );
 };

libs/environment/src/components/network-switcher/network-switcher.tsx

@@ -7,6 +7,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   ExternalLink,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '../../hooks/use-environment';
 import { Networks } from '../../types';
@@ -114,7 +116,10 @@ export const NetworkSwitcher = ({
             className
           )}
         >
-          <span className="mr-2"> {envTriggerMapping[current]}</span>
+          <span className="flex justify-between items-center gap-2">
+            <span>{envTriggerMapping[current]}</span>
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+          </span>
         </DropdownMenuTrigger>
       }
     >

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>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-chevron-down.tsx

@@ -0,0 +1,7 @@
+export const IconChevronDown = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path d="M1.62 5.62L2.38 4.87L8 10.5L13.62 4.87L14.38 5.62L8 12L1.62 5.62Z" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -16,6 +16,8 @@ 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';
+import { IconChevronDown } from './svg-icons/icon-chevron-down';
 
 export enum VegaIconNames {
   BREAKDOWN = 'breakdown',
@@ -32,7 +34,9 @@ export enum VegaIconNames {
   OPEN_EXTERNAL = 'open-external',
   QUESTION_MARK = 'question-mark',
   ARROW_RIGHT = 'arrow-right',
+  ARROW_DOWN = 'arrow-down',
   CHEVRON_UP = 'chevron-up',
+  CHEVRON_DOWN = 'chevron-down',
   TREND_UP = 'trend-up',
   CROSS = 'cross',
   KEBAB = 'kebab',
@@ -56,7 +60,9 @@ export const VegaIconNameMap: Record<
   forum: IconForum,
   'open-external': IconOpenExternal,
   'arrow-right': IconArrowRight,
+  'arrow-down': IconArrowDown,
   'chevron-up': IconChevronUp,
+  'chevron-down': IconChevronDown,
   'trend-up': IconTrendUp,
   cross: IconCross,
   kebab: IconKebab,

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

@@ -44,7 +44,7 @@ export const ExternalLink = ({ children, className, ...props }: LinkProps) => (
   <Link
     className={classNames(
       className,
-      'inline-flex items-baseline underline-offset-4'
+      'inline-flex gap-1 items-baseline underline-offset-4'
     )}
     target="_blank"
     data-testid="external-link"

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 { 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">
+      <span className="flex items-center group-data-open/drawer:hidden">
-        <Icon name="arrow-right" size={3} />
+        <VegaIcon name={VegaIconNames.ARROW_DOWN} />
       </span>
       <div
         aria-hidden="true"
@@ -189,15 +189,15 @@ export const NavigationContent = ({
         className={classNames(
           'navigation-content',
           'absolute z-20 top-12 w-max',
-          'p-2 mt-1',
+          'p-6 mt-1 min-w-[290px]',
           'text-vega-light-300 dark:text-vega-dark-300',
-
           'border rounded border-vega-light-200 dark:border-vega-dark-200',
-          'shadow-[8px_8px_16px_0_rgba(0,0,0,0.4)]',
+          'text-vega-light-300 dark:text-vega-light-300',
           {
-            'bg-white dark:bg-black': theme === 'system' || theme === 'yellow',
+            'bg-vega-light-100 dark:bg-vega-dark-100':
-            'bg-white': theme === 'light',
+              theme === 'system' || theme === 'yellow',
-            'bg-black': theme === 'dark',
+            'bg-vega-light-100': theme === 'light',
+            'bg-vega-dark-100': theme === 'dark',
           }
         )}
       >
@@ -348,7 +348,7 @@ export const Navigation = ({
         <div
           className={classNames(
             'navbar',
-            'flex gap-4 h-12 items-center font-alpha text-lg calt',
+            'flex gap-4 h-12 items-center font-alpha text-lg',
             {
               'text-vega-light-300 dark:text-vega-dark-300': theme === 'system',
               'text-vega-light-300': theme === 'light',