chore(ui-toolkit): adjust nav styles and banner (#3865)
This commit is contained in:
Matthew Russell
GitHub
parent
6dd4536fdd
commit
e9cb2ad217
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
}
|
||||
>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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,
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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">
|
||||
<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"
|
||||
@ -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-white': theme === 'light',
|
||||
'bg-black': theme === 'dark',
|
||||
'bg-vega-light-100 dark:bg-vega-dark-100':
|
||||
theme === 'system' || theme === 'yellow',
|
||||
'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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user