ref(chat): add a header for holding the close button

css/_chat.scss

@@ -42,7 +42,6 @@
     flex: 1;
     font-size: 10pt;
     line-height: 20px;
-    margin-top: $desktopAppDragBarHeight + 5px;
     overflow: auto;
     padding: 5px;
     text-align: left;
@@ -92,21 +91,32 @@
     }
 }
 
+.chat-header {
+    background-color: rgba(42, 58, 75, 0.9);
+    height: 70px;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+
     .chat-close {
-    background: gray;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-radius: 100%;
+        align-items: center;
+        bottom: 8px;
         color: white;
         cursor: pointer;
-    height: 10px;
-    line-height: 10px;
+        display: flex;
+        font-size: 18px;
+        height: 40px;
+        justify-content: center;
+        line-height: 15px;
         padding: 4px;
         position: absolute;
         right: 5px;
-    text-align: center;
-    top: $desktopAppDragBarHeight;
-    width: 10px;
-    z-index: 1;
+        width: 40px;
+
+        &:hover {
+            color: rgba(255, 255, 255, 0.8);
+        }
+    }
 }
 
 #chat-input {
@@ -146,14 +156,12 @@
 }
 
 #nickname {
-    position: absolute;
     text-align: center;
     color: #9d9d9d;
     font-size: 18px;
-    top: 100px;
+    margin-top: 30px;
     left: 5px;
     right: 5px;
-    width: 95%;
 }
 
 #chat_container .display-name {

react/features/chat/components/web/Chat.js

@@ -106,6 +106,7 @@ class Chat extends AbstractChat<Props> {
             <div
                 className = 'sideToolbarContainer__inner'
                 id = 'chat_container'>
+                { this._renderChatHeader() }
                 <div id = 'chatconversation'>
                     { messages }
                 </div>
@@ -114,6 +115,23 @@ class Chat extends AbstractChat<Props> {
         );
     }
 
+    /**
+     * Instantiates a React Element to display at the top of {@code Chat} to
+     * close {@code Chat}.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderChatHeader() {
+        return (
+            <div className = 'chat-header'>
+                <div
+                    className = 'chat-close'
+                    onClick = { this.props._onToggleChat }>X</div>
+            </div>
+        );
+    }
+
     _renderMessage: (Object) => void;
 
     /**
@@ -145,14 +163,12 @@ class Chat extends AbstractChat<Props> {
     _renderPanelContent(state) {
         this._isExited = state === 'exited';
 
-        const { _isOpen, _onToggleChat, _showNamePrompt } = this.props;
+        const { _isOpen, _showNamePrompt } = this.props;
         const ComponentToRender = !_isOpen && state === 'exited'
             ? null
             : (
                 <div>
-                    <div
-                        className = 'chat-close'
-                        onClick = { _onToggleChat }>X</div>
+                    { this._renderChatHeader() }
                     { _showNamePrompt
                         ? <DisplayNameForm /> : this._renderChat() }
                 </div>