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/Tips.tsx | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

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

diff --git a/packages/cli/src/ui/components/Tips.tsx b/packages/cli/src/ui/components/Tips.tsx
index bb4aa5e6..21d95966 100644
--- a/packages/cli/src/ui/components/Tips.tsx
+++ b/packages/cli/src/ui/components/Tips.tsx
@@ -6,19 +6,28 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { UI_WIDTH } from '../constants.js';
+import { Colors } from '../colors.js';
 
 export const Tips: React.FC = () => (
-  <Box flexDirection="column" marginBottom={1} width={UI_WIDTH}>
-    <Text>Tips for getting started:</Text>
-    <Text>
-      1. <Text bold>/help</Text> for more information.
+  <Box flexDirection="column" marginBottom={1}>
+    <Text color={Colors.Foreground}>Tips for getting started:</Text>
+    <Text color={Colors.Foreground}>
+      1.{' '}
+      <Text bold color={Colors.AccentPurple}>
+        /help
+      </Text>{' '}
+      for more information.
     </Text>
-    <Text>
-      2. <Text bold>/init</Text> to create a GEMINI.md for instructions &
-      context.
+    <Text color={Colors.Foreground}>
+      2.{' '}
+      <Text bold color={Colors.AccentPurple}>
+        /init
+      </Text>{' '}
+      to create a GEMINI.md for instructions & context.
     </Text>
-    <Text>3. Ask coding questions, edit code or run commands.</Text>
-    <Text>4. Be specific for the best results.</Text>
+    <Text color={Colors.Foreground}>
+      3. Ask coding questions, edit code or run commands.
+    </Text>
+    <Text color={Colors.Foreground}>4. Be specific for the best results.</Text>
   </Box>
 );
-- 
cgit v1.2.3