From fd6d0afb241aa88a498cd065a8e4f5c9e3376af2 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Tue, 10 Mar 2026 07:44:17 +0100
Subject: [PATCH] style(projects) : replace color bar with circle avatar on
 project cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/pages/projects/index.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/pages/projects/index.vue b/frontend/pages/projects/index.vue
index 8ffd5d0..464cb5e 100644
--- a/frontend/pages/projects/index.vue
+++ b/frontend/pages/projects/index.vue
@@ -14,24 +14,24 @@
             <div
                 v-for="project in projects"
                 :key="project.id"
-                class="cursor-pointer rounded-lg border border-neutral-200 bg-tertiary-500 shadow-sm transition hover:shadow-md"
+                class="cursor-pointer rounded-[6px] border border-neutral-200 bg-tertiary-500 p-4 shadow-sm transition hover:shadow-md"
                 @click="navigateTo(`/projects/${project.id}`)"
             >
-                <div class="flex items-center justify-between rounded-t-lg px-2" :style="{ backgroundColor: project.color }">
-                    <div class="h-2 flex-1" />
+                <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>
+                    </div>
                     <button
-                        class="p-1 text-white hover:text-neutral-200"
+                        class="p-1 text-neutral-400 hover:text-primary-500"
                         @click.stop="openEdit(project)"
                     >
                         <Icon name="mdi:pencil-outline" size="16" />
                     </button>
                 </div>
-                <div class="p-4">
-                    <h3 class="text-md font-bold text-primary-500">{{ project.name }}</h3>
-                    <p class="mt-2 text-sm text-neutral-600 line-clamp-4">
-                        {{ project.description ?? '' }}
-                    </p>
-                </div>
+                <p class="mt-2 text-sm text-neutral-600 line-clamp-4">
+                    {{ project.description ?? '' }}
+                </p>
             </div>
 
             <div