From fdba260301285af7ae301bb4f27d78180a1ced8e Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Tue, 9 Sep 2025 14:03:28 +0530
Subject: [PATCH] fix: project styling settings issues (#6488)

---
 apps/web/lib/styling/constants.ts                             | 4 ----
 .../projects/settings/look/components/theme-styling.tsx       | 4 ++--
 .../modules/survey/editor/components/animated-survey-bg.tsx   | 1 +
 apps/web/modules/survey/editor/components/color-survey-bg.tsx | 1 +
 apps/web/modules/ui/components/media-background/index.tsx     | 2 +-
 apps/web/modules/ui/components/preview-survey/index.tsx       | 2 +-
 6 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/web/lib/styling/constants.ts b/apps/web/lib/styling/constants.ts
index 0d43306047..3986e18339 100644
--- a/apps/web/lib/styling/constants.ts
+++ b/apps/web/lib/styling/constants.ts
@@ -34,10 +34,6 @@ export const defaultStyling: TProjectStyling = {
   isLogoHidden: false,
   highlightBorderColor: undefined,
   isDarkModeEnabled: false,
-  background: {
-    bg: "#fff",
-    bgType: "color",
-  },
   roundness: 8,
   cardArrangement: {
     linkSurveys: "straight",
diff --git a/apps/web/modules/projects/settings/look/components/theme-styling.tsx b/apps/web/modules/projects/settings/look/components/theme-styling.tsx
index f387cae82b..133f532a20 100644
--- a/apps/web/modules/projects/settings/look/components/theme-styling.tsx
+++ b/apps/web/modules/projects/settings/look/components/theme-styling.tsx
@@ -29,7 +29,7 @@ import { useCallback, useState } from "react";
 import { SubmitHandler, UseFormReturn, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { TProjectStyling, ZProjectStyling } from "@formbricks/types/project";
-import { TSurvey, TSurveyStyling, TSurveyType } from "@formbricks/types/surveys/types";
+import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys/types";
 
 interface ThemeStylingProps {
   project: Project;
@@ -190,7 +190,7 @@ export const ThemeStyling = ({
           <div className="relative w-1/2 rounded-lg bg-slate-100 pt-4">
             <div className="sticky top-4 mb-4 h-[600px]">
               <ThemeStylingPreviewSurvey
-                survey={previewSurvey(project.name, t) as TSurvey}
+                survey={previewSurvey(project.name, t)}
                 project={{
                   ...project,
                   styling: form.watch(),
diff --git a/apps/web/modules/survey/editor/components/animated-survey-bg.tsx b/apps/web/modules/survey/editor/components/animated-survey-bg.tsx
index a128662ca6..fc3a028b48 100644
--- a/apps/web/modules/survey/editor/components/animated-survey-bg.tsx
+++ b/apps/web/modules/survey/editor/components/animated-survey-bg.tsx
@@ -76,6 +76,7 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
           const value = animationFiles[key];
           return (
             <button
+              type="button"
               key={key}
               onMouseEnter={() => debouncedManagePlayback(index, "play")}
               onMouseLeave={() => debouncedManagePlayback(index, "pause")}
diff --git a/apps/web/modules/survey/editor/components/color-survey-bg.tsx b/apps/web/modules/survey/editor/components/color-survey-bg.tsx
index 44f956e634..31aac3beb6 100644
--- a/apps/web/modules/survey/editor/components/color-survey-bg.tsx
+++ b/apps/web/modules/survey/editor/components/color-survey-bg.tsx
@@ -23,6 +23,7 @@ export const ColorSurveyBg = ({ handleBgChange, colors, background }: ColorSurve
         {colors.map((x) => {
           return (
             <button
+              type="button"
               className={`h-16 w-16 cursor-pointer rounded-lg border border-slate-300 ${
                 color === x ? "border-4 border-slate-500" : ""
               }`}
diff --git a/apps/web/modules/ui/components/media-background/index.tsx b/apps/web/modules/ui/components/media-background/index.tsx
index 78a1df2c84..e6469ce101 100644
--- a/apps/web/modules/ui/components/media-background/index.tsx
+++ b/apps/web/modules/ui/components/media-background/index.tsx
@@ -67,7 +67,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
     }
   }, [backgroundLoaded, onBackgroundLoaded]);
 
-  const baseClasses = "absolute inset-0 h-full w-full transition-opacity duration-500";
+  const baseClasses = "absolute inset-0 h-full w-full transition-opacity duration-500 bg-slate-200";
   const loadedClass = backgroundLoaded ? "opacity-100" : "opacity-0";
 
   const getFilterStyle = () => {
diff --git a/apps/web/modules/ui/components/preview-survey/index.tsx b/apps/web/modules/ui/components/preview-survey/index.tsx
index e594d8e6c3..c5235b32ac 100644
--- a/apps/web/modules/ui/components/preview-survey/index.tsx
+++ b/apps/web/modules/ui/components/preview-survey/index.tsx
@@ -243,7 +243,7 @@ export const PreviewSurvey = ({
               : "expanded_with_fixed_positioning"
             : "shrink"
         }
-        className="relative flex h-full w-[95%] items-center justify-center rounded-lg border border-slate-300 bg-slate-200">
+        className="relative flex h-full w-[95%] items-center justify-center rounded-lg border border-slate-300">
         {previewMode === "mobile" && (
           <>
             <p className="absolute left-0 top-0 m-2 rounded bg-slate-100 px-2 py-1 text-xs text-slate-400">