From f9d4de3e33736bdbe99c9b8d9bb5eacdf18fe9a8 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Wed, 11 Mar 2026 11:16:50 +0100
Subject: [PATCH] style(frontend) : apply UI corrections from design review

- Page titles in blue primary (#222783)
- Double main content margins (px-16 py-24)
- Remove blue border above sidebar timer
- Remove project color dot, use project color on title text
- All delete buttons/icons orange (#E2953C)
- Fix collapsed sidebar logo (object-cover object-left)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/task/TaskDrawer.vue                    | 2 +-
 frontend/components/time-tracking/TimeEntryContextMenu.vue | 2 +-
 frontend/components/time-tracking/TimeEntryDrawer.vue      | 2 +-
 frontend/components/time-tracking/TimeEntryList.vue        | 2 +-
 frontend/components/ui/ConfirmDeleteStatusModal.vue        | 2 +-
 frontend/components/ui/DataTable.vue                       | 2 +-
 frontend/layouts/default.vue                               | 6 +++---
 frontend/pages/admin.vue                                   | 2 +-
 frontend/pages/clients.vue                                 | 2 +-
 frontend/pages/projects/[id]/groups.vue                    | 2 +-
 frontend/pages/projects/[id]/index.vue                     | 2 +-
 frontend/pages/projects/[id]/statuses.vue                  | 2 +-
 frontend/pages/projects/index.vue                          | 5 ++---
 frontend/pages/time-tracking.vue                           | 2 +-
 14 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/components/task/TaskDrawer.vue b/frontend/components/task/TaskDrawer.vue
index 9aebad3..3cbceb2 100644
--- a/frontend/components/task/TaskDrawer.vue
+++ b/frontend/components/task/TaskDrawer.vue
@@ -77,7 +77,7 @@
                 <button
                     v-if="isEditing"
                     type="button"
-                    class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="rounded-md bg-[#E2953C] px-4 py-2 text-sm font-semibold text-white hover:bg-[#c97a2f] disabled:cursor-not-allowed disabled:opacity-50"
                     :disabled="isSubmitting"
                     @click="handleDelete"
                 >
diff --git a/frontend/components/time-tracking/TimeEntryContextMenu.vue b/frontend/components/time-tracking/TimeEntryContextMenu.vue
index 6088ed3..cc43e49 100644
--- a/frontend/components/time-tracking/TimeEntryContextMenu.vue
+++ b/frontend/components/time-tracking/TimeEntryContextMenu.vue
@@ -24,7 +24,7 @@
             </button>
             <button
                 v-if="entry"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-[#E2953C] hover:bg-orange-50"
                 @click="onDelete"
             >
                 <Icon name="mdi:delete-outline" size="16" />
diff --git a/frontend/components/time-tracking/TimeEntryDrawer.vue b/frontend/components/time-tracking/TimeEntryDrawer.vue
index 7fcde22..1d1aa13 100644
--- a/frontend/components/time-tracking/TimeEntryDrawer.vue
+++ b/frontend/components/time-tracking/TimeEntryDrawer.vue
@@ -84,7 +84,7 @@
                 <button
                     v-if="isEditing"
                     type="button"
-                    class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 transition"
+                    class="rounded-md bg-[#E2953C] px-4 py-2 text-sm font-semibold text-white hover:bg-[#c97a2f] transition"
                     @click="onDelete"
                 >
                     Supprimer
diff --git a/frontend/components/time-tracking/TimeEntryList.vue b/frontend/components/time-tracking/TimeEntryList.vue
index b58c6d1..0ba88a0 100644
--- a/frontend/components/time-tracking/TimeEntryList.vue
+++ b/frontend/components/time-tracking/TimeEntryList.vue
@@ -55,7 +55,7 @@
 
             <!-- Delete action -->
             <button
-                class="shrink-0 rounded-md p-1.5 text-neutral-300 opacity-0 transition hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
+                class="shrink-0 rounded-md p-1.5 text-neutral-300 opacity-0 transition hover:bg-orange-50 hover:text-[#E2953C] group-hover:opacity-100"
                 title="Supprimer"
                 @click.stop="emit('deleteEntry', entry)"
             >
diff --git a/frontend/components/ui/ConfirmDeleteStatusModal.vue b/frontend/components/ui/ConfirmDeleteStatusModal.vue
index ef3afd9..02f271f 100644
--- a/frontend/components/ui/ConfirmDeleteStatusModal.vue
+++ b/frontend/components/ui/ConfirmDeleteStatusModal.vue
@@ -31,7 +31,7 @@
                         </button>
                         <button
                             type="button"
-                            class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50"
+                            class="rounded-md bg-[#E2953C] px-4 py-2 text-sm font-semibold text-white hover:bg-[#c97a2f] disabled:opacity-50"
                             :disabled="isProcessing"
                             @click="confirm"
                         >
diff --git a/frontend/components/ui/DataTable.vue b/frontend/components/ui/DataTable.vue
index b430277..745bab6 100644
--- a/frontend/components/ui/DataTable.vue
+++ b/frontend/components/ui/DataTable.vue
@@ -34,7 +34,7 @@
                     </td>
                     <td v-if="deletable" class="px-4 py-3">
                         <button
-                            class="text-red-500 hover:text-red-700"
+                            class="text-[#E2953C] hover:text-[#c97a2f]"
                             @click.stop="$emit('delete', item)"
                         >
                             <Icon name="mdi:delete-outline" size="20" />
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 0d85895..c1028ac 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -16,7 +16,7 @@
                         v-else
                         src="/malio.png"
                         alt="Logo"
-                        class="h-8 w-8 object-contain"
+                        class="h-8 w-8 object-cover object-left"
                     />
                 </div>
                 <nav class="flex-1 overflow-hidden" :class="ui.sidebarCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
@@ -77,7 +77,7 @@
                     />
                 </nav>
 
-                <div class="px-4 py-3 border-t border-secondary-500">
+                <div class="px-4 py-3">
                     <SidebarTimer :collapsed="ui.sidebarCollapsed" />
                 </div>
 
@@ -98,7 +98,7 @@
 
             <div class="h-full flex-1 overflow-hidden flex flex-col">
                 <AppTopNav :user="auth.user" />
-                <main class="flex-1 overflow-y-auto px-8 py-12">
+                <main class="flex-1 overflow-y-auto px-16 py-24">
                     <slot/>
                 </main>
             </div>
diff --git a/frontend/pages/admin.vue b/frontend/pages/admin.vue
index 9290f01..5bd454b 100644
--- a/frontend/pages/admin.vue
+++ b/frontend/pages/admin.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h1 class="text-2xl font-bold text-neutral-900">Administration</h1>
+        <h1 class="text-2xl font-bold text-primary-500">Administration</h1>
 
         <div class="mt-6 border-b border-neutral-200">
             <nav class="flex gap-6">
diff --git a/frontend/pages/clients.vue b/frontend/pages/clients.vue
index 5b9aabc..b337bd2 100644
--- a/frontend/pages/clients.vue
+++ b/frontend/pages/clients.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">Clients</h1>
+            <h1 class="text-2xl font-bold text-primary-500">Clients</h1>
             <button
                 class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
                 @click="openCreate"
diff --git a/frontend/pages/projects/[id]/groups.vue b/frontend/pages/projects/[id]/groups.vue
index fa7e44a..d148000 100644
--- a/frontend/pages/projects/[id]/groups.vue
+++ b/frontend/pages/projects/[id]/groups.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }} — Groupes</h1>
+            <h1 class="text-2xl font-bold text-primary-500">{{ project?.name ?? '' }} — Groupes</h1>
         </div>
 
         <div class="mt-6">
diff --git a/frontend/pages/projects/[id]/index.vue b/frontend/pages/projects/[id]/index.vue
index 2229f3a..1d7006f 100644
--- a/frontend/pages/projects/[id]/index.vue
+++ b/frontend/pages/projects/[id]/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }}</h1>
+            <h1 class="text-2xl font-bold text-primary-500">{{ project?.name ?? '' }}</h1>
             <div class="flex gap-3">
                 <button
                     class="rounded-md bg-secondary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-600"
diff --git a/frontend/pages/projects/[id]/statuses.vue b/frontend/pages/projects/[id]/statuses.vue
index a6932ee..24704ba 100644
--- a/frontend/pages/projects/[id]/statuses.vue
+++ b/frontend/pages/projects/[id]/statuses.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }} — Statuts</h1>
+            <h1 class="text-2xl font-bold text-primary-500">{{ project?.name ?? '' }} — Statuts</h1>
         </div>
 
         <div class="mt-6">
diff --git a/frontend/pages/projects/index.vue b/frontend/pages/projects/index.vue
index 464cb5e..83f027f 100644
--- a/frontend/pages/projects/index.vue
+++ b/frontend/pages/projects/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">Projets</h1>
+            <h1 class="text-2xl font-bold text-primary-500">Projets</h1>
             <button
                 class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
                 @click="openCreate"
@@ -19,8 +19,7 @@
             >
                 <div class="flex items-center justify-between">
                     <div class="flex items-center gap-3">
-                        <div class="size-8 shrink-0 rounded-full" :style="{ backgroundColor: project.color }" />
-                        <h3 class="text-md font-bold text-primary-500">{{ project.name }}</h3>
+                        <h3 class="text-md font-bold" :style="{ color: project.color }">{{ project.name }}</h3>
                     </div>
                     <button
                         class="p-1 text-neutral-400 hover:text-primary-500"
diff --git a/frontend/pages/time-tracking.vue b/frontend/pages/time-tracking.vue
index 63da2de..7266a1a 100644
--- a/frontend/pages/time-tracking.vue
+++ b/frontend/pages/time-tracking.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">Suivi des temps</h1>
+            <h1 class="text-2xl font-bold text-primary-500">Suivi des temps</h1>
             <button
                 class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
                 @click="openCreateDrawer()"