actionListItem

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

@@ -5,6 +5,13 @@ import debounce from 'lodash.debounce';
 import { StylingFunction } from 'react-base16-styling';
 import { Action } from 'redux';
 import RightSlider from './RightSlider';
+import {
+  actionListFromFutureCss,
+  actionListItemButtonsCss,
+  actionListItemCss,
+  actionListItemSelectedCss,
+  actionListItemSkippedCss,
+} from './utils/createStylingFromTheme';
 
 const BUTTON_SKIP = 'Skip';
 const BUTTON_JUMP = 'Jump';
@@ -74,16 +81,12 @@ export default class ActionListRow<
         onMouseDown={this.handleMouseDown}
         onMouseUp={this.handleMouseEnter}
         data-id={actionId}
-        {...styling(
-          [
-            'actionListItem',
-            isSelected && 'actionListItemSelected',
-            isSkipped && 'actionListItemSkipped',
-            isInFuture && 'actionListFromFuture',
-          ],
-          isSelected,
-          action,
-        )}
+        css={[
+          actionListItemCss,
+          isSelected && actionListItemSelectedCss,
+          isSkipped && actionListItemSkippedCss,
+          isInFuture && actionListFromFutureCss,
+        ]}
       >
         <div
           {...styling([
@@ -105,7 +108,7 @@ export default class ActionListRow<
             </div>
           </RightSlider>
         ) : (
-          <div {...styling('actionListItemButtons')}>
+          <div css={actionListItemButtonsCss}>
             <RightSlider styling={styling} shown={!showButtons} rotate>
               <div {...styling('actionListItemTime')}>
                 {timeDelta === 0

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

@@ -106,37 +106,35 @@ export const actionListHeaderSelectorCss = css({
   marginRight: '10px',
 });
 
+export const actionListItemCss: Interpolation<Theme> = (theme) => ({
+  borderBottomWidth: '1px',
+  borderBottomStyle: 'solid',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '5px 10px',
+  cursor: 'pointer',
+  userSelect: 'none',
+
+  borderBottomColor: colorMap(theme).BORDER_COLOR,
+});
+
+export const actionListItemSelectedCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).SELECTED_BACKGROUND_COLOR,
+});
+
+export const actionListItemSkippedCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).SKIPPED_BACKGROUND_COLOR,
+});
+
+export const actionListFromFutureCss = css({ opacity: '0.6' });
+
+export const actionListItemButtonsCss = css({
+  position: 'relative',
+  height: '20px',
+  display: 'flex',
+});
+
 const getSheetFromColorMap = (map: ColorMap) => ({
-  actionListItem: {
-    'border-bottom-width': '1px',
-    'border-bottom-style': 'solid',
-    display: 'flex',
-    'justify-content': 'space-between',
-    padding: '5px 10px',
-    cursor: 'pointer',
-    'user-select': 'none',
-
-    'border-bottom-color': map.BORDER_COLOR,
-  },
-
-  actionListItemSelected: {
-    'background-color': map.SELECTED_BACKGROUND_COLOR,
-  },
-
-  actionListItemSkipped: {
-    'background-color': map.SKIPPED_BACKGROUND_COLOR,
-  },
-
-  actionListFromFuture: {
-    opacity: '0.6',
-  },
-
-  actionListItemButtons: {
-    position: 'relative',
-    height: '20px',
-    display: 'flex',
-  },
-
   actionListItemTime: {
     display: 'inline',
     padding: '4px 6px',