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] 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 = {