feat(Chat): Revamp design.

* ensure keyboard stays open when sending messages on mobile web.

css/_atlaskit_overrides.scss

@@ -123,6 +123,17 @@
     }
 }
 
+// Override Atlaskit inline style for the modal background.
+// Important is unfortunately needed for that.
+.shift-right .focus-lock [role="dialog"][style] {
+    background-color: $chatBackgroundColor !important;
+}
+
+// Remove Atlaskit padding from the chat dialog.
+.shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
+    padding: 0;
+}
+
 div.Tooltip {
     color: #fff;
     font-size: 12px;

css/_chat.scss

@@ -1,5 +1,5 @@
 #sideToolbarContainer {
-    background-color: $newToolbarBackgroundColor;
+    background-color: $chatBackgroundColor;
     box-sizing: border-box;
     color: #FFF;
     display: flex;
@@ -105,13 +105,12 @@
 }
 
 .chat-header {
-    background-color: $chatHeaderBackgroundColor;
     height: 70px;
     position: relative;
     width: 100%;
     z-index: 1;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     padding: 16px;
     align-items: center;
     box-sizing: border-box;
@@ -123,23 +122,31 @@
     .jitsi-icon {
         cursor: pointer;
     }
-
-    .jitsi-icon > svg {
-        fill: #A4B8D1;
-    }
 }
 
 .chat-input-container {
-    padding: 0 16px 24px;
+    padding: 0 16px 16px;
 
     &.populated {
         #chat-input {
-            border: 1px solid #619CF4;
+            &:focus-within {
+                border: 1px solid #619CF4;
+            }
 
             .send-button {
                 background: #1B67EC;
                 cursor: pointer;
 
+                @media (hover: hover) and (pointer: fine) {
+                    &:hover {
+                        background: #3D82FB;
+                    }
+                }
+
+                &:active {
+                    background: #0852D4;
+                }
+
                 path {
                     fill: #fff;
                 }
@@ -151,7 +158,7 @@
 #chat-input {
     border: 1px solid $chatInputSeparatorColor;
     display: flex;
-    padding: 5px 10px;
+    padding: 4px;
     border-radius: 3px;
 
     * {
@@ -177,10 +184,20 @@
     }
 }
 
-.mobile-browser {
-    .send-button {
-        height: 48px;
-        width: 48px;
+.smiley-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    width: 40px;
+    border-radius: 3px;
+}
+
+#chat-input .smiley-button {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: #484A4F;
+        }
     }
 }
 
@@ -263,8 +280,8 @@
     }
 
     .display-name {
-        font-size: 13px;
-        font-weight: bold;
+        font-size: 12px;
+        font-weight: 600;
         margin-bottom: 5px;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -314,12 +331,16 @@
     }
 
     .messagecontent {
-        margin: 5px 10px;
+        margin: 8px;
         max-width: 100%;
         overflow: hidden;
     }
 }
 
+.timestamp {
+    color: #757575;
+}
+
 .smiley {
     font-size: 14pt;
 }
@@ -355,7 +376,9 @@
     max-height: 0;
     overflow: hidden;
     position: absolute;
-    width: $sidebarWidth;
+    width: calc(#{$sidebarWidth} - 32px);
+    margin-bottom: 5px;
+    margin-left: -5px;
 
     /**
      * CSS transitions do not apply for auto dimensions. So to produce the css
@@ -370,9 +393,8 @@
     }
 
     #smileysContainer {
-        background-color: $newToolbarBackgroundColor;
-        border-bottom: 1px solid;
-        border-top: 1px solid;
+        background-color: $chatBackgroundColor;
+        border-top: 1px solid $chatInputSeparatorColor;
     }
 }
 
@@ -478,9 +500,9 @@
 
     &-header {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        margin: 16px 16px 24px;
+        margin: 16px;
         width: calc(100% - 32px);
         box-sizing: border-box;
         color: #fff;
@@ -491,19 +513,11 @@
         .jitsi-icon {
             cursor: pointer;
         }
-
-        .jitsi-icon > svg {
-            fill: #A4B8D1;
-        }
     }
 
     #chatconversation {
         width: 100%;
     }
-
-    .chat-input-container {
-        padding: 0 0 24px;
-    }
 }
 
 .touchmove-hack {
@@ -520,6 +534,6 @@
     place-items: center;
     height: 48px;
     width: 48px;
-    background: #2a3a4b;
+    background: #36383C;
     border-radius: 3px;
 }

css/_variables.scss

@@ -91,12 +91,12 @@ $modalTextColor: #333;
  * Chat
  */
 $chatActionsSeparatorColor: rgb(173, 105, 112);
-$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
+$chatBackgroundColor: #131519;
 $chatInputSeparatorColor: #A4B8D1;
-$chatLocalMessageBackgroundColor: rgb(4, 98, 178);
+$chatLocalMessageBackgroundColor: #484A4F;
 $chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
-$chatRemoteMessageBackgroundColor:  rgb(86, 101, 114);
-$sidebarWidth: 375px;
+$chatRemoteMessageBackgroundColor:  #242528;
+$sidebarWidth: 315px;
 
  /**
  * Misc.

react/features/base/icons/svg/index.js

@@ -102,6 +102,7 @@ export { default as IconShare } from './share.svg';
 export { default as IconShareDesktop } from './share-desktop.svg';
 export { default as IconShareDoc } from './share-doc.svg';
 export { default as IconShareVideo } from './shared-video.svg';
+export { default as IconSmile } from './smile.svg';
 export { default as IconSwitchCamera } from './switch-camera.svg';
 export { default as IconTileView } from './tiles-many.svg';
 export { default as IconToggleRecording } from './camera-take-picture.svg';

react/features/base/icons/svg/smile.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99996 18.3333C5.39759 18.3333 1.66663 14.6023 1.66663 9.99996C1.66663 5.39759 5.39759 1.66663 9.99996 1.66663C14.6023 1.66663 18.3333 5.39759 18.3333 9.99996C18.3333 14.6023 14.6023 18.3333 9.99996 18.3333ZM9.99996 16.6666C13.6819 16.6666 16.6666 13.6819 16.6666 9.99996C16.6666 6.31806 13.6819 3.33329 9.99996 3.33329C6.31806 3.33329 3.33329 6.31806 3.33329 9.99996C3.33329 13.6819 6.31806 16.6666 9.99996 16.6666ZM8.33329 8.74996C8.33329 9.44031 7.77365 9.99996 7.08329 9.99996C6.39294 9.99996 5.83329 9.44031 5.83329 8.74996C5.83329 8.0596 6.39294 7.49996 7.08329 7.49996C7.77365 7.49996 8.33329 8.0596 8.33329 8.74996ZM12.9166 9.99996C13.607 9.99996 14.1666 9.44031 14.1666 8.74996C14.1666 8.0596 13.607 7.49996 12.9166 7.49996C12.2263 7.49996 11.6666 8.0596 11.6666 8.74996C11.6666 9.44031 12.2263 9.99996 12.9166 9.99996ZM9.99996 15C11.7491 15 13.2885 14.1018 14.1821 12.7414L12.8867 11.6691C12.3021 12.6792 11.2131 13.3333 9.99996 13.3333C8.801 13.3333 7.71376 12.6771 7.12376 11.6672L5.8304 12.741C6.72576 14.0962 8.25894 15 9.99996 15Z"/>
+</svg>

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

@@ -2,7 +2,6 @@
 
 import React from 'react';
 
-import { translate } from '../../../base/i18n';
 import { Icon, IconClose } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { toggleChat } from '../../actions.web';
@@ -18,11 +17,6 @@ type Props = {
      * An optional class name.
      */
     className: string,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
 };
 
 /**
@@ -30,11 +24,10 @@ type Props = {
  *
  * @returns {React$Element<any>}
  */
-function Header({ onCancel, className, t }: Props) {
+function Header({ onCancel, className }: Props) {
     return (
         <div
             className = { className || 'chat-dialog-header' }>
-            { t('chat.title') }
             <Icon
                 onClick = { onCancel }
                 src = { IconClose } />
@@ -44,4 +37,4 @@ function Header({ onCancel, className, t }: Props) {
 
 const mapDispatchToProps = { onCancel: toggleChat };
 
-export default translate(connect(null, mapDispatchToProps)(Header));
+export default connect(null, mapDispatchToProps)(Header);

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

@@ -1,12 +1,12 @@
 // @flow
 
 import React, { Component } from 'react';
-import Emoji from 'react-emoji-render';
 import TextareaAutosize from 'react-textarea-autosize';
 import type { Dispatch } from 'redux';
 
+import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
-import { Icon, IconPlane } from '../../../base/icons';
+import { Icon, IconPlane, IconSmile } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 
 import SmileysPanel from './SmileysPanel';
@@ -93,11 +93,10 @@ class ChatInput extends Component<Props, State> {
      * @inheritdoc
      */
     componentDidMount() {
-        /**
-         * HTML Textareas do not support autofocus. Simulate autofocus by
-         * manually focusing.
-         */
-        this._focus();
+        if (isMobileBrowser()) {
+            // Ensure textarea is not focused when opening chat on mobile browser.
+            this._textArea && this._textArea.blur();
+        }
     }
 
     /**
@@ -116,9 +115,11 @@ class ChatInput extends Component<Props, State> {
                     <div className = 'smiley-input'>
                         <div id = 'smileysarea'>
                             <div id = 'smileys'>
-                                <Emoji
-                                    onClick = { this._onToggleSmileysPanel }
-                                    text = ':)' />
+                                <div
+                                    className = 'smiley-button'
+                                    onClick = { this._onToggleSmileysPanel }>
+                                    <Icon src = { IconSmile } />
+                                </div>
                             </div>
                         </div>
                         <div className = { smileysPanelClassName }>
@@ -174,6 +175,9 @@ class ChatInput extends Component<Props, State> {
             this.props.onSend(trimmed);
 
             this.setState({ message: '' });
+
+            // Keep the textarea in focus when sending messages via submit button.
+            this._focus();
         }
 
     }

react/features/chat/constants.js

@@ -5,7 +5,7 @@ export const CHAT_VIEW_MODAL_ID = 'chatView';
 /**
  * The size of the chat.
  */
-export const CHAT_SIZE = 375;
+export const CHAT_SIZE = 315;
 
 /**
  * The audio ID of the audio element for which the {@link playAudio} action is

react/features/chat/middleware.js

@@ -81,14 +81,16 @@ MiddlewareRegistry.register(store => next => action => {
         break;
 
     case OPEN_CHAT:
-        if (localParticipant.name) {
-            dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID));
-            _maybeFocusField();
-        } else {
-            dispatch(openDisplayNamePrompt(() => {
+        if (navigator.product === 'ReactNative') {
+            if (localParticipant.name) {
                 dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID));
-                _maybeFocusField();
-            }));
+            } else {
+                dispatch(openDisplayNamePrompt(() => {
+                    dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID));
+                }));
+            }
+        } else {
+            dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID));
         }
 
         unreadCount = 0;
@@ -291,19 +293,6 @@ function _handleReceivedMessage({ dispatch, getState }, { id, message, privateMe
     }
 }
 
-/**
- * Focuses the chat text field on web after the message recipient was updated, if needed.
- *
- * @returns {void}
- */
-function _maybeFocusField() {
-    if (navigator.product !== 'ReactNative') {
-        const textField = document.getElementById('usermsg');
-
-        textField && textField.focus();
-    }
-}
-
 /**
  * Persists the sent private messages as if they were received over the muc.
  *