From 7b5cd803951ffc3eb18471c52958e75642459171 Mon Sep 17 00:00:00 2001
From: TaruunMalik <taruunrmalik09@gmail.com>
Date: Mon, 14 Apr 2025 05:48:21 +0000
Subject: [PATCH] moved fix to css file

---
 frontend/src/Editor/Components/Steps.jsx | 122 ++++++++++-------------
 frontend/src/_styles/tabler.scss         |   7 +-
 2 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
index c22760d23a..8c5be86e74 100644
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -117,48 +117,37 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
 
   return (
     isVisible && (
-      <>
-        <style>
-          {`
-      .steps-counter .step-item:before {
-        color:${completedLabel} !important;
-      }
-        .steps .step-item.active:before{
-          color : ${currentStepLabel} !important;
-        }
-        `}
-        </style>
-        <div
-          className={`steps ${theme == 'numbers' && 'steps-counter '}`}
-          style={{
-            color: textColor,
-            height,
-            boxShadow,
-            opacity: isDisabled ? 0.5 : 1,
-            ...(theme === 'numbers'
-              ? {
-                  paddingTop: 4,
-                }
-              : theme === 'plain'
-              ? {
-                  paddingTop: 10,
-                }
-              : {}),
-          }}
-          data-cy={dataCy}
-        >
-          {filteredSteps?.map((item, index) => {
-            const isStepDisabled = item.disabled;
-            return (
-              <ToolTip
-                key={item.id + index + item.name}
-                show={!item.disabled && !isDisabled}
-                message={item.tooltip || ''}
-              >
-                <a
-                  className={`step-item ${item.id == activeStepId && 'active'} ${
-                    !(!isDisabled && !isStepDisabled) && 'step-item-disabled'
-                  }  ${color && `step-${color}`} 
+      <div
+        className={`steps ${theme == 'numbers' && 'steps-counter '}`}
+        style={{
+          color: textColor,
+          height,
+          boxShadow,
+          opacity: isDisabled ? 0.5 : 1,
+          ...(theme === 'numbers'
+            ? {
+                paddingTop: 4,
+              }
+            : theme === 'plain'
+            ? {
+                paddingTop: 10,
+              }
+            : {}),
+        }}
+        data-cy={dataCy}
+      >
+        {filteredSteps?.map((item, index) => {
+          const isStepDisabled = item.disabled;
+          return (
+            <ToolTip
+              key={item.id + index + item.name}
+              show={!item.disabled && !isDisabled}
+              message={item.tooltip || ''}
+            >
+              <a
+                className={`step-item ${item.id == activeStepId && 'active'} ${
+                  !(!isDisabled && !isStepDisabled) && 'step-item-disabled'
+                }  ${color && `step-${color}`} 
                 ${
                   index < currentStepIndex
                     ? 'completed-label'
@@ -166,34 +155,33 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
                     ? 'active-label'
                     : 'incompleted-label'
                 }`}
-                  data-bs-toggle="tooltip"
-                  title={item?.tooltip}
-                  onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
+                data-bs-toggle="tooltip"
+                title={item?.tooltip}
+                onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
+                style={{
+                  ...dynamicStyle,
+                  overflow: 'visible',
+                  minWidth: 0,
+                  flex: 1,
+                }}
+              >
+                <div
                   style={{
-                    ...dynamicStyle,
-                    overflow: 'visible',
-                    minWidth: 0,
-                    flex: 1,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%',
+                    paddingLeft: index >= 0 ? 5 : 0,
+                    paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
                   }}
                 >
-                  <div
-                    style={{
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      maxWidth: '100%',
-                      paddingLeft: index >= 0 ? 5 : 0,
-                      paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
-                    }}
-                  >
-                    {theme == 'titles' && item.name}
-                  </div>
-                </a>
-              </ToolTip>
-            );
-          })}
-        </div>
-      </>
+                  {theme == 'titles' && item.name}
+                </div>
+              </a>
+            </ToolTip>
+          );
+        })}
+      </div>
     )
   );
 };
diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss
index 6d79d80093..330455e9f9 100644
--- a/frontend/src/_styles/tabler.scss
+++ b/frontend/src/_styles/tabler.scss
@@ -17502,7 +17502,12 @@ a.step-item:hover {
         width: calc(100% - 32px) !important;
     }
 }
-
+.steps-counter .step-item:before {
+    color:var(--completedLabel) !important;
+  }
+  .steps .step-item.active:before{
+          color : var(--currentStepLabel) !important;
+        }
 .step-item {
     font-weight: 500;
 }