From cf9b03d0735c2d924795d8b8d0b5cd8dd449915b Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Mon, 15 Jan 2024 17:28:24 -0500
Subject: [PATCH] - Chat formatting - Scroll to Top Button

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 .../chat-conversation-list.component.jsx      | 98 +++++++++----------
 .../chat-conversation-list.styles.scss        | 15 +--
 .../pages/manage/manage.page.component.jsx    |  2 +-
 3 files changed, 52 insertions(+), 63 deletions(-)

diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
index 0642884c1..1f9f66e7b 100644
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/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,57 +38,57 @@ function ChatConversationListComponent({
 
   const rowRenderer = ({ index, key, style, parent }) => {
     const item = conversationList[index];
-
     return (
-      <CellMeasurer
-        key={key}
-        cache={cache}
-        parent={parent}
-        columnIndex={0}
-        rowIndex={index}
-      >
-        <List.Item
-          onClick={() => setSelectedConversation(item.id)}
-          className={`chat-list-item ${
-            item.id === selectedConversation
-              ? "chat-list-selected-conversation"
-              : null
-          }`}
-          style={style}
+        <CellMeasurer
+            key={key}
+            cache={cache}
+            parent={parent}
+            columnIndex={0}
+            rowIndex={index}
         >
-          <div
-            style={{
-              display: "inline-block",
-            }}
+          <List.Item
+              onClick={() => setSelectedConversation(item.id)}
+              style={style}
+              className={`chat-list-item 
+          ${
+                  item.id === selectedConversation
+                      ? "chat-list-selected-conversation"
+                      : null
+              }`}
           >
-            {item.label && <div className="chat-name">{item.label}</div>}
-            {item.job_conversations.length > 0 ? (
-              <div className="chat-name">
-                {item.job_conversations.map((j, idx) => (
-                  <div key={idx}>
-                    <OwnerNameDisplay ownerObject={j.job} />
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-            )}
-          </div>
-          <div style={{ display: "inline-block" }}>
-            <div>
-              {item.job_conversations.length > 0
-                ? item.job_conversations.map((j, idx) => (
-                    <Tag key={idx} className="ro-number-tag">
-                      {j.job.ro_number}
-                    </Tag>
-                  ))
-                : null}
-            </div>
-            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-          </div>
-          <Badge count={item.messages_aggregate.aggregate.count || 0} />
-        </List.Item>
-      </CellMeasurer>
+            <Space style={{padding: '12px 24px'}} size={"large"}>
+              <Space>
+                {item.label && <Space>{item.label}</Space>}
+                {item.job_conversations.length > 0 ? (
+                    <Space direction="vertical">
+                      {item.job_conversations.map((j, idx) => (
+                          <OwnerNameDisplay key={idx} ownerObject={j.job} />
+                      ))}
+                    </Space>
+                ) : (
+                    <Space>
+                      <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+                    </Space>
+                )}
+              </Space>
+              <Space direction="vertical">
+                <Space>
+                  {item.job_conversations.length > 0
+                      ? item.job_conversations.map((j, idx) => (
+                          <Tag key={idx}>{j.job.ro_number}</Tag>
+                      ))
+                      : null}
+                </Space>
+                <Space>
+                  <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+                </Space>
+              </Space>
+              <Space>
+                <Badge count={item.messages_aggregate.aggregate.count || 0} />
+              </Space>
+            </Space>
+          </List.Item>
+        </CellMeasurer>
     );
   };
 
diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.styles.scss b/client/src/components/chat-conversation-list/chat-conversation-list.styles.scss
index 20cf8f4ef..44f6f8ec8 100644
--- a/client/src/components/chat-conversation-list/chat-conversation-list.styles.scss
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index f3c71bed2..58658b39b 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/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={{