From 6b39f175b3b24b2ab00a2ac84d94789867293adb Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 22 Feb 2026 09:54:20 +0100
Subject: [PATCH] Apply purple #804EEC theme to tablo events section

- Create event button: solid #804EEC purple
- Date badge: #F4F3FF background with #7F56D9 text (matching events page)
- Loading spinner: purple instead of blue
- Empty state button: solid purple instead of outline

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/components/TabloEventsSection.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/main/src/components/TabloEventsSection.tsx b/apps/main/src/components/TabloEventsSection.tsx
index 9ac5323..1be30a9 100644
--- a/apps/main/src/components/TabloEventsSection.tsx
+++ b/apps/main/src/components/TabloEventsSection.tsx
@@ -65,7 +65,7 @@ export const TabloEventsSection = ({ tablo, isAdmin }: TabloEventsSectionProps)
             {t("tablo:events.description")}
           </TypographyMuted>
           {!isReadOnly && (
-            <Button onClick={handleCreateEvent} className="flex items-center gap-2 mt-4">
+            <Button onClick={handleCreateEvent} className="flex items-center gap-2 mt-4 bg-[#804EEC] hover:bg-[#6f3fd4] text-white">
               <Plus className="w-4 h-4" />
               {t("tablo:events.createEvent")}
             </Button>
@@ -77,7 +77,7 @@ export const TabloEventsSection = ({ tablo, isAdmin }: TabloEventsSectionProps)
       <div className="bg-card rounded-lg border border-border">
         {isLoading ? (
           <div className="flex items-center justify-center p-8">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#804EEC]"></div>
             <span className="ml-3 text-sm text-gray-500 dark:text-gray-400">
               Chargement des événements...
             </span>
@@ -111,13 +111,13 @@ export const TabloEventsSection = ({ tablo, isAdmin }: TabloEventsSectionProps)
               <div key={event.event_id} className="p-6">
                 <div className="flex items-start space-x-4">
                   {/* Date Badge */}
-                  <div className="shrink-0 w-16 h-16 bg-primary/10 dark:bg-primary/20 rounded-lg flex flex-col items-center justify-center">
-                    <span className="text-xs font-medium text-primary uppercase">
+                  <div className="shrink-0 w-14 h-14 bg-[#F4F3FF] dark:bg-purple-900/20 rounded-[8px] flex flex-col items-center justify-center">
+                    <span className="text-[10px] font-semibold text-[#7F56D9] dark:text-purple-400 uppercase tracking-wide leading-none">
                       {new Date(event.start_date).toLocaleDateString("fr-FR", {
                         month: "short",
                       })}
                     </span>
-                    <span className="text-2xl font-bold text-primary">
+                    <span className="text-xl font-bold text-[#7F56D9] dark:text-purple-400 leading-none mt-0.5">
                       {new Date(event.start_date).getDate()}
                     </span>
                   </div>
@@ -172,7 +172,7 @@ export const TabloEventsSection = ({ tablo, isAdmin }: TabloEventsSectionProps)
               Aucun événement à venir pour ce tablo
             </p>
             {!isReadOnly && (
-              <Button onClick={handleCreateEvent} variant="outline" className="mt-4">
+              <Button onClick={handleCreateEvent} className="mt-4 bg-[#804EEC] hover:bg-[#6f3fd4] text-white">
                 <Plus className="w-4 h-4 mr-2" />
                 Créer le premier événement
               </Button>