From e95582ce7bca3bb3c9ea86166d64cfb58f511f1b Mon Sep 17 00:00:00 2001
From: Alexis Feron <alexisferon081@gmail.com>
Date: Mon, 10 Feb 2025 10:49:43 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20friend=20modal=20text=20co?=
 =?UTF-8?q?lor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../friend-page/friend-page.component.html    | 124 ++++++++++++++----
 1 file changed, 96 insertions(+), 28 deletions(-)

diff --git a/src/app/components/friend-page/friend-page.component.html b/src/app/components/friend-page/friend-page.component.html
index beac248..20ec1f8 100644
--- a/src/app/components/friend-page/friend-page.component.html
+++ b/src/app/components/friend-page/friend-page.component.html
@@ -10,7 +10,10 @@
 <!-- Fond assombri -->
 <div
   class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
-  [ngClass]="{'opacity-0 pointer-events-none': !isFriendModalOpen, 'opacity-100': isFriendModalOpen}"
+  [ngClass]="{
+    'opacity-0 pointer-events-none': !isFriendModalOpen,
+    'opacity-100': isFriendModalOpen
+  }"
   (click)="closeFriendModal()"
 ></div>
 
@@ -27,8 +30,12 @@
 >
   <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full">
     <!-- En-tête du modal -->
-    <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Liste d'amis</h3>
+    <div
+      class="flex items-center justify-between p-4 border-b dark:border-gray-700"
+    >
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+        Liste d'amis
+      </h3>
       <button
         (click)="closeFriendModal()"
         class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
@@ -48,50 +55,111 @@
     </div>
 
     <div class="p-4 space-y-3">
-      <p>Mes Amis</p>
-      <div *ngFor="let friend of listFriend" class="friend flex items-center justify-between space-x-3">
-        <div *ngIf="friend.status == 'accepted'" class="flex justify-between items-center w-full space-x-2">
+      <p class="dark:text-white">Mes Amis</p>
+      <div
+        *ngFor="let friend of listFriend"
+        class="friend flex items-center justify-between space-x-3"
+      >
+        <div
+          *ngIf="friend.status == 'accepted'"
+          class="flex justify-between items-center w-full space-x-2"
+        >
           <div class="friend flex items-center space-x-3">
-            <img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
-            <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
+            <img
+              class="w-10 h-10 rounded-full"
+              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
+              alt="Friend 2"
+            />
+            <span class="text-gray-900 dark:text-white">{{
+              friend.username
+            }}</span>
           </div>
-          <button (click)="deleteFriend(friend.id)" class="p-2 bg-red-500 text-white rounded-full">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h16zM10 11v6m4-6v6"/>
+          <button
+            (click)="deleteFriend(friend.id)"
+            class="p-2 bg-red-500 text-white rounded-full"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h16zM10 11v6m4-6v6"
+              />
             </svg>
-          </button>    
+          </button>
         </div>
       </div>
-      <hr class="border-gray-300 my-3">
-      <p>Mes demandes d'amis</p>
+      <hr class="border-gray-300 my-3" />
+      <p class="dark:text-white">Mes demandes d'amis</p>
       <div *ngFor="let friend of listFriend">
-        <div *ngIf="friend.status == 'pending'" class="flex justify-between items-center w-full">
+        <div
+          *ngIf="friend.status == 'pending'"
+          class="flex justify-between items-center w-full"
+        >
           <div class="friend flex items-center space-x-3">
-            <img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
-            <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
+            <img
+              class="w-10 h-10 rounded-full"
+              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
+              alt="Friend 2"
+            />
+            <span class="text-gray-900 dark:text-white">{{
+              friend.username
+            }}</span>
           </div>
           <div class="flex space-x-2">
-            <button (click)="onAcceptOrDeny(friend.id, 'accept')" class="p-2 bg-green-500 text-white rounded-full">
-              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+            <button
+              (click)="onAcceptOrDeny(friend.id, 'accept')"
+              class="p-2 bg-green-500 text-white rounded-full"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 13l4 4L19 7"
+                ></path>
               </svg>
             </button>
-            <button (click)="onAcceptOrDeny(friend.id, 'deny')" class="p-2 bg-red-500 text-white rounded-full">
-              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            <button
+              (click)="onAcceptOrDeny(friend.id, 'deny')"
+              class="p-2 bg-red-500 text-white rounded-full"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                ></path>
               </svg>
             </button>
           </div>
         </div>
-      </div>      
-    </div>    
+      </div>
+    </div>
 
-    
-    
     <!-- Pied du modal -->
     <div class="flex justify-end p-4 border-t dark:border-gray-700">
       <button
-      (click)="closeFriendModal()"
+        (click)="closeFriendModal()"
         class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
       >
         Fermer