From 6d02586344ab6bd766efc49c016de359a0f4f757 Mon Sep 17 00:00:00 2001
From: AdrienHdz <adrien.hernandez@hec.ca>
Date: Tue, 17 Oct 2023 21:43:39 -0400
Subject: [PATCH] feat: Added user name under message box in frontend

---
 .../chat-messages/chat-messages.component.html    | 15 ++++++++-------
 frontend/src/app/messages/messages.component.ts   |  4 ++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/chat-messages/chat-messages.component.html b/frontend/src/app/chat-messages/chat-messages.component.html
index c914365..16e57c1 100644
--- a/frontend/src/app/chat-messages/chat-messages.component.html
+++ b/frontend/src/app/chat-messages/chat-messages.component.html
@@ -1,10 +1,11 @@
 <div class="message-item flex items-start mb-4 last:mb-0">
-    <img class="rounded-full mr-4" [src]="message.avatar" width="40" height="40" [alt]="message.user" />
-    <div class="max-w-[480px]">
-      <div class="text-sm p-3 rounded-lg rounded-tl-none border border-transparent shadow-md mb-1 overflow-auto break-words" 
-           [ngClass]="message.bgClass" 
-           [ngStyle]="{'color': message.textColor}" 
-           [innerHTML]="message.text">
-      </div>
+  <img class="rounded-full mr-4" [src]="message.avatar" width="40" height="40" [alt]="message.user" />
+  <div class="max-w-[480px]">
+    <div class="text-sm p-3 rounded-lg rounded-tl-none border border-transparent shadow-md mb-1 overflow-auto break-words" 
+         [ngClass]="message.bgClass" 
+         [ngStyle]="{'color': message.textColor}" 
+         [innerHTML]="message.text">
     </div>
+    <div class="message-username text-xs mt-1 font-semibold text-gray-500">{{message.user}}</div>
+  </div>
 </div>
diff --git a/frontend/src/app/messages/messages.component.ts b/frontend/src/app/messages/messages.component.ts
index abf4fe0..5f1c2bd 100644
--- a/frontend/src/app/messages/messages.component.ts
+++ b/frontend/src/app/messages/messages.component.ts
@@ -68,7 +68,7 @@ export class MessagesComponent implements AfterViewInit {
   addServerMessage(text: string) {
     const serverMsg: Message = {
       text: text,
-      user: 'Server',
+      user: 'Lexi',
       avatar: '../../assets/avatar_profile_pic.png',
       bgClass: 'bg-white',
       textColor: 'text-slate-800'
@@ -82,7 +82,7 @@ export class MessagesComponent implements AfterViewInit {
   addUserMessage(text: string) {
     const userMsg: Message = {
       text: text,
-      user: 'Current User',
+      user: 'Adrien',
       avatar: '../../assets/photo_profil.jpg',
       bgClass: 'bg-indigo-500',
       textColor: '#FFFFFF'