ui minor fixes

build/segmentrtc.html

@@ -42,6 +42,8 @@
             position: relative;
         }
         .main-background {
+	          display: flex;
+	          flex-direction: column;
             height: 100%;
             background: url(/img/back.jpg);
             background-size: cover;
@@ -60,13 +62,13 @@
             color: #fff;
         }
         .main-background .p {
-            margin-top: 24px;
+            margin-top: 9px;
         }
 
         .top-bar {
             height: 64px;
             background: #1E143A;
-            padding: 21px 44px;
+            padding: 16px 44px;
             box-sizing: border-box;
 
         }
@@ -77,7 +79,7 @@
         .button {
             box-sizing: border-box;
             border-radius: 20px;
-            padding: 4px 20px;
+            padding: 6px 20px;
             margin-left: 16px;
             cursor: pointer;
         }
@@ -100,10 +102,16 @@
             margin-top: 40px;
         }
         .sub-content {
-            position: absolute;
-            left: 12.4%;
-            top: 50%;
-            transform: translateY(-50%);
+            position: relative;
+            margin: auto;
+	          box-sizing: border-box;
+	          padding: 20px;
+	          width: 100%;
+	          max-width: 1124px;
+            /*position: absolute;*/
+            /*left: 12.4%;*/
+            /*top: 50%;*/
+            /*transform: translateY(-50%);*/
         }
         .main-background .button {
             margin-right: 16px;
@@ -119,6 +127,7 @@
             border: 0;
             border-bottom: 2px solid #594CD7;
             width: 366px;
+            min-height: 34px;
             position: relative;
             text-align: left;
             padding: 4px;
@@ -129,6 +138,7 @@
         button.dropdown-field__toggler:after {
             content: '▼';
             position: absolute;
+            top: 3px;
             right: 10px;
             font-family: arial;
             font-size: 10px;
@@ -150,8 +160,17 @@
             border-bottom: 2px solid #594CD7;
 
         }
+        .page-content {
+	          display: flex;
+	          flex-direction: column;
+            height: 100%;
+        }
         .content {
-            margin: 112px 178px;
+            margin: auto;
+	          box-sizing: border-box;
+	          padding: 20px;
+            width: 100%;
+	          max-width: 1124px;
         }
         .block {
             margin-bottom: 40px;

build/view/CallScreen.js

@@ -105,7 +105,7 @@ Screen.Conference = function() {
 
 		var cameraCanvas, canvasResizerEl,
 			dom = D.div( { cls: 'block', style: { marginBottom: '80px' } },
-				D.div( { cls: 'header' }, 'User ' + ( currentUserID + 1 ) ),
+				D.div( { cls: 'header' }, 'Camera ' + ( currentUserID + 1 ) ),
 				canvasResizerEl = CanvasResizer(
 					cameraCanvas = D.h( 'canvas', {
 						cls: "output_canvas",
@@ -250,11 +250,13 @@ Screen.Conference = function() {
 		return dom;
 	}
 	var usersBlock, tooMuchUsers = new Store.Value.Boolean(false);
-	var dom = D.div({cls: 'top-bar'},
+	var dom = D.div({cls: 'page-content'},
+    D.div({cls: 'top-bar'},
       D.h('img', {src: 'amazon-logo.svg'}),
       D.div({cls: 'buttons'},
         D.h('button', {cls: ['button secondary', {hidden: Store.NOT(isConnected)}], onclick: ()=>store.set('connection', false)}, 'End session'),
         D.h('button', {cls: ['button primary', {hidden: isConnected}], onclick: ()=>store.set('connection', true)}, 'Ready to connect')
+      )
     ),
 		content = D.div({cls: 'content'},
 
@@ -274,7 +276,7 @@ Screen.Conference = function() {
 					if(userID > 1)
 						tooMuchUsers.set(true);
 				}
-			}, 'Add user'),
+			}, 'Add camera'),
 
 
 		D.div({cls: 'block hidden'},