From 5dcd32050af705017a7b9481a3f1c78bd90e80f6 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Mon, 2 Dec 2024 19:42:07 -0800
Subject: [PATCH] fix: usability improvements survey editor (#4362)

Co-authored-by: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>
---
 .../edit/components/AddressQuestionForm.tsx   |  2 +-
 .../edit/components/CalQuestionForm.tsx       |  4 +-
 .../edit/components/ConditionalLogic.tsx      |  1 -
 .../components/ContactInfoQuestionForm.tsx    |  2 +-
 .../edit/components/DateQuestionForm.tsx      |  4 +-
 .../edit/components/EditorCardMenu.tsx        | 52 +++++++++++--------
 .../components/FileUploadQuestionForm.tsx     |  5 +-
 .../edit/components/MatrixQuestionForm.tsx    | 48 +++++++++++------
 .../components/MultipleChoiceQuestionForm.tsx |  8 +--
 .../edit/components/NPSQuestionForm.tsx       |  6 +--
 .../edit/components/OpenQuestionForm.tsx      |  2 +-
 .../edit/components/PictureSelectionForm.tsx  |  4 +-
 .../edit/components/QuestionCard.tsx          |  2 +-
 .../edit/components/QuestionOptionChoice.tsx  | 41 ++++++++++-----
 .../edit/components/RankingQuestionForm.tsx   |  4 +-
 .../edit/components/RatingQuestionForm.tsx    |  6 +--
 .../components/QuestionFormInput/index.tsx    | 42 +++++++++++----
 .../modules/ui/components/button/index.tsx    |  2 +-
 .../ui/components/file-input/index.tsx        |  4 +-
 apps/web/playwright/survey.spec.ts            |  2 +-
 apps/web/playwright/utils/helper.ts           | 52 +++++++++----------
 packages/lib/messages/de-DE.json              |  1 +
 packages/lib/messages/en-US.json              |  3 +-
 packages/lib/messages/pt-BR.json              |  1 +
 24 files changed, 180 insertions(+), 118 deletions(-)

diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddressQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddressQuestionForm.tsx
index 09924bc5a1..e69ecacfaf 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddressQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddressQuestionForm.tsx
@@ -136,7 +136,7 @@ export const AddressQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-4"
             type="button"
             onClick={() => {
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CalQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CalQuestionForm.tsx
index f5c41a8b97..1f84bee6dc 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CalQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CalQuestionForm.tsx
@@ -87,7 +87,7 @@ export const CalQuestionForm = ({
           <Button
             size="sm"
             className="mt-3"
-            variant="minimal"
+            variant="secondary"
             type="button"
             onClick={() => {
               updateQuestion(questionIdx, {
@@ -99,7 +99,7 @@ export const CalQuestionForm = ({
             {t("environments.surveys.edit.add_description")}
           </Button>
         )}
-        <div className="mt-3 flex flex-col gap-6">
+        <div className="mt-5 flex flex-col gap-6">
           <div className="flex flex-col gap-3">
             <Label htmlFor="calUserName">{t("environments.surveys.edit.cal_username")}</Label>
             <div>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
index cd74032cc4..c58173196c 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
@@ -186,7 +186,6 @@ export function ConditionalLogic({
       <div className="mt-2 flex items-center space-x-2">
         <Button
           id="logicJumps"
-          className="bg-slate-100 hover:bg-slate-50"
           type="button"
           name="logicJumps"
           size="sm"
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ContactInfoQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ContactInfoQuestionForm.tsx
index 0d3727d481..eefd4b1130 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ContactInfoQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ContactInfoQuestionForm.tsx
@@ -126,7 +126,7 @@ export const ContactInfoQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-4"
             type="button"
             onClick={() => {
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/DateQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/DateQuestionForm.tsx
index c694aab1e3..1a6364582d 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/DateQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/DateQuestionForm.tsx
@@ -70,7 +70,7 @@ export const DateQuestionForm = ({
       />
       <div ref={parent}>
         {question.subheader !== undefined && (
-          <div className="mt-2 inline-flex w-full items-center">
+          <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
                 id="subheader"
@@ -93,7 +93,7 @@ export const DateQuestionForm = ({
           <Button
             size="sm"
             className="mt-3"
-            variant="minimal"
+            variant="secondary"
             type="button"
             onClick={() => {
               updateQuestion(questionIdx, {
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
index f8b866a664..b404aa4191 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/modules/ui/components/button";
 import { ConfirmationModal } from "@/modules/ui/components/confirmation-modal";
 import {
   DropdownMenu,
@@ -14,7 +15,6 @@ import { createId } from "@paralleldrive/cuid2";
 import { ArrowDownIcon, ArrowUpIcon, CopyIcon, EllipsisIcon, TrashIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
-import { cn } from "@formbricks/lib/cn";
 import {
   QUESTIONS_ICON_MAP,
   getCXQuestionNameMap,
@@ -141,52 +141,62 @@ export const EditorCardMenu = ({
   };
 
   return (
-    <div className="flex space-x-2">
-      <ArrowUpIcon
-        className={cn(
-          "h-4 cursor-pointer text-slate-500",
-          cardIdx === 0 ? "cursor-not-allowed opacity-50" : "hover:text-slate-600"
-        )}
+    <div className="flex">
+      <Button
+        variant="minimal"
+        size="icon"
+        StartIcon={ArrowUpIcon}
+        tooltip={t("common.move_up")}
+        disabled={cardIdx === 0}
         onClick={(e) => {
           if (cardIdx !== 0) {
             e.stopPropagation();
             moveCard(cardIdx, true);
           }
         }}
+        className="disabled:border-none"
       />
-      <ArrowDownIcon
-        className={cn(
-          "h-4 cursor-pointer text-slate-500",
-          lastCard ? "cursor-not-allowed opacity-50" : "hover:text-slate-600"
-        )}
+      <Button
+        variant="minimal"
+        size="icon"
+        StartIcon={ArrowDownIcon}
+        tooltip={t("common.move_down")}
+        disabled={lastCard}
         onClick={(e) => {
           if (!lastCard) {
             e.stopPropagation();
             moveCard(cardIdx, false);
           }
         }}
+        className="disabled:border-none"
       />
-      <CopyIcon
-        className="h-4 cursor-pointer text-slate-500 hover:text-slate-600"
+      <Button
+        variant="minimal"
+        size="icon"
+        StartIcon={CopyIcon}
+        tooltip={t("common.duplicate")}
         onClick={(e) => {
           e.stopPropagation();
           duplicateCard(cardIdx);
         }}
+        className="disabled:border-none"
       />
-      <TrashIcon
-        className={cn(
-          "h-4 cursor-pointer text-slate-500",
-          isDeleteDisabled ? "cursor-not-allowed opacity-50" : "hover:text-slate-600"
-        )}
+      <Button
+        variant="minimal"
+        size="icon"
+        StartIcon={TrashIcon}
+        tooltip={t("common.delete")}
+        disabled={isDeleteDisabled}
         onClick={(e) => {
           e.stopPropagation();
           if (isDeleteDisabled) return;
           deleteCard(cardIdx);
         }}
+        className="disabled:border-none"
       />
       <DropdownMenu>
-        <DropdownMenuTrigger>
-          <EllipsisIcon className="h-4 w-4 text-slate-500 hover:text-slate-600" />
+        <DropdownMenuTrigger className="h-10 w-10 rounded-lg border border-transparent p-2 hover:border-slate-200">
+          <EllipsisIcon className="mx-auto h-4 w-4 text-slate-700 hover:text-slate-600" />
         </DropdownMenuTrigger>
 
         <DropdownMenuContent>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx
index 5d4d435c53..85e26ff8ca 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx
@@ -11,8 +11,7 @@ import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { type JSX, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
-import { extractLanguageCodes } from "@formbricks/lib/i18n/utils";
-import { createI18nString } from "@formbricks/lib/i18n/utils";
+import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TAllowedFileExtension, ZAllowedFileExtension } from "@formbricks/types/common";
 import { TProduct } from "@formbricks/types/product";
@@ -168,7 +167,7 @@ export const FileUploadQuestionForm = ({
           <Button
             size="sm"
             className="mt-3"
-            variant="minimal"
+            variant="secondary"
             type="button"
             onClick={() => {
               updateQuestion(questionIdx, {
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx
index 84a8637a28..000357ffef 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx
@@ -143,7 +143,7 @@ export const MatrixQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-3"
             type="button"
             onClick={() => {
@@ -160,11 +160,13 @@ export const MatrixQuestionForm = ({
         <div>
           {/* Rows section */}
           <Label htmlFor="rows">{t("environments.surveys.edit.rows")}</Label>
-          <div ref={parent}>
+          <div className="mt-2 flex flex-col gap-2" ref={parent}>
             {question.rows.map((_, index) => (
-              <div className="flex items-center" onKeyDown={(e) => handleKeyDown(e, "row")}>
+              <div
+                className="flex items-center"
+                onKeyDown={(e) => handleKeyDown(e, "row")}
+                key={`row-${index}-${question.rows.length}`}>
                 <QuestionFormInput
-                  key={`row-${index}-${question.rows.length}`}
                   id={`row-${index}`}
                   label={""}
                   localSurvey={localSurvey}
@@ -180,9 +182,16 @@ export const MatrixQuestionForm = ({
                   locale={locale}
                 />
                 {question.rows.length > 2 && (
-                  <TrashIcon
-                    className="ml-2 mt-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-                    onClick={() => handleDeleteLabel("row", index)}
+                  <Button
+                    variant="minimal"
+                    size="icon"
+                    className="ml-2"
+                    StartIcon={TrashIcon}
+                    tooltip={t("common.delete")}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleDeleteLabel("row", index);
+                    }}
                   />
                 )}
               </div>
@@ -190,7 +199,7 @@ export const MatrixQuestionForm = ({
             <Button
               variant="secondary"
               size="sm"
-              className="mt-3"
+              className="w-fit"
               StartIcon={PlusIcon}
               onClick={(e) => {
                 e.preventDefault();
@@ -203,11 +212,13 @@ export const MatrixQuestionForm = ({
         <div>
           {/* Columns section */}
           <Label htmlFor="columns">{t("environments.surveys.edit.columns")}</Label>
-          <div ref={parent}>
+          <div className="mt-2 flex flex-col gap-2" ref={parent}>
             {question.columns.map((_, index) => (
-              <div className="flex items-center" onKeyDown={(e) => handleKeyDown(e, "column")}>
+              <div
+                className="flex items-center"
+                onKeyDown={(e) => handleKeyDown(e, "column")}
+                key={`column-${index}-${question.columns.length}`}>
                 <QuestionFormInput
-                  key={`column-${index}-${question.columns.length}`}
                   id={`column-${index}`}
                   label={""}
                   localSurvey={localSurvey}
@@ -223,9 +234,16 @@ export const MatrixQuestionForm = ({
                   locale={locale}
                 />
                 {question.columns.length > 2 && (
-                  <TrashIcon
-                    className="ml-2 mt-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-                    onClick={() => handleDeleteLabel("column", index)}
+                  <Button
+                    variant="minimal"
+                    size="icon"
+                    className="ml-2"
+                    StartIcon={TrashIcon}
+                    tooltip={t("common.delete")}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleDeleteLabel("column", index);
+                    }}
                   />
                 )}
               </div>
@@ -233,7 +251,7 @@ export const MatrixQuestionForm = ({
             <Button
               variant="secondary"
               size="sm"
-              className="mt-3"
+              className="w-fit"
               StartIcon={PlusIcon}
               onClick={(e) => {
                 e.preventDefault();
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceQuestionForm.tsx
index fc27fb8a41..748b8d124d 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceQuestionForm.tsx
@@ -207,7 +207,7 @@ export const MultipleChoiceQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-3"
             type="button"
             onClick={() => {
@@ -248,7 +248,7 @@ export const MultipleChoiceQuestionForm = ({
               updateQuestion(questionIdx, { choices: newChoices });
             }}>
             <SortableContext items={question.choices} strategy={verticalListSortingStrategy}>
-              <div className="flex flex-col" ref={parent}>
+              <div className="flex flex-col gap-2" ref={parent}>
                 {question.choices &&
                   question.choices.map((choice, choiceIdx) => (
                     <QuestionOptionChoice
@@ -276,13 +276,13 @@ export const MultipleChoiceQuestionForm = ({
           </DndContext>
           <div className="mt-2 flex items-center justify-between space-x-2">
             {question.choices.filter((c) => c.id === "other").length === 0 && (
-              <Button size="sm" variant="minimal" type="button" onClick={() => addOther()}>
+              <Button size="sm" variant="secondary" type="button" onClick={() => addOther()}>
                 {t("environments.surveys.edit.add_other")}
               </Button>
             )}
             <Button
               size="sm"
-              variant="minimal"
+              variant="secondary"
               type="button"
               onClick={() => {
                 updateQuestion(questionIdx, {
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/NPSQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/NPSQuestionForm.tsx
index afcf9d0756..d082cc50fd 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/NPSQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/NPSQuestionForm.tsx
@@ -60,7 +60,7 @@ export const NPSQuestionForm = ({
 
       <div ref={parent}>
         {question.subheader !== undefined && (
-          <div className="mt-2 inline-flex w-full items-center">
+          <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
                 id="subheader"
@@ -81,7 +81,7 @@ export const NPSQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-3"
             type="button"
             onClick={() => {
@@ -96,7 +96,7 @@ export const NPSQuestionForm = ({
         )}
       </div>
 
-      <div className="mt-3 flex justify-between space-x-2">
+      <div className="flex justify-between space-x-2">
         <div className="w-full">
           <QuestionFormInput
             id="lowerLabel"
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx
index 742b8c4f7f..10ac361ebf 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx
@@ -102,7 +102,7 @@ export const OpenQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-3"
             type="button"
             onClick={() => {
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/PictureSelectionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/PictureSelectionForm.tsx
index 3f918cf566..74f4c9675e 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/PictureSelectionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/PictureSelectionForm.tsx
@@ -89,7 +89,7 @@ export const PictureSelectionForm = ({
       />
       <div ref={parent}>
         {question.subheader !== undefined && (
-          <div className="mt-2 inline-flex w-full items-center">
+          <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
                 id="subheader"
@@ -110,7 +110,7 @@ export const PictureSelectionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-3"
             type="button"
             onClick={() => {
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionCard.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionCard.tsx
index e5d2dfcc71..ebf1d77ab6 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionCard.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionCard.tsx
@@ -189,7 +189,7 @@ export const QuestionCard = ({
               {/*  <div className="-ml-0.5 mr-3 h-6 min-w-[1.5rem] text-slate-400">
                 {QUESTIONS_ICON_MAP[question.type]}
               </div> */}
-              <div className="grow" dir="auto">
+              <div className="flex grow flex-col justify-center" dir="auto">
                 <p className="text-sm font-semibold">
                   {recallToHeadline(
                     question.headline,
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionOptionChoice.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionOptionChoice.tsx
index fcf2f93ee7..bd4350969b 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionOptionChoice.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionOptionChoice.tsx
@@ -1,4 +1,5 @@
 import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInput";
+import { Button } from "@/modules/ui/components/button";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { GripVerticalIcon, PlusIcon, TrashIcon } from "lucide-react";
@@ -70,9 +71,9 @@ export const QuestionOptionChoice = ({
   };
 
   return (
-    <div className="flex w-full gap-2" ref={setNodeRef} style={style}>
+    <div className="flex w-full items-center gap-2" ref={setNodeRef} style={style}>
       {/* drag handle */}
-      <div className={cn("mt-6", choice.id === "other" && "invisible")} {...listeners} {...attributes}>
+      <div className={cn(choice.id === "other" && "invisible")} {...listeners} {...attributes}>
         <GripVerticalIcon className="h-4 w-4 cursor-move text-slate-400" />
       </div>
 
@@ -123,21 +124,33 @@ export const QuestionOptionChoice = ({
           />
         )}
       </div>
-      <div className="mt-6 flex gap-2">
+      <div className="flex gap-2">
         {question.choices && question.choices.length > 2 && (
-          <TrashIcon
-            className="h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-            onClick={() => deleteChoice(choiceIdx)}
+          <Button
+            variant="secondary"
+            size="icon"
+            StartIcon={TrashIcon}
+            tooltip="Delete choice"
+            aria-label="Delete choice"
+            onClick={(e) => {
+              e.preventDefault();
+              deleteChoice(choiceIdx);
+            }}
+          />
+        )}
+        {choice.id !== "other" && (
+          <Button
+            variant="secondary"
+            size="icon"
+            StartIcon={PlusIcon}
+            tooltip="Add choice below"
+            aria-label="Add choice below"
+            onClick={(e) => {
+              e.preventDefault();
+              addChoice(choiceIdx);
+            }}
           />
         )}
-        <div className="h-4 w-4">
-          {choice.id !== "other" && (
-            <PlusIcon
-              className="h-full w-full cursor-pointer text-slate-400 hover:text-slate-500"
-              onClick={() => addChoice(choiceIdx)}
-            />
-          )}
-        </div>
       </div>
     </div>
   );
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RankingQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RankingQuestionForm.tsx
index efe04fe634..7b3534dcda 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RankingQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RankingQuestionForm.tsx
@@ -158,7 +158,7 @@ export const RankingQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-3"
             type="button"
             onClick={() => {
@@ -195,7 +195,7 @@ export const RankingQuestionForm = ({
               updateQuestion(questionIdx, { choices: newChoices });
             }}>
             <SortableContext items={question.choices} strategy={verticalListSortingStrategy}>
-              <div className="flex flex-col" ref={parent}>
+              <div className="flex flex-col gap-2" ref={parent}>
                 {question.choices &&
                   question.choices.map((choice, choiceIdx) => (
                     <QuestionOptionChoice
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RatingQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RatingQuestionForm.tsx
index e82801779e..625363582e 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RatingQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RatingQuestionForm.tsx
@@ -56,7 +56,7 @@ export const RatingQuestionForm = ({
 
       <div ref={parent}>
         {question.subheader !== undefined && (
-          <div className="mt-2 inline-flex w-full items-center">
+          <div className="inline-flex w-full items-center">
             <div className="w-full">
               <QuestionFormInput
                 id="subheader"
@@ -77,7 +77,7 @@ export const RatingQuestionForm = ({
         {question.subheader === undefined && (
           <Button
             size="sm"
-            variant="minimal"
+            variant="secondary"
             className="mt-3"
             type="button"
             onClick={() => {
@@ -131,7 +131,7 @@ export const RatingQuestionForm = ({
         </div>
       </div>
 
-      <div className="mt-3 flex justify-between gap-8">
+      <div className="flex justify-between gap-8">
         <div className="flex-1">
           <QuestionFormInput
             id="lowerLabel"
diff --git a/apps/web/modules/surveys/components/QuestionFormInput/index.tsx b/apps/web/modules/surveys/components/QuestionFormInput/index.tsx
index bccad289dd..ef3289d0a8 100644
--- a/apps/web/modules/surveys/components/QuestionFormInput/index.tsx
+++ b/apps/web/modules/surveys/components/QuestionFormInput/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { LanguageIndicator } from "@/modules/ee/multi-language-surveys/components/language-indicator";
+import { Button } from "@/modules/ui/components/button";
 import { FileInput } from "@/modules/ui/components/file-input";
 import { Input } from "@/modules/ui/components/input";
 import { Label } from "@/modules/ui/components/label";
@@ -10,8 +11,12 @@ import { ImagePlusIcon, PencilIcon, TrashIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { type JSX, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
-import { extractLanguageCodes, getEnabledLanguages, getLocalizedValue } from "@formbricks/lib/i18n/utils";
-import { createI18nString } from "@formbricks/lib/i18n/utils";
+import {
+  createI18nString,
+  extractLanguageCodes,
+  getEnabledLanguages,
+  getLocalizedValue,
+} from "@formbricks/lib/i18n/utils";
 import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { useSyncScroll } from "@formbricks/lib/utils/hooks/useSyncScroll";
 import {
@@ -515,9 +520,11 @@ export const QuestionFormInput = ({
   return (
     <div className="w-full">
       <div className="w-full">
-        <div className="mb-2 mt-3">
-          <Label htmlFor={id}>{label}</Label>
-        </div>
+        {label && (
+          <div className="mb-2 mt-3">
+            <Label htmlFor={id}>{label}</Label>
+          </div>
+        )}
 
         <div className="flex flex-col gap-4 bg-white" ref={animationParent}>
           {showImageUploader && id === "headline" && (
@@ -612,16 +619,29 @@ export const QuestionFormInput = ({
               )}
             </div>
             {id === "headline" && !isWelcomeCard && (
-              <ImagePlusIcon
+              <Button
+                variant="secondary"
+                size="icon"
+                StartIcon={ImagePlusIcon}
+                tooltip={t("environments.surveys.edit.add_photo_or_video")}
                 aria-label="Toggle image uploader"
-                className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-                onClick={() => setShowImageUploader((prev) => !prev)}
+                className="ml-2"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowImageUploader((prev) => !prev);
+                }}
               />
             )}
             {id === "subheader" && question && question.subheader !== undefined && (
-              <TrashIcon
-                className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
-                onClick={() => {
+              <Button
+                variant="secondary"
+                size="icon"
+                StartIcon={TrashIcon}
+                tooltip="Remove description"
+                aria-label="Remove description"
+                className="ml-2"
+                onClick={(e) => {
+                  e.preventDefault();
                   if (updateQuestion) {
                     updateQuestion(questionIdx, { subheader: undefined });
                   }
diff --git a/apps/web/modules/ui/components/button/index.tsx b/apps/web/modules/ui/components/button/index.tsx
index 6bc52a5a0d..d7454dd6a5 100644
--- a/apps/web/modules/ui/components/button/index.tsx
+++ b/apps/web/modules/ui/components/button/index.tsx
@@ -93,7 +93,7 @@ export const Button: React.ForwardRefExoticComponent<
         variant === "secondary" &&
           (disabled
             ? "text-slate-400 dark:text-slate-500 bg-slate-200 dark:bg-slate-800"
-            : "text-slate-600 hover:text-slate-500 bg-slate-200 hover:bg-slate-100 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-1  focus:bg-slate-300 focus:ring-neutral-500"),
+            : "text-slate-600 hover:text-slate-500 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-1  focus:bg-slate-300 focus:ring-neutral-500"),
         variant === "warn" &&
           (disabled
             ? "text-slate-400 bg-transparent"
diff --git a/apps/web/modules/ui/components/file-input/index.tsx b/apps/web/modules/ui/components/file-input/index.tsx
index 2ffa22c3c7..984e345cff 100644
--- a/apps/web/modules/ui/components/file-input/index.tsx
+++ b/apps/web/modules/ui/components/file-input/index.tsx
@@ -228,7 +228,7 @@ export const FileInput = ({
                 multiple ? (
                   <div className="flex flex-wrap gap-2">
                     {selectedFiles.map((file, idx) => (
-                      <>
+                      <div key={`${id}-${idx}`}>
                         {isImage(file.name) ? (
                           <div className="relative h-24 w-40 overflow-hidden rounded-lg">
                             <Image
@@ -269,7 +269,7 @@ export const FileInput = ({
                             )}
                           </div>
                         )}
-                      </>
+                      </div>
                     ))}
 
                     <Uploader
diff --git a/apps/web/playwright/survey.spec.ts b/apps/web/playwright/survey.spec.ts
index cab70ec4ba..2d77fbe2c4 100644
--- a/apps/web/playwright/survey.spec.ts
+++ b/apps/web/playwright/survey.spec.ts
@@ -518,7 +518,7 @@ test.describe("Multi Language Survey Create", async () => {
 });
 
 test.describe("Testing Survey with advanced logic", async () => {
-  test.setTimeout(180000);
+  test.setTimeout(240000);
   let url: string | null;
 
   test("Create survey and submit response", async ({ page, users }) => {
diff --git a/apps/web/playwright/utils/helper.ts b/apps/web/playwright/utils/helper.ts
index f4d01d08ec..5c1c2e2b6f 100644
--- a/apps/web/playwright/utils/helper.ts
+++ b/apps/web/playwright/utils/helper.ts
@@ -155,8 +155,8 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
   await page.getByRole("main").getByText("What would you like to know?").click();
 
   await page.getByLabel("Question*").fill(params.openTextQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.openTextQuestion.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.openTextQuestion.description);
   await page.getByLabel("Placeholder").fill(params.openTextQuestion.placeholder);
 
   await page.locator("p").filter({ hasText: params.openTextQuestion.question }).click();
@@ -169,8 +169,8 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Single-Select" }).click();
   await page.getByLabel("Question*").fill(params.singleSelectQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.singleSelectQuestion.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.singleSelectQuestion.description);
   await page.getByPlaceholder("Option 1").fill(params.singleSelectQuestion.options[0]);
   await page.getByPlaceholder("Option 2").fill(params.singleSelectQuestion.options[1]);
   await page.getByRole("button", { name: 'Add "Other"', exact: true }).click();
@@ -183,8 +183,8 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Multi-Select" }).click();
   await page.getByLabel("Question*").fill(params.multiSelectQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.multiSelectQuestion.description);
+  await page.getByRole("button", { name: "Add description", exact: true }).click();
+  await page.locator('input[name="subheader"]').fill(params.multiSelectQuestion.description);
   await page.getByPlaceholder("Option 1").fill(params.multiSelectQuestion.options[0]);
   await page.getByPlaceholder("Option 2").fill(params.multiSelectQuestion.options[1]);
   await page.getByPlaceholder("Option 3").fill(params.multiSelectQuestion.options[2]);
@@ -197,8 +197,8 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Rating" }).click();
   await page.getByLabel("Question*").fill(params.ratingQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.ratingQuestion.description);
+  await page.getByRole("button", { name: "Add description", exact: true }).click();
+  await page.locator('input[name="subheader"]').fill(params.ratingQuestion.description);
   await page.getByPlaceholder("Not good").fill(params.ratingQuestion.lowLabel);
   await page.getByPlaceholder("Very satisfied").fill(params.ratingQuestion.highLabel);
 
@@ -241,8 +241,8 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Picture Selection" }).click();
   await page.getByLabel("Question*").fill(params.pictureSelectQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.pictureSelectQuestion.description);
+  await page.getByRole("button", { name: "Add description", exact: true }).click();
+  await page.locator('input[name="subheader"]').fill(params.pictureSelectQuestion.description);
 
   // File Upload Question
   await page
@@ -261,8 +261,8 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Matrix" }).click();
   await page.getByLabel("Question*").fill(params.matrix.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.matrix.description);
+  await page.getByRole("button", { name: "Add description", exact: true }).click();
+  await page.locator('input[name="subheader"]').fill(params.matrix.description);
   await page.locator("#row-0").click();
   await page.locator("#row-0").fill(params.matrix.rows[0]);
   await page.locator("#row-1").click();
@@ -320,7 +320,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .nth(1)
     .click();
   await page.getByLabel("Note*").fill(params.thankYouCard.headline);
-  await page.getByLabel("Description").fill(params.thankYouCard.description);
+  await page.locator('input[name="subheader"]').fill(params.thankYouCard.description);
 };
 
 export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWithLogicParams) => {
@@ -357,8 +357,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
   await page.getByRole("main").getByText("What would you like to know?").click();
 
   await page.getByLabel("Question*").fill(params.openTextQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.openTextQuestion.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.openTextQuestion.description);
   await page.getByLabel("Placeholder").fill(params.openTextQuestion.placeholder);
 
   await page.locator("p").filter({ hasText: params.openTextQuestion.question }).click();
@@ -371,8 +371,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .click();
   await page.getByRole("button", { name: "Single-Select" }).click();
   await page.getByLabel("Question*").fill(params.singleSelectQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.singleSelectQuestion.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.singleSelectQuestion.description);
   await page.getByPlaceholder("Option 1").fill(params.singleSelectQuestion.options[0]);
   await page.getByPlaceholder("Option 2").fill(params.singleSelectQuestion.options[1]);
   await page.getByRole("button", { name: 'Add "Other"', exact: true }).click();
@@ -386,8 +386,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .click();
   await page.getByRole("button", { name: "Multi-Select" }).click();
   await page.getByLabel("Question*").fill(params.multiSelectQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.multiSelectQuestion.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.multiSelectQuestion.description);
   await page.getByPlaceholder("Option 1").fill(params.multiSelectQuestion.options[0]);
   await page.getByPlaceholder("Option 2").fill(params.multiSelectQuestion.options[1]);
   await page.getByPlaceholder("Option 3").fill(params.multiSelectQuestion.options[2]);
@@ -400,8 +400,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .click();
   await page.getByRole("button", { name: "Picture Selection" }).click();
   await page.getByLabel("Question*").fill(params.pictureSelectQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.pictureSelectQuestion.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.pictureSelectQuestion.description);
   await page.getByLabel("Required").click();
 
   // Rating Question
@@ -412,8 +412,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .click();
   await page.getByRole("button", { name: "Rating" }).click();
   await page.getByLabel("Question*").fill(params.ratingQuestion.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.ratingQuestion.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.ratingQuestion.description);
   await page.getByPlaceholder("Not good").fill(params.ratingQuestion.lowLabel);
   await page.getByPlaceholder("Very satisfied").fill(params.ratingQuestion.highLabel);
 
@@ -446,8 +446,8 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .click();
   await page.getByRole("button", { name: "Matrix" }).click();
   await page.getByLabel("Question*").fill(params.matrix.question);
-  await page.getByRole("button", { name: "Add Description", exact: true }).click();
-  await page.getByLabel("Description").fill(params.matrix.description);
+  await page.getByRole("button", { name: "Add description" }).click();
+  await page.locator('input[name="subheader"]').fill(params.matrix.description);
   await page.locator("#row-0").click();
   await page.locator("#row-0").fill(params.matrix.rows[0]);
   await page.locator("#row-1").click();
@@ -941,5 +941,5 @@ export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWith
     .nth(1)
     .click();
   await page.getByLabel("Note*").fill(params.thankYouCard.headline);
-  await page.getByLabel("Description").fill(params.thankYouCard.description);
+  await page.locator('input[name="subheader"]').fill(params.thankYouCard.description);
 };
diff --git a/packages/lib/messages/de-DE.json b/packages/lib/messages/de-DE.json
index 31a180d219..50e28d4b53 100644
--- a/packages/lib/messages/de-DE.json
+++ b/packages/lib/messages/de-DE.json
@@ -1247,6 +1247,7 @@
         "add_logic": "Logik hinzufügen",
         "add_option": "Option hinzufügen",
         "add_other": "Anderes hinzufügen",
+        "add_photo_or_video": "Foto oder Video hinzufügen",
         "add_pin": "PIN hinzufügen",
         "add_question": "Frage hinzufügen",
         "add_question_below": "Frage unten hinzufügen",
diff --git a/packages/lib/messages/en-US.json b/packages/lib/messages/en-US.json
index 3b2eaec531..dd3dd835fb 100644
--- a/packages/lib/messages/en-US.json
+++ b/packages/lib/messages/en-US.json
@@ -1238,7 +1238,7 @@
         "add_condition_below": "Add condition below",
         "add_custom_styles": "Add custom styles",
         "add_delay_before_showing_survey": "Add delay before showing survey",
-        "add_description": "Add Description",
+        "add_description": "Add description",
         "add_ending": "Add ending",
         "add_ending_below": "Add ending below",
         "add_hidden_field_id": "Add hidden field ID",
@@ -1247,6 +1247,7 @@
         "add_logic": "Add logic",
         "add_option": "Add option",
         "add_other": "Add \"Other\"",
+        "add_photo_or_video": "Add photo or video",
         "add_pin": "Add PIN",
         "add_question": "Add question",
         "add_question_below": "Add question below",
diff --git a/packages/lib/messages/pt-BR.json b/packages/lib/messages/pt-BR.json
index 36a3703f14..9cc5172da8 100644
--- a/packages/lib/messages/pt-BR.json
+++ b/packages/lib/messages/pt-BR.json
@@ -1247,6 +1247,7 @@
         "add_logic": "Adicionar lógica",
         "add_option": "Adicionar opção",
         "add_other": "Adicionar \"Outro",
+        "add_photo_or_video": "Adicionar foto ou video",
         "add_pin": "Adicionar PIN",
         "add_question": "Adicionar pergunta",
         "add_question_below": "Adicione a pergunta abaixo",