;
}
+ // When collapsed, allow a long hover on the header to show user
+ // the full tag name and room count
+ var title;
+ if (this.props.collapsed) {
+ title = this.props.label;
+ if (roomCount !== '') {
+ title += " [" + roomCount + "]";
+ }
+ }
+
return (
-
diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js
index 2f5de837..bbed5df8 100644
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -18,42 +18,79 @@ limitations under the License.
var React = require('react');
var ReactDOM = require('react-dom');
-
var dis = require('matrix-react-sdk/lib/dispatcher');
module.exports = React.createClass({
displayName: 'RoomTooltip',
- componentDidMount: function() {
- var tooltip = ReactDOM.findDOMNode(this);
- if (!this.props.bottom) {
- // tell the roomlist about us so it can position us
- dis.dispatch({
- action: 'view_tooltip',
- tooltip: tooltip,
- });
- }
- else {
- tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px";
- tooltip.style.display = "block";
- }
+ propTypes: {
+ // Alllow the tooltip to be styled by the parent element
+ className: React.PropTypes.string.isRequired,
+ // The tooltip is derived from either the room name or a label
+ room: React.PropTypes.object,
+ label: React.PropTypes.string,
},
+ // Create a wrapper for the tooltip outside the parent and attach it to the body element
+ componentDidMount: function() {
+ this.tooltipContainer = document.createElement("div");
+ this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
+ document.body.appendChild(this.tooltipContainer);
+
+ this._renderTooltip();
+ },
+
+ componentDidUpdate: function() {
+ this._renderTooltip();
+ },
+
+ // Remove the wrapper element, as the tooltip has finished using it
componentWillUnmount: function() {
- if (!this.props.bottom) {
- dis.dispatch({
- action: 'view_tooltip',
- tooltip: null,
- });
- }
+ dis.dispatch({
+ action: 'view_tooltip',
+ tooltip: null,
+ parent: null,
+ });
+
+ ReactDOM.unmountComponentAtNode(this.tooltipContainer);
+ document.body.removeChild(this.tooltipContainer);
+ },
+
+ _renderTooltip: function() {
+ var label = this.props.room ? this.props.room.name : this.props.label;
+
+ // Add the parent's position to the tooltips, so it's correctly
+ // positioned, also taking into account any window zoom
+ // NOTE: The additional 6 pixels for the left position, is to take account of the
+ // tooltips chevron
+ var parent = ReactDOM.findDOMNode(this);
+ var style = {};
+ style.top = parent.getBoundingClientRect().top + window.pageYOffset;
+ style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
+ style.display = "block";
+
+ var tooltip = (
+
+
+ { label }
+
+ );
+
+ // Render the tooltip manually, as we wish it not to be rendered within the parent
+ this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
+
+ // Tell the roomlist about us so it can manipulate us if it wishes
+ dis.dispatch({
+ action: 'view_tooltip',
+ tooltip: this.tooltip,
+ parent: parent,
+ });
},
render: function() {
- var label = this.props.room ? this.props.room.name : this.props.label;
+ // Render a placeholder
return (
-
-
- { label }
+
);
}
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
index 9eb67c3c..d6047ae8 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -64,6 +64,11 @@ input[type=text]:focus, textarea:focus {
box-shadow: none;
}
+/* Required by Firefox */
+textarea {
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+
/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
border: 0;
@@ -198,14 +203,15 @@ input[type=text]:focus, textarea:focus {
height: 36px;
border-radius: 40px;
border: solid 1px #76cfa6;
- font-weight: 400;
- font-size: 15px;
+ 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;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
new file mode 100644
index 00000000..9bd9934e
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
@@ -0,0 +1,83 @@
+/*
+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.
+*/
+
+/* Using a textarea for this element, to circumvent autofill */
+.mx_ChatInviteDialog_input,
+.mx_ChatInviteDialog_input:focus
+{
+ height: 26px;
+ font-size: 14px;
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+ padding-left: 12px;
+ padding-right: 12px;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: 0 !important;
+ width: 1000%; /* Pretend that this is an "input type=text" */
+ resize: none;
+ overflow: hidden;
+ vertical-align: middle;
+ box-sizing: border-box;
+ word-wrap: nowrap;
+}
+
+.mx_ChatInviteDialog_inputContainer {
+ border-radius: 3px;
+ border: solid 1px #f0f0f0;
+ line-height: 36px;
+ padding-left: 4px;
+ padding-right: 4px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ overflow: hidden;
+}
+
+.mx_ChatInviteDialog_queryList {
+ position: absolute;
+ background-color: #fff;
+ width: 470px;
+ max-height: 116px;
+ overflow-y: scroll;
+ border-radius: 3px;
+ background-color: #fff;
+ border: solid 1px #76cfa6;
+ cursor: pointer;
+}
+
+.mx_ChatInviteDialog_queryListElement .mx_AddressTile {
+ background-color: #fff;
+ border: solid 1px #fff;
+}
+
+.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected {
+ background-color: #eaf5f0; /* selected colour */
+}
+
+.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile {
+ background-color: #eaf5f0; /* selected colour */
+ border: solid 1px #eaf5f0; /* selected colour */
+}
+
+.mx_ChatInviteDialog_cancel {
+ position: absolute;
+ right: 11px;
+ top: 13px;
+ cursor: pointer;
+}
+
+.mx_ChatInviteDialog_cancel object {
+ pointer-events: none;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
new file mode 100644
index 00000000..5e22ccaf
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
@@ -0,0 +1,83 @@
+/*
+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_AddressTile {
+ display: inline-block;
+ border-radius: 3px;
+ background-color: rgba(74, 73, 74, 0.1);
+ border: solid 1px #f0f0f0;
+ line-height: 26px;
+ color: #454545;
+ font-size: 14px;
+ font-weight: normal;
+}
+
+.mx_AddressTile_network {
+ display: inline-block;
+ position: relative;
+ padding-left: 2px;
+ padding-right: 4px;
+ vertical-align: middle;
+}
+
+.mx_AddressTile_avatar {
+ display: inline-block;
+ position: relative;
+ padding-left: 2px;
+ padding-right: 7px;
+ vertical-align: middle;
+}
+
+.mx_AddressTile_name {
+ display: inline-block;
+ padding-right: 4px;
+ font-weight: 600;
+ overflow: hidden;
+ height: 26px;
+ vertical-align: middle;
+}
+
+.mx_AddressTile_name.mx_AddressTile_justified {
+ width: 180px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+
+.mx_AddressTile_id {
+ display: inline-block;
+ padding-right: 11px;
+}
+
+.mx_AddressTile_id.mx_AddressTile_justified {
+ width: 200px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+}
+
+.mx_AddressTile_dismiss {
+ display: inline-block;
+ padding-right: 11px;
+ padding-left: 1px;
+ cursor: pointer;
+}
+
+.mx_AddressTile_dismiss object {
+ pointer-events: none;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
index 171482a3..f0b3c046 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
@@ -20,3 +20,20 @@
.mx_Markdown_ITALIC {
font-style: italic;
}
+
+.mx_Markdown_CODE {
+ padding: .2em 0;
+ margin: 0;
+ font-size: 85%;
+ background-color: rgba(0,0,0,.04);
+ border-radius: 3px;
+}
+
+.mx_Markdown_HR {
+ display: block;
+ background: #e7e7e7;
+}
+
+.mx_Markdown_STRIKETHROUGH {
+ text-decoration: line-through;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
index 4eef01ce..bba31e3d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
@@ -15,14 +15,9 @@ limitations under the License.
*/
.mx_MemberDeviceInfo {
- font-size: 12px;
- display: table-row;
- height: 17px;
+ padding: 10px 0px;
}
-.mx_MemberDeviceInfo div {
- display: table-cell;
-}
.mx_MemberDeviceInfo_textButton {
color: #fff;
@@ -33,25 +28,25 @@ limitations under the License.
padding-right: 1em;
cursor: pointer;
+ display: inline;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
- color: #fff;
width: 17px;
border-radius: 17px;
text-align: center;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
- background-color: #76cfa6;
+ color: #76cfa6;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
- background-color: #eca46f;
+ color: #b2b2b2;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
- background-color: #e55e5e;
+ color: #e55e5e;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
index 57da9faa..4c608815 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
@@ -73,8 +73,3 @@ limitations under the License.
margin-left: 8px;
line-height: 23px;
}
-
-.mx_MemberInfo_devices {
- display: table;
- border-spacing: 5px;
-}
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
index 9dd93b80..45bc39cf 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
@@ -57,20 +57,31 @@ limitations under the License.
.mx_MessageComposer_input {
flex: 1;
vertical-align: middle;
- min-height: 60px;
- max-height: 120px;
display: flex;
- align-items: center;
- overflow: auto;
+ flex-direction: column;
+ min-height: 60px;
+ justify-content: center;
+ align-items: flex-start;
font-size: 14px;
margin-right: 6px;
}
-.mx_MessageComposer_input_rte {
- border-top: 2px solid #76cfa6; /* placeholder RTE indicator */
+
+.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root {
+ display: none;
}
.mx_MessageComposer_input .DraftEditor-root {
+ width: 100%;
flex: 1;
+ max-height: 120px;
+ overflow: auto;
+}
+
+.mx_MessageComposer_input blockquote {
+ color: rgb(119, 119, 119);
+ margin: 0 0 16px;
+ padding: 0 15px;
+ border-left: 4px solid rgb(221, 221, 221);
}
.mx_MessageComposer_input textarea {
@@ -88,7 +99,8 @@ limitations under the License.
color: #454545;
background-color: #fff;
font-size: 14px;
-
+ max-height: 120px;
+ overflow: auto;
/* needed for FF */
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
}
@@ -122,3 +134,59 @@ limitations under the License.
pointer-events: none;
}
+.mx_MessageComposer_formatting {
+ cursor: pointer;
+ margin: 0 11px;
+}
+
+.mx_MessageComposer_formatbar_wrapper {
+ width: 100%;
+ background-color: #f7f7f7;
+ box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+
+.mx_MessageComposer_formatbar {
+ margin: auto;
+ max-width: 960px;
+ display: flex;
+
+ height: 30px;
+
+ box-sizing: border-box;
+ padding-left: 62px;
+
+ flex-direction: row;
+ align-items: center;
+ font-size: 10px;
+ color: #888;
+}
+
+.mx_MessageComposer_formatbar * {
+ margin-right: 4px;
+}
+
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+ cursor: pointer;
+}
+
+.mx_MessageComposer_format_button_disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.mx_MessageComposer_formatbar_cancel {
+ margin-right: 22px;
+}
+
+.mx_MessageComposer_formatbar_markdown {
+ margin-right: 64px;
+}
+
+.mx_MessageComposer_input_markdownIndicator {
+ cursor: pointer;
+ height: 10px;
+ padding: 4px 4px 4px 0;
+ opacity: 0.8;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index 25456503..2f1da5b2 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -22,6 +22,14 @@ limitations under the License.
height: 34px;
}
+.mx_RoomTile_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -62px;
+ left: 46px;
+}
+
+
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
@@ -113,7 +121,7 @@ limitations under the License.
min-width: 12px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
- z-index: 200;
+ z-index: 3;
}
/* Hide the bottom of speech bubble */
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index fb023ffe..12991fc2 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -80,21 +80,21 @@ limitations under the License.
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
-.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_people,
.mx_LeftPanel .mx_BottomLeftMenu_settings {
display: inline-block;
cursor: pointer;
}
.collapsed .mx_BottomLeftMenu_createRoom,
-.collapsed .mx_BottomLeftMenu_directory,
+.collapsed .mx_BottomLeftMenu_people,
.collapsed .mx_BottomLeftMenu_settings {
margin-left: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
-.mx_LeftPanel .mx_BottomLeftMenu_directory {
+.mx_LeftPanel .mx_BottomLeftMenu_people {
margin-left: 10px;
}
@@ -105,3 +105,10 @@ limitations under the License.
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
+
+.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -25px;
+ left: 6px;
+}
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 4d9b0668..fef04416 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -39,7 +39,7 @@ limitations under the License.
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
- background-color: rgba(118, 207, 166, 0.2);
+ background-color: rgba(118, 207, 166, 0.2); /* Should be #d3ede1, but not a magic colour */
border-top: solid 2px #eaf5f0;
}
@@ -90,9 +90,11 @@ limitations under the License.
background-color: #76cfa6;
}
+/*
.collapsed .mx_RoomSubList_badge {
display: none;
}
+*/
.mx_RoomSubList_badgeHighlight {
background-color: #ff0064;
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
index deb8cd3f..bf69f9e7 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@@ -16,17 +16,37 @@ limitations under the License.
.mx_RoomTooltip_chevron {
position: absolute;
- left: -9px;
- top: 7px;
+ left: -8px;
+ top: 4px;
+ width: 0;
+ height: 0;
+ border-top: 8px solid transparent;
+ border-right: 8px solid rgba(187, 187, 187, 0.5);
+ border-bottom: 8px solid transparent;
+}
+
+.mx_RoomTooltip_chevron:after{
+ content:'';
+ width: 0;
+ height: 0;
+ border-top: 7px solid transparent;
+ border-right: 7px solid #fff;
+ border-bottom: 7px solid transparent;
+ position:absolute;
+ top: -7px;
+ left: 1px;
}
.mx_RoomTooltip {
display: none;
position: fixed;
- border: 1px solid #a4a4a4;
- border-radius: 8px;
+ border: 1px solid rgba(187, 187, 187, 0.5);
+ border-radius: 5px;
background-color: #fff;
z-index: 2000;
- left: 52px;
- padding: 6px;
+ padding: 5px;
+ pointer-events: none;
+ line-height: 14px;
+ font-size: 13px;
}
+
diff --git a/src/skins/vector/img/button-md-false.png b/src/skins/vector/img/button-md-false.png
new file mode 100644
index 00000000..6debbccc
Binary files /dev/null and b/src/skins/vector/img/button-md-false.png differ
diff --git a/src/skins/vector/img/button-md-false.svg b/src/skins/vector/img/button-md-false.svg
new file mode 100644
index 00000000..6414933d
--- /dev/null
+++ b/src/skins/vector/img/button-md-false.svg
@@ -0,0 +1,29 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-md-false@2x.png b/src/skins/vector/img/button-md-false@2x.png
new file mode 100644
index 00000000..497f5385
Binary files /dev/null and b/src/skins/vector/img/button-md-false@2x.png differ
diff --git a/src/skins/vector/img/button-md-false@3x.png b/src/skins/vector/img/button-md-false@3x.png
new file mode 100644
index 00000000..1184e6b3
Binary files /dev/null and b/src/skins/vector/img/button-md-false@3x.png differ
diff --git a/src/skins/vector/img/button-md-true.png b/src/skins/vector/img/button-md-true.png
new file mode 100644
index 00000000..2e39c55e
Binary files /dev/null and b/src/skins/vector/img/button-md-true.png differ
diff --git a/src/skins/vector/img/button-md-true.svg b/src/skins/vector/img/button-md-true.svg
new file mode 100644
index 00000000..2acc4f67
--- /dev/null
+++ b/src/skins/vector/img/button-md-true.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-md-true@2x.png b/src/skins/vector/img/button-md-true@2x.png
new file mode 100644
index 00000000..ad9067f3
Binary files /dev/null and b/src/skins/vector/img/button-md-true@2x.png differ
diff --git a/src/skins/vector/img/button-md-true@3x.png b/src/skins/vector/img/button-md-true@3x.png
new file mode 100644
index 00000000..d615867d
Binary files /dev/null and b/src/skins/vector/img/button-md-true@3x.png differ
diff --git a/src/skins/vector/img/button-text-bold-o-n.svg b/src/skins/vector/img/button-text-bold-o-n.svg
new file mode 100644
index 00000000..161e740e
--- /dev/null
+++ b/src/skins/vector/img/button-text-bold-o-n.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-bold.svg b/src/skins/vector/img/button-text-bold.svg
new file mode 100644
index 00000000..0fd0baa0
--- /dev/null
+++ b/src/skins/vector/img/button-text-bold.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-bullet-o-n.svg b/src/skins/vector/img/button-text-bullet-o-n.svg
new file mode 100644
index 00000000..d4a40e88
--- /dev/null
+++ b/src/skins/vector/img/button-text-bullet-o-n.svg
@@ -0,0 +1,20 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-bullet.svg b/src/skins/vector/img/button-text-bullet.svg
new file mode 100644
index 00000000..ae3e640d
--- /dev/null
+++ b/src/skins/vector/img/button-text-bullet.svg
@@ -0,0 +1,20 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-code-o-n.svg b/src/skins/vector/img/button-text-code-o-n.svg
new file mode 100644
index 00000000..8d1439c9
--- /dev/null
+++ b/src/skins/vector/img/button-text-code-o-n.svg
@@ -0,0 +1,25 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-code.svg b/src/skins/vector/img/button-text-code.svg
new file mode 100644
index 00000000..24026cb7
--- /dev/null
+++ b/src/skins/vector/img/button-text-code.svg
@@ -0,0 +1,25 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-formatting.svg b/src/skins/vector/img/button-text-formatting.svg
new file mode 100644
index 00000000..d3fc3f5f
--- /dev/null
+++ b/src/skins/vector/img/button-text-formatting.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-italic-o-n.svg b/src/skins/vector/img/button-text-italic-o-n.svg
new file mode 100644
index 00000000..15fe5885
--- /dev/null
+++ b/src/skins/vector/img/button-text-italic-o-n.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-italic.svg b/src/skins/vector/img/button-text-italic.svg
new file mode 100644
index 00000000..b5722e82
--- /dev/null
+++ b/src/skins/vector/img/button-text-italic.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-numbullet-o-n.svg b/src/skins/vector/img/button-text-numbullet-o-n.svg
new file mode 100644
index 00000000..869a2c2c
--- /dev/null
+++ b/src/skins/vector/img/button-text-numbullet-o-n.svg
@@ -0,0 +1,20 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-numbullet.svg b/src/skins/vector/img/button-text-numbullet.svg
new file mode 100644
index 00000000..8e5b8b87
--- /dev/null
+++ b/src/skins/vector/img/button-text-numbullet.svg
@@ -0,0 +1,20 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-quote-o-n.svg b/src/skins/vector/img/button-text-quote-o-n.svg
new file mode 100644
index 00000000..f8a86125
--- /dev/null
+++ b/src/skins/vector/img/button-text-quote-o-n.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-quote.svg b/src/skins/vector/img/button-text-quote.svg
new file mode 100644
index 00000000..d70c261f
--- /dev/null
+++ b/src/skins/vector/img/button-text-quote.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-strike-o-n.svg b/src/skins/vector/img/button-text-strike-o-n.svg
new file mode 100644
index 00000000..2914fcab
--- /dev/null
+++ b/src/skins/vector/img/button-text-strike-o-n.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-strike.svg b/src/skins/vector/img/button-text-strike.svg
new file mode 100644
index 00000000..5f262dc3
--- /dev/null
+++ b/src/skins/vector/img/button-text-strike.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-underline-o-n.svg b/src/skins/vector/img/button-text-underline-o-n.svg
new file mode 100644
index 00000000..870be3ce
--- /dev/null
+++ b/src/skins/vector/img/button-text-underline-o-n.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/button-text-underline.svg b/src/skins/vector/img/button-text-underline.svg
new file mode 100644
index 00000000..26f44853
--- /dev/null
+++ b/src/skins/vector/img/button-text-underline.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/icon-address-delete.svg b/src/skins/vector/img/icon-address-delete.svg
new file mode 100644
index 00000000..1289d5aa
--- /dev/null
+++ b/src/skins/vector/img/icon-address-delete.svg
@@ -0,0 +1,15 @@
+
+
diff --git a/src/skins/vector/img/icon-text-cancel.svg b/src/skins/vector/img/icon-text-cancel.svg
new file mode 100644
index 00000000..ce28d128
--- /dev/null
+++ b/src/skins/vector/img/icon-text-cancel.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/src/skins/vector/img/icon_context_person.svg b/src/skins/vector/img/icon_context_person.svg
new file mode 100644
index 00000000..fff019d3
--- /dev/null
+++ b/src/skins/vector/img/icon_context_person.svg
@@ -0,0 +1,85 @@
+
+
diff --git a/src/skins/vector/img/icon_context_person_on.svg b/src/skins/vector/img/icon_context_person_on.svg
new file mode 100644
index 00000000..36294433
--- /dev/null
+++ b/src/skins/vector/img/icon_context_person_on.svg
@@ -0,0 +1,85 @@
+
+
diff --git a/src/skins/vector/img/icons-close-button.svg b/src/skins/vector/img/icons-close-button.svg
new file mode 100644
index 00000000..f17940f5
--- /dev/null
+++ b/src/skins/vector/img/icons-close-button.svg
@@ -0,0 +1,15 @@
+
+
diff --git a/src/skins/vector/img/icons-people.svg b/src/skins/vector/img/icons-people.svg
index d6867a3f..88545061 100644
--- a/src/skins/vector/img/icons-people.svg
+++ b/src/skins/vector/img/icons-people.svg
@@ -1,9 +1,22 @@
-
-
-