From 8b6758ecd0332d713ea72728a8d434d1a8c958ed Mon Sep 17 00:00:00 2001
From: johnsoncherian <johnsonc.dev@gmail.com>
Date: Tue, 22 Apr 2025 17:29:55 +0530
Subject: [PATCH] fix: updated default text color for number and titles type
 steps variant

---
 .../Inspector/Components/Steps.jsx            | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
index 4fb4d521a1..314fe8ba89 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
@@ -15,6 +15,7 @@ import SortableList from '@/_components/SortableList';
 import Trash from '@/_ui/Icon/solidIcons/Trash';
 import { shallow } from 'zustand/shallow';
 import Switch from '@/Editor/CodeBuilder/Elements/Switch';
+import { usePrevious } from '@dnd-kit/utilities';
 
 export function Steps({ componentMeta, darkMode, ...restProps }) {
   const {
@@ -31,6 +32,10 @@ export function Steps({ componentMeta, darkMode, ...restProps }) {
   const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
 
   const isDynamicOptionsEnabled = getResolvedValue(component?.component?.definition?.properties?.advanced?.value);
+  const variant = component?.component?.definition?.properties?.variant?.value;
+  const prevVariant = usePrevious(variant)
+  console.log("variant", component?.component?.definition);
+
 
   const [options, setOptions] = useState([]);
   const [hoveredOptionIndex, setHoveredOptionIndex] = useState(null);
@@ -48,6 +53,20 @@ export function Steps({ componentMeta, darkMode, ...restProps }) {
     }
   }
 
+  // the default style of "number" & "titles" type are different for completed label
+  // TODO: Need to revisit this logic when text custom themes are implemented
+  useEffect(() => {
+    const completedLabelColor = component?.component?.definition?.styles?.completedLabel?.value;
+    if (variant !== prevVariant) {
+      if (variant === "numbers" && completedLabelColor === "#1B1F24") {
+        paramUpdated({ name: 'completedLabel' }, 'value', "#FFFFFF", 'styles', false, {});
+      } else if (variant === "titles" && completedLabelColor === "#FFFFFF") {
+        paramUpdated({ name: 'completedLabel' }, 'value', "#1B1F24", 'styles', false, {});
+      }
+    }
+
+  }, [variant])
+
   const getItemStyle = (isDragging, draggableStyle) => ({
     userSelect: 'none',
     ...draggableStyle,
@@ -374,15 +393,15 @@ export function Steps({ componentMeta, darkMode, ...restProps }) {
                   )}
                   {isDynamicStepsEnabled
                     ? renderElement(
-                        component,
-                        componentMeta,
-                        paramUpdated,
-                        dataQueries,
-                        'schema',
-                        'properties',
-                        currentState,
-                        allComponents
-                      )
+                      component,
+                      componentMeta,
+                      paramUpdated,
+                      dataQueries,
+                      'schema',
+                      'properties',
+                      currentState,
+                      allComponents
+                    )
                     : _renderOptions()}
                 </>
               );