From 4149efd0e4ddbb522913113c67420f68abe765f4 Mon Sep 17 00:00:00 2001
From: Daniel Echlin <daniel.echlin@mongodb.com>
Date: Thu, 19 Dec 2024 15:17:07 -0500
Subject: [PATCH 1/2] fix error formatting

---
 .../browser-repl/src/components/shell-output-line.tsx |  4 ++--
 .../src/components/types/error-output.tsx             | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/browser-repl/src/components/shell-output-line.tsx b/packages/browser-repl/src/components/shell-output-line.tsx
index 6234ec75c..7367c1d7c 100644
--- a/packages/browser-repl/src/components/shell-output-line.tsx
+++ b/packages/browser-repl/src/components/shell-output-line.tsx
@@ -19,8 +19,8 @@ const shellOutputLine = css({
 });
 
 const shellOutputLineError = css({
-  backgroundColor: palette.red.light2,
-  color: palette.red.dark3,
+  backgroundColor: 'inherit',
+  color: palette.red.light1,
 });
 
 const shellOutputLineIcon = css({
diff --git a/packages/browser-repl/src/components/types/error-output.tsx b/packages/browser-repl/src/components/types/error-output.tsx
index 2d410a060..2e5562220 100644
--- a/packages/browser-repl/src/components/types/error-output.tsx
+++ b/packages/browser-repl/src/components/types/error-output.tsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isShouldReportAsBugError } from '@mongosh/errors';
+import { css, cx, palette } from '@mongodb-js/compass-components';
 
 import { SimpleTypeOutput } from './simple-type-output';
 import { Expandable } from '../utils/expandable';
@@ -10,6 +11,14 @@ interface ErrorOutputProps {
   value: any;
 }
 
+const errInfo = css({
+  pre: {
+    borderLeft: '3px solid',
+    paddingLeft: '0px',
+    borderColor: palette.red.light2,
+  },
+});
+
 export class ErrorOutput extends Component<ErrorOutputProps> {
   static propTypes = {
     value: PropTypes.any,
@@ -87,7 +96,7 @@ export class ErrorOutput extends Component<ErrorOutputProps> {
     return (
       <div>
         {this.renderCollapsed(toggle)}
-        <div>
+        <div className={cx(errInfo)}>
           {this.formatErrorBugReportInfo()}
           {this.formatErrorInfo()}
           {this.formatErrorResult()}

From 4dec17b297f143f9fd062bb7aa651882052ad54f Mon Sep 17 00:00:00 2001
From: Daniel Echlin <daniel.echlin@mongodb.com>
Date: Thu, 19 Dec 2024 17:49:16 -0500
Subject: [PATCH 2/2] more color

---
 .../src/components/types/error-output.tsx        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/browser-repl/src/components/types/error-output.tsx b/packages/browser-repl/src/components/types/error-output.tsx
index 2e5562220..b8fc889b5 100644
--- a/packages/browser-repl/src/components/types/error-output.tsx
+++ b/packages/browser-repl/src/components/types/error-output.tsx
@@ -11,14 +11,18 @@ interface ErrorOutputProps {
   value: any;
 }
 
-const errInfo = css({
-  pre: {
+const errInfoCss = css({
+  '&&': {
     borderLeft: '3px solid',
     paddingLeft: '0px',
-    borderColor: palette.red.light2,
+    borderColor: palette.red.light1,
   },
 });
 
+const messageCss = css({
+  color: palette.white,
+});
+
 export class ErrorOutput extends Component<ErrorOutputProps> {
   static propTypes = {
     value: PropTypes.any,
@@ -39,7 +43,7 @@ export class ErrorOutput extends Component<ErrorOutputProps> {
           >
             {formattedName || 'Error'}:
           </a>{' '}
-          {message}
+          <span className={messageCss}>{message}</span>
         </pre>
       </div>
     );
@@ -96,11 +100,11 @@ export class ErrorOutput extends Component<ErrorOutputProps> {
     return (
       <div>
         {this.renderCollapsed(toggle)}
-        <div className={cx(errInfo)}>
+        <div className={messageCss}>
           {this.formatErrorBugReportInfo()}
           {this.formatErrorInfo()}
           {this.formatErrorResult()}
-          <pre>{this.formatStack()}</pre>
+          <pre className={errInfoCss}>{this.formatStack()}</pre>
         </div>
       </div>
     );