actionListHeader

packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { StylingFunction } from 'react-base16-styling';
 import RightSlider from './RightSlider';
+import { actionListHeaderCss } from './utils/createStylingFromTheme';
 
 const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
   [hasSkippedActions && 'Sweep', 'Commit'].filter(
@@ -28,7 +29,7 @@ const ActionListHeader: FunctionComponent<Props> = ({
   hideMainButtons,
   searchValue,
 }) => (
-  <div {...styling('actionListHeader')}>
+  <div css={actionListHeaderCss}>
     <input
       {...styling('actionListHeaderSearch')}
       onChange={(e) => onSearch(e.target.value)}

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

@@ -89,17 +89,17 @@ export const actionListWideCss = css({
   borderRightStyle: 'double',
 });
 
+export const actionListHeaderCss: Interpolation<Theme> = (theme) => ({
+  display: 'flex',
+  flex: '0 0 auto',
+  alignItems: 'center',
+  borderBottomWidth: '1px',
+  borderBottomStyle: 'solid',
+
+  borderColor: colorMap(theme).LIST_BORDER_COLOR,
+});
+
 const getSheetFromColorMap = (map: ColorMap) => ({
-  actionListHeader: {
-    display: 'flex',
-    flex: '0 0 auto',
-    'align-items': 'center',
-    'border-bottom-width': '1px',
-    'border-bottom-style': 'solid',
-
-    'border-color': map.LIST_BORDER_COLOR,
-  },
-
   actionListRows: {
     overflow: 'auto',
   },