From e881748bd4413105ca63aaf524c33337348e3f89 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 7 Apr 2025 09:18:24 +0200
Subject: [PATCH] Improve ThemeSwitcher and Avatar popover

---
 ui/src/components/NavigationBar.tsx | 41 +++++++++--------------------
 ui/src/components/ThemeSwitcher.tsx | 30 ++++++++++++++-------
 2 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx
index 4523abd..211e24e 100644
--- a/ui/src/components/NavigationBar.tsx
+++ b/ui/src/components/NavigationBar.tsx
@@ -12,7 +12,7 @@ import {
   KanbanIcon,
 } from "lucide-react";
 import { Link as RouterLink } from "react-router-dom";
-import { Separator, Switch } from "react-aria-components";
+import { Separator } from "react-aria-components";
 import { Link } from "../ui-library/link";
 import { Icon } from "../ui-library/icon";
 import { Avatar, AvatarBadge } from "../ui-library/avatar";
@@ -30,7 +30,7 @@ import { useState, useRef } from "react";
 import logo from "../assets/icon.jpg";
 import { ThemeSwitcher } from "./ThemeSwitcher";
 import { useSession } from "../contexts/SessionContext";
-
+import { Text } from "../ui-library/text";
 type NavLinkItem = {
   isActive?: boolean;
 } & LinkProps;
@@ -108,14 +108,14 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
           src={session?.user?.user_metadata?.avatar_url}
           alt="Avatar"
         />
-        <span
+        <Text
           className={twMerge(
             "text-gray-300/90 transition-all duration-300",
             isCollapsed ? "opacity-0 w-0" : "opacity-100"
           )}
         >
-          {session?.user?.user_metadata?.first_name}
-        </span>
+          {session?.user?.user_metadata?.full_name}
+        </Text>
       </Button>
       <Popover
         className="min-w-56 rounded-xl bg-navbar-darker"
@@ -127,39 +127,22 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
           <div className="flex flex-col gap-2 p-3">
             <div className="flex gap-4">
               <Avatar
-                src="https://i.imgur.com/xIe7Wlb.png"
-                alt="Marissa Whitaker"
+                src={session?.user?.user_metadata?.avatar_url}
+                alt={session?.user?.user_metadata?.first_name}
               >
                 <AvatarBadge badge={<AvailableIcon aria-label="Available" />} />
               </Avatar>
               <div className="flex flex-col">
-                <span className="font-bold">Lisa Wilson</span>
-                <span className="sm:leading-4">Admin</span>
+                <Text className="font-bold text-gray-300/90">
+                  {session?.user?.user_metadata?.full_name}
+                </Text>
+                <Text className="text-gray-300/90">Admin</Text>
               </div>
             </div>
 
-            <Separator />
+            <Separator className="border-gray-300/70" />
 
             <ThemeSwitcher />
-
-            <div
-              className={twMerge(
-                "flex items-center justify-between px-3",
-                "text-sm font-medium"
-              )}
-            >
-              <span>Notifications</span>
-              <Switch defaultSelected />
-            </div>
-            <div
-              className={twMerge(
-                "flex items-center justify-between px-3",
-                "text-sm font-medium"
-              )}
-            >
-              <span>Badges</span>
-              <Switch />
-            </div>
           </div>
         </Dialog>
       </Popover>
diff --git a/ui/src/components/ThemeSwitcher.tsx b/ui/src/components/ThemeSwitcher.tsx
index 241639f..6ae271b 100644
--- a/ui/src/components/ThemeSwitcher.tsx
+++ b/ui/src/components/ThemeSwitcher.tsx
@@ -13,8 +13,8 @@ export function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
 
   return (
-    <div className="flex items-center gap-2">
-      <Text>Thème: {translation[theme]}</Text>
+    <div className="flex flex-col gap-2">
+      <Text className="text-gray-300/90">Thème: {translation[theme]}</Text>
       <ToggleButtonGroup
         selectionMode="single"
         selectedKeys={new Set([theme])}
@@ -25,11 +25,15 @@ export function ThemeSwitcher() {
           const newTheme = Array.from(keys)[0] as "light" | "dark" | "system";
           setTheme(newTheme);
         }}
-        className={twMerge("p-2 rounded-full", "transition-colors")}
+        className={twMerge(
+          "rounded-md",
+          "transition-colors",
+          "border border-gray-700/80"
+        )}
       >
-        <ToggleButton id="light" isIconOnly size="sm" className="p-1">
+        <ToggleButton id="light" isIconOnly className="p-1 pr-2">
           <svg
-            className="w-4 h-4 text-slate-600"
+            className="w-4 h-4 text-slate-500"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -42,9 +46,13 @@ export function ThemeSwitcher() {
             />
           </svg>
         </ToggleButton>
-        <ToggleButton id="system" isIconOnly size="sm" className="p-1">
+        <ToggleButton
+          id="system"
+          isIconOnly
+          className="p-1 pl-2 border-l-1 border-l-slate-500/50"
+        >
           <svg
-            className="w-4 h-4 text-slate-600"
+            className="w-4 h-4 text-slate-500"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -57,9 +65,13 @@ export function ThemeSwitcher() {
             />
           </svg>
         </ToggleButton>
-        <ToggleButton id="dark" isIconOnly size="sm" className="p-1">
+        <ToggleButton
+          id="dark"
+          isIconOnly
+          className="p-1 pl-2 border-l-1 border-l-slate-500/50"
+        >
           <svg
-            className="w-4 h-4 text-slate-600"
+            className="w-4 h-4 text-slate-500"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"