BOD-14 WIP. CSS issues present with 2 way texting, but working live.

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

@@ -1,60 +1,17 @@
-import { Button, Card, Badge } from "antd";
+import { Badge, Card } from "antd";
 import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import {
-  closeConversation,
-  sendMessage,
-  toggleConversationVisible
-} from "../../redux/messaging/messaging.actions";
-import PhoneFormatter from "../../utils/PhoneFormatter";
+import ChatConversationClosedComponent from "./chat-conversation.closed.component";
 import ChatConversationOpenComponent from "./chat-conversation.open.component";
 import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
-import ChatConversationClosedComponent from "./chat-conversation.closed.component";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-});
-const mapDispatchToProps = dispatch => ({
-  toggleConversationVisible: conversationId =>
-    dispatch(toggleConversationVisible(conversationId)),
-  closeConversation: phone => dispatch(closeConversation(phone)),
-  sendMessage: message => dispatch(sendMessage(message))
-});
-
-export function ChatConversationComponent({
+export default function ChatConversationComponent({
   conversation,
-  toggleConversationVisible,
-  closeConversation,
   messages,
   subState
 }) {
   return (
     <Badge count={messages.length}>
-      <Card
-        title={
-          conversation.open ? (
-            <div style={{ display: "flex" }}>
-              <div
-                onClick={() =>
-                  toggleConversationVisible(conversation.phone_num)
-                }>
-                <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
-              </div>
-              <Button
-                type='danger'
-                shape='circle-outline'
-                onClick={() => closeConversation(conversation.phone_num)}>
-                X
-              </Button>
-            </div>
-          ) : null
-        }
-        style={{
-          width: conversation.open ? "400px" : "175px",
-          margin: "0px 10px"
-        }}
-        size='small'>
+      <Card className='chat-overlay' size='small'>
         {conversation.open ? (
           <ChatConversationOpenComponent
             messages={messages}
@@ -68,8 +25,3 @@ export function ChatConversationComponent({
     </Badge>
   );
 }
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ChatConversationComponent);