From a77d8edb07bdab94764e5047923355fa7d642f73 Mon Sep 17 00:00:00 2001
From: Iliya Brook <iliyabrook1987@gmail.com>
Date: Tue, 5 Mar 2024 00:43:58 +0200
Subject: [PATCH 1/2] Update color scheme in StackTrace and StackFrame

The changes introduce new color attributes for various elements in both StackTrace and StackFrame components. Specifically, the color and background color of StackTrace have been revised, alongside the color adjustments of linkStyle, anchorStyle and codeAnchorStyle properties in StackFrame.
---
 .../src/react-error-overlay/containers/StackFrame.tsx         | 4 +++-
 .../src/react-error-overlay/containers/StackTrace.tsx         | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx
index f5efb144..e9d34c97 100644
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx
+++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx
@@ -16,16 +16,18 @@ import type { ErrorLocation } from '../utils/parseCompileError';
 const linkStyle: CSSProperties = {
   fontSize: '0.9em',
   marginBottom: '0.9em',
+  color: '#0645AD',
 };
 
 const anchorStyle: CSSProperties = {
   textDecoration: 'none',
-  color: theme.base05,
+  color: '#0645AD',
   cursor: 'pointer',
 };
 
 const codeAnchorStyle: CSSProperties = {
   cursor: 'pointer',
+  color: '#333',
 };
 
 const toggleStyle: CSSProperties = {
diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackTrace.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackTrace.tsx
index 6c329b57..a7845ee9 100644
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackTrace.tsx
+++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackTrace.tsx
@@ -19,6 +19,8 @@ const traceStyle = {
   flex: '0 1 auto',
   minHeight: '0px',
   overflow: 'auto',
+  color: '#000',
+  backgroundColor: '#f7f7f7',
 };
 
 interface Props {

From e71d599cd0860f80d6e57d0b38118ff3c92be8f3 Mon Sep 17 00:00:00 2001
From: Iliya Brook <iliyabrook1987@gmail.com>
Date: Tue, 5 Mar 2024 01:19:10 +0200
Subject: [PATCH 2/2] Update color scheme and styling in CodeBlock &
 Collapsible components

The changes provide a more readable color scheme and enhances component appearance for the CodeBlock and Collapsible components within redux-devtools-inspector-monitor-trace-tab. The updated styling features a lighter background color, adjusted text color, and included new border specifications.
---
 .../src/react-error-overlay/components/CodeBlock.tsx          | 4 +++-
 .../src/react-error-overlay/components/Collapsible.tsx        | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/CodeBlock.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/CodeBlock.tsx
index 2c3a1b2c..bb8c9d7d 100644
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/CodeBlock.tsx
+++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/CodeBlock.tsx
@@ -10,17 +10,19 @@ import React, { CSSProperties } from 'react';
 const preStyle: CSSProperties = {
   position: 'relative',
   display: 'block',
-  backgroundColor: '#000',
+  backgroundColor: '#f7f7f7',
   padding: '0.5em',
   marginTop: '0.5em',
   marginBottom: '0.5em',
   overflowX: 'auto',
   whiteSpace: 'pre-wrap',
   borderRadius: '0.25rem',
+  border: '1px solid #ddd',
 };
 
 const codeStyle = {
   fontFamily: 'Consolas, Menlo, monospace',
+  color: '#333',
 };
 
 interface CodeBlockPropsType {
diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx
index 07e81b64..c4509812 100644
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx
+++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx
@@ -19,6 +19,7 @@ const _collapsibleStyle: CSSProperties = {
   fontSize: '1em',
   padding: '0px 5px',
   lineHeight: '1.5',
+  borderBottom: '1px solid #ddd',
 };
 
 const collapsibleCollapsedStyle: CSSProperties = {