feat: Added user name under message box in frontend

AdrienHdz · Oct 18, 2023 · 6d02586 · 6d02586
1 parent bb48362
commit 6d02586
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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'