diff --git a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx b/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx index 6a982e75..4e37f13c 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx +++ b/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 = ({ hideMainButtons, searchValue, }) => ( -
+
onSearch(e.target.value)} diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts index 30e87077..f41c46dc 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts +++ b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts @@ -89,17 +89,17 @@ export const actionListWideCss = css({ borderRightStyle: 'double', }); +export const actionListHeaderCss: Interpolation = (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', },