From 916dba496a88f396bd663a10cc0e113626a6109f Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 16 Apr 2026 13:43:30 +0200
Subject: [PATCH] fix: restore tablo overview layout and colors

---
 .../src/pages/tablo-details.layout.test.tsx   | 14 ++++++---
 .../src/single-tablo/SingleTabloOverview.tsx  | 30 ++++++++++++++++---
 .../src/single-tablo/SingleTabloView.tsx      | 22 ++++++++++----
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/apps/main/src/pages/tablo-details.layout.test.tsx b/apps/main/src/pages/tablo-details.layout.test.tsx
index 7314c00..43c80a9 100644
--- a/apps/main/src/pages/tablo-details.layout.test.tsx
+++ b/apps/main/src/pages/tablo-details.layout.test.tsx
@@ -318,11 +318,17 @@ describe("TabloDetailsPage overview layout", () => {
     expect(screen.getByTestId("single-tablo-overview-grid")).toHaveClass(
       "lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]"
     );
-    expect(screen.getByRole("button", { name: "Modifier la mise en page" })).toHaveClass(
-      "bg-primary"
+    expect(screen.getByRole("link", { name: "Discussion" })).toHaveClass("bg-[#804EEC]");
+    expect(screen.getByRole("button", { name: "Inviter" })).toHaveClass(
+      "border-[#804EEC]",
+      "text-[#804EEC]"
     );
-    expect(screen.getByRole("button", { name: "Ajouter" })).toHaveClass("bg-primary");
-    expect(screen.getByRole("button", { name: "Ouvrir" })).toHaveClass("bg-primary");
+    expect(screen.getByRole("button", { name: "Modifier la mise en page" })).toHaveClass(
+      "border-[#804EEC]",
+      "text-[#804EEC]"
+    );
+    expect(screen.getByRole("button", { name: "Ajouter" })).toHaveClass("bg-[#804EEC]");
+    expect(screen.getByRole("button", { name: "Ouvrir" })).toHaveClass("text-[#804EEC]");
   });
 
   it("shows layout edit toggle for admin users", () => {
diff --git a/packages/tablo-views/src/single-tablo/SingleTabloOverview.tsx b/packages/tablo-views/src/single-tablo/SingleTabloOverview.tsx
index c652b23..a5646a9 100644
--- a/packages/tablo-views/src/single-tablo/SingleTabloOverview.tsx
+++ b/packages/tablo-views/src/single-tablo/SingleTabloOverview.tsx
@@ -126,10 +126,21 @@ export function SingleTabloOverview({
           title: "Mes tâches",
           actions: (
             <div className="flex items-center gap-2">
-              <Button type="button" size="sm" onClick={onOpenTasks}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="text-[#804EEC] hover:bg-[#804EEC]/10 hover:text-[#804EEC]"
+                onClick={onOpenTasks}
+              >
                 Voir tout
               </Button>
-              <Button type="button" size="sm" onClick={onCreateTask}>
+              <Button
+                type="button"
+                size="sm"
+                className="bg-[#804EEC] hover:bg-[#6f3fd4] text-white"
+                onClick={onCreateTask}
+              >
                 Ajouter
               </Button>
             </div>
@@ -170,7 +181,13 @@ export function SingleTabloOverview({
         return {
           title: "Fichiers",
           actions: (
-            <Button type="button" size="sm" onClick={onOpenFiles}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="text-[#804EEC] hover:bg-[#804EEC]/10 hover:text-[#804EEC]"
+              onClick={onOpenFiles}
+            >
               Ouvrir
             </Button>
           ),
@@ -241,7 +258,12 @@ export function SingleTabloOverview({
     <div className="space-y-6">
       {canEditLayout && (
         <div className="flex flex-wrap items-center gap-2">
-          <Button type="button" onClick={onToggleLayoutEditMode}>
+          <Button
+            type="button"
+            variant="outline"
+            className="border border-[#804EEC] text-[#804EEC] hover:bg-[#804EEC]/10"
+            onClick={onToggleLayoutEditMode}
+          >
             Modifier la mise en page
           </Button>
           {isLayoutEditMode && (
diff --git a/packages/tablo-views/src/single-tablo/SingleTabloView.tsx b/packages/tablo-views/src/single-tablo/SingleTabloView.tsx
index 4e3b44e..e95bc48 100644
--- a/packages/tablo-views/src/single-tablo/SingleTabloView.tsx
+++ b/packages/tablo-views/src/single-tablo/SingleTabloView.tsx
@@ -125,22 +125,34 @@ export function SingleTabloView({
 
   const discussionButton =
     discussionAction?.kind === "link" ? (
-      <Button asChild>
+      <Button
+        asChild
+        className="bg-[#804EEC] hover:bg-[#6f3fd4] text-white font-medium py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors flex-1 sm:flex-none min-h-[44px]"
+      >
         <Link to={discussionAction.to}>
-          <MessageCircleIcon className="w-4 h-4" />
+          <MessageCircleIcon className="w-5 h-5" />
           Discussion
         </Link>
       </Button>
     ) : discussionAction?.kind === "button" ? (
-      <Button type="button" onClick={discussionAction.onClick}>
-        <MessageCircleIcon className="w-4 h-4" />
+      <Button
+        type="button"
+        onClick={discussionAction.onClick}
+        className="bg-[#804EEC] hover:bg-[#6f3fd4] text-white font-medium py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors flex-1 sm:flex-none min-h-[44px]"
+      >
+        <MessageCircleIcon className="w-5 h-5" />
         Discussion
       </Button>
     ) : null;
 
   const inviteButton =
     canInviteMembers && onOpenInviteDialog ? (
-      <Button type="button" variant="outline" onClick={onOpenInviteDialog}>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onOpenInviteDialog}
+        className="border border-[#804EEC] text-[#804EEC] hover:bg-[#804EEC]/10 font-medium py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors flex-1 sm:flex-none min-h-[44px]"
+      >
         Inviter
       </Button>
     ) : null;