Edit packages/database/migrations/20240229062232_adds_styling_column_to_product_model/migration.sql

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

@@ -191,49 +191,49 @@ const UnifiedStyling = ({ product }: UnifiedStylingProps) => {
     }
   }, [unifiedStyling]);
 
-  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,
-          },
+  const onSave = async () => {
+    await updateProductAction(product.id, {
+      styling: {
+        unifiedStyling,
+        allowStyleOverwrite,
+        brandColor: {
+          light: brandColor,
+          dark: brandColorDark,
         },
-      });
-  
-      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]);
+        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();
+  };
 
   return (
     <div className="flex">

packages/database/migrations/20240229062232_adds_styling_column_to_product_model/migration.sql

@@ -1,2 +1,3 @@
 -- AlterTable
-ALTER TABLE "Product" ADD COLUMN     "styling" JSONB DEFAULT '{"unifiedStyling":true,"allowStyleOverwrite":true,"brandColor":{"light":"#64748b"}}';
+ALTER TABLE "Product" ADD COLUMN "styling" JSONB DEFAULT '{"unifiedStyling":true,"allowStyleOverwrite":true,"brandColor":{"light":"#64748b"}}';
+CREATE INDEX idx_product_styling ON "Product" USING gin ("styling");