From 3a3a46992cb63e59ac1b5436d86e855b19fd7425 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 6 Apr 2026 13:51:23 +0200
Subject: [PATCH] style : align design with SIRH/Lesstime visual patterns

- Remove max-width constraint, use responsive padding (px-4 sm:px-8 lg:px-16)
- Replace heavy border cards with bg-tertiary-500 backgrounds
- Use primary-500 colored titles like SIRH
- Use neutral color palette instead of m-* custom colors
- Auto-fill grid for responsive card layout
- Consistent button styles with SIRH/Lesstime patterns

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/pages/applications/[slug].vue | 193 ++++++++++++++-----------
 frontend/pages/applications/index.vue  |  72 ++++-----
 2 files changed, 147 insertions(+), 118 deletions(-)

diff --git a/frontend/pages/applications/[slug].vue b/frontend/pages/applications/[slug].vue
index 5eba2b8..0342a67 100644
--- a/frontend/pages/applications/[slug].vue
+++ b/frontend/pages/applications/[slug].vue
@@ -133,84 +133,96 @@ onMounted(loadApplication)
 </script>
 
 <template>
-    <div class="p-6 max-w-5xl mx-auto">
+    <div class="px-4 py-8 sm:px-8 lg:px-16">
         <!-- Back link -->
-        <NuxtLink to="/applications" class="text-m-muted hover:text-primary-500 text-sm mb-4 inline-flex items-center gap-1">
+        <NuxtLink to="/applications" class="text-neutral-400 hover:text-primary-500 text-sm mb-6 inline-flex items-center gap-1">
             <Icon name="mdi:arrow-left" size="16" />
             {{ t('applications.title') }}
         </NuxtLink>
 
         <!-- Loading -->
         <div v-if="loading" class="animate-pulse mt-4">
-            <div class="h-8 bg-m-disabled rounded w-1/3 mb-4" />
-            <div class="h-4 bg-m-disabled rounded w-2/3 mb-2" />
-            <div class="h-4 bg-m-disabled rounded w-1/2" />
+            <div class="h-10 bg-neutral-200 rounded w-1/3 mb-4" />
+            <div class="h-4 bg-neutral-200 rounded w-2/3 mb-2" />
+            <div class="h-4 bg-neutral-200 rounded w-1/2" />
         </div>
 
         <template v-else-if="application">
-            <!-- Application info -->
-            <div class="bg-m-surface border border-m-border rounded-lg p-6 mt-4">
-                <template v-if="!editingApp">
-                    <div class="flex items-start justify-between">
-                        <div>
-                            <h1 class="text-2xl font-bold text-m-text">{{ application.name }}</h1>
-                            <p v-if="application.description" class="text-m-muted mt-2">{{ application.description }}</p>
-                        </div>
-                        <div class="flex gap-2">
-                            <MalioButton variant="secondary" size="sm" @click="startEditApp">
-                                {{ t('applications.detail.editButton') }}
-                            </MalioButton>
-                            <MalioButton variant="danger" size="sm" @click="handleDeleteApp">
-                                {{ t('applications.detail.deleteButton') }}
-                            </MalioButton>
-                        </div>
-                    </div>
-                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                        <div>
-                            <span class="text-m-muted">{{ t('applications.detail.registryImage') }} :</span>
-                            <span class="text-m-text ml-1 font-mono">{{ application.registryImage }}</span>
-                        </div>
-                        <div v-if="application.giteaUrl">
-                            <span class="text-m-muted">{{ t('applications.detail.giteaUrl') }} :</span>
-                            <a :href="application.giteaUrl" target="_blank" class="text-primary-500 hover:underline ml-1">
-                                {{ application.giteaUrl }}
-                            </a>
-                        </div>
-                    </div>
-                </template>
+            <!-- Application header -->
+            <div class="flex items-start justify-between pb-6">
+                <div>
+                    <h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ application.name }}</h1>
+                    <p v-if="application.description" class="text-neutral-500 mt-2">{{ application.description }}</p>
+                </div>
+                <div class="flex gap-2" v-if="!editingApp">
+                    <button
+                        class="rounded-lg border border-neutral-300 px-3 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                        @click="startEditApp"
+                    >
+                        {{ t('applications.detail.editButton') }}
+                    </button>
+                    <button
+                        class="rounded-lg border border-red-300 px-3 py-2 text-sm font-semibold text-red-600 hover:bg-red-50"
+                        @click="handleDeleteApp"
+                    >
+                        {{ t('applications.detail.deleteButton') }}
+                    </button>
+                </div>
+            </div>
 
-                <!-- Edit form -->
-                <form v-else @submit.prevent="saveApp" class="space-y-4">
+            <!-- Application info -->
+            <div v-if="!editingApp" class="rounded-lg bg-tertiary-500 p-5 mb-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                    <div>
+                        <span class="text-neutral-400">{{ t('applications.detail.registryImage') }} :</span>
+                        <span class="text-neutral-800 ml-1 font-mono">{{ application.registryImage }}</span>
+                    </div>
+                    <div v-if="application.giteaUrl">
+                        <span class="text-neutral-400">{{ t('applications.detail.giteaUrl') }} :</span>
+                        <a :href="application.giteaUrl" target="_blank" class="text-primary-500 hover:underline ml-1">
+                            {{ application.giteaUrl }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Edit form -->
+            <div v-else class="rounded-lg border border-neutral-200 bg-white p-6 mb-8">
+                <form @submit.prevent="saveApp" class="space-y-4">
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div>
-                            <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.name') }}</label>
+                            <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.name') }}</label>
                             <MalioInputText v-model="editForm.name" required />
                         </div>
                         <div>
-                            <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.slug') }}</label>
+                            <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.slug') }}</label>
                             <MalioInputText v-model="editForm.slug" required />
                         </div>
                         <div>
-                            <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.registryImage') }}</label>
+                            <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.registryImage') }}</label>
                             <MalioInputText v-model="editForm.registryImage" required />
                         </div>
                         <div>
-                            <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.giteaUrl') }}</label>
+                            <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.giteaUrl') }}</label>
                             <MalioInputText v-model="editForm.giteaUrl" />
                         </div>
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.description') }}</label>
+                        <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.description') }}</label>
                         <textarea
                             v-model="editForm.description"
-                            class="w-full rounded border border-m-border bg-m-bg text-m-text p-2"
+                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
                             rows="2"
                         />
                     </div>
-                    <div class="flex justify-end gap-2">
-                        <MalioButton variant="secondary" @click="editingApp = false">
+                    <div class="flex justify-end gap-3">
+                        <button
+                            type="button"
+                            class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                            @click="editingApp = false"
+                        >
                             {{ t('applications.form.cancel') }}
-                        </MalioButton>
+                        </button>
                         <MalioButton type="submit" :loading="isSubmitting">
                             {{ t('applications.form.save') }}
                         </MalioButton>
@@ -219,36 +231,39 @@ onMounted(loadApplication)
             </div>
 
             <!-- Environments section -->
-            <div class="mt-8">
-                <div class="flex items-center justify-between mb-4">
-                    <h2 class="text-xl font-bold text-m-text">{{ t('environments.title') }}</h2>
-                    <MalioButton size="sm" @click="startCreateEnv">
-                        {{ t('environments.addButton') }}
-                    </MalioButton>
+            <div>
+                <div class="flex items-center justify-between pb-4">
+                    <h2 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ t('environments.title') }}</h2>
+                    <button
+                        class="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                        @click="startCreateEnv"
+                    >
+                        + {{ t('environments.addButton') }}
+                    </button>
                 </div>
 
                 <!-- Environment form -->
-                <div v-if="showEnvForm" class="bg-m-surface border border-m-border rounded-lg p-6 mb-4">
+                <div v-if="showEnvForm" class="rounded-lg border border-neutral-200 bg-white p-6 mb-6">
                     <form @submit.prevent="saveEnv" class="space-y-4">
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
-                                <label class="block text-sm font-medium text-m-text mb-1">{{ t('environments.form.name') }}</label>
+                                <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.name') }}</label>
                                 <MalioInputText v-model="envForm.name" required />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-m-text mb-1">{{ t('environments.form.containerName') }}</label>
+                                <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.containerName') }}</label>
                                 <MalioInputText v-model="envForm.containerName" required />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-m-text mb-1">{{ t('environments.form.deployScriptPath') }}</label>
+                                <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.deployScriptPath') }}</label>
                                 <MalioInputText v-model="envForm.deployScriptPath" required />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-m-text mb-1">{{ t('environments.form.maintenanceFilePath') }}</label>
+                                <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.maintenanceFilePath') }}</label>
                                 <MalioInputText v-model="envForm.maintenanceFilePath" required />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-m-text mb-1">{{ t('environments.form.appUrl') }}</label>
+                                <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('environments.form.appUrl') }}</label>
                                 <MalioInputText v-model="envForm.appUrl" />
                             </div>
                         </div>
@@ -256,24 +271,28 @@ onMounted(loadApplication)
                         <!-- Log files -->
                         <div>
                             <div class="flex items-center justify-between mb-2">
-                                <label class="text-sm font-medium text-m-text">{{ t('environments.logFiles.title') }}</label>
-                                <button type="button" @click="addLogFile" class="text-primary-500 hover:underline text-sm">
+                                <label class="text-sm font-semibold text-neutral-700">{{ t('environments.logFiles.title') }}</label>
+                                <button type="button" @click="addLogFile" class="text-primary-500 hover:underline text-sm font-semibold">
                                     + {{ t('environments.logFiles.addButton') }}
                                 </button>
                             </div>
                             <div v-for="(lf, index) in envForm.logFiles" :key="index" class="flex gap-2 mb-2 items-center">
                                 <MalioInputText v-model="lf.label" :placeholder="t('environments.logFiles.label')" class="flex-1" required />
                                 <MalioInputText v-model="lf.path" :placeholder="t('environments.logFiles.path')" class="flex-[2]" required />
-                                <button type="button" @click="removeLogFile(index)" class="text-m-danger hover:text-red-700 p-1">
+                                <button type="button" @click="removeLogFile(index)" class="text-red-500 hover:text-red-700 p-1">
                                     <Icon name="mdi:close" size="18" />
                                 </button>
                             </div>
                         </div>
 
-                        <div class="flex justify-end gap-2">
-                            <MalioButton variant="secondary" @click="showEnvForm = false">
+                        <div class="flex justify-end gap-3">
+                            <button
+                                type="button"
+                                class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                                @click="showEnvForm = false"
+                            >
                                 {{ t('environments.form.cancel') }}
-                            </MalioButton>
+                            </button>
                             <MalioButton type="submit" :loading="isSubmittingEnv">
                                 {{ t('environments.form.save') }}
                             </MalioButton>
@@ -282,25 +301,25 @@ onMounted(loadApplication)
                 </div>
 
                 <!-- Environments list -->
-                <div v-if="!application.environments?.length && !showEnvForm" class="text-center py-8 text-m-muted">
+                <div v-if="!application.environments?.length && !showEnvForm" class="rounded-lg border border-neutral-200 bg-white p-6 text-center text-neutral-500">
                     {{ t('applications.card.noEnvironments') }}
                 </div>
 
-                <div v-for="env in application.environments" :key="env.id" class="bg-m-surface border border-m-border rounded-lg p-6 mb-4">
+                <div v-for="env in application.environments" :key="env.id" class="rounded-lg bg-tertiary-500 p-5 mb-4">
                     <div class="flex items-start justify-between">
                         <div>
                             <div class="flex items-center gap-3">
-                                <h3 class="text-lg font-semibold text-m-text">{{ env.name }}</h3>
+                                <h3 class="text-lg font-semibold text-neutral-900">{{ env.name }}</h3>
                                 <span
-                                    class="px-2 py-0.5 rounded-full text-xs font-medium"
+                                    class="inline-block rounded-full px-3 py-1 text-xs font-semibold"
                                     :class="env.maintenance
-                                        ? 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300'
-                                        : 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'"
+                                        ? 'bg-orange-100 text-orange-700'
+                                        : 'bg-green-100 text-green-700'"
                                 >
                                     {{ env.maintenance ? t('environments.maintenance.active') : t('environments.maintenance.inactive') }}
                                 </span>
                             </div>
-                            <p class="text-m-muted text-sm mt-1 font-mono">{{ env.containerName }}</p>
+                            <p class="text-neutral-400 text-sm mt-1 font-mono">{{ env.containerName }}</p>
                             <a
                                 v-if="env.appUrl"
                                 :href="env.appUrl"
@@ -312,10 +331,10 @@ onMounted(loadApplication)
                             </a>
                         </div>
                         <div class="flex gap-2">
-                            <MalioButton
-                                size="sm"
-                                :variant="env.maintenance ? 'secondary' : 'danger'"
-                                :loading="!!pendingMaintenanceByEnvId[env.id!]"
+                            <button
+                                class="rounded-lg px-3 py-2 text-xs font-semibold text-white hover:opacity-90"
+                                :class="env.maintenance ? 'bg-green-600 hover:bg-green-700' : 'bg-orange-500 hover:bg-orange-600'"
+                                :disabled="!!pendingMaintenanceByEnvId[env.id!]"
                                 @click="handleToggleMaintenance(env)"
                             >
                                 {{ pendingMaintenanceByEnvId[env.id!]
@@ -324,22 +343,28 @@ onMounted(loadApplication)
                                         ? t('environments.maintenance.deactivate')
                                         : t('environments.maintenance.activate')
                                 }}
-                            </MalioButton>
-                            <MalioButton variant="secondary" size="sm" @click="startEditEnv(env)">
+                            </button>
+                            <button
+                                class="rounded-lg border border-neutral-300 px-3 py-2 text-xs font-semibold text-neutral-600 hover:bg-white"
+                                @click="startEditEnv(env)"
+                            >
                                 {{ t('environments.editButton') }}
-                            </MalioButton>
-                            <MalioButton variant="danger" size="sm" @click="handleDeleteEnv(env.id!)">
+                            </button>
+                            <button
+                                class="rounded-lg border border-red-300 px-3 py-2 text-xs font-semibold text-red-600 hover:bg-red-50"
+                                @click="handleDeleteEnv(env.id!)"
+                            >
                                 {{ t('environments.deleteButton') }}
-                            </MalioButton>
+                            </button>
                         </div>
                     </div>
 
                     <!-- Log files -->
-                    <div v-if="env.logFiles.length" class="mt-4 border-t border-m-border pt-3">
-                        <p class="text-sm font-medium text-m-muted mb-2">{{ t('environments.logFiles.title') }}</p>
-                        <div v-for="lf in env.logFiles" :key="lf.id" class="text-sm text-m-text flex gap-2">
+                    <div v-if="env.logFiles.length" class="mt-4 border-t border-neutral-200 pt-3">
+                        <p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-2">{{ t('environments.logFiles.title') }}</p>
+                        <div v-for="lf in env.logFiles" :key="lf.id" class="text-sm text-neutral-700 flex gap-2">
                             <span class="font-medium">{{ lf.label }} :</span>
-                            <span class="font-mono text-m-muted">{{ lf.path }}</span>
+                            <span class="font-mono text-neutral-400">{{ lf.path }}</span>
                         </div>
                     </div>
                 </div>
diff --git a/frontend/pages/applications/index.vue b/frontend/pages/applications/index.vue
index 55558a1..36338be 100644
--- a/frontend/pages/applications/index.vue
+++ b/frontend/pages/applications/index.vue
@@ -46,23 +46,23 @@ onMounted(loadApplications)
 </script>
 
 <template>
-    <div class="p-6 max-w-6xl mx-auto">
-        <div class="flex items-center justify-between mb-6">
-            <div>
-                <h1 class="text-2xl font-bold text-m-text">{{ t('applications.title') }}</h1>
-                <p class="text-m-muted mt-1">{{ t('applications.description') }}</p>
-            </div>
-            <MalioButton @click="showCreateForm = !showCreateForm">
-                {{ t('applications.addButton') }}
-            </MalioButton>
+    <div class="px-4 py-8 sm:px-8 lg:px-16">
+        <div class="flex items-center justify-between pb-6">
+            <h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ t('applications.title') }}</h1>
+            <button
+                class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="showCreateForm = !showCreateForm"
+            >
+                + {{ t('applications.addButton') }}
+            </button>
         </div>
 
         <!-- Create form -->
-        <div v-if="showCreateForm" class="bg-m-surface border border-m-border rounded-lg p-6 mb-6">
+        <div v-if="showCreateForm" class="rounded-lg border border-neutral-200 bg-white p-6 mb-8">
             <form @submit.prevent="handleCreate" class="space-y-4">
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                        <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.name') }}</label>
+                        <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.name') }}</label>
                         <MalioInputText
                             v-model="createForm.name"
                             @update:model-value="generateSlug"
@@ -70,30 +70,34 @@ onMounted(loadApplications)
                         />
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.slug') }}</label>
+                        <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.slug') }}</label>
                         <MalioInputText v-model="createForm.slug" required />
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.registryImage') }}</label>
+                        <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.registryImage') }}</label>
                         <MalioInputText v-model="createForm.registryImage" required />
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.giteaUrl') }}</label>
+                        <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.giteaUrl') }}</label>
                         <MalioInputText v-model="createForm.giteaUrl" />
                     </div>
                 </div>
                 <div>
-                    <label class="block text-sm font-medium text-m-text mb-1">{{ t('applications.form.description') }}</label>
+                    <label class="block text-sm font-semibold text-neutral-700 mb-1">{{ t('applications.form.description') }}</label>
                     <textarea
                         v-model="createForm.description"
-                        class="w-full rounded border border-m-border bg-m-bg text-m-text p-2"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
                         rows="2"
                     />
                 </div>
-                <div class="flex justify-end gap-2">
-                    <MalioButton variant="secondary" @click="showCreateForm = false">
+                <div class="flex justify-end gap-3">
+                    <button
+                        type="button"
+                        class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                        @click="showCreateForm = false"
+                    >
                         {{ t('applications.form.cancel') }}
-                    </MalioButton>
+                    </button>
                     <MalioButton type="submit" :loading="isSubmitting">
                         {{ t('applications.form.save') }}
                     </MalioButton>
@@ -102,43 +106,43 @@ onMounted(loadApplications)
         </div>
 
         <!-- Loading -->
-        <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-            <div v-for="i in 3" :key="i" class="bg-m-surface border border-m-border rounded-lg p-6 animate-pulse">
-                <div class="h-5 bg-m-disabled rounded w-1/2 mb-3" />
-                <div class="h-4 bg-m-disabled rounded w-3/4 mb-2" />
-                <div class="h-4 bg-m-disabled rounded w-1/3" />
+        <div v-if="loading" class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
+            <div v-for="i in 3" :key="i" class="rounded-lg bg-tertiary-500 p-5 animate-pulse">
+                <div class="h-5 bg-neutral-300 rounded w-1/2 mb-3" />
+                <div class="h-4 bg-neutral-300 rounded w-3/4 mb-2" />
+                <div class="h-4 bg-neutral-300 rounded w-1/3" />
             </div>
         </div>
 
         <!-- Empty state -->
-        <div v-else-if="applications.length === 0" class="text-center py-12">
-            <h3 class="text-lg font-medium text-m-text">{{ t('applications.emptyTitle') }}</h3>
-            <p class="text-m-muted mt-1">{{ t('applications.emptyDescription') }}</p>
+        <div v-else-if="applications.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-center">
+            <h3 class="text-lg font-medium text-neutral-800">{{ t('applications.emptyTitle') }}</h3>
+            <p class="text-neutral-500 mt-1">{{ t('applications.emptyDescription') }}</p>
         </div>
 
         <!-- Application cards -->
-        <div v-else class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        <div v-else class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
             <NuxtLink
                 v-for="app in applications"
                 :key="app.slug"
                 :to="`/applications/${app.slug}`"
-                class="bg-m-surface border border-m-border rounded-lg p-6 hover:border-primary-500 transition-colors"
+                class="rounded-lg bg-tertiary-500 p-5 transition hover:shadow-md"
             >
                 <div class="flex items-start justify-between">
-                    <h3 class="text-lg font-semibold text-m-text">{{ app.name }}</h3>
+                    <h3 class="text-lg font-semibold text-neutral-900">{{ app.name }}</h3>
                     <a
                         v-if="app.giteaUrl"
                         :href="app.giteaUrl"
                         target="_blank"
-                        class="text-m-muted hover:text-primary-500"
+                        class="text-neutral-400 hover:text-primary-500"
                         @click.stop
                     >
                         <Icon name="mdi:open-in-new" size="18" />
                     </a>
                 </div>
-                <p v-if="app.description" class="text-m-muted text-sm mt-2 line-clamp-2">{{ app.description }}</p>
-                <p class="text-m-muted text-xs mt-3">
-                    <Icon name="mdi:server" size="14" class="mr-1" />
+                <p v-if="app.description" class="text-neutral-500 text-sm mt-2 line-clamp-2">{{ app.description }}</p>
+                <p class="text-neutral-400 text-xs mt-4 flex items-center gap-1">
+                    <Icon name="mdi:server" size="14" />
                     {{ app.environments?.length ?? 0 }} {{ t('applications.card.environments', app.environments?.length ?? 0) }}
                 </p>
             </NuxtLink>