BOD-14 More CSS issues for messaging.

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

@@ -1,8 +1,12 @@
 import { ShrinkOutlined } from "@ant-design/icons";
-import { Avatar, Badge, Col, List, Row } from "antd";
+import { Badge } from "antd";
 import React from "react";
 import { connect } from "react-redux";
-import { openConversation, toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import {
+  openConversation,
+  toggleChatVisible
+} from "../../redux/messaging/messaging.actions";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 const mapDispatchToProps = dispatch => ({
   toggleChatVisible: () => dispatch(toggleChatVisible()),
@@ -14,40 +18,23 @@ export function ChatConversationListComponent({
   conversationList,
   openConversation
 }) {
-
   return (
     <div className='chat-overlay-open'>
-      <Row>
-        <Col span={12}>Title</Col>
-        <Col span={2} offset={10}>
       <ShrinkOutlined onClick={() => toggleChatVisible()} />
-        </Col>
+      {conversationList.map(item => (
-      </Row>
-      <Row>
-        <Col span={24}>
-          <List
-            dataSource={conversationList}
-            renderItem={item => (
         <Badge count={item.messages_aggregate.aggregate.count || 0}>
-                <List.Item
+          <div
             key={item.id}
-                  style={{ cursor: "pointer" }}
+            style={{ cursor: "pointer", display: "block" }}
             onClick={() =>
               openConversation({ phone_num: item.phone_num, id: item.id })
             }>
-                  <List.Item.Meta
+            <div>
-                    avatar={
+              <PhoneNumberFormatter>{item.phone_num}</PhoneNumberFormatter>
-                      <Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />
+            </div>
-                    }
+          </div>
-                    title={item.phone_num}
-                    description='Some sort of RO info? '
-                  />
-                </List.Item>
         </Badge>
-            )}
+      ))}
-          />
-        </Col>
-      </Row>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { CloseCircleFilled } from "@ant-design/icons";
 import React from "react";
 import { connect } from "react-redux";
 import {
@@ -21,17 +21,13 @@ function ChatConversationClosedComponent({
   closeConversation
 }) {
   return (
-    <div>
+    <div
-      <div onClick={() => toggleConversationVisible(conversation.id)}>
+      className='chat-conversation-closed'
+      onClick={() => toggleConversationVisible(conversation.id)}>
       <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
-      </div>
+      <CloseCircleFilled
-      <Button
+        onClick={() => closeConversation(conversation.phone_num)}
-        type='dashed'
+      />
-        style={{ alignSelf: "right" }}
-        shape='circle-outline'
-        onClick={() => closeConversation(conversation.phone_num)}>
-        X
-      </Button>
     </div>
   );
 }

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

@@ -2,7 +2,6 @@ import { Badge, Card } from "antd";
 import React from "react";
 import ChatConversationClosedComponent from "./chat-conversation.closed.component";
 import ChatConversationOpenComponent from "./chat-conversation.open.component";
-import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
 
 export default function ChatConversationComponent({
   conversation,
@@ -11,8 +10,9 @@ export default function ChatConversationComponent({
   unreadCount
 }) {
   return (
+    <div className='chat-conversation'>
       <Badge count={unreadCount}>
-      <Card className='chat-overlay' size='small'>
+        <Card size='small'>
           {conversation.open ? (
             <ChatConversationOpenComponent
               messages={messages}
@@ -24,5 +24,6 @@ export default function ChatConversationComponent({
           )}
         </Card>
       </Badge>
+    </div>
   );
 }

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

@@ -1,13 +1,22 @@
 import React from "react";
+import { connect } from "react-redux";
+import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
 import AlertComponent from "../alert/alert.component";
+import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
+import { ShrinkOutlined } from "@ant-design/icons";
 
-export default function ChatConversationOpenComponent({
+const mapDispatchToProps = dispatch => ({
+  toggleConversationVisible: conversation =>
+    dispatch(toggleConversationVisible(conversation))
+});
+
+export function ChatConversationOpenComponent({
   conversation,
   messages,
-  subState
+  subState,
+  toggleConversationVisible
 }) {
   const [loading, error] = subState;
 
@@ -15,9 +24,13 @@ export default function ChatConversationOpenComponent({
   if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
-    <div className='chat-overlay-open'>
+    <div className='chat-conversation-open'>
+      <ShrinkOutlined
+        onClick={() => toggleConversationVisible(conversation.id)}
+      />
       <ChatMessageListComponent messages={messages} />
       <ChatSendMessage conversation={conversation} />
     </div>
   );
 }
+export default connect(null, mapDispatchToProps)(ChatConversationOpenComponent);

client/src/components/chat-dock/chat-dock.container.jsx

@@ -4,7 +4,8 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectConversations } from "../../redux/messaging/messaging.selectors";
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
-import ChatMessagesButtoContainer from "../chat-messages-button/chat-messages-button.container";
+import ChatMessagesButtonContainer from "../chat-messages-button/chat-messages-button.container";
+import "./chat-dock.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   activeConversations: selectConversations
@@ -14,8 +15,7 @@ export function ChatOverlayContainer({ activeConversations }) {
   return (
     <Affix offsetBottom={0}>
       <div className='chat-dock'>
-        <ChatMessagesButtoContainer />
+        <ChatMessagesButtonContainer />
-
         {activeConversations
           ? activeConversations.map(conversation => (
               <ChatConversationContainer

client/src/components/chat-dock/chat-dock.styles.scss

@@ -1,29 +1,19 @@
-// .chat-overlay-wrapper {
+.chat-dock {
-//   width: 95vw;
+  z-index: 5;
-// }
-// .chat-overlay-scroller {
   //overflow-x: scroll;
   // overflow-y: hidden;
-//   vertical-align: bottom;
+  width: 100%;
-// }
+  display: flex;
-// .chat-overlay {
+  align-items: baseline;
-//   margin: 0px 12px;
+}
-//   display: inline-block;
-// }
-// .chat-overlay-open {
-//   width: 400px;
-//   height: 33vh;
-//   display: flex;
-//   flex-flow: column;
-// }
-// .chat-overlay-closed {
-//   display: flex;
-//   justify-content: space-between;
-//   vertical-align: middle;
-//   width: 150px;
-//   cursor: pointer;
-// }
 
+.chat-conversation {
+  margin: 2em 1em 0em 1em;
+}
+
+.chat-conversation-open {
+  height: 500px;
+}
 // .chat-messages {
 //   height: 80%;
 //   overflow-x: hidden;

client/src/components/chat-messages-button/chat-messages-button.component.jsx

@@ -23,10 +23,13 @@ export function ChatWindowComponent({
 }) {
   const { t } = useTranslation();
   return (
+    <div className='chat-conversation'>
       <Badge count={unreadCount}>
         <Card size='small'>
           {chatVisible ? (
-          <ChatConversationListComponent conversationList={conversationList} />
+            <ChatConversationListComponent
+              conversationList={conversationList}
+            />
           ) : (
             <div onClick={() => toggleChatVisible()}>
               <MessageFilled />
@@ -35,6 +38,7 @@ export function ChatWindowComponent({
           )}
         </Card>
       </Badge>
+    </div>
   );
 }
 export default connect(