ui: web chat facelift

css/_chat.scss

@@ -82,9 +82,10 @@
 
 #chat-recipient {
     align-items: center;
-    background-color: $defaultWarningColor;
+    background-color: $chatPrivateMessageBackgroundColor;
     display: flex;
     flex-direction: row;
+    font-weight: 100;
     padding: 10px;
 
     span {
@@ -132,6 +133,7 @@
 #chat-input {
     border-top: 1px solid $chatInputSeparatorColor;
     display: flex;
+    padding: 5px 10px;
 
     * {
         background-color: transparent;
@@ -152,8 +154,7 @@
     box-shadow: none;
     color: white;
     font-size: 15px;
-    line-height: 30px;
+    padding: 10px;
-    padding: 5px;
     overflow-y: auto;
     resize: none;
     width: 100%;
@@ -183,6 +184,7 @@
     .display-name {
         font-size: 13px;
         font-weight: bold;
+        margin-bottom: 5px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -196,7 +198,6 @@
     color: white;
     margin-top: 3px;
     max-width: 100%;
-    padding-bottom: 3px;
     position: relative;
 
     &.localuser {
@@ -219,8 +220,12 @@
     }
 
     .privatemessagenotice {
-        color: $defaultWarningColor;
+        font-size: 11px;
-        font-style: italic;
+        font-weight: 100;
+    }
+
+    .messagecontent {
+        margin: 5px 10px;
     }
 }
 
@@ -297,10 +302,6 @@
     cursor: pointer;
 }
 
-#usermsg::-webkit-input-placeholder {
-    line-height: 30px;
-}
-
 #usermsg::-webkit-scrollbar-track-piece {
     background: #3a3a3a;
 }
@@ -315,6 +316,10 @@
         .chatmessage {
             background-color: $chatLocalMessageBackgroundColor;
             border-radius: 6px 0px 6px 6px;
+
+            &.privatemessage {
+                background-color: $chatPrivateMessageBackgroundColor;
+            }
         }
 
         .display-name {
@@ -328,8 +333,9 @@
 
     &.error {
         .chatmessage {
+            background-color: $defaultWarningColor;
             border-radius: 0px;
-            color: red;
+            font-weight: 100;
         }
 
         .display-name {
@@ -345,8 +351,17 @@
             flex-direction: row;
             align-items: center;
 
-            .toolbox-icon {
+            .messageactions {
-                cursor: pointer;
+                align-self: stretch;
+                border-left: 1px solid $chatActionsSeparatorColor;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 5px;
+
+                .toolbox-icon {
+                    cursor: pointer;
+                }
             }
         }
     }
@@ -357,6 +372,9 @@
         display: inline-block;
         margin-top: 3px;
         color: white;
-        padding: 8px;
+
+        &.privatemessage {
+            background-color: $chatPrivateMessageBackgroundColor;
+        }
     }
 }

css/_variables.scss

@@ -86,10 +86,12 @@ $modalTextColor: #333;
 /**
  * Chat
  */
+$chatActionsSeparatorColor: rgb(173, 105, 112);
 $chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
 $chatInputSeparatorColor: #A4B8D1;
-$chatLocalMessageBackgroundColor: rgba(26, 108, 180, 1);
+$chatLocalMessageBackgroundColor: rgb(4, 98, 178);
-$chatRemoteMessageBackgroundColor:  rgba(240, 243, 247, 0.15);
+$chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
+$chatRemoteMessageBackgroundColor:  rgb(86, 101, 114);
 $sidebarWidth: 375px;
 
  /**

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

@@ -4,6 +4,7 @@ import React from 'react';
 import Transition from 'react-transition-group/Transition';
 
 import { translate } from '../../../base/i18n';
+import { Icon, IconClose } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 
 import AbstractChat, {
@@ -137,7 +138,9 @@ class Chat extends AbstractChat<Props> {
             <div className = 'chat-header'>
                 <div
                     className = 'chat-close'
-                    onClick = { this.props._onToggleChat }>X</div>
+                    onClick = { this.props._onToggleChat }>
+                    <Icon src = { IconClose } />
+                </div>
             </div>
         );
     }

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

@@ -41,19 +41,25 @@ class ChatMessage extends AbstractChatMessage<Props> {
 
         return (
             <div className = 'chatmessage-wrapper'>
-                <div className = 'replywrapper'>
+                <div className = { `chatmessage ${message.privateMessage ? 'privatemessage' : ''}` }>
-                    <div className = 'chatmessage'>
+                    <div className = 'replywrapper'>
-                        { this.props.showDisplayName && this._renderDisplayName() }
+                        <div className = 'messagecontent'>
-                        <div className = 'usermessage'>
+                            { this.props.showDisplayName && this._renderDisplayName() }
-                            { processedMessage }
+                            <div className = 'usermessage'>
+                                { processedMessage }
+                            </div>
+                            { message.privateMessage && this._renderPrivateNotice() }
                         </div>
-                        { message.privateMessage && this._renderPrivateNotice() }
+                        { message.privateMessage && message.messageType !== MESSAGE_TYPE_LOCAL
+                            && (
+                                <div className = 'messageactions'>
+                                    <PrivateMessageButton
+                                        participantID = { message.id }
+                                        reply = { true }
+                                        showLabel = { false } />
+                                </div>
+                            ) }
                     </div>
-                    { message.privateMessage && message.messageType !== MESSAGE_TYPE_LOCAL
-                    && <PrivateMessageButton
-                        participantID = { message.id }
-                        reply = { true }
-                        showLabel = { false } /> }
                 </div>
                 { this.props.showTimestamp && this._renderTimestamp() }
             </div>