fix: styles

nbbeeken · nbbeeken · commit 7a21889e0f3d · 2025-08-19T10:54:18.000-04:00
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/in-progress-index-actions.tsx b/packages/compass-indexes/src/components/regular-indexes-table/in-progress-index-actions.tsx
@@ -4,6 +4,7 @@ import {
   ItemActionGroup,
   SpinLoader,
   Body,
+  css,
 } from '@mongodb-js/compass-components';
 import type { InProgressIndex } from '../../modules/regular-indexes';
 
@@ -13,6 +14,13 @@ type Index = {
   buildProgress: number;
 };
 
+const styles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: '8px',
+});
+
 type IndexActionsProps = {
   index: Index;
   onDeleteFailedIndexClick: (name: string) => void;
@@ -52,14 +60,7 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
   const isBuilding = progress > 0 && progress < 100;
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        gap: '8px',
-      }}
-    >
+    <div className={styles}>
       {isBuilding && (
         <>
           <Body>Building... {progress | 0}%</Body>
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/regular-index-actions.tsx b/packages/compass-indexes/src/components/regular-indexes-table/regular-index-actions.tsx
@@ -14,6 +14,13 @@ const styles = css({
   justifyContent: 'flex-end',
 });
 
+const buildProgressStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: '8px',
+});
+
 type IndexActionsProps = {
   index: RegularIndex;
   serverVersion: string;
@@ -100,15 +107,7 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
   const buildProgress = index.buildProgress;
   if (buildProgress > 0 && buildProgress < 1) {
     return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          gap: '8px',
-        }}
-        data-testid="index-building-spinner"
-      >
+      <div className={buildProgressStyles} data-testid="index-building-spinner">
         <Body>Building... {(buildProgress * 100) | 0}%</Body>
         <SpinLoader size={16} title="Index build in progress" />
         <ItemActionGroup<IndexAction>
