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 <button
v-if="isEditing" v-if="isEditing"
type="button" 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" :disabled="isSubmitting"
@click="handleDelete" @click="handleDelete"
> >

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

@@ -24,7 +24,7 @@
</button> </button>
<button <button
v-if="entry" 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" @click="onDelete"
> >
<Icon name="mdi:delete-outline" size="16" /> <Icon name="mdi:delete-outline" size="16" />

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

@@ -84,7 +84,7 @@
<button <button
v-if="isEditing" v-if="isEditing"
type="button" 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" @click="onDelete"
> >
Supprimer Supprimer

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

@@ -55,7 +55,7 @@
<!-- Delete action --> <!-- Delete action -->
<button <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" title="Supprimer"
@click.stop="emit('deleteEntry', entry)" @click.stop="emit('deleteEntry', entry)"
> >

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

@@ -31,7 +31,7 @@
</button> </button>
<button <button
type="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" :disabled="isProcessing"
@click="confirm" @click="confirm"
> >

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

@@ -34,7 +34,7 @@
</td> </td>
<td v-if="deletable" class="px-4 py-3"> <td v-if="deletable" class="px-4 py-3">
<button <button
class="text-red-500 hover:text-red-700" class="text-[#E2953C] hover:text-[#c97a2f]"
@click.stop="$emit('delete', item)" @click.stop="$emit('delete', item)"
> >
<Icon name="mdi:delete-outline" size="20" /> <Icon name="mdi:delete-outline" size="20" />

6
frontend/layouts/default.vue
View File

@@ -16,7 +16,7 @@
v-else v-else
src="/malio.png" src="/malio.png"
alt="Logo" alt="Logo"
class="h-8 w-8 object-contain" class="h-8 w-8 object-cover object-left"
/> />
</div> </div>
<nav class="flex-1 overflow-hidden" :class="ui.sidebarCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'"> <nav class="flex-1 overflow-hidden" :class="ui.sidebarCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
@@ -77,7 +77,7 @@
/> />
</nav> </nav>
<div class="px-4 py-3 border-t border-secondary-500"> <div class="px-4 py-3">
<SidebarTimer :collapsed="ui.sidebarCollapsed" /> <SidebarTimer :collapsed="ui.sidebarCollapsed" />
</div> </div>
@@ -98,7 +98,7 @@
<div class="h-full flex-1 overflow-hidden flex flex-col"> <div class="h-full flex-1 overflow-hidden flex flex-col">
<AppTopNav :user="auth.user" /> <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/> <slot/>
</main> </main>
</div> </div>

2
frontend/pages/admin.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <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"> <div class="mt-6 border-b border-neutral-200">
<nav class="flex gap-6"> <nav class="flex gap-6">

2
frontend/pages/clients.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="flex items-center justify-between"> <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 <button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500" class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
@click="openCreate" @click="openCreate"

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

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="flex items-center justify-between"> <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>
<div class="mt-6"> <div class="mt-6">

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

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="flex items-center justify-between"> <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"> <div class="flex gap-3">
<button <button
class="rounded-md bg-secondary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-600" 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> <template>
<div> <div>
<div class="flex items-center justify-between"> <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>
<div class="mt-6"> <div class="mt-6">

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

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="flex items-center justify-between"> <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 <button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500" class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
@click="openCreate" @click="openCreate"
@@ -19,8 +19,7 @@
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-3"> <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" :style="{ color: project.color }">{{ project.name }}</h3>
<h3 class="text-md font-bold text-primary-500">{{ project.name }}</h3>
</div> </div>
<button <button
class="p-1 text-neutral-400 hover:text-primary-500" class="p-1 text-neutral-400 hover:text-primary-500"

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

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="flex items-center justify-between"> <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 <button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition" class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
@click="openCreateDrawer()" @click="openCreateDrawer()"