fix: closing survey on mobile falsely positions it (#3004)

Co-authored-by: Piyush Gupta <piyushguptaa2z123@gmail.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx

@@ -8,7 +8,7 @@ interface ColorSurveyBgProps {
 }
 
 export const ColorSurveyBg = ({ handleBgChange, colors, background }: ColorSurveyBgProps) => {
-  const [color, setColor] = useState(background || "#ffff");
+  const [color, setColor] = useState(background || "#FFFFFF");
 
   const handleBg = (x: string) => {
     setColor(x);
@@ -23,7 +23,7 @@ export const ColorSurveyBg = ({ handleBgChange, colors, background }: ColorSurve
         {colors.map((x) => {
           return (
             <div
-              className={`h-16 w-16 cursor-pointer rounded-lg ${
+              className={`h-16 w-16 cursor-pointer rounded-lg border border-slate-300 ${
                 color === x ? "border-4 border-slate-500" : ""
               }`}
               key={x}

apps/web/app/(app)/environments/[environmentId]/product/tags/page.tsx

@@ -57,7 +57,7 @@ const Page = async ({ params }) => {
           productChannel={currentProductChannel}
         />
       </PageHeader>
-      <SettingsCard title="Manage Tags" description="Add, merge and remove response tags.">
+      <SettingsCard title="Manage Tags" description="Merge and remove response tags.">
         <EditTagsWrapper
           environment={environment}
           environmentTags={tags}

apps/web/app/lib/questions.tsx

@@ -132,7 +132,7 @@ export const questionTypes: TQuestion[] = [
   },
   {
     id: QuestionId.CTA,
-    label: "Call-to-Action",
+    label: "Call-to-Action (Statement)",
     description: "Prompt respondents to perform an action",
     icon: MousePointerClickIcon,
     preset: {

packages/lib/constants.ts

@@ -105,6 +105,7 @@ export const isS3Configured = () => {
 
 // Colors for Survey Bg
 export const SURVEY_BG_COLORS = [
+  "#FFFFFF",
   "#FFF2D8",
   "#EAD7BB",
   "#BCA37F",

packages/ui/MediaBackground/index.tsx

@@ -168,7 +168,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
           </div>
         );
       default:
-        return <div className={`${baseClasses} ${loadedClass} bg-white`} />;
+        return <div className={`${baseClasses} ${loadedClass}`} />;
     }
   };
 
@@ -185,7 +185,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
         className={`relative h-[90%] max-h-[40rem] w-[22rem] overflow-hidden rounded-[3rem] border-[6px] border-slate-400 ${getFilterStyle()}`}>
         {/* below element is use to create notch for the mobile device mockup   */}
         <div className="absolute left-1/2 right-1/2 top-2 z-20 h-4 w-1/3 -translate-x-1/2 transform rounded-full bg-slate-400"></div>
-        {renderBackground()}
+        {survey.type === "link" && renderBackground()}
         {renderContent()}
       </div>
     );

packages/ui/PreviewSurvey/components/Modal.tsx

@@ -29,7 +29,7 @@ export const Modal = ({
   const [show, setShow] = useState(true);
   const modalRef = useRef<HTMLDivElement | null>(null);
   const [windowWidth, setWindowWidth] = useState<number | null>(null);
-  const [overlayVisible, setOverlayVisible] = useState(true);
+  const [overlayVisible, setOverlayVisible] = useState(placement === "center");
 
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -42,6 +42,10 @@ export const Modal = ({
     }
   }, []);
 
+  useEffect(() => {
+    setOverlayVisible(placement === "center");
+  }, [placement]);
+
   const calculateScaling = () => {
     if (windowWidth === null) return {};
 
@@ -78,29 +82,23 @@ export const Modal = ({
   };
 
   const scalingClasses = calculateScaling();
-  const overlayStyle = overlayVisible && darkOverlay ? "bg-gray-700/80" : "bg-white/50";
 
   useEffect(() => {
-    if (!clickOutsideClose) {
-      setOverlayVisible(true);
-      setShow(true);
-    }
-
+    if (!clickOutsideClose || placement !== "center") return;
     const handleClickOutside = (e: MouseEvent) => {
       const previewBase = document.getElementById("preview-survey-base");
 
       if (
-        scalingClasses.transformOrigin === "" &&
         clickOutsideClose &&
         modalRef.current &&
         previewBase &&
         previewBase.contains(e.target as Node) &&
         !modalRef.current.contains(e.target as Node)
       ) {
+        setShow(false);
         setTimeout(() => {
-          setOverlayVisible(false);
-          setShow(false);
-        }, 500);
+          setShow(true);
+        }, 1000);
       }
     };
 
@@ -108,7 +106,7 @@ export const Modal = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [clickOutsideClose, scalingClasses.transformOrigin]);
+  }, [clickOutsideClose, placement]);
 
   useEffect(() => {
     setShow(isOpen);
@@ -137,7 +135,7 @@ export const Modal = ({
       aria-live="assertive"
       className={cn(
         "relative h-full w-full overflow-hidden rounded-b-md",
-        overlayStyle,
+        overlayVisible ? (darkOverlay ? "bg-gray-700/80" : "bg-white/50") : "",
         "transition-all duration-500 ease-in-out"
       )}>
       <div

packages/ui/PreviewSurvey/index.tsx

@@ -205,8 +205,8 @@ export const PreviewSurvey = ({
   const handlePreviewModalClose = () => {
     setIsModalOpen(false);
     setTimeout(() => {
-      setQuestionId(survey.welcomeCard.enabled ? "start" : survey?.questions[0]?.id);
       setIsModalOpen(true);
+      resetQuestionProgress();
     }, 1000);
   };