actionPreview

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<S, A extends Action<string>> {
   labelRenderer: LabelRenderer;
@@ -121,7 +122,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
       renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName)!;
 
     return (
-      <div key="actionPreview" {...styling('actionPreview')}>
+      <div key="actionPreview" css={actionPreviewCss}>
         <ActionPreviewHeader
           tabs={renderedTabs as unknown as Tab<unknown, Action<string>>[]}
           {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}

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> = (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',