From b2f744dbcb4bff6c610ab5af7e02cbd884286388 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Fri, 5 Nov 2021 18:39:06 +0100
Subject: [PATCH] Improve styling of message timestamps.

---
 src/modules/room/RoomChatMessageList.tsx | 29 ++++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/modules/room/RoomChatMessageList.tsx b/src/modules/room/RoomChatMessageList.tsx
index ea06074..5757085 100644
--- a/src/modules/room/RoomChatMessageList.tsx
+++ b/src/modules/room/RoomChatMessageList.tsx
@@ -7,33 +7,42 @@ interface Props {
   messages: RoomMessage[];
 }
 
-const messageShape = "px-3 py-1 rounded-xl";
+const kCommonChildClass = "py-1 max-w-3/4 flex flex-col";
+
+const kCommonMessageClass = "px-3 py-1 rounded-xl";
+
+function formatReceivedAt(receivedAt: Date | null): string {
+  if (receivedAt === null) {
+    return "sending...";
+  }
+
+  return receivedAt.toLocaleTimeString();
+}
 
 const RoomChatMessageList: FC<Props> = ({ loginUserName, messages }) => {
   // Append all messages in the chat room.
   const children = [];
   let i = 0;
   for (const { userName, message, receivedAt } of messages) {
-    let time = "";
-    if (receivedAt !== null) {
-      time = receivedAt.toLocaleTimeString();
-    }
+    const time = <div className="text-xs">{formatReceivedAt(receivedAt)}</div>;
 
     if (userName === loginUserName) {
       children.push(
-        <li key={i} className="self-end py-1 max-w-3/4">
+        <li key={i} className={`${kCommonChildClass} self-end items-end`}>
           {time}
-          <div className={`bg-yellow-600 text-white ${messageShape}`}>
+          <span className={`${kCommonMessageClass} bg-yellow-600 text-white`}>
             {message}
-          </div>
+          </span>
         </li>
       );
     } else {
       children.push(
-        <li key={i} className="self-start py-1 max-w-3/4">
+        <li key={i} className={`${kCommonChildClass} self-start items-start`}>
           {time}
           <div className="text-sm text-yellow-600 px-1 py-1">{userName}</div>
-          <div className={`bg-yellow-100 ${messageShape}`}>{message}</div>
+          <div className={`${kCommonMessageClass} bg-yellow-100`}>
+            {message}
+          </div>
         </li>
       );
     }