actionListHeaderSelector

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

@@ -1,7 +1,10 @@
 import React, { FunctionComponent } from 'react';
 import { StylingFunction } from 'react-base16-styling';
 import RightSlider from './RightSlider';
-import { actionListHeaderCss } from './utils/createStylingFromTheme';
+import {
+  actionListHeaderCss,
+  actionListHeaderSelectorCss,
+} from './utils/createStylingFromTheme';
 
 const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
   [hasSkippedActions && 'Sweep', 'Commit'].filter(
@@ -39,7 +42,7 @@ const ActionListHeader: FunctionComponent<Props> = ({
     {!hideMainButtons && (
       <div {...styling('actionListHeaderWrapper')}>
         <RightSlider shown={hasStagedActions} styling={styling}>
-          <div {...styling('actionListHeaderSelector')}>
+          <div css={actionListHeaderSelectorCss}>
             {getActiveButtons(hasSkippedActions).map((btn) => (
               <div
                 key={btn}

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

@@ -101,12 +101,12 @@ export const actionListHeaderCss: Interpolation<Theme> = (theme) => ({
 
 export const actionListRowsCss = css({ overflow: 'auto' });
 
-const getSheetFromColorMap = (map: ColorMap) => ({
-  actionListHeaderSelector: {
-    display: 'inline-flex',
-    'margin-right': '10px',
-  },
+export const actionListHeaderSelectorCss = css({
+  display: 'inline-flex',
+  marginRight: '10px',
+});
 
+const getSheetFromColorMap = (map: ColorMap) => ({
   actionListItem: {
     'border-bottom-width': '1px',
     'border-bottom-style': 'solid',