Update UI of tool messages

- Bring tool messages in line with original envisioned UI of: https://screenshot.googleplex.com/9yZCX636LzpMrgc
  - In particular this represents more descriptive names. FWIW we already had this tech we just weren't passing around information correctly (`displayName` vs. `name`)
 - Add gray to our list of color pallete's and removed Background (unused)
 - Re-enabled representing canceled messages
 - Migrated back towards a cleaner tool message design of status symbols & border colors vs. overly verbose text.
 - Removed border from confirmation diffs.
Fixes https://b.corp.google.com/issues/412598909

1 files changed, 4 insertions, 2 deletions

diff --git a/packages/cli/src/ui/components/messages/UserMessage.tsx b/packages/cli/src/ui/components/messages/UserMessage.tsx
index e9771b82..a83ffea7 100644
--- a/packages/cli/src/ui/components/messages/UserMessage.tsx
+++ b/packages/cli/src/ui/components/messages/UserMessage.tsx
@@ -19,10 +19,12 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
   return (
     <Box flexDirection="row">
       <Box width={prefixWidth}>
-        <Text color={Colors.SubtleComment}>{prefix}</Text>
+        <Text color={Colors.Gray}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap">{text}</Text>
+        <Text wrap="wrap" color={Colors.Gray}>
+          {text}
+        </Text>
       </Box>
     </Box>
   );