Edit apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx

apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx

@@ -122,23 +122,23 @@ const previewSurvey = {
   segment: null,
 };
 
-const StylingSettings = ({...props}) => {
-  // ... styling settings code ...
-};
-
-const SurveyPreview = ({...props}) => {
-  // ... survey preview code ...
-};
-
 const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
-  // ...
-  return (
-    <div className="flex">
-      <StylingSettings {...props} />
-      <SurveyPreview {...props} />
-    </div>
+  const router = useRouter();
+  const [unifiedStyling, setUnifiedStyling] = useState(product.styling?.unifiedStyling ?? false);
+  const [allowStyleOverwrite, setAllowStyleOverwrite] = useState(
+    product.styling?.allowStyleOverwrite ?? false
   );
-};
+  const [brandColor, setBrandColor] = useState(
+    product.styling?.brandColor?.light ?? colorDefaults.brandColor
+  );
+  const [questionColor, setQuestionColor] = useState(
+    product.styling?.questionColor?.light ?? colorDefaults.questionColor
+  );
+  const [inputColor, setInputColor] = useState(
+    product.styling?.inputColor?.light ?? colorDefaults.inputColor
+  );
+  const [inputBorderColor, setInputBorderColor] = useState(
+    product.styling?.inputBorderColor?.light ?? colorDefaults.inputBorderColor
   );
   const [cardBackgroundColor, setCardBackgroundColor] = useState(
     product.styling?.cardBackgroundColor?.light ?? colorDefaults.cardBackgroundColor
@@ -191,49 +191,49 @@ const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
     }
   }, [unifiedStyling]);
 
-  const onSave = async () => {
-    await updateProductAction(product.id, {
-      styling: {
-        unifiedStyling,
-        allowStyleOverwrite,
-        brandColor: {
-          light: brandColor,
-          dark: brandColorDark,
+  const onSave = useCallback(async () => {
+      await updateProductAction(product.id, {
+        styling: {
+          unifiedStyling,
+          allowStyleOverwrite,
+          brandColor: {
+            light: brandColor,
+            dark: brandColorDark,
+          },
+          questionColor: {
+            light: questionColor,
+            dark: questionColorDark,
+          },
+          inputColor: {
+            light: inputColor,
+            dark: inputColorDark,
+          },
+          inputBorderColor: {
+            light: inputBorderColor,
+            dark: inputBorderColorDark,
+          },
+          cardBackgroundColor: {
+            light: cardBackgroundColor,
+            dark: cardBackgroundColorDark,
+          },
+          highlightBorderColor: allowHighlightBorder
+            ? {
+                light: highlightBorderColor,
+                dark: highlightBorderColorDark,
+              }
+            : undefined,
+          isDarkModeEnabled: isDarkMode,
+          roundness,
+          cardArrangement: {
+            linkSurveys: linkSurveysCardArrangement,
+            inAppSurveys: inAppSurveysCardArrangement,
+          },
         },
-        questionColor: {
-          light: questionColor,
-          dark: questionColorDark,
-        },
-        inputColor: {
-          light: inputColor,
-          dark: inputColorDark,
-        },
-        inputBorderColor: {
-          light: inputBorderColor,
-          dark: inputBorderColorDark,
-        },
-        cardBackgroundColor: {
-          light: cardBackgroundColor,
-          dark: cardBackgroundColorDark,
-        },
-        highlightBorderColor: allowHighlightBorder
-          ? {
-              light: highlightBorderColor,
-              dark: highlightBorderColorDark,
-            }
-          : undefined,
-        isDarkModeEnabled: isDarkMode,
-        roundness,
-        cardArrangement: {
-          linkSurveys: linkSurveysCardArrangement,
-          inAppSurveys: inAppSurveysCardArrangement,
-        },
-      },
-    });
-
-    toast.success("Styling updated successfully.");
-    router.refresh();
-  };
+      });
+  
+      toast.success("Styling updated successfully.");
+      router.refresh();
+    }, [unifiedStyling, allowStyleOverwrite, brandColor, brandColorDark, questionColor, questionColorDark, inputColor, inputColorDark, inputBorderColor, inputBorderColorDark, cardBackgroundColor, cardBackgroundColorDark, allowHighlightBorder, highlightBorderColor, highlightBorderColorDark, isDarkMode, roundness, linkSurveysCardArrangement, inAppSurveysCardArrangement]);
 
   return (
     <div className="flex">