From 7fe421d407f2d4e031458838231f3aa211f53d1d Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Mon, 9 Feb 2026 14:33:00 +0530
Subject: [PATCH] [WEB-6009] fix: update ViewModeSelector to use IconButton
 (#5762)

---
 .../sidebar/view-mode-selector.tsx                        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/core/components/workspace-notifications/sidebar/view-mode-selector.tsx b/apps/web/core/components/workspace-notifications/sidebar/view-mode-selector.tsx
index 84a0c4be9e..bc07cd086f 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/view-mode-selector.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/view-mode-selector.tsx
@@ -13,6 +13,7 @@
 
 import type { TNotificationsViewMode } from "@/store/notifications/workspace-notifications.store";
 import { useTranslation } from "@plane/i18n";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
 import { CenterPanelIcon, FullScreenPanelIcon } from "@plane/propel/icons";
 import { Menu } from "@plane/propel/menu";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -32,16 +33,17 @@ export function ViewModeSelector({ value, onChange }: ViewModeSelectorProps) {
   const CurrentIcon = VIEW_MODES.find((m) => m.key === value)?.icon;
   const { t } = useTranslation();
 
+  const Icon = CurrentIcon ?? CenterPanelIcon;
+
   return (
     <Menu
       ariaLabel={t("account_settings.notifications.select_default_view")}
       customButton={
         <Tooltip tooltipContent={t("account_settings.notifications.select_default_view")} position="bottom">
-          <span className="flex items-center justify-center">
-            {CurrentIcon && <CurrentIcon className="h-4 w-4 text-tertiary hover:text-secondary" />}
-          </span>
+          <Icon className="h-3.5 w-3.5" />
         </Tooltip>
       }
+      customButtonClassName={getIconButtonStyling("ghost", "base")}
       optionsClassName="p-1"
     >
       <div className="text-tertiary text-12 px-2 py-1">{t("account_settings.notifications.select_default_view")}</div>