From 86b6b57561e7705d0c5e1e94c2cbd18afb92e4ab Mon Sep 17 00:00:00 2001
From: TaruunMalik <taruunrmalik09@gmail.com>
Date: Sun, 13 Apr 2025 10:11:52 +0000
Subject: [PATCH 1/2] steps fix

---
 frontend/src/Editor/Components/Steps.jsx | 128 +++++++++++++----------
 1 file changed, 73 insertions(+), 55 deletions(-)

diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
index ef245f9d74..c22760d23a 100644
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -38,6 +38,11 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
     '--currentStepLabel': currentStepLabel === '#1B1F24' ? 'var(--text-primary)' : currentStepLabel,
   };
   const theme = properties.variant;
+  console.log(theme);
+  console.log(properties);
+  console.log(styles);
+  console.log(completedLabel, 'completed');
+
   const activeStepHandler = (id) => {
     const step = filteredSteps.find((item) => item.id == id);
     if (step) {
@@ -112,70 +117,83 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
 
   return (
     isVisible && (
-      <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}`} ${
+      <>
+        <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}`} 
+                ${
                   index < currentStepIndex
                     ? 'completed-label'
                     : index == currentStepIndex
                     ? 'active-label'
                     : 'incompleted-label'
                 }`}
-                data-bs-toggle="tooltip"
-                title={item?.tooltip}
-                onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
-                style={{
-                  ...dynamicStyle,
-                  overflow: 'visible',
-                  minWidth: 0,
-                  flex: 1,
-                }}
-              >
-                <div
+                  data-bs-toggle="tooltip"
+                  title={item?.tooltip}
+                  onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
                   style={{
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    maxWidth: '100%',
-                    paddingLeft: index >= 0 ? 5 : 0,
-                    paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
+                    ...dynamicStyle,
+                    overflow: 'visible',
+                    minWidth: 0,
+                    flex: 1,
                   }}
                 >
-                  {theme == 'titles' && item.name}
-                </div>
-              </a>
-            </ToolTip>
-          );
-        })}
-      </div>
+                  <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>
+      </>
     )
   );
 };

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 2/2] 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;
 }