basic VoIP lipstick

skins/base/css/molecules/MessageComposer.css

@@ -53,7 +53,7 @@ limitations under the License.
 .mx_MessageComposer_input textarea {
     font-size: 15px;
     width: 100%;
-    height: 1em;
+    height: 1.2em;
     padding-top: 0.7em;
     padding-bottom: 0.7em;
     border: 0px;
@@ -65,8 +65,6 @@ limitations under the License.
 
     /* needed for FF */
     font-family: 'Lato', Helvetica, Arial, Sans-Serif;
-    font-weight: 300;
-    font-size: 15px;    
 }
 
 /* hack for FF as vertical alignment of custom placeholder text is broken */

skins/base/css/molecules/voip/VideoView.css

@@ -13,3 +13,28 @@ 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_VideoView {
+    width: 100%;
+    position: relative;
+    z-index: 30;
+    margin-top: 12px;
+}
+
+.mx_VideoView video {
+    width: 100%;
+}
+
+.mx_VideoView_remoteVideoFeed {
+    width: 100%;
+    border-bottom: 12px solid #f3f8fa;
+    background-color: #000;
+}
+
+.mx_VideoView_localVideoFeed {
+    width: 20%;
+    position: absolute;
+    left: 16px;
+    bottom: 28px;
+    z-index: 100;
+}

skins/base/css/organisms/LeftPanel.css

@@ -60,6 +60,10 @@ limitations under the License.
     color: #378bb4;
 }
 
+.mx_LeftPanel .mx_DirectoryMenu .mx_RoomTile_avatar {
+    padding-left: 14px;
+}
+
 .mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options {
     margin-top: 12px;
     width: 100%;

skins/base/css/organisms/RoomView.css

@@ -50,7 +50,6 @@ limitations under the License.
     max-width: 720px;
     width: 100%;
     margin: auto;
-    height: 0%;
 }
 
 .mx_RoomView_messagePanel {
@@ -62,7 +61,7 @@ limitations under the License.
 
     width: 100%;
     height: 100%;
-    margin-top: 1px;
+    margin-top: 18px;
     margin-bottom: 18px;
 
     overflow-y: scroll;

skins/base/views/molecules/voip/VideoView.js

@@ -37,12 +37,12 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div>
-                <div>
-                <VideoFeed ref="remote"/>
+            <div className="mx_VideoView">
+                <div className="mx_VideoView_remoteVideoFeed">
+                    <VideoFeed ref="remote"/>
                 </div>
-                <div>
-                <VideoFeed ref="local"/>
+                <div className="mx_VideoView_localVideoFeed">                
+                    <VideoFeed ref="local"/>
                 </div>
             </div>
         );