From a9d8239a2558120d5b5fd23e545e12ea3760bec3 Mon Sep 17 00:00:00 2001 From: pandeymangg Date: Thu, 29 Feb 2024 14:07:10 +0530 Subject: [PATCH] UI --- .../[environmentId]/settings/layout.tsx | 2 +- .../lookandfeel/components/UnifiedStyling.tsx | 28 ++++++++- .../settings/lookandfeel/page.tsx | 8 +-- .../data-migration.ts | 57 +++++++++++++++++++ .../migration.sql | 2 + packages/database/package.json | 2 +- packages/lib/product/service.ts | 2 - 7 files changed, 90 insertions(+), 11 deletions(-) create mode 100644 packages/database/migrations/20240229062232_adds_styling_column_to_product_model/data-migration.ts create mode 100644 packages/database/migrations/20240229062232_adds_styling_column_to_product_model/migration.sql diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx index 04d5e58bfb..8859156fe7 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx @@ -43,7 +43,7 @@ export default async function SettingsLayout({ children, params }) { membershipRole={currentUserMembership?.role} />
-
+
{children}
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx index 814daf22de..31b354d667 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx +++ b/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 (
{/* Styling settings */} -
-

Styling settings

+
+
+
+
+ +
+

Enable unified styling

+

Set base styles for all surveys below

+
+
+ +
+ +
+

Allow overwriting styles

+

+ Activate if you want some surveys to be styled differently +

+
+
+
+
{/* Survey Preview */} -
+

Survey Preview

diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx index aa59cbd173..1d3f2d5151 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx +++ b/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."> - + {/* - + */} - @@ -77,7 +77,7 @@ export default async function ProfileSettingsPage({ params }: { params: { enviro defaultBrandColor={DEFAULT_BRAND_COLOR} environmentId={params.environmentId} /> - + */} diff --git a/packages/database/migrations/20240229062232_adds_styling_column_to_product_model/data-migration.ts b/packages/database/migrations/20240229062232_adds_styling_column_to_product_model/data-migration.ts new file mode 100644 index 0000000000..aada24924d --- /dev/null +++ b/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()); diff --git a/packages/database/migrations/20240229062232_adds_styling_column_to_product_model/migration.sql b/packages/database/migrations/20240229062232_adds_styling_column_to_product_model/migration.sql new file mode 100644 index 0000000000..f18b027d2d --- /dev/null +++ b/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"}}'; diff --git a/packages/database/package.json b/packages/database/package.json index ab2049e21d..88b449a37e 100644 --- a/packages/database/package.json +++ b/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", diff --git a/packages/lib/product/service.ts b/packages/lib/product/service.ts index c8422bea2f..a08d06d801 100644 --- a/packages/lib/product/service.ts +++ b/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 => {