fix: E2E tests

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

@@ -18,7 +18,7 @@ export const AddEndingCardButton = ({ localSurvey, addEndingCard }: AddEndingCar
         <PlusIcon className="h-6 w-6 text-white" />
       </div>
       <div className="px-4 py-3 text-sm">
-        <p className="font-semibold">Add Ending</p>
+        <p className="font-semibold">Add ending</p>
       </div>
     </div>
   );

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

@@ -39,7 +39,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio
             <PlusIcon className="h-5 w-5 text-white" />
           </div>
           <div className="px-4 py-3">
-            <p className="text-sm font-semibold">Add Question</p>
+            <p className="text-sm font-semibold">Add question</p>
             <p className="mt-1 text-xs text-slate-500">Add a new question to your survey</p>
           </div>
         </div>

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

@@ -141,37 +141,33 @@ export function ConditionalLogic({
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     onClick={() => {
                       duplicateLogic(logicItemIdx);
-                    }}>
-                    <CopyIcon className="h-4 w-4" />
+                    }}
+                    icon={<CopyIcon className="h-4 w-4" />}>
                     Duplicate
                   </DropdownMenuItem>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     disabled={logicItemIdx === 0}
                     onClick={() => {
                       moveLogic(logicItemIdx, logicItemIdx - 1);
-                    }}>
-                    <ArrowUpIcon className="h-4 w-4" />
+                    }}
+                    icon={<ArrowUpIcon className="h-4 w-4" />}>
                     Move up
                   </DropdownMenuItem>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     disabled={logicItemIdx === (question.logic ?? []).length - 1}
                     onClick={() => {
                       moveLogic(logicItemIdx, logicItemIdx + 1);
-                    }}>
-                    <ArrowDownIcon className="h-4 w-4" />
+                    }}
+                    icon={<ArrowDownIcon className="h-4 w-4" />}>
                     Move down
                   </DropdownMenuItem>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     onClick={() => {
                       handleRemoveLogic(logicItemIdx);
-                    }}>
-                    <TrashIcon className="h-4 w-4" />
+                    }}
+                    icon={<TrashIcon className="h-4 w-4" />}>
                     Remove
                   </DropdownMenuItem>
                 </DropdownMenuContent>

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

@@ -75,11 +75,11 @@ export const EditWelcomeCard = ({
         className="flex-1 rounded-r-lg border border-slate-200 transition-all duration-300 ease-in-out">
         <Collapsible.CollapsibleTrigger
           asChild
-          className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
+          className="flex cursor-pointer justify-between rounded-r-lg p-4 hover:bg-slate-50">
           <div>
             <div className="inline-flex">
               <div>
-                <p className="text-sm font-semibold">Welcome Card</p>
+                <p className="text-sm font-semibold">Welcome card</p>
                 {!open && (
                   <p className="mt-1 truncate text-xs text-slate-500">
                     {localSurvey?.welcomeCard?.enabled ? "Shown" : "Hidden"}

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

@@ -162,7 +162,7 @@ export const EditorCardMenu = ({
           <EllipsisIcon className="h-4 w-4 text-slate-500 hover:text-slate-600" />
         </DropdownMenuTrigger>
 
-        <DropdownMenuContent className="border border-slate-200">
+        <DropdownMenuContent>
           <div className="flex flex-col">
             {cardType === "question" && (
               <DropdownMenuSub>
@@ -172,13 +172,12 @@ export const EditorCardMenu = ({
                   Change question type
                 </DropdownMenuSubTrigger>
 
-                <DropdownMenuSubContent className="ml-2 border border-slate-200 text-slate-600 hover:text-slate-700">
+                <DropdownMenuSubContent className="ml-2">
                   {Object.entries(availableQuestionTypes).map(([type, name]) => {
                     if (type === card.type) return null;
                     return (
                       <DropdownMenuItem
                         key={type}
-                        className="min-h-8 cursor-pointer"
                         onClick={() => {
                           setChangeToType(type as TSurveyQuestionTypeEnum);
                           if ((card as TSurveyQuestion).logic) {
@@ -187,8 +186,8 @@ export const EditorCardMenu = ({
                           }
 
                           changeQuestionType(type as TSurveyQuestionTypeEnum);
-                        }}>
-                        {QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}
+                        }}
+                        icon={QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}>
                         <span className="ml-2">{name}</span>
                       </DropdownMenuItem>
                     );
@@ -198,7 +197,7 @@ export const EditorCardMenu = ({
             )}
             {cardType === "ending" && (
               <DropdownMenuItem
-                className="flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700"
+                className="min-h-8 justify-between"
                 onClick={(e) => {
                   e.preventDefault();
                   addEndingCardBelow();
@@ -209,18 +208,16 @@ export const EditorCardMenu = ({
 
             {cardType === "question" && (
               <DropdownMenuSub>
-                <DropdownMenuSubTrigger
-                  className="cursor-pointer text-sm text-slate-600 hover:text-slate-700"
-                  onClick={(e) => e.preventDefault()}>
+                <DropdownMenuSubTrigger className="cursor-pointer" onClick={(e) => e.preventDefault()}>
                   Add question below
                 </DropdownMenuSubTrigger>
 
-                <DropdownMenuSubContent className="ml-4 border border-slate-200">
+                <DropdownMenuSubContent className="ml-2">
                   {Object.entries(availableQuestionTypes).map(([type, name]) => {
                     return (
                       <DropdownMenuItem
                         key={type}
-                        className="min-h-8 cursor-pointer"
+                        className="min-h-8"
                         onClick={(e) => {
                           e.stopPropagation();
                           if (cardType === "question") {
@@ -236,33 +233,27 @@ export const EditorCardMenu = ({
               </DropdownMenuSub>
             )}
             <DropdownMenuItem
-              className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
-                cardIdx === 0 ? "opacity-50" : ""
-              }`}
               onClick={(e) => {
                 if (cardIdx !== 0) {
                   e.stopPropagation();
                   moveCard(cardIdx, true);
                 }
               }}
+              icon={<ArrowUpIcon className="h-4 w-4" />}
               disabled={cardIdx === 0}>
-              <span className="text-sm">Move up</span>
-              <ArrowUpIcon className="h-4 w-4" />
+              <span>Move up</span>
             </DropdownMenuItem>
 
             <DropdownMenuItem
-              className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
-                lastCard ? "opacity-50" : ""
-              }`}
               onClick={(e) => {
                 if (!lastCard) {
                   e.stopPropagation();
                   moveCard(cardIdx, false);
                 }
               }}
+              icon={<ArrowDownIcon className="h-4 w-4" />}
               disabled={lastCard}>
-              <span className="text-sm text-slate-600 hover:text-slate-700">Move down</span>
-              <ArrowDownIcon className="h-4 w-4" />
+              <span>Move down</span>
             </DropdownMenuItem>
           </div>
         </DropdownMenuContent>

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

@@ -100,11 +100,11 @@ export const HiddenFieldsCard = ({
         className="flex-1 rounded-r-lg border border-slate-200 transition-all duration-300 ease-in-out">
         <Collapsible.CollapsibleTrigger
           asChild
-          className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
+          className="flex cursor-pointer justify-between rounded-r-lg p-4 hover:bg-slate-50">
           <div>
             <div className="inline-flex">
               <div>
-                <p className="text-sm font-semibold">Hidden Fields</p>
+                <p className="text-sm font-semibold">Hidden fields</p>
               </div>
             </div>
 

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

@@ -200,30 +200,27 @@ export function LogicEditorActions({
 
               <DropdownMenuContent>
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   onClick={() => {
                     handleActionsChange("addBelow", idx);
-                  }}>
-                  <PlusIcon className="h-4 w-4" />
+                  }}
+                  icon={<PlusIcon className="h-4 w-4" />}>
                   Add action below
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   disabled={actions.length === 1}
                   onClick={() => {
                     handleActionsChange("remove", idx);
-                  }}>
-                  <TrashIcon className="h-4 w-4" />
+                  }}
+                  icon={<TrashIcon className="h-4 w-4" />}>
                   Remove
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   onClick={() => {
                     handleActionsChange("duplicate", idx);
-                  }}>
-                  <CopyIcon className="h-4 w-4" />
+                  }}
+                  icon={<CopyIcon className="h-4 w-4" />}>
                   Duplicate
                 </DropdownMenuItem>
               </DropdownMenuContent>

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

@@ -216,18 +216,16 @@ export function LogicEditorConditions({
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   onClick={() => {
                     handleAddConditionBelow(condition.id);
-                  }}>
-                  <PlusIcon className="h-4 w-4" />
+                  }}
+                  icon={<PlusIcon className="h-4 w-4" />}>
                   Add condition below
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   disabled={depth === 0 && conditions.conditions.length === 1}
-                  onClick={() => handleRemoveCondition(condition.id)}>
-                  <TrashIcon className="h-4 w-4" />
+                  onClick={() => handleRemoveCondition(condition.id)}
+                  icon={<TrashIcon className="h-4 w-4" />}>
                   Remove
                 </DropdownMenuItem>
               </DropdownMenuContent>
@@ -307,30 +305,26 @@ export function LogicEditorConditions({
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem
-              className="flex items-center gap-2"
               onClick={() => {
                 handleAddConditionBelow(condition.id);
-              }}>
-              <PlusIcon className="h-4 w-4" />
+              }}
+              icon={<PlusIcon className="h-4 w-4" />}>
               Add condition below
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="flex items-center gap-2"
               disabled={depth === 0 && conditions.conditions.length === 1}
-              onClick={() => handleRemoveCondition(condition.id)}>
-              <TrashIcon className="h-4 w-4" />
+              onClick={() => handleRemoveCondition(condition.id)}
+              icon={<TrashIcon className="h-4 w-4" />}>
               Remove
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="flex items-center gap-2"
-              onClick={() => handleDuplicateCondition(condition.id)}>
-              <CopyIcon className="h-4 w-4" />
+              onClick={() => handleDuplicateCondition(condition.id)}
+              icon={<CopyIcon className="h-4 w-4" />}>
               Duplicate
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="flex items-center gap-2"
-              onClick={() => handleCreateGroup(condition.id)}>
-              <WorkflowIcon className="h-4 w-4" />
+              onClick={() => handleCreateGroup(condition.id)}
+              icon={<WorkflowIcon className="h-4 w-4" />}>
               Create group
             </DropdownMenuItem>
           </DropdownMenuContent>

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

@@ -48,7 +48,7 @@ export const SurveyVariablesCard = ({
         className="flex-1 rounded-r-lg border border-slate-200 transition-all duration-300 ease-in-out">
         <Collapsible.CollapsibleTrigger
           asChild
-          className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
+          className="flex cursor-pointer justify-between rounded-r-lg p-4 hover:bg-slate-50">
           <div>
             <div className="inline-flex">
               <div>

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -377,7 +377,6 @@ export const MainNavigation = ({
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="w-fit space-y-1 rounded-xl border border-slate-200 shadow-sm"
                 id="userDropdownInnerContentWrapper"
                 side="right"
                 sideOffset={10}
@@ -389,7 +388,7 @@ export const MainNavigation = ({
                   {sortedProducts.map((product) => (
                     <DropdownMenuRadioItem
                       value={product.id}
-                      className="cursor-pointer break-all rounded-lg font-normal"
+                      className="cursor-pointer break-all"
                       key={product.id}>
                       <div>
                         {product.config.channel === "website" ? (
@@ -410,8 +409,7 @@ export const MainNavigation = ({
                 {isOwnerOrAdmin && (
                   <DropdownMenuItem
                     onClick={() => handleAddProduct(organization.id)}
-                    className="rounded-lg font-normal">
-                    <PlusIcon className="mr-2 h-4 w-4" />
+                    icon={<PlusIcon className="mr-2 h-4 w-4" />}>
                     <span>Add product</span>
                   </DropdownMenuItem>
                 )}
@@ -455,7 +453,6 @@ export const MainNavigation = ({
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
-                  className="w-56 rounded-xl border border-slate-200 shadow-sm"
                   id="userDropdownInnerContentWrapper"
                   side="right"
                   sideOffset={10}
@@ -466,15 +463,9 @@ export const MainNavigation = ({
                   {dropdownNavigation.map(
                     (link) =>
                       !link.hidden && (
-                        <Link
-                          href={link.href}
-                          target={link.target}
-                          key={link.label}
-                          className="flex items-center">
-                          <DropdownMenuItem
-                            className="w-full gap-x-2 rounded-lg font-normal"
-                            key={link.label}>
-                            <link.icon className="h-4 w-4" strokeWidth={1.5} />
+                        <Link href={link.href} target={link.target} className="flex w-full items-center">
+                          <DropdownMenuItem>
+                            <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
                             {link.label}
                           </DropdownMenuItem>
                         </Link>
@@ -484,12 +475,11 @@ export const MainNavigation = ({
                   {/* Logout */}
 
                   <DropdownMenuItem
-                    className="w-full gap-x-2 rounded-lg font-normal"
                     onClick={async () => {
                       await signOut({ callbackUrl: "/auth/login" });
                       await formbricksLogout();
-                    }}>
-                    <LogOutIcon className="h-4 w-4" strokeWidth={1.5} />
+                    }}
+                    icon={<LogOutIcon className="h-4 w-4" strokeWidth={1.5} />}>
                     Logout
                   </DropdownMenuItem>
 
@@ -504,10 +494,7 @@ export const MainNavigation = ({
                         </div>
                       </DropdownMenuSubTrigger>
                       <DropdownMenuPortal>
-                        <DropdownMenuSubContent
-                          className="rounded-xl border border-slate-200 shadow-sm"
-                          sideOffset={10}
-                          alignOffset={5}>
+                        <DropdownMenuSubContent sideOffset={10} alignOffset={5}>
                           <DropdownMenuRadioGroup
                             value={currentOrganizationId}
                             onValueChange={(organizationId) =>
@@ -526,8 +513,7 @@ export const MainNavigation = ({
                           {isMultiOrgEnabled && (
                             <DropdownMenuItem
                               onClick={() => setShowCreateOrganizationModal(true)}
-                              className="rounded-lg">
-                              <PlusIcon className="mr-2 h-4 w-4" />
+                              icon={<PlusIcon className="mr-2 h-4 w-4" />}>
                               <span>Create new organization</span>
                             </DropdownMenuItem>
                           )}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx

@@ -223,7 +223,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setFilterRange(FilterDropDownLabels.ALL_TIME);
                   setDateRange({ from: undefined, to: getTodayDate() });
@@ -231,7 +230,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 <p className="text-slate-700">All time</p>
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setFilterRange(FilterDropDownLabels.LAST_7_DAYS);
                   setDateRange({ from: startOfDay(subDays(new Date(), 7)), to: getTodayDate() });
@@ -239,7 +237,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 <p className="text-slate-700">Last 7 days</p>
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setFilterRange(FilterDropDownLabels.LAST_30_DAYS);
                   setDateRange({ from: startOfDay(subDays(new Date(), 30)), to: getTodayDate() });
@@ -247,7 +244,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 <p className="text-slate-700">Last 30 days</p>
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setIsDatePickerOpen(true);
                   setFilterRange(FilterDropDownLabels.CUSTOM_RANGE);
@@ -274,28 +270,24 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
 
               <DropdownMenuContent align="start">
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.ALL, "csv");
                   }}>
                   <p className="text-slate-700">All responses (CSV)</p>
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.ALL, "xlsx");
                   }}>
                   <p className="text-slate-700">All responses (Excel)</p>
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.FILTER, "csv");
                   }}>
                   <p className="text-slate-700">Current selection (CSV)</p>
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.FILTER, "xlsx");
                   }}>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton.tsx

@@ -98,34 +98,29 @@ export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProp
         <DropdownMenuContent align="start">
           {survey.resultShareKey ? (
             <DropdownMenuItem
-              className="hover:ring-0"
               onClick={() => {
                 navigator.clipboard.writeText(surveyUrl);
                 toast.success("Link to public results copied");
-              }}>
-              <p className="text-slate-700">
-                Copy link to public results <CopyIcon className="ml-1.5 inline h-4 w-4" />
-              </p>
+              }}
+              icon={<CopyIcon className="ml-1.5 inline h-4 w-4" />}>
+              <p className="text-slate-700">Copy link to public results</p>
             </DropdownMenuItem>
           ) : (
             <DropdownMenuItem
-              className="text-slate-700 hover:ring-0"
               onClick={() => {
                 copyUrlToClipboard();
-              }}>
-              <p className="flex items-center text-slate-700">
-                Copy link <CopyIcon className="ml-1.5 h-4 w-4" />
-              </p>
+              }}
+              icon={<CopyIcon className="ml-1.5 h-4 w-4" />}>
+              <p className="flex items-center text-slate-700">Copy link</p>
             </DropdownMenuItem>
           )}
           <DropdownMenuItem
-            className="hover:ring-0"
             onClick={() => {
               setShowResultsLinkModal(true);
-            }}>
+            }}
+            icon={<GlobeIcon className="ml-1.5 h-4 w-4" />}>
             <p className="flex items-center text-slate-700">
               {survey.resultShareKey ? "Unpublish from web" : "Publish to web"}
-              <GlobeIcon className="ml-1.5 h-4 w-4" />
             </p>
           </DropdownMenuItem>
         </DropdownMenuContent>

apps/web/playwright/survey.spec.ts

@@ -247,47 +247,47 @@ test.describe("Multi Language Survey Create", async () => {
     await page.getByText("Welcome CardShownOn").click();
 
     // Add questions in default language
-    await page.getByText("Add Question").click();
+    await page.getByText("Add question").click();
     await page.getByRole("button", { name: "Single-Select" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "Multi-Select" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "Picture Selection" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "Rating" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "Net Promoter Score (NPS)" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "Date" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "File Upload" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
 
@@ -295,13 +295,13 @@ test.describe("Multi Language Survey Create", async () => {
     await page.getByRole("button", { name: "Matrix" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "Address" }).click();
     await page
       .locator("div")
-      .filter({ hasText: /^Add QuestionAdd a new question to your survey$/ })
+      .filter({ hasText: /^Add questionAdd a new question to your survey$/ })
       .nth(1)
       .click();
     await page.getByRole("button", { name: "Ranking" }).click();

apps/web/playwright/utils/helper.ts

@@ -136,7 +136,7 @@ export const signupUsingInviteToken = async (page: Page, name: string, email: st
 };
 
 export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
-  const addQuestion = "Add QuestionAdd a new question to your survey";
+  const addQuestion = "Add questionAdd a new question to your survey";
 
   await page.getByRole("button", { name: "Start from scratch Create a" }).click();
   await page.getByRole("button", { name: "Create survey", exact: true }).click();
@@ -324,7 +324,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
 };
 
 export const createSurveyWithLogic = async (page: Page, params: CreateSurveyWithLogicParams) => {
-  const addQuestion = "Add QuestionAdd a new question to your survey";
+  const addQuestion = "Add questionAdd a new question to your survey";
 
   await page.getByRole("button", { name: "Start from scratch Create a" }).click();
   await page.getByRole("button", { name: "Create survey", exact: true }).click();

packages/ee/advanced-targeting/components/segment-editor.tsx

@@ -1,4 +1,4 @@
-import { MoreVertical, Trash2 } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, MoreVertical, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
@@ -224,7 +224,8 @@ export function SegmentEditor({
                     <DropdownMenuItem
                       onClick={() => {
                         handleMoveResource(groupId, "up");
-                      }}>
+                      }}
+                      icon={<ArrowUpIcon className="h-4 w-4" />}>
                       Move up
                     </DropdownMenuItem>
 
@@ -232,7 +233,8 @@ export function SegmentEditor({
                       onClick={() => {
                         if (viewOnly) return;
                         handleMoveResource(groupId, "down");
-                      }}>
+                      }}
+                      icon={<ArrowDownIcon className="h-4 w-4" />}>
                       Move down
                     </DropdownMenuItem>
                   </DropdownMenuContent>

packages/ee/advanced-targeting/components/segment-filter.tsx

@@ -1,4 +1,6 @@
 import {
+  ArrowDownIcon,
+  ArrowUpIcon,
   FingerprintIcon,
   MonitorSmartphoneIcon,
   MoreVertical,
@@ -161,13 +163,15 @@ function SegmentFilterItemContextMenu({
           <DropdownMenuItem
             onClick={() => {
               onMoveFilter(filterId, "up");
-            }}>
+            }}
+            icon={<ArrowUpIcon className="h-4 w-4" />}>
             Move up
           </DropdownMenuItem>
           <DropdownMenuItem
             onClick={() => {
               onMoveFilter(filterId, "down");
-            }}>
+            }}
+            icon={<ArrowDownIcon className="h-4 w-4" />}>
             Move down
           </DropdownMenuItem>
         </DropdownMenuContent>

packages/ee/multi-language/components/multi-language-card.tsx

@@ -190,11 +190,11 @@ export const MultiLanguageCard: FC<MultiLanguageCardProps> = ({
         open={open}>
         <Collapsible.CollapsibleTrigger
           asChild
-          className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
+          className="flex cursor-pointer justify-between rounded-r-lg p-4 hover:bg-slate-50">
           <div>
             <div className="inline-flex">
               <div>
-                <p className="text-sm font-semibold">Multiple Languages</p>
+                <p className="text-sm font-semibold">Multiple languages</p>
               </div>
             </div>
 

packages/ui/components/BasicSegmentEditor/components/SegmentFilterItemContextMenu.tsx

@@ -1,4 +1,4 @@
-import { EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
 import { cn } from "@formbricks/lib/cn";
 import { Button } from "../../Button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../DropdownMenu";
@@ -24,8 +24,16 @@ export const SegmentFilterItemContextMenu = ({
         </DropdownMenuTrigger>
 
         <DropdownMenuContent>
-          <DropdownMenuItem onClick={() => onMoveFilter(filterId, "up")}>Move up</DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onMoveFilter(filterId, "down")}>Move down</DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onMoveFilter(filterId, "up")}
+            icon={<ArrowUpIcon className="h-4 w-4" />}>
+            Move up
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onMoveFilter(filterId, "down")}
+            icon={<ArrowDownIcon className="h-4 w-4" />}>
+            Move down
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
 

packages/ui/components/DataTable/components/ColumnSettingsDropdown.tsx

@@ -23,15 +23,17 @@ export const ColumnSettingsDropdown = <T,>({
           className="capitalize"
           onClick={() => {
             column.toggleVisibility(false);
-          }}>
+          }}
+          icon={<EyeOffIcon className="h-4 w-4" />}>
           <div className="flex items-center space-x-2">
-            <EyeOffIcon className="h-4 w-4" />
             <span>Hide column</span>
           </div>
         </DropdownMenuItem>
-        <DropdownMenuItem className="capitalize" onClick={() => setIsTableSettingsModalOpen(true)}>
+        <DropdownMenuItem
+          className="capitalize"
+          onClick={() => setIsTableSettingsModalOpen(true)}
+          icon={<SettingsIcon className="h-4 w-4" />}>
           <div className="flex items-center space-x-2">
-            <SettingsIcon className="h-4 w-4" />
             <span>Table settings</span>
           </div>
         </DropdownMenuItem>

packages/ui/components/DropdownMenu/index.tsx

@@ -29,7 +29,7 @@ const DropdownMenuSubTrigger: React.ComponentType<
     <DropdownMenuPrimitive.SubTrigger
       ref={ref as any}
       className={cn(
-        "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100",
+        "flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm font-medium text-slate-600 outline-none hover:text-slate-700 focus:bg-slate-100 data-[state=open]:bg-slate-100",
         inset && "pl-8",
         className
       )}
@@ -46,7 +46,7 @@ const DropdownMenuSubContent: React.ComponentType<DropdownMenuPrimitive.Dropdown
     <DropdownMenuPrimitive.SubContent
       ref={ref as any}
       className={cn(
-        "animate-in slide-in-from-left-1 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md",
+        "animate-in slide-in-from-left-1 z-50 min-w-[8rem] overflow-hidden rounded-lg border border-slate-200 bg-white p-1 font-medium text-slate-600 shadow-sm hover:text-slate-700",
         className
       )}
       {...props}
@@ -67,7 +67,7 @@ const DropdownMenuContent: React.ComponentType<DropdownMenuPrimitive.DropdownMen
           ref={ref}
           sideOffset={sideOffset}
           className={cn(
-            "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md",
+            "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-lg border border-slate-200 bg-white p-1 font-medium text-slate-700 shadow-sm",
             className
           )}
           {...props}
@@ -80,22 +80,26 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem: React.ForwardRefExoticComponent<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    icon?: React.ReactNode;
   } & React.RefAttributes<React.ElementRef<typeof DropdownMenuPrimitive.Item>>
 > = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    icon?: React.ReactNode;
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, children, inset, icon, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center gap-x-2 rounded-lg px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
-    {...props}
-  />
+    {...props}>
+    {icon}
+    {children}
+  </DropdownMenuPrimitive.Item>
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
@@ -108,7 +112,7 @@ const DropdownMenuCheckboxItem: React.ComponentType<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -132,7 +136,7 @@ const DropdownMenuRadioItem: React.ComponentType<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}>

packages/ui/components/Editor/components/AddVariablesDropdown.tsx

@@ -35,7 +35,7 @@ export const AddVariablesDropdown: React.FC<IAddVariablesDropdown> = (props) =>
           </div>
           <div className="h-64 overflow-scroll md:h-80">
             {props.variables.map((variable) => (
-              <DropdownMenuItem key={variable} className="hover:ring-0">
+              <DropdownMenuItem key={variable}>
                 <button
                   key={variable}
                   type="button"

packages/ui/components/Editor/components/ToolbarPlugin.tsx

@@ -468,7 +468,7 @@ export const ToolbarPlugin = (props: TextEditorProps) => {
               <DropdownMenuContent align="start">
                 {Object.keys(blockTypeToBlockName).map((key) => {
                   return (
-                    <DropdownMenuItem key={key} className="outline-none hover:ring-0 focus:ring-0">
+                    <DropdownMenuItem key={key}>
                       <Button
                         color="minimal"
                         type="button"

packages/ui/components/QuestionFormInput/components/RecallItemSelect.tsx

@@ -213,7 +213,6 @@ export const RecallItemSelect = ({
                     setShowRecallItemSelect(false);
                   }}
                   autoFocus={false}
-                  className="flex w-full cursor-pointer rounded-md p-2 focus:bg-slate-200 focus:outline-none"
                   onKeyDown={(e) => {
                     if (e.key === "ArrowUp" && index === 0) {
                       document.getElementById("recallItemSearchInput")?.focus();