From 2cae12e1ab027becad93ff937b3cb570ca2f0de1 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Wed, 22 Mar 2017 16:35:28 +0000
Subject: [PATCH] found a better way to handle junto chat panel

---
 .../src/components/MapView/MapChat/index.js   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/MapView/MapChat/index.js b/frontend/src/components/MapView/MapChat/index.js
index 25eb8e41..64b7b10e 100644
--- a/frontend/src/components/MapView/MapChat/index.js
+++ b/frontend/src/components/MapView/MapChat/index.js
@@ -101,12 +101,13 @@ class MapChat extends Component {
     const { unreadMessages, chatOpen, conversationLive,
             isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
     const { videosShowing, cursorsShowing, alertSound } = this.state
-    const rightOffset = chatOpen ? '0' : '-300px'
     return (
-      <div id="chat-box-wrapper">
-        <div className="chat-box"
-          style={{ right: rightOffset }}
-        >
+      <div className="chat-box">
+        <div className={`chat-button ${conversationLive ? 'active' : ''}`} onClick={this.toggleDrawer}>
+          <div className="tooltips">Chat</div>
+          <Unread count={unreadMessages} />
+        </div>
+        {chatOpen && <div className="chat-panel">
           <div className="junto-header">
             PARTICIPANTS
             <div onClick={this.toggleVideosShowing} className={`video-toggle ${videosShowing ? '' : 'active'}`} />
@@ -135,14 +136,10 @@ class MapChat extends Component {
             CHAT
             <div onClick={this.toggleAlertSound} className={`sound-toggle ${alertSound ? '' : 'active'}`}></div>
           </div>
-          <div className={`chat-button ${conversationLive ? 'active' : ''}`} onClick={this.toggleDrawer}>
-            <div className="tooltips">Chat</div>
-            <Unread count={unreadMessages} />
-          </div>
           <div className="chat-messages" ref={div => { this.messagesDiv = div }}>
             {makeList(messages)}
           </div>
-          {chatOpen && <NewMessage messageText={this.state.messageText}
+          <NewMessage messageText={this.state.messageText}
             focusMessageInput={this.focusMessageInput}
             handleChange={this.handleChange('messageText')}
             textAreaProps={{
@@ -153,8 +150,8 @@ class MapChat extends Component {
               onFocus: this.props.inputFocus,
               onBlur: this.props.inputBlur
             }}
-          />}
-        </div>
+          />
+        </div>}
       </div>
     )
   }