diff --git a/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx b/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx index c5a3d6ad..71f4ef22 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx @@ -11,6 +11,7 @@ import { actionListItemCss, actionListItemSelectedCss, actionListItemSkippedCss, + actionListItemTimeCss, } from './utils/createStylingFromTheme'; const BUTTON_SKIP = 'Skip'; @@ -98,7 +99,7 @@ export default class ActionListRow< {hideActionButtons ? ( -
+
{timeDelta === 0 ? '+00:00:00' : dateformat( @@ -110,7 +111,7 @@ export default class ActionListRow< ) : (
-
+
{timeDelta === 0 ? '+00:00:00' : dateformat( diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts index a3735318..20c1d523 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts +++ b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts @@ -134,19 +134,19 @@ export const actionListItemButtonsCss = css({ display: 'flex', }); +export const actionListItemTimeCss: Interpolation = (theme) => ({ + display: 'inline', + padding: '4px 6px', + borderRadius: '3px', + fontSize: '0.8em', + lineHeight: '1em', + flexShrink: 0, + + backgroundColor: colorMap(theme).ACTION_TIME_BACK_COLOR, + color: colorMap(theme).ACTION_TIME_COLOR, +}); + const getSheetFromColorMap = (map: ColorMap) => ({ - actionListItemTime: { - display: 'inline', - padding: '4px 6px', - 'border-radius': '3px', - 'font-size': '0.8em', - 'line-height': '1em', - 'flex-shrink': 0, - - 'background-color': map.ACTION_TIME_BACK_COLOR, - color: map.ACTION_TIME_COLOR, - }, - actionListItemSelector: { display: 'inline-flex', },