From 5bf768bc027f98fe7accc34f03db96a77b48a84a Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Tue, 17 Mar 2026 17:02:34 +0100
Subject: [PATCH] feat(ui) : apply pastel project colors on project cards and
 calendar blocks

- Project cards (/projects): 16px radius, pastel background, no border
- Time tracking calendar blocks: pastel opaque background, project color text

Ticket: LST-29

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/time-tracking/TimeEntryBlock.vue    | 10 +++++++---
 frontend/pages/projects/index.vue                  | 14 +++++++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/components/time-tracking/TimeEntryBlock.vue b/frontend/components/time-tracking/TimeEntryBlock.vue
index 6baf653..e80adf1 100644
--- a/frontend/components/time-tracking/TimeEntryBlock.vue
+++ b/frontend/components/time-tracking/TimeEntryBlock.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         ref="blockEl"
-        class="absolute z-10 cursor-pointer rounded-md text-xs text-white shadow-sm select-none"
+        class="absolute z-10 cursor-pointer rounded-md text-xs shadow-sm select-none"
         :style="blockStyle"
         :class="{ 'opacity-40': isDragSource }"
         @contextmenu.prevent="emit('contextmenu', $event, entry)"
@@ -119,7 +119,10 @@ const sizeLevel = computed(() => {
 const blockStyle = computed(() => {
     const startMinutes = startDate.value.getHours() * 60 + startDate.value.getMinutes() + resizeTopDeltaMinutes.value
     const topPx = ((startMinutes - props.dayStartHour * 60) / 60) * props.hourHeight
-    const bgColor = props.entry.project?.color ?? '#94a3b8'
+    const hex = (props.entry.project?.color ?? '#94a3b8').replace('#', '')
+    const r = parseInt(hex.substring(0, 2), 16)
+    const g = parseInt(hex.substring(2, 4), 16)
+    const b = parseInt(hex.substring(4, 6), 16)
 
     const col = props.columnIndex ?? 0
     const total = props.totalColumns ?? 1
@@ -130,7 +133,8 @@ const blockStyle = computed(() => {
     return {
         top: `${topPx}px`,
         height: `${heightPx.value}px`,
-        backgroundColor: bgColor,
+        backgroundColor: `rgb(${Math.round(r + (255 - r) * 0.6)}, ${Math.round(g + (255 - g) * 0.6)}, ${Math.round(b + (255 - b) * 0.6)})`,
+        color: `rgb(${r}, ${g}, ${b})`,
         left: `calc(${leftPercent}% + ${gapPx}px)`,
         width: `calc(${widthPercent}% - ${gapPx * 2}px)`,
     }
diff --git a/frontend/pages/projects/index.vue b/frontend/pages/projects/index.vue
index af280e4..a518711 100644
--- a/frontend/pages/projects/index.vue
+++ b/frontend/pages/projects/index.vue
@@ -29,8 +29,9 @@
             <div
                 v-for="project in projects"
                 :key="project.id"
-                class="cursor-pointer rounded-[6px] border border-neutral-200 bg-tertiary-500 p-4 shadow-sm transition hover:shadow-md"
+                class="cursor-pointer p-4 shadow-sm transition hover:shadow-md"
                 :class="{ 'opacity-60': project.archived }"
+                :style="projectCardStyle(project.color)"
                 @click="navigateTo(`/projects/${project.id}`)"
             >
                 <div class="flex items-center justify-between">
@@ -80,6 +81,17 @@ import { useClientService } from '~/services/clients'
 
 useHead({ title: 'Projets' })
 
+function projectCardStyle(color: string | null) {
+    const hex = (color || '#222783').replace('#', '')
+    const r = parseInt(hex.substring(0, 2), 16)
+    const g = parseInt(hex.substring(2, 4), 16)
+    const b = parseInt(hex.substring(4, 6), 16)
+    return {
+        borderRadius: '16px',
+        backgroundColor: `rgba(${r}, ${g}, ${b}, 0.08)`,
+    }
+}
+
 const projectService = useProjectService()
 const clientService = useClientService()