UI

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

@@ -43,7 +43,7 @@ export default async function SettingsLayout({ children, params }) {
           membershipRole={currentUserMembership?.role}
         />
         <div className="w-full md:ml-64">
-          <div className="max-w-4xl px-20 pb-6 pt-14 md:pt-6">
+          <div className="px-20 pb-6 pt-14 md:pt-6">
             <div>{children}</div>
           </div>
         </div>

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

@@ -2,17 +2,39 @@
 
 import React from "react";
 
+import { Switch } from "@formbricks/ui/Switch";
+
 const UnifiedStyling = () => {
   return (
     <div className="flex">
       {/* Styling settings */}
-      <div className="w-1/2">
-        <p>Styling settings</p>
+      <div className="w-1/2 pr-6">
+        <div className="flex flex-col">
+          <div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
+            <div className="flex items-center gap-6">
+              <Switch />
+              <div className="flex flex-col">
+                <h3 className="text-base font-semibold">Enable unified styling</h3>
+                <p className="text-sm text-slate-500">Set base styles for all surveys below</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-6">
+              <Switch />
+              <div className="flex flex-col">
+                <h3 className="text-base font-semibold">Allow overwriting styles</h3>
+                <p className="text-sm text-slate-500">
+                  Activate if you want some surveys to be styled differently
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       {/* Survey Preview */}
 
-      <div className="w-1/2">
+      <div className="w-1/2 bg-slate-100">
         <h1>Survey Preview</h1>
       </div>
     </div>

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

@@ -56,19 +56,19 @@ export default async function ProfileSettingsPage({ params }: { params: { enviro
         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.">
+      {/* <SettingsCard title="Brand Color" description="Match the surveys with your user interface.">
         <EditBrandColor
           product={product}
           isBrandColorDisabled={isBrandColorEditDisabled}
           environmentId={params.environmentId}
         />
-      </SettingsCard>
+      </SettingsCard> */}
       <SettingsCard
         title="In-app Survey Placement"
         description="Change where surveys will be shown in your web app.">
         <EditPlacement product={product} environmentId={params.environmentId} />
       </SettingsCard>
-      <SettingsCard
+      {/* <SettingsCard
         noPadding
         title="Highlight Border"
         description="Make sure your users notice the survey you display">
@@ -77,7 +77,7 @@ export default async function ProfileSettingsPage({ params }: { params: { enviro
           defaultBrandColor={DEFAULT_BRAND_COLOR}
           environmentId={params.environmentId}
         />
-      </SettingsCard>
+      </SettingsCard> */}
       <SettingsCard
         title="Formbricks Branding"
         description="We love your support but understand if you toggle it off.">

packages/database/migrations/20240229062232_adds_styling_column_to_product_model/data-migration.ts

@@ -0,0 +1,57 @@
+import { PrismaClient } from "@prisma/client";
+
+import { TStyling } from "@formbricks/types/styling";
+
+const prisma = new PrismaClient();
+
+async function main() {
+  await prisma.$transaction(async (tx) => {
+    // product table with brand color and the highlight border color (if available)
+    // styling object needs to be created for each product
+    const products = await tx.product.findMany({});
+
+    if (!products) {
+      // something went wrong, could not find any products
+      return;
+    }
+
+    if (products.length) {
+      for (const product of products) {
+        if (product.styling !== null) {
+          // styling object already exists for this product
+          continue;
+        }
+
+        const styling: TStyling = {
+          unifiedStyling: true,
+          allowStyleOverwrite: true,
+          brandColor: {
+            light: product.brandColor,
+          },
+          ...(product.highlightBorderColor && {
+            highlightBorderColor: {
+              light: product.highlightBorderColor,
+              dark: product.highlightBorderColor,
+            },
+          }),
+        };
+
+        await tx.product.update({
+          where: {
+            id: product.id,
+          },
+          data: {
+            styling,
+          },
+        });
+      }
+    }
+  });
+}
+
+main()
+  .catch(async (e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(async () => await prisma.$disconnect());

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

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Product" ADD COLUMN     "styling" JSONB DEFAULT '{"unifiedStyling":true,"allowStyleOverwrite":true,"brandColor":{"light":"#64748b"}}';

packages/database/package.json

@@ -24,7 +24,7 @@
     "post-install": "pnpm generate",
     "predev": "pnpm generate",
     "data-migration:v1.6": "ts-node ./migrations/20240207041922_advanced_targeting/data-migration.ts",
-    "data-migration:styling": "ts-node ./migrations/20240228045810_adds_styling_object_to_product_model/data-migration.ts"
+    "data-migration:styling": "ts-node ./migrations/20240229062232_adds_styling_column_to_product_model/data-migration.ts"
   },
   "dependencies": {
     "@prisma/client": "^5.10.2",

packages/lib/product/service.ts

@@ -35,8 +35,6 @@ const selectProduct = {
   darkOverlay: true,
   environments: true,
   styling: true,
-  unifiedStyling: true,
-  allowStyleOverwrite: true,
 };
 
 export const getProducts = async (teamId: string, page?: number): Promise<TProduct[]> => {