implement bottom-right call button

src/skins/vector/css/common.css

@@ -58,7 +58,7 @@ a:visited {
 }
 
 .mx_ContextualMenu {
-    border: 1px solid #a9dbf4;
+    border: 1px solid #a4a4a4;
     border-radius: 8px;
     background-color: #fff;
     color: #747474;
@@ -160,7 +160,7 @@ a:visited {
 .mx_QuestionDialogTitle {
     min-height: 16px;
     padding: 12px;
-    border-bottom: 1px solid #a9dbf4;
+    border-bottom: 1px solid #a4a4a4;
     font-weight: bold;
     font-size: 20px;
     line-height: 1.4;

src/skins/vector/css/molecules/EventTile.css

@@ -97,7 +97,7 @@ limitations under the License.
     visibility: hidden;
     border: 0px;
     outline: none;
-    margin-top: 3px;
+    margin-bottom: 3px;
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton {

src/skins/vector/css/molecules/MessageComposer.css

@@ -75,13 +75,19 @@ limitations under the License.
     color: #76cfa6;
 }
 
-.mx_MessageComposer_upload {
+.mx_MessageComposer_upload,
+.mx_MessageComposer_call {
     display: table-cell;
     vertical-align: middle;
-    padding-right: 15px;
+    padding-right: 20px;
     cursor: pointer;
 }
 
+.mx_MessageComposer_call {
+    padding-right: 10px;
+    padding-top: 3px;
+}
+
 .mx_MessageComposer_upload img {
     margin-top: 5px;
 }

src/skins/vector/css/molecules/RoomTooltip.css

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_RoomTooltip {
     display: none;
     position: fixed;
-    border: 1px solid #a9dbf4;
+    border: 1px solid #a4a4a4;
     border-radius: 8px;
     background-color: #fff;
     z-index: 1000;

src/skins/vector/css/molecules/voip/IncomingCallbox.css

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_IncomingCallBox {
     text-align: center;
-    border: 1px solid #a9dbf4;
+    border: 1px solid #a4a4a4;
     border-radius: 8px;
     background-color: #fff;
     position: absolute;

src/skins/vector/views/molecules/MessageComposer.js

@@ -22,6 +22,7 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var MessageComposerController = require('matrix-react-sdk/lib/controllers/molecules/MessageComposer')
 
 var sdk = require('matrix-react-sdk')
+var dis = require('matrix-react-sdk/lib/dispatcher')
 
 module.exports = React.createClass({
     displayName: 'MessageComposer',
@@ -40,6 +41,14 @@ module.exports = React.createClass({
         this.refs.uploadInput.getDOMNode().value = null;
     },
 
+    onCallClick: function(ev) {
+        dis.dispatch({
+            action: 'place_call',
+            type: ev.shiftKey ? "screensharing" : "video",
+            room_id: this.props.room.roomId
+        });
+    },
+
     render: function() {
         var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
         var uploadInputStyle = {display: 'none'};
@@ -58,6 +67,9 @@ module.exports = React.createClass({
                             <img src="img/upload.png" width="17" height="22"/>
                             <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
                         </div>
+                        <div className="mx_MessageComposer_call" onClick={this.onCallClick}>
+                            <img src="img/call.png" width="28" height="20"/>
+                        </div>
                     </div>
                 </div>
             </div>