Change empty box

src/app/components/friend-request/friend-request.component.html

@@ -1,5 +1,5 @@
-@if (friendsRequest().length > 0) {
-    <div class="rounded-xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
+@if (friendsRequest().length) {
+    <div class="rounded-xl px-5 m-3 bg-white overflow-auto font-mono border border-gray-300">
         <ion-list>
             @for (request of friendsRequest(); track request.userId; let i = $index) {
                 @if (i == friendsRequest().length - 1) {
@@ -37,9 +37,15 @@
         </ion-list>
     </div>
 } @else {
-    <div class="flex justify-center items-center p-4">
-        <p class="text-center text-sm italic text-gray-500 font-serif">
-            Vous n'avez aucune demande d'ami
-        </p>
-    </div>
+    <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-10 py-20 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="people-outline" style="color:#a8a090; font-size:20px;"></ion-icon>
+            </div>
+            <div class="text-center">
+                <p class="m-0 text-sm font-medium text-stone-400">Ajoutez vos amis</p>
+                <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos demandes d'amis apparaîtront ici</p>
+            </div>
+        </div>
+    </ion-item>
 }