From 498e7aa1b4df1199b7f09618993ce8af6ccd2c98 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 11 Dec 2023 18:33:55 -0500
Subject: [PATCH] actionListHeaderSearch

---
 .../src/ActionListHeader.tsx                  |  3 +-
 .../src/utils/createStylingFromTheme.ts       | 34 +++++++++----------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx b/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
index 89bf6af5..410ca21b 100644
--- a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
@@ -3,6 +3,7 @@ import { StylingFunction } from 'react-base16-styling';
 import RightSlider from './RightSlider';
 import {
   actionListHeaderCss,
+  actionListHeaderSearchCss,
   actionListHeaderSelectorCss,
 } from './utils/createStylingFromTheme';
 
@@ -34,7 +35,7 @@ const ActionListHeader: FunctionComponent<Props> = ({
 }) => (
   <div css={actionListHeaderCss}>
     <input
-      {...styling('actionListHeaderSearch')}
+      css={actionListHeaderSearchCss}
       onChange={(e) => onSearch(e.target.value)}
       placeholder="filter..."
       value={searchValue}
diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
index 1c563f22..59561eb2 100644
--- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
+++ b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
@@ -159,27 +159,27 @@ export const actionListItemNameSkippedCss = css({
   opacity: 0.3,
 });
 
-const getSheetFromColorMap = (map: ColorMap) => ({
-  actionListHeaderSearch: {
-    outline: 'none',
-    border: 'none',
-    width: '100%',
-    padding: '5px 10px',
-    'font-size': '1em',
-    'font-family': 'monaco, Consolas, "Lucida Console", monospace',
+export const actionListHeaderSearchCss: Interpolation<Theme> = (theme) => ({
+  outline: 'none',
+  border: 'none',
+  width: '100%',
+  padding: '5px 10px',
+  fontSize: '1em',
+  fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
 
-    'background-color': map.BACKGROUND_COLOR,
-    color: map.TEXT_COLOR,
+  backgroundColor: colorMap(theme).BACKGROUND_COLOR,
+  color: colorMap(theme).TEXT_COLOR,
 
-    '&::-webkit-input-placeholder': {
-      color: map.TEXT_PLACEHOLDER_COLOR,
-    },
-
-    '&::-moz-placeholder': {
-      color: map.TEXT_PLACEHOLDER_COLOR,
-    },
+  '&::-webkit-input-placeholder': {
+    color: colorMap(theme).TEXT_PLACEHOLDER_COLOR,
   },
 
+  '&::-moz-placeholder': {
+    color: colorMap(theme).TEXT_PLACEHOLDER_COLOR,
+  },
+});
+
+const getSheetFromColorMap = (map: ColorMap) => ({
   actionListHeaderWrapper: {
     position: 'relative',
     height: '20px',