Added conditions for UI in profil page

src/app/components/challenges-accomplished/challenges-accomplished.component.html

@@ -1,11 +1,11 @@
-<div class="rounded-lg px-2 m-3 bg-white border border-gray-200 items-center h-full max-h-48 overflow-scroll">
-    <ion-list lines="none" class="flex flex-col gap-3 pt-1 pb-1">
+<div class="rounded-lg m-3 bg-white border border-gray-200 items-center h-full max-h-48 overflow-scroll">
+    @if (userChallenges().length > 0) {
         @for (challenge of userChallenges(); track challenge.challengeTitle) {
-            <ion-item class="border border-gray-200 rounded-xl" style="--inner-padding-end: 0; --padding-start: 0;">
+            <ion-item lines="none" class="border border-gray-300 rounded-xl m-2">
                 <div class="grid grid-cols-[1fr_auto] gap-2 items-start w-full px-3 py-2">
                     <div>
-                        <p class="m-0 text-sm font-medium text-gray-900">{{ challenge.challengeTitle }}</p>
-                        <p class="m-0 mt-1 text-xs text-gray-500 leading-relaxed">{{ challenge.challengeDescription }}</p>
+                        <p class="m-0 text-sm text-gray-500">{{ challenge.challengeTitle }}</p>
+                        <p class="m-0 mt-1 text-xs text-gray-500">{{ challenge.challengeDescription }}</p>
                     </div>
                     <div class="text-right shrink-0">
                         <p class="m-0 text-xs text-gray-500">{{ converterHours(challenge.challengeDuration) }}</p>
@@ -14,5 +14,17 @@
                 </div>
             </ion-item>
         }
-    </ion-list>
+    } @else {
+        <ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
+            <div class="flex flex-col items-center w-full px-5 py-8 gap-3">
+                <div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
+                    <ion-icon name="trophy" style="color:#a8a090; font-size:20px;"></ion-icon>
+                </div>
+                <div class="text-center">
+                    <p class="m-0 text-sm font-medium text-stone-400">Aucun défi réalisé</p>
+                    <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos premiers défis apparaîtront ici</p>
+                </div>
+            </div>
+        </ion-item>
+    }
 </div>