diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx index 40bfa36d..f286a084 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -10,6 +10,7 @@ import ActionPreviewHeader from './ActionPreviewHeader'; import DiffTab from './tabs/DiffTab'; import StateTab from './tabs/StateTab'; import ActionTab from './tabs/ActionTab'; +import { actionPreviewCss } from './utils/createStylingFromTheme'; export interface TabComponentProps> { labelRenderer: LabelRenderer; @@ -121,7 +122,7 @@ class ActionPreview> extends Component< renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName)!; return ( -
+
>[]} {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }} diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts index bc9666b3..4dc2f8fc 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts +++ b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts @@ -184,24 +184,24 @@ export const actionListHeaderWrapperCss = css({ height: '20px', }); -const getSheetFromColorMap = (map: ColorMap) => ({ - actionPreview: { - flex: 1, - display: 'flex', - 'flex-direction': 'column', - 'flex-grow': 1, - 'overflow-y': 'hidden', +export const actionPreviewCss: Interpolation = (theme) => ({ + flex: 1, + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + overflowY: 'hidden', - '& pre': { - border: 'inherit', - 'border-radius': '3px', - 'line-height': 'inherit', - color: 'inherit', - }, - - 'background-color': map.BACKGROUND_COLOR, + '& pre': { + border: 'inherit', + borderRadius: '3px', + lineHeight: 'inherit', + color: 'inherit', }, + backgroundColor: colorMap(theme).BACKGROUND_COLOR, +}); + +const getSheetFromColorMap = (map: ColorMap) => ({ actionPreviewContent: { flex: 1, 'overflow-y': 'auto',