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) => {
-  const router = useRouter();
-  const [unifiedStyling, setUnifiedStyling] = useState(product.styling?.unifiedStyling ?? false);
-  const [allowStyleOverwrite, setAllowStyleOverwrite] = useState(
-    product.styling?.allowStyleOverwrite ?? false
+  // ...
+  return (
+    <div className="flex">
+      <StylingSettings {...props} />
+      <SurveyPreview {...props} />
+    </div>
   );
-  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

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

@@ -1,3 +1,2 @@
 -- AlterTable
-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");
+ALTER TABLE "Product" ADD COLUMN     "styling" JSONB DEFAULT '{"unifiedStyling":true,"allowStyleOverwrite":true,"brandColor":{"light":"#64748b"}}';