MALIO-DEV/Lesstime
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 32 Wiki Activity

style(frontend) : apply UI corrections from design review

Browse Source 
- 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>
This commit is contained in:
Matthieu
2026-03-11 11:16:50 +01:00
parent c886506791
commit f9d4de3e33
14 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/task/TaskDrawer.vue
View File

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

2
frontend/components/time-tracking/TimeEntryContextMenu.vue
View File

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

2
frontend/components/time-tracking/TimeEntryDrawer.vue
View File

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

2
frontend/components/time-tracking/TimeEntryList.vue
View File

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

2
frontend/components/ui/ConfirmDeleteStatusModal.vue
View File

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

2
frontend/components/ui/DataTable.vue
View File

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

6
frontend/layouts/default.vue
View File

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

2
frontend/pages/admin.vue
View File

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

2
frontend/pages/clients.vue
View File

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

2
frontend/pages/projects/[id]/groups.vue
View File

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

2
frontend/pages/projects/[id]/index.vue
View File

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

2
frontend/pages/projects/[id]/statuses.vue
View File

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

5
frontend/pages/projects/index.vue
View File

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

2
frontend/pages/time-tracking.vue
View File

@@ -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()"