Multiple UI Improvements (#4420)

11 files changed, 63 insertions, 18 deletions

diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss
index 39317358f..0051f09a3 100644
--- a/webapp/sass/components/_dropdown.scss
+++ b/webapp/sass/components/_dropdown.scss
@@ -17,13 +17,16 @@
         @include opacity(.15);
     }
 
-    div > a {
-        color: inherit;
-        text-decoration: none;
-
-        &:focus,
-        &:hover {
+    div,
+    li {
+        > a {
             color: inherit;
+            text-decoration: none;
+
+            &:focus,
+            &:hover {
+                color: inherit;
+            }
         }
     }
 }
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 5f22c9a6a..71ed8e693 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -21,7 +21,7 @@
 
         .custom-textarea {
             max-height: 60vh;
-            min-height: 8em;
+            min-height: 20em;
         }
 
         .suggestion-list {
@@ -192,7 +192,7 @@
             .btn {
                 &.btn-primary {
                     float: right;
-                    margin: -4px 25px 0 0;
+                    margin: -4px 33px 0 0;
                     position: relative;
 
                     i {
@@ -592,7 +592,7 @@
     .more-modal__row {
         border-bottom: 1px solid $light-gray;
         display: flex;
-        min-height: 65px;
+        min-height: 50px;
         padding: 8px 15px;
     }
 
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 2840c032e..4ff72da55 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -187,6 +187,12 @@
 .member-list__popover {
     max-width: initial;
 
+    .more-modal__list {
+        .more-modal__row {
+            min-height: inherit;
+        }
+    }
+
     .popover-content {
         max-height: 350px;
         padding: 0;
diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss
index b2230f71d..93ad5707b 100644
--- a/webapp/sass/components/_videos.scss
+++ b/webapp/sass/components/_videos.scss
@@ -82,6 +82,10 @@
     &.placeholder {
         height: 500px;
     }
+
+    .sidebar--right & {
+        max-width: 100%;
+    }
 }
 
 .video-loading {
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index 42d491341..b025ab00c 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -65,6 +65,7 @@
     .control-label {
         @include border-radius(3px);
         background: #f2f2f2;
+        color: alpha-color($black, .7);
         font-size: 14px;
         font-weight: normal;
         margin: 1em 0 -1em;
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 15e9c2d9d..4db717de1 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -51,7 +51,6 @@
 
     hr {
         border: none;
-        margin-bottom: 0;
     }
 
     .post-create__container {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 137ab4f1c..efba5b6f1 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -530,9 +530,15 @@ body.ios {
             }
         }
 
+        .post__img {
+            padding-top: 0;
+        }
+
         .status-wrapper {
+            height: 14px;
+
             &:after {
-                bottom: 10px;
+                bottom: 0;
             }
         }
 
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 3b65f0565..cb25639c9 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -192,7 +192,11 @@
         &.post--compact {
             .status-wrapper {
                 &:after {
-                    bottom: 12px;
+                    bottom: 3px;
+
+                    .sidebar--right & {
+                        bottom: 0;
+                    }
                 }
             }
         }
@@ -1305,6 +1309,24 @@
 }
 
 @media screen and (max-width: 480px) {
+    .sidebar--right {
+        .post {
+            &.post--compact {
+                .post__header {
+                    height: auto;
+                }
+            }
+
+            .post__header {
+                .col__name {
+                    .user-popover {
+                        max-width: 100%;
+                    }
+                }
+            }
+        }
+    }
+
     .backstage-header {
         h1 {
             float: none;
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 45fc4fad4..75cdf8ea9 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -1,6 +1,14 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 960px) {
+    .channel-header {
+        .search-bar__container {
+            .search__form {
+                width: 150px;
+            }
+        }
+    }
+
     .signup-team__container {
         &.branded {
             display: block;
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 83c68dc6b..aa90a7eaf 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -172,10 +172,6 @@
             margin-bottom: 0.5em;
         }
 
-        .banner__content {
-            width: 80%;
-        }
-
         &.warning {
             background: #e60000;
         }
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index f1b162c87..888414784 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -544,7 +544,7 @@ export function applyTheme(theme) {
 
     if (theme.centerChannelBg) {
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg, 1);
-        changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .modal-footer, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-list .post-list-holder-by-time, .app__body .post .dropdown-menu a', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
         changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
@@ -568,7 +568,7 @@ export function applyTheme(theme) {
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
         changeCss('.app__body .post .dropdown-menu a, .app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1);
-        changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu a, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1);
         changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1);
         changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2);