From fb4e4159bc69bfb93e2a56d83633ac6a1e847687 Mon Sep 17 00:00:00 2001
From: Sai Suhas Sawant <92092643+SaiSawant1@users.noreply.github.com>
Date: Mon, 7 Oct 2024 03:17:20 +0530
Subject: [PATCH] fix: Align the UI for the different survey states (#3225)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
---
 .../components/SurveyStatusDropdown.tsx       | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown.tsx
index 9d2bb2d1d0..86f6d0fc38 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown.tsx
@@ -1,4 +1,3 @@
-import { CheckCircle2Icon, PauseCircleIcon, PlayCircleIcon } from "lucide-react";
 import toast from "react-hot-toast";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurvey } from "@formbricks/types/surveys/types";
@@ -83,16 +82,22 @@ export const SurveyStatusDropdown = ({
               </TooltipTrigger>
               <SelectContent className="bg-white">
                 <SelectItem className="group font-normal hover:text-slate-900" value="inProgress">
-                  <PlayCircleIcon className="-mt-1 mr-1 inline h-5 w-5 text-slate-500 group-hover:text-slate-800" />
-                  In-progress
+                  <div className="flex w-full items-center justify-center gap-4">
+                    <SurveyStatusIndicator status={"inProgress"} />
+                    In-progress
+                  </div>
                 </SelectItem>
                 <SelectItem className="group font-normal hover:text-slate-900" value="paused">
-                  <PauseCircleIcon className="-mt-1 mr-1 inline h-5 w-5 text-slate-500 group-hover:text-slate-800" />
-                  Paused
+                  <div className="flex w-full items-center justify-center gap-2">
+                    <SurveyStatusIndicator status={"paused"} />
+                    Paused
+                  </div>
                 </SelectItem>
                 <SelectItem className="group font-normal hover:text-slate-900" value="completed">
-                  <CheckCircle2Icon className="-mt-1 mr-1 inline h-5 w-5 text-slate-500 group-hover:text-slate-800" />
-                  Completed
+                  <div className="flex w-full items-center justify-center gap-2">
+                    <SurveyStatusIndicator status={"completed"} />
+                    Completed
+                  </div>
                 </SelectItem>
               </SelectContent>