actionListHeaderSearch

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}

packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts

@@ -159,27 +159,27 @@ export const actionListItemNameSkippedCss = css({
   opacity: 0.3,
 });
 
-const getSheetFromColorMap = (map: ColorMap) => ({
+export const actionListHeaderSearchCss: Interpolation<Theme> = (theme) => ({
-  actionListHeaderSearch: {
   outline: 'none',
   border: 'none',
   width: '100%',
   padding: '5px 10px',
-    'font-size': '1em',
+  fontSize: '1em',
-    'font-family': 'monaco, Consolas, "Lucida Console", monospace',
+  fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
 
-    'background-color': map.BACKGROUND_COLOR,
+  backgroundColor: colorMap(theme).BACKGROUND_COLOR,
-    color: map.TEXT_COLOR,
+  color: colorMap(theme).TEXT_COLOR,
 
   '&::-webkit-input-placeholder': {
-      color: map.TEXT_PLACEHOLDER_COLOR,
+    color: colorMap(theme).TEXT_PLACEHOLDER_COLOR,
   },
 
   '&::-moz-placeholder': {
-      color: map.TEXT_PLACEHOLDER_COLOR,
+    color: colorMap(theme).TEXT_PLACEHOLDER_COLOR,
-    },
   },
+});
 
+const getSheetFromColorMap = (map: ColorMap) => ({
   actionListHeaderWrapper: {
     position: 'relative',
     height: '20px',