Fixed up some messaging layout issues. BOD-78

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,6 +1,12 @@
-import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
+import Icon from "@ant-design/icons";
+import { FaCheck, FaCheckDouble } from "react-icons/fa";
 import React, { useEffect, useRef } from "react";
-import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
+import {
+  AutoSizer,
+  CellMeasurer,
+  CellMeasurerCache,
+  List,
+} from "react-virtualized";
 import "./chat-message-list.styles.scss";
 
 export default function ChatMessageListComponent({ messages }) {
@@ -8,11 +14,12 @@ export default function ChatMessageListComponent({ messages }) {
 
   const _cache = new CellMeasurerCache({
     fixedWidth: true,
-    minHeight: 20,
+    minHeight: 25,
+    defaultHeight: 50,
   });
 
   const scrollToBottom = () => {
-    console.log("SCrolling to", messages.length);
+    console.log("Scrolling to", messages.length);
     !!virtualizedListRef.current &&
       virtualizedListRef.current.scrollToRow(messages.length - 1);
 
@@ -26,37 +33,38 @@ export default function ChatMessageListComponent({ messages }) {
     return (
       <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
         {({ measure, registerChild }) => (
-          <li
+          <div
             ref={registerChild}
+            onLoad={measure}
             style={style}
-            className={`${messages[index].isoutbound ? "replies" : "sent"}`}
+            className={`${
+              messages[index].isoutbound ? "mine messages" : "yours messages"
+            }`}
           >
-            <p onLoad={measure}>
-              {messages[index].text}
-              {StatusRender(messages[index].status)}
-            </p>
-          </li>
+            <div className="message msgmargin">
+              <span>{messages[index].text}</span>
+            </div>
+            {StatusRender(messages[index].status)}
+          </div>
         )}
       </CellMeasurer>
     );
   };
 
   return (
-    <div className="messages">
-      <ul>
-        <AutoSizer>
-          {({ height, width }) => (
-            <List
-              ref={virtualizedListRef}
-              width={width}
-              height={height}
-              rowHeight={_cache.rowHeight}
-              rowRenderer={_rowRenderer}
-              rowCount={messages.length}
-            />
-          )}
-        </AutoSizer>
-      </ul>
+    <div className="chat">
+      <AutoSizer>
+        {({ height, width }) => (
+          <List
+            ref={virtualizedListRef}
+            width={width}
+            height={height}
+            rowHeight={_cache.rowHeight}
+            rowRenderer={_rowRenderer}
+            rowCount={messages.length}
+          />
+        )}
+      </AutoSizer>
     </div>
   );
 }
@@ -64,9 +72,9 @@ export default function ChatMessageListComponent({ messages }) {
 const StatusRender = (status) => {
   switch (status) {
     case "sent":
-      return <CheckOutlined style={{ margin: "2px", float: "right" }} />;
+      return <Icon component={FaCheck} className="message-icon" />;
     case "delivered":
-      return <CheckCircleOutlined style={{ margin: "2px", float: "right" }} />;
+      return <Icon component={FaCheckDouble} className="message-icon" />;
     default:
       return null;
   }