From 3dc6fe7fac92248e7e6760b911be4badc2d449b1 Mon Sep 17 00:00:00 2001
From: pd-redis <petar.dzhambazov@redis.com>
Date: Mon, 23 Jun 2025 10:28:58 +0300
Subject: [PATCH] fix BulkActionSummary.tsx

---
 .../BulkActionSummary/BulkActionSummary.tsx   | 48 +++++++++----------
 .../BulkActionSummary/styles.module.scss      | 12 -----
 2 files changed, 22 insertions(+), 38 deletions(-)
 delete mode 100644 redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/styles.module.scss

diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/BulkActionSummary.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/BulkActionSummary.tsx
index 8568ba7f80..5668710a32 100644
--- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/BulkActionSummary.tsx
+++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/BulkActionSummary.tsx
@@ -1,11 +1,11 @@
-import { EuiText } from '@elastic/eui'
 import React from 'react'
+import { EuiText } from '@elastic/eui'
+import styled from 'styled-components'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { millisecondsFormat } from 'uiSrc/utils'
 import { BulkActionsType } from 'uiSrc/constants'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import styles from './styles.module.scss'
 
 export interface Props {
   type?: BulkActionsType
@@ -15,6 +15,16 @@ export interface Props {
   duration?: number
   'data-testid': string
 }
+
+const SummaryContainer = styled(Row)`
+  padding-top: 18px;
+`
+const SummaryValue = styled(EuiText)`
+  font-size: 18px !important;
+  line-height: 24px;
+  font-weight: 500 !important;
+`
+
 const BulkActionSummary = ({
   type = BulkActionsType.Delete,
   processed = 0,
@@ -23,40 +33,26 @@ const BulkActionSummary = ({
   duration = 0,
   'data-testid': testId,
 }: Props) => (
-  <Row align="start" className={styles.summary} data-testid={testId}>
+  <SummaryContainer data-testid={testId} gap="xl">
     <FlexItem>
-      <EuiText className={styles.summaryValue}>
-        {numberWithSpaces(processed)}
-      </EuiText>
-      <EuiText color="subdued" className={styles.summaryLabel}>
+      <SummaryValue>{numberWithSpaces(processed)}</SummaryValue>
+      <EuiText color="subdued">
         {type === BulkActionsType.Delete ? 'Keys' : 'Commands'} Processed
       </EuiText>
     </FlexItem>
     <FlexItem>
-      <EuiText className={styles.summaryValue}>
-        {numberWithSpaces(succeed)}
-      </EuiText>
-      <EuiText color="subdued" className={styles.summaryLabel}>
-        Success
-      </EuiText>
+      <SummaryValue>{numberWithSpaces(succeed)}</SummaryValue>
+      <EuiText color="subdued">Success</EuiText>
     </FlexItem>
     <FlexItem>
-      <EuiText className={styles.summaryValue}>
-        {numberWithSpaces(failed)}
-      </EuiText>
-      <EuiText color="subdued" className={styles.summaryLabel}>
-        Errors
-      </EuiText>
+      <SummaryValue>{numberWithSpaces(failed)}</SummaryValue>
+      <EuiText color="subdued">Errors</EuiText>
     </FlexItem>
     <FlexItem>
-      <EuiText className={styles.summaryValue}>
-        {millisecondsFormat(duration, 'H:mm:ss.SSS')}
-      </EuiText>
-      <EuiText color="subdued" className={styles.summaryLabel}>
-        Time Taken
-      </EuiText>
+      <SummaryValue>{millisecondsFormat(duration, 'H:mm:ss.SSS')}</SummaryValue>
+      <EuiText color="subdued">Time Taken</EuiText>
     </FlexItem>
-  </Row>
+  </SummaryContainer>
 )
 
 export default BulkActionSummary
diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/styles.module.scss b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/styles.module.scss
deleted file mode 100644
index 746dc28392..0000000000
--- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/styles.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.summary {
-  padding-top: 18px;
-  :global(.euiFlexItem) {
-    padding-right: 42px !important;
-  }
-}
-
-.summaryValue {
-  font-size: 18px !important;
-  line-height: 24px;
-  font-weight: 500 !important;
-}