- Chat formatting

- Scroll to Top Button

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -1,4 +1,4 @@
-import { Badge, List, Tag } from "antd";
+import {Badge, List, Space, Tag} from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import {
@@ -38,7 +38,6 @@ function ChatConversationListComponent({
 
   const rowRenderer = ({ index, key, style, parent }) => {
     const item = conversationList[index];
-
     return (
         <CellMeasurer
             key={key}
@@ -49,44 +48,45 @@ function ChatConversationListComponent({
         >
           <List.Item
               onClick={() => setSelectedConversation(item.id)}
-          className={`chat-list-item ${
+              style={style}
+              className={`chat-list-item 
+          ${
                   item.id === selectedConversation
                       ? "chat-list-selected-conversation"
                       : null
               }`}
-          style={style}
           >
-          <div
+            <Space style={{padding: '12px 24px'}} size={"large"}>
-            style={{
+              <Space>
-              display: "inline-block",
+                {item.label && <Space>{item.label}</Space>}
-            }}
-          >
-            {item.label && <div className="chat-name">{item.label}</div>}
                 {item.job_conversations.length > 0 ? (
-              <div className="chat-name">
+                    <Space direction="vertical">
                       {item.job_conversations.map((j, idx) => (
-                  <div key={idx}>
+                          <OwnerNameDisplay key={idx} ownerObject={j.job} />
-                    <OwnerNameDisplay ownerObject={j.job} />
-                  </div>
                       ))}
-              </div>
+                    </Space>
                 ) : (
+                    <Space>
                       <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+                    </Space>
                 )}
-          </div>
+              </Space>
-          <div style={{ display: "inline-block" }}>
+              <Space direction="vertical">
-            <div>
+                <Space>
                   {item.job_conversations.length > 0
                       ? item.job_conversations.map((j, idx) => (
-                    <Tag key={idx} className="ro-number-tag">
+                          <Tag key={idx}>{j.job.ro_number}</Tag>
-                      {j.job.ro_number}
-                    </Tag>
                       ))
                       : null}
-            </div>
+                </Space>
+                <Space>
                   <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-          </div>
+                </Space>
+              </Space>
+              <Space>
                 <Badge count={item.messages_aggregate.aggregate.count || 0} />
+              </Space>
+            </Space>
           </List.Item>
         </CellMeasurer>
     );

client/src/components/chat-conversation-list/chat-conversation-list.styles.scss

@@ -2,26 +2,15 @@
   background-color: rgba(128, 128, 128, 0.2);
 }
 .chat-list-container {
-  flex: 1;
   overflow: hidden;
   height: 100%;
   border: 1px solid gainsboro;
 }
-
 .chat-list-item {
-  display: flex;
-  flex-direction: row;
   &:hover {
     cursor: pointer;
     color: #ff7a00;
   }
-  .chat-name {
+
-    flex: 1;
-    display: inline;
-  }
-  .ro-number-tag {
-    align-self: baseline;
-  }
-  padding: 12px 24px;
   border-bottom: 1px solid gainsboro;
 }

client/src/pages/manage/manage.page.component.jsx

@@ -373,7 +373,7 @@ export function Manage({conflict, bodyshop}) {
                         {PageContent}
                     </Sentry.ErrorBoundary>
 
-                    <FloatButton.BackTop/>
+                    <FloatButton.BackTop style={{right: 100, bottom: 25}}/>
                     <Footer>
                         <div
                             style={{