From 8b6e3fec370d9de0447a097b87049bbd0e40ac42 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Date: Mon, 21 Jul 2025 14:18:10 +0530
Subject: [PATCH] fix: response filters icons and text (#6266)

---
 .../[surveyId]/components/QuestionsComboBox.tsx     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx
index d62ca9e6d8..14458afee1 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx
@@ -15,11 +15,13 @@ import { useTranslate } from "@tolgee/react";
 import clsx from "clsx";
 import {
   AirplayIcon,
+  ArrowUpFromDotIcon,
   CheckIcon,
   ChevronDown,
   ChevronUp,
   ContactIcon,
   EyeOff,
+  FlagIcon,
   GlobeIcon,
   GridIcon,
   HashIcon,
@@ -89,8 +91,9 @@ const questionIcons = {
   device: SmartphoneIcon,
   os: AirplayIcon,
   browser: GlobeIcon,
-  source: GlobeIcon,
+  source: ArrowUpFromDotIcon,
   action: MousePointerClickIcon,
+  country: FlagIcon,
 
   // others
   Language: LanguagesIcon,
@@ -132,10 +135,16 @@ export const SelectedCommandItem = ({ label, questionType, type }: Partial<Quest
       return "bg-amber-500";
     }
   };
+
+  const getLabelStyle = (): string | undefined => {
+    if (type !== OptionsType.META) return undefined;
+    return label === "os" ? "uppercase" : "capitalize";
+  };
+
   return (
     <div className="flex h-5 w-[12rem] items-center sm:w-4/5">
       <span className={clsx("rounded-md p-1", getColor())}>{getIconType()}</span>
-      <p className="ml-3 truncate text-sm text-slate-600">
+      <p className={clsx("ml-3 truncate text-sm text-slate-600", getLabelStyle())}>
         {typeof label === "string" ? label : getLocalizedValue(label, "default")}
       </p>
     </div>