Multiple UI Improvements (#4200)

* Multiple UI Improvements

* Adjusting return to call position on mobile

7 files changed, 64 insertions, 12 deletions

diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx
index 2ab4ec35f..44050bb12 100644
--- a/webapp/components/edit_post_modal.jsx
+++ b/webapp/components/edit_post_modal.jsx
@@ -206,7 +206,7 @@ export default class EditPostModal extends React.Component {
                 tabIndex='-1'
                 aria-hidden='true'
             >
-                <div className='modal-dialog modal-push-down'>
+                <div className='modal-dialog modal-push-down modal-xl'>
                     <div className='modal-content'>
                         <div className='modal-header'>
                             <button
diff --git a/webapp/components/webrtc/webrtc_controller.jsx b/webapp/components/webrtc/webrtc_controller.jsx
index e609e4fdb..40b5dc9c2 100644
--- a/webapp/components/webrtc/webrtc_controller.jsx
+++ b/webapp/components/webrtc/webrtc_controller.jsx
@@ -97,6 +97,7 @@ export default class WebrtcController extends React.Component {
             isAnswering: false,
             callInProgress: false,
             error: null,
+            errorType: '',
             ended: null
         };
     }
@@ -155,7 +156,7 @@ export default class WebrtcController extends React.Component {
 
     clearError() {
         setTimeout(() => {
-            this.setState({error: null, ended: null});
+            this.setState({error: null, ended: null, errorType: ''});
         }, Constants.WEBRTC_CLEAR_ERROR_DELAY);
     }
 
@@ -296,7 +297,8 @@ export default class WebrtcController extends React.Component {
                         id='webrtc.inProgress'
                         defaultMessage='You have a call in progress. Please hangup first.'
                     />
-                )
+                ),
+                errorType: ' warning'
             });
             this.clearError();
             break;
@@ -381,7 +383,8 @@ export default class WebrtcController extends React.Component {
                         id='webrtc.inProgress'
                         defaultMessage='You have a call in progress. Please hangup first.'
                     />
-                )
+                ),
+                errorType: ' warning'
             });
         } else if (this.state.isCalling) {
             this.handleCancelOffer();
@@ -1054,6 +1057,7 @@ export default class WebrtcController extends React.Component {
         let localImage;
         let localVideoHidden;
         let remoteVideoHidden = 'hidden';
+        let remoteVideoHiddenLocal = 'full';
         let error;
         let remoteMute;
         let videoClass = '';
@@ -1064,7 +1068,7 @@ export default class WebrtcController extends React.Component {
             error = (
                 <div className='webrtc__error'>
                     <div className='form-group has-error'>
-                        <label className='control-label'>{this.state.error}</label>
+                        <label className={'control-label' + this.state.errorType}>{this.state.error}</label>
                     </div>
                 </div>
             );
@@ -1144,9 +1148,11 @@ export default class WebrtcController extends React.Component {
 
             if (this.state.isRemotePaused) {
                 remoteVideoHidden = 'hidden';
+                remoteVideoHiddenLocal = 'full';
                 remoteImageHidden = 'webrtc__remote-image';
             } else {
                 remoteVideoHidden = '';
+                remoteVideoHiddenLocal = '';
                 remoteImageHidden = 'webrtc__remote-image hidden';
             }
         } else {
@@ -1180,7 +1186,7 @@ export default class WebrtcController extends React.Component {
                             </div>
                             <div
                                 id='local-video'
-                                className={localVideoHidden}
+                                className={localVideoHidden + ' ' + remoteVideoHiddenLocal}
                             >
                                 <video
                                     ref='local-video'
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index e4d2b9da7..00fd838f0 100644
--- a/webapp/sass/components/_modal.scss
+++ b/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 {
diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss
index 3fdff10d5..51f4d2b02 100644
--- a/webapp/sass/components/_suggestion-list.scss
+++ b/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;
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index 37da97b32..42d491341 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/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);
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index b9b62c020..e0915178a 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/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;
     }
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 80f704e69..10a59c25c 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -585,7 +585,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
         changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header, .app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
-        changeCss('.app__body .search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1);
+        changeCss('.app__body .search-help-popover .search-autocomplete__divider span, .app__body .suggestion-list__divider > span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1);
         changeCss('.app__body .popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.app__body .popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.app__body .popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);