From 304c5cd5305766b4dcd35bd05bdc5eaff49e0864 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 11 Dec 2023 23:45:32 -0500
Subject: [PATCH] Start transition

---
 .../demo/tsconfig.json                        |  2 +-
 .../src/containers/RtkQueryInspector.tsx      | 19 ++++++-
 .../src/containers/RtkQueryMonitor.tsx        | 34 +++++++++---
 .../src/styles/createStylingFromTheme.ts      | 54 ++++++++++++-------
 pnpm-lock.yaml                                |  3 ++
 5 files changed, 83 insertions(+), 29 deletions(-)

diff --git a/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json b/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json
index 420884ce..a9bce5ae 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json
+++ b/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json
@@ -3,5 +3,5 @@
   "compilerOptions": {
     "resolveJsonModule": true
   },
-  "include": ["../src", "src"]
+  "include": ["src"]
 }
diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx
index bd29599c..076686b6 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx
@@ -131,7 +131,24 @@ class RtkQueryInspector<S, A extends Action<string>> extends PureComponent<
       <div
         ref={this.inspectorRef}
         data-wide-layout={+this.state.isWideLayout}
-        {...styling('inspector')}
+        css={(theme) => ({
+          display: 'flex',
+          flexFlow: 'column nowrap',
+          overflow: 'hidden',
+          width: '100%',
+          height: '100%',
+          fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
+          fontSize: '12px',
+          WebkitFontSmoothing: 'antialiased',
+          lineHeight: '1.5em',
+
+          backgroundColor: theme.BACKGROUND_COLOR,
+          color: theme.TEXT_COLOR,
+
+          '&[data-wide-layout="1"]': {
+            flexFlow: 'row nowrap',
+          },
+        })}
       >
         <div
           {...styling('querySectionWrapper')}
diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx
index f1916396..8b460ce3 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx
@@ -9,9 +9,17 @@ import {
   StyleUtils,
 } from '../types';
 import {
+  colorMap,
   createThemeState,
   StyleUtilsContext,
 } from '../styles/createStylingFromTheme';
+import { ThemeProvider } from '@emotion/react';
+import {
+  getBase16Theme,
+  invertBase16Theme,
+  invertTheme,
+} from 'react-base16-styling';
+import * as reduxThemes from 'redux-devtools-themes';
 
 interface DefaultProps {
   theme: string;
@@ -50,16 +58,26 @@ class RtkQueryMonitor<S, A extends Action<string>> extends Component<
       actionsById,
     } = this.props;
 
+    // TODO Cleanup
+    const base16Theme =
+      getBase16Theme(this.props.theme, { ...reduxThemes }) ??
+      reduxThemes.nicinabox;
+    const theme = this.props.invertTheme
+      ? invertBase16Theme(base16Theme)
+      : base16Theme;
+
     return (
       <StyleUtilsContext.Provider value={this.state.styleUtils}>
-        <RtkQueryInspector<S, AnyAction>
-          computedStates={computedStates}
-          currentStateIndex={currentStateIndex}
-          monitorState={monitorState}
-          dispatch={dispatch}
-          styleUtils={this.state.styleUtils}
-          actionsById={actionsById}
-        />
+        <ThemeProvider theme={colorMap(theme)}>
+          <RtkQueryInspector<S, AnyAction>
+            computedStates={computedStates}
+            currentStateIndex={currentStateIndex}
+            monitorState={monitorState}
+            dispatch={dispatch}
+            styleUtils={this.state.styleUtils}
+            actionsById={actionsById}
+          />
+        </ThemeProvider>
       </StyleUtilsContext.Provider>
     );
   }
diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts
index 21a7507c..e5b07788 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts
+++ b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts
@@ -17,6 +17,41 @@ import { RtkQueryMonitorProps, StyleUtils } from '../types';
 
 jss.setup(preset());
 
+declare module '@emotion/react' {
+  export interface Theme {
+    TEXT_COLOR: string;
+    TEXT_PLACEHOLDER_COLOR: string;
+    BACKGROUND_COLOR: string;
+    SELECTED_BACKGROUND_COLOR: string;
+    SKIPPED_BACKGROUND_COLOR: string;
+    HEADER_BACKGROUND_COLOR: string;
+    HEADER_BORDER_COLOR: string;
+    BORDER_COLOR: string;
+    LIST_BORDER_COLOR: string;
+    ACTION_TIME_BACK_COLOR: string;
+    ACTION_TIME_COLOR: string;
+    PIN_COLOR: string;
+    ITEM_HINT_COLOR: string;
+    TAB_BACK_SELECTED_COLOR: string;
+    TAB_BACK_COLOR: string;
+    TAB_BACK_HOVER_COLOR: string;
+    TAB_BORDER_COLOR: string;
+    DIFF_ADD_COLOR: string;
+    DIFF_REMOVE_COLOR: string;
+    DIFF_ARROW_COLOR: string;
+    LINK_COLOR: string;
+    LINK_HOVER_COLOR: string;
+    ERROR_COLOR: string;
+    ULIST_DISC_COLOR: string;
+    ULIST_COLOR: string;
+    ULIST_STRONG_COLOR: string;
+    TAB_CONTENT_COLOR: string;
+    TOGGLE_BUTTON_BACKGROUND: string;
+    TOGGLE_BUTTON_SELECTED_BACKGROUND: string;
+    TOGGLE_BUTTON_ERROR: string;
+  }
+}
+
 export const colorMap = (theme: reduxThemes.Base16Theme) =>
   ({
     TEXT_COLOR: theme.base06,
@@ -62,25 +97,6 @@ const getSheetFromColorMap = (map: ColorMap) => {
   };
 
   return {
-    inspector: {
-      display: 'flex',
-      flexFlow: 'column nowrap',
-      overflow: 'hidden',
-      width: '100%',
-      height: '100%',
-      'font-family': 'monaco, Consolas, "Lucida Console", monospace',
-      'font-size': '12px',
-      'font-smoothing': 'antialiased',
-      'line-height': '1.5em',
-
-      'background-color': map.BACKGROUND_COLOR,
-      color: map.TEXT_COLOR,
-
-      '&[data-wide-layout="1"]': {
-        flexFlow: 'row nowrap',
-      },
-    },
-
     querySectionWrapper: {
       display: 'flex',
       flex: '0 0 auto',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1dbfe29..613c7180 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2517,6 +2517,9 @@ importers:
       '@babel/preset-typescript':
         specifier: ^7.23.3
         version: 7.23.3(@babel/core@7.23.5)
+      '@emotion/babel-preset-css-prop':
+        specifier: ^11.11.0
+        version: 11.11.0(@babel/core@7.23.5)
       '@emotion/react':
         specifier: ^11.11.1
         version: 11.11.1(@types/react@18.2.43)(react@18.2.0)