swapped to a white color scheme

Author: garrettlchow

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -117,8 +117,6 @@ export default function ComponentMap({
     ...defaultStyles,
     minWidth: 60,
     maxWidth: 300,
-    backgroundColor: 'rgb(15,15,15)',
-    fontSize: '16px',
     lineHeight: '18px',
     zIndex: 100,
     pointerEvents: 'all !important',

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -7,7 +7,7 @@ const ToolTipDataDisplay = ({ data }) => {
   const jsonTheme = {
     scheme: 'custom',
     base00: 'transparent',
-    base0B: '#ffff', // white for strings
+    base0B: '#1f2937', // dark navy for strings
     base0D: '#60a5fa', // Blue for keys
     base09: '#f59e0b', // Orange for numbers
     base0C: '#EF4444', // red for nulls

src/app/styles/layout/_stateContainer.scss

@@ -101,9 +101,9 @@
 // tool tip styles
 .tooltip-header {
   padding: 12px;
-  background-color: #1f2937;
+  background-color: #14b8a6;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid #e5e7eb;
 }
 
 .tooltip-title {
@@ -115,16 +115,15 @@
 
 .tooltip-container {
   width: 300px;
-  background-color: #111827;
+  background-color: #ffffff;
   border-radius: 8px;
   font-family: 'Outfit', sans-serif;
   overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .tooltip-section {
   padding: 12px;
-  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
+  border-bottom: 1px solid #e5e7eb;
   transition: background-color 150ms ease;
 }
 
@@ -141,6 +140,8 @@
 .tooltip-content {
   max-height: 400px;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
 }
 
 .tooltip-item {
@@ -153,20 +154,28 @@
 }
 
 .tooltip-data {
-  border-left: 2px solid rgba(20, 184, 166, 0.4);
+  border-left: 2px solid #0d9488; /* Teal border */
+}
+
+.tooltip-content::-webkit-scrollbar {
+  width: 4px;
 }
 
 .tooltip-content::-webkit-scrollbar {
   width: 4px;
 }
 
 .tooltip-content::-webkit-scrollbar-track {
-  background: rgba(107, 114, 128, 0.1);
+  background: #f1f5f9;
 }
 
 .tooltip-content::-webkit-scrollbar-thumb {
-  background: #4b5563;
-  border-radius: 2px;
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+.tooltip-content::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
 }
 
 /* JSON Tree overrides */