Merge branch 'develop' into wmwragg/chat-multi-invite

src/components/structures/RightPanel.js

@@ -26,9 +26,16 @@ var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
 module.exports = React.createClass({
     displayName: 'RightPanel',
 
+    propTypes: {
+        userId: React.PropTypes.string, // if showing an orphaned MemberInfo page, this is set
+        roomId: React.PropTypes.string, // if showing panels for a given room, this is set
+        collapsed: React.PropTypes.bool,
+    },
+
     Phase : {
         MemberList: 'MemberList',
-        FileList: 'FileList',
+        FilePanel: 'FilePanel',
+        NotificationPanel: 'NotificationPanel',
         MemberInfo: 'MemberInfo',
     },
 
@@ -61,7 +68,7 @@ module.exports = React.createClass({
     },
 
     onMemberListButtonClick: function() {
-        if (this.props.collapsed) {
+        if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
             this.setState({ phase: this.Phase.MemberList });
             dis.dispatch({
                 action: 'show_right_panel',
@@ -74,6 +81,34 @@ module.exports = React.createClass({
         }
     },
 
+    onFileListButtonClick: function() {
+        if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
+            this.setState({ phase: this.Phase.FilePanel });
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        }
+    },
+
+    onNotificationListButtonClick: function() {
+        if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
+            this.setState({ phase: this.Phase.NotificationPanel });
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        }
+    },
+
     onRoomStateMember: function(ev, state, member) {
         // redraw the badge on the membership list
         if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
@@ -118,19 +153,25 @@ module.exports = React.createClass({
 
     render: function() {
         var MemberList = sdk.getComponent('rooms.MemberList');
+        var NotificationPanel = sdk.getComponent('structures.NotificationPanel');
+        var FilePanel = sdk.getComponent('structures.FilePanel');
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var buttonGroup;
         var panel;
 
         var filesHighlight;
         var membersHighlight;
+        var notificationsHighlight;
         if (!this.props.collapsed) {
             if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
                 membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
             }
-            else if (this.state.phase == this.Phase.FileList) {
+            else if (this.state.phase == this.Phase.FilePanel) {
                 filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
             }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                notificationsHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
+            }
         }
 
         var membersBadge;
@@ -138,7 +179,7 @@ module.exports = React.createClass({
             var cli = MatrixClientPeg.get();
             var room = cli.getRoom(this.props.roomId);
             if (room) {
-                membersBadge = <div className="mx_RightPanel_headerButton_badge">{ room.getJoinedMembers().length }</div>;
+                membersBadge = room.getJoinedMembers().length;
             }
         }
 
@@ -146,14 +187,20 @@ module.exports = React.createClass({
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
                         <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            { membersBadge }
+                            <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
                             <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                             { membersHighlight }
                         </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
-                            <TintableSvg src="img/files.svg" width="17" height="22"/>
+                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                            <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
                             { filesHighlight }
                         </div>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications" onClick={ this.onNotificationListButtonClick }>
+                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                            <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
+                            { notificationsHighlight }
+                        </div>
                     </div>;
         }
 
@@ -165,6 +212,12 @@ module.exports = React.createClass({
                 var MemberInfo = sdk.getComponent('rooms.MemberInfo');
                 panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
             }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                panel = <NotificationPanel />
+            }
+            else if (this.state.phase == this.Phase.FilePanel) {
+                panel = <FilePanel roomId={this.props.roomId} />
+            }
         }
 
         if (!panel) {

src/skins/vector/css/hide.css

@@ -1,6 +0,0 @@
-.mx_RoomSettings_encrypt,
-.mx_CreateRoom_encrypt,
-.mx_RightPanel_filebutton
-{
-    display: none !important;
-}

src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css

@@ -0,0 +1,118 @@
+/*
+Copyright 2016 OpenMarket 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_FilePanel {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_FilePanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_FilePanel .mx_RoomView_MessageList h2 {
+    display: none;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_FilePanel .mx_EventTile_avatar {
+    display: none;
+}
+
+/* Overrides for the attachment body tiles */
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody {
+    margin-right: 0px;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
+    display: flex;
+    font-size: 14px;
+    color: #acacac;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
+    flex: 1 1 auto;
+    color: #747474;
+    word-wrap: break-word;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+    flex: 1 0 0;
+    font-size: 11px;
+    text-align: right;
+    white-space: nowrap;
+}
+
+/* Overides for the sender details line */
+
+.mx_FilePanel .mx_EventTile_senderDetails {
+    display: flex;
+    margin-top: -2px;
+}
+
+.mx_FilePanel .mx_EventTile_senderDetailsLink {
+    text-decoration: none;
+}
+
+.mx_FilePanel .mx_EventTile .mx_SenderProfile {
+    flex: 1 1 auto;
+    line-height: initial;
+    padding: 0px;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
+    word-wrap: break-word;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+    flex: 1 0 0;
+    text-align: right;
+    visibility: visible;
+    position: initial;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
+}
+
+/* Overrides for the wrappers around the body tile */
+
+.mx_FilePanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 0px;
+}
+
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
+}
+
+.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}
+

src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css

@@ -0,0 +1,104 @@
+/*
+Copyright 2015, 2016 OpenMarket 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_NotificationPanel {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_NotificationPanel .mx_RoomView_MessageList h2 {
+    margin-left: 0px;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_NotificationPanel .mx_EventTile_roomName {
+    font-weight: bold;
+    font-size: 14px;
+    word-wrap: break-word;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a {
+    color: #4a4a4a;
+}
+
+.mx_NotificationPanel .mx_EventTile_avatar {
+    top: 8px;
+    left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    color: #000;
+    opacity: 0.3;
+    font-size: 12px;
+    display: inline;
+    padding-left: 0px;
+    word-wrap: break-word;
+}
+
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+    padding-left: 32px;
+    padding-top: 8px;
+    position: relative;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+    text-decoration: none ! important;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    visibility: visible;
+    position: initial;
+    display: inline;
+}
+
+.mx_NotificationPanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 32px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-right: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
+}
+
+.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_content {
+    margin-right: 0px;
+}

src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css

@@ -0,0 +1,39 @@
+/*
+Copyright 2016 OpenMarket 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_EncryptedEventDialog .mx_MemberDeviceInfo {
+    float: right;
+    padding: 0px;
+    margin-right: 42px;
+}
+
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
+    border: 0px;
+    height: 36px;
+    border-radius: 40px;
+    border: solid 1px #76cfa6;
+    font-weight: 600;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    margin-left: 0px;
+    margin-right: 8px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    outline: none;
+    cursor: pointer;
+    color: #76cfa6;
+    background-color: #fff;
+}

src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css

@@ -30,7 +30,6 @@ limitations under the License.
 
 .mx_MImageBody_download {
     color: #76cfa6;
-    cursor: pointer;
 }
 
 .mx_MImageBody_download a {

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -36,21 +36,13 @@ limitations under the License.
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
     top: 8px;
-    left: 44px;
+    left: 65px;
 }
 
 .mx_EventTile_continuation {
     padding-top: 0px ! important;
 }
 
-.mx_EventTile_verified {
-    background-color: #eaf5f0;
-}
-
-.mx_EventTile_unverified {
-    background-color: #ffa0a0;
-}
-
 .mx_EventTile .mx_SenderProfile {
     color: #454545;
     opacity: 0.5;
@@ -87,6 +79,10 @@ limitations under the License.
     line-height: 22px;
 }
 
+.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 83px;
+}
+
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px ! important;
@@ -122,6 +118,10 @@ limitations under the License.
     color: #fff;
 }
 
+.mx_EventTile_encrypting {
+    color: #abddbc ! important;
+}
+
 .mx_EventTile_sending {
     color: #ddd;
 }
@@ -227,6 +227,46 @@ limitations under the License.
     overflow-y: hidden;
 }
 
+/* End to end encryption stuff */
+
+.mx_EventTile_e2eIcon {
+    display: block;
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    padding-left: 60px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    border-left: #76cfa5 5px solid;
+}
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    border-left: #e8bf37 5px solid;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
+    left: 3px;
+}
+
+/*
+.mx_EventTile_verified .mx_EventTile_e2eIcon {
+    display: none;
+}
+*/
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
+    display: block;
+    left: 41px;
+}
+
 /* Various markdown overrides */
 
 .mx_EventTile_content .markdown-body {

src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css

@@ -50,7 +50,7 @@ limitations under the License.
 .mx_LinkPreviewWidget_description {
     margin-top: 8px;
     white-space: normal;
-    word-break: break-word;
+    word-wrap: break-word;
 }
 
 .mx_LinkPreviewWidget_cancel {

src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css

@@ -19,6 +19,7 @@ limitations under the License.
     vertical-align: middle;
     margin: auto;
     border-top: 1px solid #e5e5e5;
+    position: relative;
 }
 
 .mx_MessageComposer_autocomplete_wrapper {
@@ -46,6 +47,11 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_MessageComposer_e2eIcon {
+    position: absolute;
+    left: 44px;
+}
+
 .mx_MessageComposer_noperm_error {
     width: 100%;
     height: 60px;

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css

@@ -88,12 +88,14 @@ limitations under the License.
     height: 37px;
     border: 1px solid #979797;
     margin-right: 13px;
+    cursor: pointer;
 }
 
 .mx_RoomSettings .mx_RoomSettings_roomColor_selected {
     position: absolute;
     left: 10px;
     top: 4px;
+    cursor: default ! important;
 }
 
 .mx_RoomSettings .mx_RoomSettings_roomColorPrimary {

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css

@@ -63,7 +63,7 @@ limitations under the License.
     z-index: 2;
 }
 
-.mx_RoomTile_avatar_container:hover:before,
+.mx_RoomTile:hover .mx_RoomTile_avatar_container:before,
 .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
     display: block;
     position: absolute;
@@ -76,7 +76,7 @@ limitations under the License.
     z-index: 4;
 }
 
-.mx_RoomTile_avatar_container:hover:after,
+.mx_RoomTile:hover .mx_RoomTile_avatar_container:after,
 .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after {
     display: block;
     position: absolute;
@@ -90,11 +90,11 @@ limitations under the License.
     z-index: 1;
 }
 
-.collapsed .mx_RoomTile_avatar_container:hover:before {
+.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:before {
     display: none;
 }
 
-.collapsed .mx_RoomTile_avatar_container:hover:after {
+.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:after {
     display: none;
 }
 

src/skins/vector/css/vector-web/structures/RightPanel.css

@@ -46,15 +46,15 @@ limitations under the License.
     margin-top: 6px;
     float: left;
     background-color: #fff;
-    margin-left: -4px;
+    margin-left: 0px;
 }
 
 .mx_RightPanel_headerButton {
     cursor: pointer;
     display: table-cell;
-    vertical-align: middle;
+    vertical-align: top;
-    padding-left: 15px;
+    padding-left: 4px;
-    padding-right: 15px;
+    padding-right: 5px;
     text-align: center;
     position: relative;
 }

src/skins/vector/img/e2e-blocked.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>2805649B-D39D-43EA-A357-659EF9B97BA4</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-301.000000, -328.000000)" fill="#BA6363">
+            <path d="M307,340 C310.313708,340 313,337.313708 313,334 C313,330.686292 310.313708,328 307,328 C303.686292,328 301,330.686292 301,334 C301,337.313708 303.686292,340 307,340 Z M304,333 L310,333 L310,335 L304,335 L304,333 Z" id="blocked_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-unencrypted.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>16F5F38E-A6A3-472A-BC13-13F0F12876CF</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.200000003">
+        <g id="typing-indicator" transform="translate(-301.000000, -141.000000)" fill="#000000">
+            <g id="unencrypted_icon" transform="translate(301.000000, 141.000000)">
+                <g id="Lock-Copy" transform="translate(0.000000, 4.000000)">
+                    <g id="Layer_1">
+                        <polygon id="Shape" points="1.33333333 0.666666667 0 0.666666667 0 8 5 8 10 8 10 0.666666667 8.66666667 0.666666667"></polygon>
+                    </g>
+                </g>
+                <g id="Lock-Copy-2" transform="translate(6.000000, 0.000000)">
+                    <g id="Layer_1">
+                        <path d="M7.66666667,3.66666667 C7.66666667,1.63333333 6.03333333,0 4,0 C1.96666667,0 0.333333333,1.63333333 0.333333333,3.66666667 L0.333333333,4.66666667 L7.66666667,4.66666667 L7.66666667,3.66666667 Z M1.66666667,4.66666667 L1.66666667,3.66666667 C1.66666667,2.36666667 2.7,1.33333333 4,1.33333333 C5.3,1.33333333 6.33333333,2.36666667 6.33333333,3.66666667 L6.33333333,4.66666667 L4,4.66666667 L1.66666667,4.66666667 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-verified.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>48BF5D32-306C-4B20-88EB-24B1F743CAC9</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-301.000000, -172.000000)" fill="#76CFA6">
+            <path d="M309.666667,175.666667 C309.666667,173.633333 308.033333,172 306,172 C303.966667,172 302.333333,173.633333 302.333333,175.666667 L302.333333,176.666667 L301,176.666667 L301,184 L306,184 L311,184 L311,176.666667 L309.666667,176.666667 L309.666667,175.666667 Z M306,176.666667 L303.666667,176.666667 L303.666667,175.666667 C303.666667,174.366667 304.7,173.333333 306,173.333333 C307.3,173.333333 308.333333,174.366667 308.333333,175.666667 L308.333333,176.666667 L306,176.666667 L306,176.666667 Z" id="verified_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-warning.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="15px" height="12px" viewBox="0 0 15 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>CCDDE6F6-B552-48FD-AD54-6939841CA2DD</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-299.000000, -294.000000)" fill="#E9BF37">
+            <path d="M313.568455,304.982113 L306.898576,294.310305 C306.776309,294.117108 306.563606,294 306.334971,294 C306.106335,294 305.893632,294.117108 305.771366,294.310305 L299.101486,304.982113 C298.971497,305.189962 298.966004,305.452367 299.087182,305.665474 C299.20836,305.87858 299.436676,306.008036 299.681766,306.002604 L313.021525,306.002604 C313.260642,305.995965 313.477893,305.861783 313.590891,305.650946 C313.703889,305.440108 313.695328,305.184904 313.568455,304.982113 L313.568455,304.982113 Z M307.018633,304.00164 L305.684657,304.00164 L305.684657,302.667664 L307.018633,302.667664 L307.018633,304.00164 Z M307.018633,301.333689 L305.684657,301.333689 L305.684657,297.998749 L307.018633,297.998749 L307.018633,301.333689 Z" id="unverified_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icons-files.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>7C98C075-AB4D-45A3-85F9-CCD46F84DA7F</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <path d="M0,2.00276013 C0,0.896666251 0.889186576,0 1.99983124,0 L4.84793814,0 C4.84793814,0 9.25,4.54127763 9.25,4.54127763 L9.25,10.9954009 C9.25,12.1025104 8.36307111,13 7.24288777,13 L2.00711223,13 C0.898614756,13 0,12.1064574 0,10.9972399 L0,2.00276013 Z" id="path-1"></path>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.25" height="13" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <path d="M9.28225806,5 L5.82322134,5 C4.97217082,5 4.28225806,4.31002094 4.28225806,3.45903672 L4.28225806,0" id="path-3"></path>
+        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="5" height="5" fill="white">
+            <use xlink:href="#path-3"></use>
+        </mask>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Right-panel/Header" transform="translate(-66.000000, -23.000000)">
+            <g id="icons_files" transform="translate(66.000000, 23.000000)">
+                <g id="Group-5-Copy-2" fill="#76CFA6">
+                    <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7"></path>
+                </g>
+                <g id="Rectangle-5-+-Rectangle-6-Copy-2" transform="translate(8.000000, 6.000000)" stroke="#FFFFFF" stroke-width="2">
+                    <use id="Rectangle-5" mask="url(#mask-2)" opacity="0.8" xlink:href="#path-1"></use>
+                    <use id="Rectangle-6" mask="url(#mask-4)" xlink:href="#path-3"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icons-notifications.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>5E723325-BD0B-454D-BE25-638AF09A97AC</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Right-panel/Header" transform="translate(-100.000000, -23.000000)">
+            <g id="icons_notifications" transform="translate(100.000000, 23.000000)">
+                <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
+                <g id="Group-8" opacity="0.8" transform="translate(7.000000, 4.000000)">
+                    <path d="M5.41666667,16.7222222 C6.38316498,16.7222222 7.16666667,15.9387205 7.16666667,14.9722222 C7.16666667,14.0057239 6.38316498,13.2222222 5.41666667,13.2222222 C4.45016835,13.2222222 3.66666667,14.0057239 3.66666667,14.9722222 C3.66666667,15.9387205 4.45016835,16.7222222 5.41666667,16.7222222 Z" id="Oval-49" stroke="#FFFFFF"></path>
+                    <path d="M1,12.4488669 C1,12.4468729 10.0044225,12.4444444 10.0044225,12.4444444 C10.0024284,12.4444444 10,7.94444444 10,7.94444444 C10,5.46303559 7.98297457,3.44444444 5.5,3.44444444 C3.01859115,3.44444444 1,5.46146988 1,7.94444444 L1,12.4488669 Z M5.5,2.44444444 C8.53756612,2.44444444 11,4.91305916 11,7.94444444 L11,12.4488669 C11,12.9987092 10.555163,13.4444444 10.0044225,13.4444444 L0.995577499,13.4444444 C0.445735229,13.4444444 0,12.9996075 0,12.4488669 L0,7.94444444 C0,4.90687832 2.46861471,2.44444444 5.5,2.44444444 Z" id="Rectangle-15" fill="#FFFFFF"></path>
+                    <path d="M4.27777778,1.83333333 L6.72222222,1.83333333" id="Line" stroke="#FFFFFF" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>