fix: styling object

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

@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+
+const UnifiedStyling = () => {
+  return (
+    <div className="flex">
+      {/* Styling settings */}
+      <div className="w-1/2">
+        <p>Styling settings</p>
+      </div>
+
+      {/* Survey Preview */}
+
+      <div className="w-1/2">
+        <h1>Survey Preview</h1>
+      </div>
+    </div>
+  );
+};
+
+export default UnifiedStyling;

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

@@ -18,6 +18,7 @@ import { EditBrandColor } from "./components/EditBrandColor";
 import { EditFormbricksBranding } from "./components/EditBranding";
 import { EditHighlightBorder } from "./components/EditHighlightBorder";
 import { EditPlacement } from "./components/EditPlacement";
+import UnifiedStyling from "./components/UnifiedStyling";
 
 export default async function ProfileSettingsPage({ params }: { params: { environmentId: string } }) {
   const [session, team, product] = await Promise.all([
@@ -50,6 +51,11 @@ export default async function ProfileSettingsPage({ params }: { params: { enviro
   return (
     <div>
       <SettingsTitle title="Look & Feel" />
+      <SettingsCard
+        title="Unified Styling"
+        description="Set styling for ALL surveys in this project. You can still overwrite these styles in the survey editor.">
+        <UnifiedStyling />
+      </SettingsCard>
       <SettingsCard title="Brand Color" description="Match the surveys with your user interface.">
         <EditBrandColor
           product={product}

packages/database/migrations/20240228045810_adds_styling_object_to_product_model/data-migration.ts

@@ -26,19 +26,7 @@ async function main() {
           brandColor: {
             light: product.brandColor,
           },
-          questionColor: {
-            light: product.brandColor,
-          },
-          inputColor: {
-            light: product.brandColor,
-          },
-          inputBorderColor: {
-            light: product.brandColor,
-          },
-          cardBackgroundColor: {
-            light: product.brandColor,
-          },
-          enableDarkMode: false,
+          isDarkModeEnabled: false,
           roundness: 8,
           cardArrangement: {
             linkSurveys: "simple",

packages/types/styling.ts

@@ -15,15 +15,15 @@ export const ZCardArrangement = z.object({
 });
 
 export const ZStyling = z.object({
-  brandColor: ZStylingColor,
-  questionColor: ZStylingColor,
-  inputColor: ZStylingColor,
-  inputBorderColor: ZStylingColor,
-  cardBackgroundColor: ZStylingColor,
+  brandColor: ZStylingColor.optional(),
+  questionColor: ZStylingColor.optional(),
+  inputColor: ZStylingColor.optional(),
+  inputBorderColor: ZStylingColor.optional(),
+  cardBackgroundColor: ZStylingColor.optional(),
   highlightBorderColor: ZStylingColor.optional(),
-  enableDarkMode: z.boolean(),
-  roundness: z.number(),
-  cardArrangement: ZCardArrangement,
+  isDarkModeEnabled: z.boolean(),
+  roundness: z.number().optional(),
+  cardArrangement: ZCardArrangement.optional(),
 });
 
 export type TStyling = z.infer<typeof ZStyling>;