style(projects) : replace color bar with circle avatar on project cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 07:44:17 +01:00
parent 71e6e83c82
commit fd6d0afb24

View File

@@ -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