From 70ad944bf58fbd8965d216c705c967fe9fb671c0 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 10 Dec 2023 23:48:48 -0500
Subject: [PATCH] actionListHeaderSelector

---
 .../src/ActionListHeader.tsx                           |  7 +++++--
 .../src/utils/createStylingFromTheme.ts                | 10 +++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx b/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
index 4e37f13c..89bf6af5 100644
--- a/packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
+++ b/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}
diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
index ebeb3322..7c4e7a3f 100644
--- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
+++ b/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',