From 93f8a3ef1ea9d5ed2904f718182cc9835219204e Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Tue, 24 Feb 2026 11:49:26 +0100
Subject: [PATCH] fix(topbar): apply dark mode styles to profile dropdown

---
 apps/main/src/components/TopBar.tsx | 53 ++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/apps/main/src/components/TopBar.tsx b/apps/main/src/components/TopBar.tsx
index f224607..96c1f64 100644
--- a/apps/main/src/components/TopBar.tsx
+++ b/apps/main/src/components/TopBar.tsx
@@ -8,8 +8,15 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@xtablo/ui/components/dropdown-menu";
-import { Avatar, AvatarFallback, AvatarImage } from "@xtablo/ui/components/avatar";
-import { TypographyMuted, TypographySmall } from "@xtablo/ui/components/typography";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@xtablo/ui/components/avatar";
+import {
+  TypographyMuted,
+  TypographySmall,
+} from "@xtablo/ui/components/typography";
 import {
   BellIcon,
   CalendarCheckIcon,
@@ -29,7 +36,10 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation, useSearchParams } from "react-router-dom";
 import { useLogout } from "../hooks/auth";
-import { useNotifications, useNotificationsSubscription } from "../hooks/notifications";
+import {
+  useNotifications,
+  useNotificationsSubscription,
+} from "../hooks/notifications";
 import { useUser } from "../providers/UserStoreProvider";
 
 type Notification = Database["public"]["Tables"]["notifications"]["Row"];
@@ -156,7 +166,8 @@ function NotificationItem({
 
 function NotificationDropdown() {
   const { t } = useTranslation("navigation");
-  const { notifications, unreadCount, isLoading, markAsRead, markAllAsRead } = useNotifications();
+  const { notifications, unreadCount, isLoading, markAsRead, markAllAsRead } =
+    useNotifications();
   const { setupSubscription } = useNotificationsSubscription();
 
   useEffect(() => {
@@ -193,7 +204,9 @@ function NotificationDropdown() {
               {t("notifications.title", "Notifications")}
             </TypographySmall>
             {unreadCount > 0 && (
-              <Badge className="bg-red-500 text-white text-xs">{unreadCount}</Badge>
+              <Badge className="bg-red-500 text-white text-xs">
+                {unreadCount}
+              </Badge>
             )}
           </div>
           {unreadCount > 0 && (
@@ -232,7 +245,10 @@ function NotificationDropdown() {
             <div className="divide-y divide-gray-100">
               {notifications.map((notification) => (
                 <div key={notification.id} className="group">
-                  <NotificationItem notification={notification} onMarkAsRead={markAsRead} />
+                  <NotificationItem
+                    notification={notification}
+                    onMarkAsRead={markAsRead}
+                  />
                 </div>
               ))}
             </div>
@@ -264,53 +280,58 @@ function ProfileDropdown() {
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        className="min-w-56 bg-white border border-[#EAECF0] p-1 rounded-lg text-gray-900 shadow-lg"
+        className="min-w-56 bg-white dark:bg-gray-900 border border-[#EAECF0] dark:border-gray-700 p-1 rounded-lg text-gray-900 dark:text-gray-100 shadow-lg"
         side="bottom"
         align="end"
         sideOffset={8}
       >
         <div className="flex gap-2 p-2">
           <Avatar className="size-8">
-            <AvatarImage src={user.avatar_url ?? undefined} alt={user.name ?? "User avatar"} />
+            <AvatarImage
+              src={user.avatar_url ?? undefined}
+              alt={user.name ?? "User avatar"}
+            />
             <AvatarFallback className="bg-[#B8EAFF] text-gray-800 font-medium">
               {user.name?.charAt(0).toUpperCase()}
             </AvatarFallback>
           </Avatar>
           <div className="flex flex-col gap-0.5 min-w-0 flex-1">
-            <TypographySmall className="font-semibold text-gray-900 truncate">
+            <TypographySmall className="font-semibold text-gray-900 dark:text-gray-100 truncate">
               {user.name}
             </TypographySmall>
-            <TypographyMuted className="text-xs text-gray-500 truncate">{user.email}</TypographyMuted>
+            <TypographyMuted className="text-xs text-gray-500 dark:text-gray-400 truncate">
+              {user.email}
+            </TypographyMuted>
           </div>
         </div>
 
-        <DropdownMenuSeparator className="bg-gray-100" />
+        <DropdownMenuSeparator className="bg-gray-100 dark:bg-gray-700" />
 
         <Link to="/settings">
-          <DropdownMenuItem className="cursor-pointer gap-2 text-gray-700 focus:bg-gray-100">
+          <DropdownMenuItem className="cursor-pointer gap-2 text-gray-700 dark:text-gray-200 focus:bg-gray-100 dark:focus:bg-gray-800">
             <SettingsIcon className="w-4 h-4" />
             {t("userMenu.settings")}
           </DropdownMenuItem>
         </Link>
 
         <Link to="/events">
-          <DropdownMenuItem className="cursor-pointer gap-2 text-gray-700 focus:bg-gray-100">
+          <DropdownMenuItem className="cursor-pointer gap-2 text-gray-700 dark:text-gray-200 focus:bg-gray-100 dark:focus:bg-gray-800">
             <CalendarCheckIcon className="w-4 h-4" />
             {t("myEvents")}
           </DropdownMenuItem>
         </Link>
 
         <Link to="/availabilities">
-          <DropdownMenuItem className="cursor-pointer gap-2 text-gray-700 focus:bg-gray-100">
+          <DropdownMenuItem className="cursor-pointer gap-2 text-gray-700 dark:text-gray-200 focus:bg-gray-100 dark:focus:bg-gray-800">
             <CalendarIcon className="w-4 h-4" />
             {t("userMenu.availabilities")}
           </DropdownMenuItem>
         </Link>
 
-        <DropdownMenuSeparator className="bg-gray-100" />
+        <DropdownMenuSeparator className="bg-gray-100 dark:bg-gray-700" />
 
         <DropdownMenuItem
-          className="cursor-pointer gap-2 text-red-600 focus:bg-red-50 focus:text-red-600"
+          className="cursor-pointer gap-2 text-red-600 dark:text-red-400 focus:bg-red-50 dark:focus:bg-red-900/30 focus:text-red-600 dark:focus:text-red-300"
           onClick={() => logout()}
         >
           <LogOutIcon className="w-4 h-4" />