Multiple UI fixes and improvements (#4572)

Reverting switch teams code

Fixing change css function

webapp/components/new_channel_modal.jsx

@@ -206,6 +206,7 @@ class NewChannelModal extends React.Component {
         return (
             <span>
                 <Modal
+                    dialogClassName='new-channel__modal'
                     show={this.props.show}
                     bsSize='large'
                     onHide={this.props.onModalDismissed}

webapp/components/sidebar_right_menu.jsx

@@ -68,6 +68,7 @@ export default class SidebarRightMenu extends React.Component {
     getFlagged(e) {
         e.preventDefault();
         getFlaggedPosts();
+        this.hideSidebars();
     }
 
     componentDidMount() {

webapp/sass/components/_modal.scss

@@ -612,7 +612,7 @@
     .more-modal__row {
         border-bottom: 1px solid $light-gray;
         display: flex;
-        min-height: 50px;
+        min-height: 70px;
         padding: 8px 15px;
     }
 

webapp/sass/components/_scrollbar.scss

@@ -15,13 +15,15 @@
 }
 
 body {
-    scrollbar-3dlight-color: #7D7E94;
+    &.app__body {
-    scrollbar-arrow-color: #C1C1D1;
+        scrollbar-3dlight-color: #7D7E94;
-    scrollbar-darkshadow-color: #2D2C4D;
+        scrollbar-arrow-color: #C1C1D1;
-    scrollbar-face-color: rgba(0, 0, 0, .1);
+        scrollbar-darkshadow-color: #2D2C4D;
-    scrollbar-highlight-color: #7D7E94;
+        scrollbar-face-color: rgba(0, 0, 0, .1);
-    scrollbar-shadow-color: #2D2C4D;
+        scrollbar-highlight-color: #7D7E94;
-    scrollbar-track-color: rgba(0, 0, 0, .1);
+        scrollbar-shadow-color: #2D2C4D;
+        scrollbar-track-color: rgba(0, 0, 0, .1);
+    }
 }
 
 .scrollbar--horizontal,

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,23 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .modal {
+        .modal-dialog {
+            &.new-channel__modal {
+                position: fixed;
+                @include translate3d(0, 100%, 0);
+            }
+        }
+
+        &.in {
+            .modal-dialog {
+                &.new-channel__modal {
+                    @include translate3d(0, 0, 0);
+                }
+            }
+        }
+    }
+
     .webrtc__notification--rhs {
         left: auto;
         right: 0;
@@ -17,15 +34,21 @@
     }
 
     #header-popover {
+        @include single-transition(all, .35s, ease);
+        @include translate3d(0, 100%, 0);
         @include box-shadow(none);
         background: alpha-color($black, .8);
         border: none;
-        height: 100%;
+        height: calc(100% - 45px);
         max-width: 100%;
         position: fixed;
         top: 47px;
         width: 100%;
 
+        &.in {
+            @include translate3d(0, 0, 0);
+        }
+
         .arrow {
             display: none;
         }
@@ -37,23 +60,23 @@
         }
 
         .close {
-            font-family: 'Open Sans', sans-serif;
+            @include border-radius(50%);
-            display: block;
-            position: fixed;
-            bottom: 25px;
-            height: 30px;
-            width: 30px;
-            margin-left: -15px;
-            left: 50%;
-            font-size: 23px;
-            line-height: 27px;
-            border-radius: 50%;
             border: 1px solid $white;
-            text-align: center;
+            bottom: 25px;
-            opacity: 1;
+            color: $white;
-            text-shadow: none;
+            display: block;
-            color: white;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 23px;
             font-weight: 200;
+            height: 30px;
+            left: 50%;
+            line-height: 27px;
+            margin-left: -15px;
+            opacity: 1;
+            position: fixed;
+            text-align: center;
+            text-shadow: none;
+            width: 30px;
         }
     }
 
@@ -743,34 +766,47 @@
                 white-space: nowrap;
             }
 
+            .dropdown {
+                &.open {
+                    .dropdown-menu {
+                        @include translate3d(0, 0, 0);
+                        visibility: visible;
+                    }
+                }
+            }
+
             .dropdown-menu {
+                @include single-transition(all, .35s, ease);
+                @include translate3d(0, 100%, 0);
                 background: alpha-color($black, .9);
-                height: 100%;
+                display: block;
+                height: calc(100% - 45px);
                 left: 0;
                 overflow: auto;
-                padding: 1.4em 0 140px;
+                padding: 1.4em 0 0;
                 position: fixed;
                 top: 42px;
+                visibility: hidden;
                 width: 100%;
 
                 .close {
-                    font-family: 'Open Sans', sans-serif;
+                    @include border-radius(50%);
-                    display: block;
-                    position: fixed;
-                    bottom: 25px;
-                    height: 30px;
-                    width: 30px;
-                    margin-left: -15px;
-                    left: 50%;
-                    font-size: 23px;
-                    line-height: 27px;
-                    border-radius: 50%;
                     border: 1px solid $white;
-                    text-align: center;
+                    bottom: 25px;
-                    opacity: 1;
+                    color: $white;
-                    text-shadow: none;
+                    display: block;
-                    color: white;
+                    font-family: 'Open Sans', sans-serif;
+                    font-size: 23px;
                     font-weight: 200;
+                    height: 30px;
+                    left: 50%;
+                    line-height: 27px;
+                    margin-left: -15px;
+                    opacity: 1;
+                    position: fixed;
+                    text-align: center;
+                    text-shadow: none;
+                    width: 30px;
                 }
 
                 > li {
@@ -1056,7 +1092,7 @@
         }
 
         &.move--right {
-            @include translate3d(290px, 0, 0);
+            @include translate3d(0, 0, 0);
 
             &:before {
                 @include single-transition(all, .35s, ease);
@@ -1281,11 +1317,7 @@
             }
 
             .post__header {
-                .col__name {
+                padding-right: 50px;
-                    .user-popover {
-                        max-width: 100%;
-                    }
-                }
             }
         }
     }
@@ -1394,7 +1426,7 @@
 
     .inner-wrap {
         &.move--right {
-            @include translate3d(260px, 0, 0);
+            @include translate3d(0, 0, 0);
         }
     }
 
@@ -1415,26 +1447,41 @@
 }
 
 @media screen and (max-width: 320px) {
+    .post {
+        .post__header {
+            .col__name {
+                .user-popover {
+                    max-width: 105px;
+                }
+            }
+        }
+    }
+
     .tutorial-steps__container {
         .tutorial__content {
             .tutorial__steps {
                 padding: 0 20px;
                 width: 100%;
+
                 h1 {
                     font-size: 35px;
                     margin: -5px 0 20px;
                 }
+
                 h3 {
                     margin-bottom: 10px;
                 }
+
                 .tutorial__app-icons {
                     margin: 10px 0;
                 }
+
                 .tutorial__circles {
-                    margin: 0 0 15px;
                     bottom: 60px;
+                    margin: 0 0 15px;
                     position: absolute;
                 }
+
                 .tutorial__footer {
                     bottom: 30px;
                     position: absolute;
@@ -1450,13 +1497,30 @@
     }
 }
 
+@media screen and (max-width: 320px) and (max-height: 560px) {
+    #navbar {
+        .navbar-default {
+            .dropdown-menu {
+                padding-top: 1em;
+
+                > li {
+                    > a {
+                        border: none;
+                        line-height: 28px;
+                    }
+                }
+            }
+        }
+    }
+}
+
 // on iOS, allow clicks within an input's label to actually propagate through to the input itself
 // http://stackoverflow.com/a/34810294/6325807
 label span {
     pointer-events: none;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
     select,
     textarea,
     input {

webapp/sass/routes/_admin-console.scss

@@ -61,7 +61,7 @@
     .log__panel {
         background-color: white;
         border: 1px solid #ddd;
-        height: 800px;
+        height: calc(100vh - 200px);
         margin-top: 10px;
         overflow: scroll;
         padding: 5px;

webapp/utils/utils.jsx

@@ -611,13 +611,14 @@ export function applyTheme(theme) {
         changeCss('.app__body .post.post--hovered', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
         changeCss('@media(min-width: 768px){.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
         changeCss('.app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
-        changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .suggestion--selected, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
+        changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
+        changeCss('.app__body .suggestion--selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;');
         changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .search-help-popover .search-autocomplete__item:hover, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
         changeCss('.app__body .search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
-        changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4));
+        changeCss('body.app__body ::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1);
         changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor);
         changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor);
         changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5));
@@ -686,7 +687,7 @@ export function applyFont(fontName) {
 }
 
 export function changeCss(className, classValue) {
-    let styleEl = document.querySelector('style[data-class="' + className + '"]');
+    let styleEl = document.querySelector('style[data-class="' + className + classValue + '"]');
     if (!styleEl) {
         styleEl = document.createElement('style');
         styleEl.setAttribute('data-class', className);