From 184f8412079e114e6b4c87f4e7bc919fba026520 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 11 Dec 2023 18:26:01 -0500
Subject: [PATCH] actionListItemName

---
 .../src/ActionListRow.tsx                     | 10 +++++----
 .../src/utils/createStylingFromTheme.ts       | 22 +++++++++----------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx b/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx
index 335b9cb9..53536617 100644
--- a/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx
+++ b/packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx
@@ -9,6 +9,8 @@ import {
   actionListFromFutureCss,
   actionListItemButtonsCss,
   actionListItemCss,
+  actionListItemNameCss,
+  actionListItemNameSkippedCss,
   actionListItemSelectedCss,
   actionListItemSelectorCss,
   actionListItemSkippedCss,
@@ -91,10 +93,10 @@ export default class ActionListRow<
         ]}
       >
         <div
-          {...styling([
-            'actionListItemName',
-            isSkipped && 'actionListItemNameSkipped',
-          ])}
+          css={[
+            actionListItemNameCss,
+            isSkipped && actionListItemNameSkippedCss,
+          ]}
         >
           {actionType}
         </div>
diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
index 12f2b9eb..1c563f22 100644
--- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
+++ b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
@@ -148,18 +148,18 @@ export const actionListItemTimeCss: Interpolation<Theme> = (theme) => ({
 
 export const actionListItemSelectorCss = css({ display: 'inline-flex' });
 
+export const actionListItemNameCss = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  lineHeight: '20px',
+});
+
+export const actionListItemNameSkippedCss = css({
+  textDecoration: 'line-through',
+  opacity: 0.3,
+});
+
 const getSheetFromColorMap = (map: ColorMap) => ({
-  actionListItemName: {
-    overflow: 'hidden',
-    'text-overflow': 'ellipsis',
-    'line-height': '20px',
-  },
-
-  actionListItemNameSkipped: {
-    'text-decoration': 'line-through',
-    opacity: 0.3,
-  },
-
   actionListHeaderSearch: {
     outline: 'none',
     border: 'none',