From aa4f9abd5c6616a432f86cac4969b9444639ecd7 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 18 Jul 2015 02:04:58 +0100
Subject: [PATCH] basic VoIP lipstick

---
 skins/base/css/molecules/MessageComposer.css |  4 +---
 skins/base/css/molecules/voip/VideoView.css  | 25 ++++++++++++++++++++
 skins/base/css/organisms/LeftPanel.css       |  4 ++++
 skins/base/css/organisms/RoomView.css        |  3 +--
 skins/base/views/molecules/voip/VideoView.js | 10 ++++----
 5 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/skins/base/css/molecules/MessageComposer.css b/skins/base/css/molecules/MessageComposer.css
index 9a4cd29af6..167860ffa3 100644
--- a/skins/base/css/molecules/MessageComposer.css
+++ b/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 */
diff --git a/skins/base/css/molecules/voip/VideoView.css b/skins/base/css/molecules/voip/VideoView.css
index fd88ee27f7..bec36ebe56 100644
--- a/skins/base/css/molecules/voip/VideoView.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css
index 7101d2e3ed..ac10942d2a 100644
--- a/skins/base/css/organisms/LeftPanel.css
+++ b/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%;
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 44a91e19e9..1fcb86e428 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/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;
diff --git a/skins/base/views/molecules/voip/VideoView.js b/skins/base/views/molecules/voip/VideoView.js
index 954ad3648f..19ad17a7a7 100644
--- a/skins/base/views/molecules/voip/VideoView.js
+++ b/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>
         );