fix: Survey editor tweaks (#2378)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>

apps/formbricks-com/app/docs/api/management/surveys/page.mdx

@@ -91,7 +91,7 @@ This set of API can be used to
                                 "destination": "end"
                             }
                         ],
-                        "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We would love to understand your user experience better. Sharing your insight helps a lot!</span></p>",
+                        "html": "<p class=\"fb-editor-paragraph\" dir=\"ltr\"><span>We would love to understand your user experience better. Sharing your insight helps a lot.</span></p>",
                         "buttonExternal": false,
                         "dismissButtonLabel": "No, thanks."
                     },

apps/web/app/(app)/environments/[environmentId]/surveys/templates/templates.ts

@@ -357,7 +357,7 @@ export const templates: TTemplate[] = [
           id: createId(),
           html: {
             default:
-              '<p class="fb-editor-paragraph" dir="ltr"><span>We would love to understand your user experience better. Sharing your insight helps a lot!</span></p>',
+              '<p class="fb-editor-paragraph" dir="ltr"><span>We would love to understand your user experience better. Sharing your insight helps a lot.</span></p>',
           },
           type: TSurveyQuestionType.CTA,
           logic: [{ condition: "skipped", destination: "end" }],

apps/web/app/lib/questions.ts

@@ -123,7 +123,10 @@ export const questionTypes: TSurveyQuestionType[] = [
     icon: MousePointerClickIcon,
     preset: {
       headline: { default: "You are one of our power users!" },
-      html: { default: "" },
+      html: {
+        default:
+          '<p class="fb-editor-paragraph" dir="ltr"><span>We would love to understand your user experience better. Sharing your insight helps a lot.</span></p>',
+      },
       buttonLabel: { default: "Book interview" },
       buttonExternal: false,
       dismissButtonLabel: "Skip",

packages/surveys/src/components/general/FileInput.tsx

@@ -202,23 +202,24 @@ export default function FileInput({
   }, [allowMultipleFiles, fileUrls, isUploading]);
 
   return (
-    <div className="items-left bg-input-bg hover:bg-input-bg-selected border-border relative mt-3 flex w-full flex-col justify-center rounded-lg border-2 border-dashed dark:border-slate-600 dark:bg-slate-700 dark:hover:border-slate-500 dark:hover:bg-slate-800">
+    <div
+      className={`items-left bg-input-bg hover:bg-input-bg-selected border-border relative mt-3 flex w-full flex-col justify-center rounded-lg border-2 border-dashed dark:border-slate-600 dark:bg-slate-700 dark:hover:border-slate-500 dark:hover:bg-slate-800`}>
       <div className="max-h-[30vh] overflow-auto">
         {fileUrls &&
           fileUrls?.map((file, index) => {
             const fileName = getOriginalFileNameFromUrl(file);
 
             return (
-              <div key={index} className="relative m-2 rounded-md bg-slate-200">
+              <div key={index} className="bg-input-bg-selected border-border relative m-2 rounded-md border">
                 <div className="absolute right-0 top-0 m-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-md bg-slate-100 hover:bg-slate-50">
+                  <div className="bg-survey-bg flex h-5 w-5 cursor-pointer items-center justify-center rounded-md">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
                       viewBox="0 0 26 26"
                       strokeWidth={1}
                       stroke="currentColor"
-                      className="h-5 text-slate-700 hover:text-slate-900"
+                      className="text-heading h-5"
                       onClick={(e) => handleDeleteFile(index, e)}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M9 9l10 10m0-10L9 19" />
                     </svg>
@@ -237,11 +238,11 @@ export default function FileInput({
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     class="lucide lucide-file"
-                    className="h-6 text-slate-500">
+                    className="text-heading h-6">
                     <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
                     <polyline points="14 2 14 8 20 8" />
                   </svg>
-                  <p className="mt-1 w-full overflow-hidden overflow-ellipsis whitespace-nowrap px-2 text-center text-sm text-slate-600 dark:text-slate-400">
+                  <p className="text-heading mt-1 w-full overflow-hidden overflow-ellipsis whitespace-nowrap px-2 text-center text-sm">
                     {fileName}
                   </p>
                 </div>
@@ -262,7 +263,7 @@ export default function FileInput({
         <label htmlFor="selectedFile" onDragOver={(e) => handleDragOver(e)} onDrop={(e) => handleDrop(e)}>
           {showUploader && (
             <div
-              className="flex flex-col items-center justify-center py-6 hover:cursor-pointer focus:border-2 focus:border-red-500 focus:outline-none"
+              className="flex flex-col items-center justify-center py-6 hover:cursor-pointer focus:border-2 focus:outline-none"
               tabIndex={1}
               onKeyDown={(e) => {
                 // Accessibility: if spacebar was pressed pass this down to the input

packages/surveys/src/components/general/Headline.tsx

@@ -18,7 +18,9 @@ export default function Headline({
       <div className={`flex items-center  ${alignTextCenter ? "justify-center" : "justify-between"}`}>
         {headline}
         {!required && (
-          <span className="text-info-text ml-2 self-start text-sm font-normal leading-7" tabIndex={-1}>
+          <span
+            className="text-heading ml-2 self-start text-sm font-normal leading-7 opacity-60"
+            tabIndex={-1}>
             Optional
           </span>
         )}

packages/surveys/src/components/general/QuestionConditional.tsx

@@ -95,7 +95,7 @@ export default function QuestionConditional({
     <NPSQuestion
       key={question.id}
       question={question}
-      value={typeof value === "number" ? value : 0}
+      value={typeof value === "number" ? value : undefined}
       onChange={onChange}
       onSubmit={onSubmit}
       onBack={onBack}
@@ -125,7 +125,7 @@ export default function QuestionConditional({
     <RatingQuestion
       key={question.id}
       question={question}
-      value={typeof value === "number" ? value : 0}
+      value={typeof value === "number" ? value : undefined}
       onChange={onChange}
       onSubmit={onSubmit}
       onBack={onBack}

packages/surveys/src/components/questions/NPSQuestion.tsx

@@ -13,7 +13,7 @@ import type { TSurveyNPSQuestion } from "@formbricks/types/surveys";
 
 interface NPSQuestionProps {
   question: TSurveyNPSQuestion;
-  value: number;
+  value?: number;
   onChange: (responseData: TResponseData) => void;
   onSubmit: (data: TResponseData, ttc: TResponseTtc) => void;
   onBack: () => void;
@@ -49,7 +49,7 @@ export const NPSQuestion = ({
         e.preventDefault();
         const updatedTtcObj = getUpdatedTtc(ttc, question.id, performance.now() - startTime);
         setTtc(updatedTtcObj);
-        onSubmit({ [question.id]: value }, updatedTtcObj);
+        onSubmit({ [question.id]: value ?? "" }, updatedTtcObj);
       }}>
       {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline
@@ -81,7 +81,9 @@ export const NPSQuestion = ({
                     }
                   }}
                   className={cn(
-                    value === number ? "border-border-highlight bg-accent-selected-bg z-10" : "border-border",
+                    value === number
+                      ? "border-border-highlight bg-accent-selected-bg z-10 border"
+                      : "border-border",
                     "text-heading first:rounded-l-custom last:rounded-r-custom focus:border-brand relative h-10 flex-1 cursor-pointer border-b border-l border-t text-center text-sm leading-10 last:border-r focus:border-2 focus:outline-none",
                     hoveredNumber === number ? "bg-accent-bg" : ""
                   )}>
@@ -112,7 +114,7 @@ export const NPSQuestion = ({
               );
             })}
           </div>
-          <div className="text-info-text flex justify-between px-1.5 text-xs leading-6">
+          <div className="text-subheading mt-2 flex justify-between px-1.5 text-xs leading-6">
             <p>{getLocalizedValue(question.lowerLabel, languageCode)}</p>
             <p>{getLocalizedValue(question.upperLabel, languageCode)}</p>
           </div>

packages/surveys/src/components/questions/RatingQuestion.tsx

@@ -26,7 +26,7 @@ import Subheader from "../general/Subheader";
 
 interface RatingQuestionProps {
   question: TSurveyRatingQuestion;
-  value: number;
+  value?: number;
   onChange: (responseData: TResponseData) => void;
   onSubmit: (data: TResponseData, ttc: TResponseTtc) => void;
   onBack: () => void;
@@ -93,7 +93,7 @@ export const RatingQuestion = ({
         e.preventDefault();
         const updatedTtcObj = getUpdatedTtc(ttc, question.id, performance.now() - startTime);
         setTtc(updatedTtcObj);
-        onSubmit({ [question.id]: value }, updatedTtcObj);
+        onSubmit({ [question.id]: value ?? "" }, updatedTtcObj);
       }}
       className="w-full">
       {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
@@ -129,10 +129,10 @@ export const RatingQuestion = ({
                     }}
                     className={cn(
                       value === number
-                        ? "bg-accent-selected-bg border-border-highlight z-10"
+                        ? "bg-accent-selected-bg border-border-highlight z-10 border"
                         : "border-border",
-                      a.length === number ? "rounded-r-md border-r" : "",
-                      number === 1 ? "rounded-l-md" : "",
+                      a.length === number ? "rounded-r-custom border-r" : "",
+                      number === 1 ? "rounded-l-custom" : "",
                       hoveredNumber === number ? "bg-accent-bg " : "",
                       "text-heading focus:border-brand relative flex min-h-[41px] w-full cursor-pointer items-center justify-center border-b border-l border-t focus:border-2 focus:outline-none"
                     )}>

packages/surveys/src/styles/preflight.css

@@ -10,7 +10,7 @@
   border-color: theme("borderColor.DEFAULT", currentColor);
   /* 2 */
 
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Inter, Helvetica, Arial, sans-serif;
   font-size: 1em;
 }
 #fbjs ::before,

packages/ui/RatingResponse/index.tsx

@@ -28,7 +28,7 @@ export const RatingResponse: React.FC<RatingResponseProps> = ({ scale, range, an
     const stars: any = [];
     for (let i = 0; i < range; i++) {
       if (i < parseInt(answer.toString())) {
-        stars.push(<StarIcon key={i} className="h-7 text-yellow-400" />);
+        stars.push(<StarIcon key={i} fill="rgb(250 204 21)" className="h-7 text-yellow-400" />);
       } else {
         stars.push(<StarIcon key={i} className="h-7 text-slate-300" />);
       }