chore: align viewing as banner

This commit is contained in:
Matthew Russell 2024-02-12 11:05:37 -08:00
parent bb6ecd2c72
commit a0aa0065b6
No known key found for this signature in database
3 changed files with 4 additions and 7 deletions

View File

@ -4,7 +4,6 @@ import {
ExternalLink, ExternalLink,
Intent, Intent,
NotificationBanner, NotificationBanner,
SHORT,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import type { StoredNextProtocolUpgradeData } from '../lib'; import type { StoredNextProtocolUpgradeData } from '../lib';
import { import {
@ -70,7 +69,7 @@ export const ProtocolUpgradeInProgressNotification = () => {
if (!upgradeInProgress) return null; if (!upgradeInProgress) return null;
return ( return (
<NotificationBanner intent={Intent.Danger} className={SHORT}> <NotificationBanner intent={Intent.Danger}>
<div className="uppercase"> <div className="uppercase">
{t('The network is being upgraded to {{vegaReleaseTag}}', { {t('The network is being upgraded to {{vegaReleaseTag}}', {
vegaReleaseTag, vegaReleaseTag,

View File

@ -4,8 +4,6 @@ import { Intent } from '../../utils/intent';
import { Icon, VegaIcon, VegaIconNames } from '../icon'; import { Icon, VegaIcon, VegaIconNames } from '../icon';
import type { HTMLAttributes } from 'react'; import type { HTMLAttributes } from 'react';
export const SHORT = '!px-1 !py-1 min-h-fit';
interface NotificationBannerProps { interface NotificationBannerProps {
intent?: Intent; intent?: Intent;
children?: React.ReactNode; children?: React.ReactNode;
@ -23,7 +21,7 @@ export const NotificationBanner = ({
return ( return (
<div <div
className={classNames( className={classNames(
'flex items-center border-b px-2', 'flex items-center border-b pl-3 pr-2',
'text-xs leading-tight font-normal', 'text-xs leading-tight font-normal',
{ {
'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None, 'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None,

View File

@ -1,4 +1,4 @@
import { NotificationBanner, SHORT } from '../notification-banner'; import { NotificationBanner } from '../notification-banner';
import { Intent } from '../../utils/intent'; import { Intent } from '../../utils/intent';
import { TradingButton } from '../trading-button'; import { TradingButton } from '../trading-button';
import { useT } from '../../use-t'; import { useT } from '../../use-t';
@ -23,7 +23,7 @@ export const ViewingAsBanner = ({
}: ViewingAsBannerProps) => { }: ViewingAsBannerProps) => {
const t = useT(); const t = useT();
return ( return (
<NotificationBanner intent={Intent.None} className={SHORT}> <NotificationBanner>
<div className="flex items-baseline justify-between"> <div className="flex items-baseline justify-between">
<span data-testid="view-banner"> <span data-testid="view-banner">
{t('Viewing as Vega user: {{pubKey}}', { {t('Viewing as Vega user: {{pubKey}}', {