arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

fix(topbar): apply dark mode styles to profile dropdown

Browse source
This commit is contained in:
Arthur Belleville 2026-02-24 11:49:26 +01:00
parent 737cd5f073
commit 93f8a3ef1e
No known key found for this signature in database
1 changed files with 37 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
apps/main/src/components/TopBar.tsx
View file

@ -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" />