Multiple UI Improvements (#4200)

* Multiple UI Improvements

* Adjusting return to call position on mobile

webapp/sass/components/_modal.scss

@@ -124,10 +124,14 @@
             margin-left: auto;
             margin-right: auto;
             max-width: 95%;
+
+            &.modal-xl {
+                width: 800px;
+            }
         }
 
         .modal-push-down {
-            margin-top: 5%;
+            margin-top: 60px;
         }
 
         .modal-next-bar {

webapp/sass/components/_suggestion-list.scss

@@ -56,7 +56,6 @@
     }
 
     > span {
-        @include opacity(.7);
         display: inline-block;
         font-size: .9em;
         padding: 0 10px 0 5px;

webapp/sass/components/_webrtc.scss

@@ -20,12 +20,18 @@
 .webrtc__notification--rhs {
     background: $button--ready;
     border-radius: 3px 0 0 3px;
-    bottom: -5px;
     color: $white;
     cursor: pointer;
+    left: 50%;
+    margin-left: -150px;
+    overflow: hidden;
     padding: 10px 15px;
     position: absolute;
-    right: 0;
+    text-align: center;
+    text-overflow: ellipsis;
+    top: 0;
+    white-space: nowrap;
+    width: 300px;
     z-index: 9999;
 
     &:empty {
@@ -41,6 +47,14 @@
     padding: 0 20px;
     text-align: center;
 
+    .sidebar--right--expanded & {
+        bottom: 80px;
+        padding: 0 20px;
+        position: absolute;
+        text-align: center;
+        width: 100%;
+    }
+
     .form-group {
         padding: 0 20px;
         position: relative;
@@ -55,7 +69,6 @@
         font-weight: normal;
         margin: 1em 0 -1em;
         padding: .7em 1em;
-        width: 100%;
     }
 
     .has-error {
@@ -63,6 +76,14 @@
             color: #a94442;
             font-size: .95em;
 
+            &.warning {
+                color: #444;
+
+                &:before {
+                    display: none;
+                }
+            }
+
             &:before {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
@@ -81,6 +102,7 @@
 #videos {
     background: $black;
     font-size: 0;
+    height: 300px;
     left: 0;
     pointer-events: none;
     position: relative;
@@ -89,6 +111,10 @@
     width: 100%;
 
     #main-video video {
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
         width: 100%;
     }
 
@@ -102,6 +128,16 @@
         transition: opacity 1s;
         z-index: 2;
 
+        &.full {
+            background: $black;
+            border: none;
+            height: 80%;
+            max-width: 100% !important;
+            right: 0;
+            top: 0;
+            width: 100%;
+        }
+
         video {
             -moz-transform: scale(-1, 1);
             -ms-transform: scale(-1, 1);

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,13 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .webrtc__notification--rhs {
+        left: auto;
+        right: 0;
+        top: 47px;
+        width: 205px;
+    }
+
     .filtered-user-list {
         max-height: 65vh !important;
     }