diff options
| author | Taylor Mullen <[email protected]> | 2025-04-19 12:38:09 -0400 |
|---|---|---|
| committer | N. Taylor Mullen <[email protected]> | 2025-04-19 17:10:06 -0400 |
| commit | f7edf711906ed8492fc65f3c1cfad1ccd7ede187 (patch) | |
| tree | fcf6e6152cdddfee91c12316cab906d5e31d0e75 /packages/cli/src/ui/components/Header.tsx | |
| parent | 3fce6cea27d3e6129d6c06e528b62e1b11bf7094 (diff) | |
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
Diffstat (limited to 'packages/cli/src/ui/components/Header.tsx')
| -rw-r--r-- | packages/cli/src/ui/components/Header.tsx | 51 |
1 files changed, 23 insertions, 28 deletions
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 /> </> ); |