Refactored Messaging as a part of BOD-14. Breaking changes remain.

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

@@ -1,17 +1,17 @@
 import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
+import "./chat-message-list.styles.scss";
 
 export default function ChatMessageListComponent({ messages }) {
   const messagesEndRef = useRef(null);
 
   const scrollToBottom = () => {
-    console.log("use");
     !!messagesEndRef.current &&
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
   };
 
   useEffect(scrollToBottom, [messages]);
-  const StatusRender = status => {
+  const StatusRender = (status) => {
     switch (status) {
       case "sent":
         return <CheckOutlined style={{ margin: "2px", float: "right" }} />;
@@ -27,7 +27,7 @@ export default function ChatMessageListComponent({ messages }) {
   return (
     <div className='messages'>
       <ul>
-        {messages.map(item => (
+        {messages.map((item) => (
           <li
             key={item.id}
             className={`${item.isoutbound ? "replies" : "sent"}`}>

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -0,0 +1,128 @@
+.messages {
+    height: auto;
+    min-height: calc(100% - 10px);
+    max-height: calc(100% - 93px);
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+  @media screen and (max-width: 735px) {
+    .messages {
+      max-height: calc(100% - 105px);
+    }
+  }
+  .messages::-webkit-scrollbar {
+    width: 8px;
+    background: transparent;
+  }
+  .messages::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .messages ul li {
+    display: inline-block;
+    clear: both;
+    //float: left;
+    margin: 5px;
+    width: calc(100% - 25px);
+    font-size: 0.9em;
+  }
+  .messages ul li:nth-last-child(1) {
+    margin-bottom: 20px;
+  }
+  .messages ul li.sent img {
+    margin: 6px 8px 0 0;
+  }
+  .messages ul li.sent p {
+    background: #435f7a;
+    color: #f5f5f5;
+  }
+  .messages ul li.replies img {
+    float: right;
+    margin: 6px 0 0 8px;
+  }
+  .messages ul li.replies p {
+    background: #f5f5f5;
+    float: right;
+  }
+  .messages ul li img {
+    width: 22px;
+    border-radius: 50%;
+    float: left;
+  }
+  .messages ul li p {
+    display: inline-block;
+    padding: 10px 15px;
+    border-radius: 20px;
+    max-width: 205px;
+    line-height: 130%;
+  }
+  @media screen and (min-width: 735px) {
+    .messages ul li p {
+      max-width: 300px;
+    }
+  }
+  .message-input {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 99;
+  }
+  .message-input .wrap {
+    position: relative;
+  }
+  .message-input .wrap input {
+    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
+    float: left;
+    border: none;
+    width: calc(100% - 90px);
+    padding: 11px 32px 10px 8px;
+    font-size: 0.8em;
+    color: #32465a;
+  }
+  @media screen and (max-width: 735px) {
+    .message-input .wrap input {
+      padding: 15px 32px 16px 8px;
+    }
+  }
+  .message-input .wrap input:focus {
+    outline: none;
+  }
+  .message-input .wrap .attachment {
+    position: absolute;
+    right: 60px;
+    z-index: 4;
+    margin-top: 10px;
+    font-size: 1.1em;
+    color: #435f7a;
+    opacity: 0.5;
+    cursor: pointer;
+  }
+  @media screen and (max-width: 735px) {
+    .message-input .wrap .attachment {
+      margin-top: 17px;
+      right: 65px;
+    }
+  }
+  .message-input .wrap .attachment:hover {
+    opacity: 1;
+  }
+  .message-input .wrap button {
+    float: right;
+    border: none;
+    width: 50px;
+    padding: 12px 0;
+    cursor: pointer;
+    background: #32465a;
+    color: #f5f5f5;
+  }
+  @media screen and (max-width: 735px) {
+    .message-input .wrap button {
+      padding: 16px 0;
+    }
+  }
+  .message-input .wrap button:hover {
+    background: #435f7a;
+  }
+  .message-input .wrap button:focus {
+    outline: none;
+  }
+