From f7edf711906ed8492fc65f3c1cfad1ccd7ede187 Mon Sep 17 00:00:00 2001
From: Taylor Mullen <ntaylormullen@google.com>
Date: Sat, 19 Apr 2025 12:38:09 -0400
Subject: Give Gemini Code a face lift.

- This utilizes `ink-gradient` to render GEMINI CODE in amazing colors.
- Added a shared color configuration for UX (should this be in config?). It's very possible that we shouldn't be talking about the specific colors and instead be mentioning "foreground"/"background"/inlineCode etc. type colors.
- Updated existing color usages to utilize `Colors.*`

Fixes https://b.corp.google.com/issues/411385593
---
 packages/cli/src/ui/components/Header.tsx | 51 ++++++++++++++-----------------
 1 file changed, 23 insertions(+), 28 deletions(-)

(limited to 'packages/cli/src/ui/components/Header.tsx')

diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index 62649996..8861389b 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -6,37 +6,32 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { UI_WIDTH, BOX_PADDING_X } from '../constants.js';
-import { shortenPath } from '@gemini-code/server';
+import Gradient from 'ink-gradient';
+import { Tips } from './Tips.js';
 
-interface HeaderProps {
-  cwd: string;
-}
+const gradientColors = ['#4796E4', '#847ACE', '#C3677F'];
 
-export const Header: React.FC<HeaderProps> = ({ cwd }) => (
+export const Header: React.FC = () => (
   <>
-    {/* Static Header Art */}
-    <Box marginBottom={1}>
-      <Text color="blue">{`
-   ______  ________  ____    ____  _____  ____  _____  _____
- .' ___  ||_   __  ||_   \\  /   _||_   _||_   \\|_   _||_   _|
-/ .'   \\_|  | |_ \\_|  |   \\/   |    | |    |   \\ | |    | |
-| |   ____  |  _| _   | |\\  /| |    | |    | |\\ \\| |    | |
-\\ \`.___]  |_| |__/ | _| |_\\/_| |_  _| |_  _| |_\\   |_  _| |_
- \`._____.'|________||_____||_____||_____||_____|\\____||_____|`}</Text>
-    </Box>
-    {/* CWD Display */}
-    <Box
-      borderStyle="round"
-      borderColor="blue"
-      paddingX={BOX_PADDING_X}
-      flexDirection="column"
-      marginBottom={1}
-      width={UI_WIDTH}
-    >
-      <Box paddingLeft={2}>
-        <Text color="gray">cwd: {shortenPath(cwd, /*maxLength*/ 70)}</Text>
-      </Box>
+    <Box marginBottom={1} alignItems="flex-start">
+      <Gradient colors={gradientColors}>
+        <Text>{`
+ ██████╗ ███████╗███╗   ███╗██╗███╗   ██╗██╗
+██╔════╝ ██╔════╝████╗ ████║██║████╗  ██║██║
+██║  ███╗█████╗  ██╔████╔██║██║██╔██╗ ██║██║
+██║   ██║██╔══╝  ██║╚██╔╝██║██║██║╚██╗██║██║
+╚██████╔╝███████╗██║ ╚═╝ ██║██║██║ ╚████║██║
+ ╚═════╝ ╚══════╝╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚═╝
+                                            
+ ██████╗ ██████╗ ██████╗ ███████╗           
+██╔════╝██╔═══██╗██╔══██╗██╔════╝           
+██║     ██║   ██║██║  ██║█████╗             
+██║     ██║   ██║██║  ██║██╔══╝             
+╚██████╗╚██████╔╝██████╔╝███████╗           
+ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝           
+`}</Text>
+      </Gradient>
     </Box>
+    <Tips />
   </>
 );
-- 
cgit v1.2.3