fix: project styling settings issues (#6488)

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",

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(),

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")}

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" : ""
               }`}

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 = () => {

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">