Merge branch 'develop' into travis/feature/wellknown2

res/css/_components.scss

@@ -89,6 +89,7 @@
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MemberEventListSummary.scss";
+@import "./views/elements/_MessageEditor.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_ReplyThread.scss";

res/css/views/elements/_MessageEditor.scss

@@ -0,0 +1,64 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MessageEditor {
+    border-radius: 4px;
+    background-color: $header-panel-bg-color;
+    padding: 11px 13px 7px 56px;
+
+    .mx_MessageEditor_editor {
+        border-radius: 4px;
+        border: solid 1px #e9edf1;
+        background-color: #ffffff;
+        padding: 10px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+
+        span {
+            display: inline-block;
+            padding: 0 5px;
+            border-radius: 4px;
+            color: white;
+        }
+
+        span.user-pill, span.room-pill {
+            border-radius: 16px;
+            display: inline-block;
+            color: $primary-fg-color;
+            background-color: $other-user-pill-bg-color;
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+    }
+
+    .mx_MessageEditor_buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        padding: 5px 0;
+
+        .mx_AccessibleButton {
+            margin-left: 5px;
+            padding: 5px 40px;
+        }
+    }
+
+    .mx_MessageEditor_AutoCompleteWrapper {
+        position: relative;
+        height: 0;
+    }
+}

res/css/views/messages/_MessageActionBar.scss

@@ -69,6 +69,10 @@ limitations under the License.
     mask-image: url('$(res)/img/reply.svg');
 }
 
+.mx_MessageActionBar_editButton::after {
+    mask-image: url('$(res)/img/edit.svg');
+}
+
 .mx_MessageActionBar_optionsButton::after {
     mask-image: url('$(res)/img/icon_context.svg');
 }

res/css/views/rooms/_MemberList.scss

@@ -87,6 +87,11 @@ limitations under the License.
     }
 }
 
+.mx_MemberList_invite.mx_AccessibleButton_disabled {
+    background-color: $greyed-fg-color;;
+    cursor: not-allowed;
+}
+
 .mx_MemberList_invite span {
     background-image: url('$(res)/img/feather-customised/user-add.svg');
     background-repeat: no-repeat;

res/img/edit.svg

@@ -0,0 +1 @@
+<svg height="14.865319" viewBox="0 0 15.093 14.865319" width="15.093" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g style="fill:none;fill-rule:evenodd;stroke:#2e2f32;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round;" transform="translate(-1048.2035 -582.14881)"><path d="m1055.75 596h6.75m-3.375-12.375a1.591 1.591 0 0 1 2.25 2.25l-9.375 9.375-3 .75.75-3z"/></g></svg>

res/img/reply.svg

@@ -1,6 +1,6 @@
-<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg">
+<svg width="13" height="8" xmlns="http://www.w3.org/2000/svg">
   <g stroke="#2E2F32" stroke-width=".75" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M8.75 4.75L12.5 8.5l-3.75 3.75"/>
-    <path d="M.5.25V5.5a3 3 0 0 0 3 3h9"/>
+    <path d="M3.167 1L.5 3.545l2.667 2.546"/>
+    <path d="M12.5 7.364V6.09c0-1.406-1.194-2.546-2.667-2.546H.5"/>
   </g>
-</svg>
+</svg>

res/themes/light/css/_light.scss

@@ -257,11 +257,11 @@ $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
 $message-action-bar-bg-color: $primary-bg-color;
 $message-action-bar-fg-color: $primary-fg-color;
 $message-action-bar-border-color: #e9edf1;
-$message-action-bar-hover-border-color: #b8c1d2;
+$message-action-bar-hover-border-color: $focus-bg-color;
 
 $reaction-row-button-bg-color: $header-panel-bg-color;
 $reaction-row-button-border-color: #e9edf1;
-$reaction-row-button-hover-border-color: #bebebe;
+$reaction-row-button-hover-border-color: $focus-bg-color;
 $reaction-row-button-selected-bg-color: #e9fff9;
 $reaction-row-button-selected-border-color: $accent-color;