Update banner design (#13420)

packages/cli/src/ui/components/AppHeader.tsx

@@ -10,11 +10,9 @@ import { Tips } from './Tips.js';
 import { useSettings } from '../contexts/SettingsContext.js';
 import { useConfig } from '../contexts/ConfigContext.js';
 import { useUIState } from '../contexts/UIStateContext.js';
-import { Banner } from './Banner.js';
-import { theme } from '../semantic-colors.js';
-import { Colors } from '../colors.js';
 import { persistentState } from '../../utils/persistentState.js';
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Banner } from './Banner.js';
 
 interface AppHeaderProps {
   version: string;
@@ -35,11 +33,8 @@ export const AppHeader = ({ version }: AppHeaderProps) => {
     warningText === '' &&
     !config.getPreviewFeatures() &&
     defaultBannerShownCount < 5;
-  const bannerText = showDefaultBanner ? defaultText : warningText;
-  const unescapedBannerText = bannerText.replace(/\\n/g, '\n');
 
-  const defaultColor = Colors.AccentBlue;
+  const bannerText = showDefaultBanner ? defaultText : warningText;
-  const fontColor = warningText === '' ? defaultColor : theme.status.warning;
 
   const hasIncrementedRef = useRef(false);
   useEffect(() => {
@@ -55,11 +50,11 @@ export const AppHeader = ({ version }: AppHeaderProps) => {
       {!(settings.merged.ui?.hideBanner || config.getScreenReader()) && (
         <>
           <Header version={version} nightly={nightly} />
-          {bannerVisible && unescapedBannerText && (
+          {bannerVisible && bannerText && (
             <Banner
               width={mainAreaWidth}
-              bannerText={unescapedBannerText}
+              bannerText={bannerText}
-              color={fontColor}
+              isWarning={warningText !== ''}
             />
           )}
         </>

packages/cli/src/ui/components/Banner.tsx

@@ -6,24 +6,65 @@
 
 import { Box, Text } from 'ink';
 import { ThemedGradient } from './ThemedGradient.js';
+import { theme } from '../semantic-colors.js';
+import type { ReactNode } from 'react';
+
+export function getFormattedBannerContent(
+  rawText: string,
+  isWarning: boolean,
+  subsequentLineColor: string,
+): ReactNode {
+  if (isWarning) {
+    return (
+      <Text color={theme.status.warning}>{rawText.replace(/\\n/g, '\n')}</Text>
+    );
+  }
+
+  const text = rawText.replace(/\\n/g, '\n');
+  const lines = text.split('\n');
+
+  return lines.map((line, index) => {
+    if (index === 0) {
+      return (
+        <ThemedGradient key={index}>
+          <Text>{line}</Text>
+        </ThemedGradient>
+      );
+    }
+
+    return (
+      <Text key={index} color={subsequentLineColor}>
+        {line}
+      </Text>
+    );
+  });
+}
 
 interface BannerProps {
   bannerText: string;
-  color: string;
+  isWarning: boolean;
   width: number;
 }
 
-export const Banner = ({ bannerText, color, width }: BannerProps) => (
+export const Banner = ({ bannerText, isWarning, width }: BannerProps) => {
-  <Box
+  const subsequentLineColor = theme.text.primary;
-    flexDirection="column"
+
-    borderStyle="round"
+  const formattedBannerContent = getFormattedBannerContent(
-    borderColor={color}
+    bannerText,
-    width={width}
+    isWarning,
-    paddingLeft={1}
+    subsequentLineColor,
-    paddingRight={1}
+  );
-  >
+
-    <ThemedGradient>
+  return (
-      <Text>{bannerText}</Text>
+    <Box
-    </ThemedGradient>
+      flexDirection="column"
-  </Box>
+      borderStyle="round"
-);
+      borderColor={isWarning ? theme.status.warning : theme.border.default}
+      width={width}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      {formattedBannerContent}
+    </Box>
+  );
+};

packages/cli/src/ui/components/GradientRegression.test.tsx

@@ -88,7 +88,7 @@ describe('Gradient Crash Regression Tests', () => {
 
   it('<Banner /> should not crash when theme.ui.gradient is empty', () => {
     const { lastFrame } = renderWithProviders(
-      <Banner bannerText="Test Banner" color="blue" width={80} />,
+      <Banner bannerText="Test Banner" isWarning={false} width={80} />,
       {
         width: 120,
       },