From 7acb79b3def6933b39fe91b8f9219ae50f29c540 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 23 Feb 2026 19:25:34 +0100
Subject: [PATCH] Improve UI consistency: chat purple theme, page headers,
 Discussions title

- Set purple (#804EEC) as default ChannelBadge background color
- Update ChannelPreview active state to purple highlight (was blue)
- Add "Discussions" title header to chat page
- Standardize all page headers to text-2xl font-bold (tablos, tasks, files, planning)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/main/src/components/ChannelBadge.tsx   | 2 +-
 apps/main/src/components/ChannelPreview.tsx | 6 +++---
 apps/main/src/pages/chat.tsx                | 7 ++++++-
 apps/main/src/pages/files.tsx               | 2 +-
 apps/main/src/pages/planning.tsx            | 2 +-
 apps/main/src/pages/tablos.tsx              | 2 +-
 apps/main/src/pages/tasks.tsx               | 2 +-
 7 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/main/src/components/ChannelBadge.tsx b/apps/main/src/components/ChannelBadge.tsx
index 9dbdc51..bfd0fd4 100644
--- a/apps/main/src/components/ChannelBadge.tsx
+++ b/apps/main/src/components/ChannelBadge.tsx
@@ -17,7 +17,7 @@ export const ChannelBadge = ({
     <div className="relative">
       <div
         className={twMerge(
-          "size-12 rounded-full flex items-center justify-center text-white font-semibold text-sm",
+          "size-12 rounded-full flex items-center justify-center text-white font-semibold text-sm bg-[#804EEC]",
           tablo?.color && tablo.color
         )}
       >
diff --git a/apps/main/src/components/ChannelPreview.tsx b/apps/main/src/components/ChannelPreview.tsx
index b464145..abe2c03 100644
--- a/apps/main/src/components/ChannelPreview.tsx
+++ b/apps/main/src/components/ChannelPreview.tsx
@@ -85,7 +85,7 @@ export function ChannelPreview({
     <div
       className={twMerge(
         "group relative flex items-center gap-3 p-3 cursor-pointer transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800/50 border-b border-gray-100 dark:border-gray-800",
-        isActive && "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800",
+        isActive && "bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800",
         className
       )}
       onClick={handleClick}
@@ -98,7 +98,7 @@ export function ChannelPreview({
           <h3
             className={twMerge(
               "font-medium text-gray-900 dark:text-gray-100 truncate",
-              isActive && "text-blue-600 dark:text-blue-400"
+              isActive && "text-[#804EEC] dark:text-purple-400"
             )}
           >
             {displayTitle}
@@ -131,7 +131,7 @@ export function ChannelPreview({
 
       {/* Active indicator */}
       {isActive && (
-        <div className="absolute left-0 top-0 bottom-0 w-1 bg-blue-500 dark:bg-blue-400 rounded-r-full" />
+        <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#804EEC] dark:bg-purple-400 rounded-r-full" />
       )}
     </div>
   );
diff --git a/apps/main/src/pages/chat.tsx b/apps/main/src/pages/chat.tsx
index f8a6e63..9c9b63a 100644
--- a/apps/main/src/pages/chat.tsx
+++ b/apps/main/src/pages/chat.tsx
@@ -36,7 +36,11 @@ export function ChatPage() {
   }, [channelFromUrl]);
 
   return (
-    <div className="flex h-[calc(100vh-75px)] bg-gray-50 dark:bg-background">
+    <div className="flex flex-col h-[calc(100vh-75px)] bg-gray-50 dark:bg-background">
+      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/40 shrink-0">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Discussions</h1>
+      </div>
+      <div className="flex flex-1 overflow-hidden">
       <div
         className={`border-r border-gray-200 dark:border-gray-600/50 bg-white dark:bg-gray-700/40 transition-all duration-300 ease-in-out overflow-hidden ${
           isChannelListExpanded ? "w-80" : "w-0"
@@ -78,6 +82,7 @@ export function ChatPage() {
           </Window>
         </Channel>
       </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/main/src/pages/files.tsx b/apps/main/src/pages/files.tsx
index 1d93f5b..1d8b455 100644
--- a/apps/main/src/pages/files.tsx
+++ b/apps/main/src/pages/files.tsx
@@ -455,7 +455,7 @@ export function FilesPage() {
     <div className="py-6 px-6">
       {/* Header */}
       <div className="flex items-center justify-between pb-6">
-        <h1 className="text-3xl font-semibold text-gray-900 dark:text-gray-100">{t("files", "Files")}</h1>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{t("files", "Files")}</h1>
         <Button
           className="gap-2 bg-[#804EEC] hover:bg-[#6f3fd4] text-white"
           onClick={() => setUploadOpen(true)}
diff --git a/apps/main/src/pages/planning.tsx b/apps/main/src/pages/planning.tsx
index bbe1830..4bd0a3a 100644
--- a/apps/main/src/pages/planning.tsx
+++ b/apps/main/src/pages/planning.tsx
@@ -809,7 +809,7 @@ export const PlanningPage = () => {
       <div className="py-6 px-2">
         {/* Header */}
         <div className="flex items-center justify-between mb-6 flex-wrap gap-4">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
             {t("planning:events", "Événements")}
           </h1>
           <button
diff --git a/apps/main/src/pages/tablos.tsx b/apps/main/src/pages/tablos.tsx
index 52f6bc7..3ef747a 100644
--- a/apps/main/src/pages/tablos.tsx
+++ b/apps/main/src/pages/tablos.tsx
@@ -230,7 +230,7 @@ export function TablosPage() {
     <div className="px-4 pt-8 pb-6">
       {/* Header */}
       <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
-        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
           {t("tablo.projectList.title")}
         </h1>
         <button
diff --git a/apps/main/src/pages/tasks.tsx b/apps/main/src/pages/tasks.tsx
index ae703ac..66fdcec 100644
--- a/apps/main/src/pages/tasks.tsx
+++ b/apps/main/src/pages/tasks.tsx
@@ -236,7 +236,7 @@ export function TasksPage() {
       <div className="px-4 md:px-6 pt-6 md:pt-10 pb-5">
         {/* Title row */}
         <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
-          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
             {t("pages:tasks.title")}
           </h1>
           <Button