From b3cae6e3a9e1d385afb2b7e22d55e38dcd5527f6 Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Mon, 18 May 2026 16:34:26 +0100
Subject: [PATCH] Change empty box

---
 .../friend-request.component.html             | 20 ++++++++++++-------
 .../friend-request.component.ts               |  5 +++--
 .../friends/friends-list.component.html       | 16 ++++++++++-----
 .../friends/friends-list.component.ts         |  3 ++-
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/app/components/friend-request/friend-request.component.html b/src/app/components/friend-request/friend-request.component.html
index 24165b7..215961f 100644
--- a/src/app/components/friend-request/friend-request.component.html
+++ b/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>
 }
\ No newline at end of file
diff --git a/src/app/components/friend-request/friend-request.component.ts b/src/app/components/friend-request/friend-request.component.ts
index c016668..29a30af 100644
--- a/src/app/components/friend-request/friend-request.component.ts
+++ b/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({
diff --git a/src/app/components/friends/friends-list.component.html b/src/app/components/friends/friends-list.component.html
index eb3be0d..db61099 100644
--- a/src/app/components/friends/friends-list.component.html
+++ b/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">
diff --git a/src/app/components/friends/friends-list.component.ts b/src/app/components/friends/friends-list.component.ts
index 306e82a..b8af8c7 100644
--- a/src/app/components/friends/friends-list.component.ts
+++ b/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({