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

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

@@ -1,6 +1,6 @@
 import {Component, inject} from '@angular/core';
 import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
-import {checkmarkCircleOutline, closeCircleOutline} from 'ionicons/icons';
+import {checkmarkCircleOutline, closeCircleOutline, peopleOutline} from 'ionicons/icons';
 import {addIcons} from "ionicons";
 import {PipeComponent} from "../pipe/pipe.component";
 import {FriendsService, GetFriendRequestDto} from "../../services/api";
@@ -9,7 +9,8 @@ import {FriendsStateService} from "../../services/friends-state";
 
 addIcons({
     'check': checkmarkCircleOutline,
-    'close': closeCircleOutline
+    'close': closeCircleOutline,
+    'people-outline': peopleOutline
 });
 
 @Component({

src/app/components/friends/friends-list.component.html

@@ -35,11 +35,17 @@
         </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">
-            C'est plus marrant à plusieurs, ajoute des amis !
-        </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" 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 amis apparaîtront ici</p>
+            </div>
+        </div>
+    </ion-item>
 }
 
 <ion-modal [isOpen]="isModalOpen">

src/app/components/friends/friends-list.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject, OnInit, signal} from '@angular/core';
 import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
-import {closeCircleOutline} from 'ionicons/icons';
+import {closeCircleOutline, peopleOutline} from 'ionicons/icons';
 import {addIcons} from "ionicons";
 import {FriendsService, GetUserDto, UsersService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
@@ -9,6 +9,7 @@ import {GenericUserInfoComponent} from "../generic-user-info/generic-user-info.c
 
 addIcons({
     'close': closeCircleOutline,
+    'people': peopleOutline
 });
 
 @Component({