UI changes (#6876)

* PLT-7011 - Long channel name truncation

* PLT-7013 - Fixing channel header mobile

* PLT-7012 - Updating quick switch modal on mobile

* PLT-7008 - Channel preferences mobile fix

* PLT-7014 - Increasing tap area for channel desc

7 files changed, 23 insertions, 14 deletions

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index f61f58a8d..6305f870e 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -698,7 +698,7 @@ export default class Navbar extends React.Component {
                         />
                     </span>
                     <span
-                        className='icon icon__menu'
+                        className='icon icon__menu icon--sidebarHeaderTextColor'
                         dangerouslySetInnerHTML={{__html: menuIcon}}
                         aria-hidden='true'
                     />
diff --git a/webapp/components/quick_switch_modal/quick_switch_modal.jsx b/webapp/components/quick_switch_modal/quick_switch_modal.jsx
index 2fbfdb2bd..736b728f0 100644
--- a/webapp/components/quick_switch_modal/quick_switch_modal.jsx
+++ b/webapp/components/quick_switch_modal/quick_switch_modal.jsx
@@ -305,7 +305,7 @@ export default class QuickSwitchModal extends React.PureComponent {
                 <Modal.Header closeButton={true}/>
                 <Modal.Body>
                     {header}
-                    <div className='modal__hint hidden-xs'>
+                    <div className='modal__hint'>
                         {help}
                     </div>
                     <SuggestionBox
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index dd8440d19..b515e40cf 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -195,11 +195,14 @@
 
     .channel-header__description {
         display: inline-block;
-        height: 22px;
-        margin-top: 3px;
-        max-width: calc(100vw - 730px);
+        height: 35px;
+        margin-top: -10px;
+        max-width: calc(100vw - 720px);
         overflow: hidden;
+        padding: 3px 0 0;
+        position: relative;
         text-overflow: ellipsis;
+        top: 10px;
         white-space: nowrap;
         word-break: break-word;
 
@@ -209,7 +212,7 @@
         }
 
         .multi-teams & {
-            max-width: calc(100vw - 780px);
+            max-width: calc(100vw - 790px);
         }
 
         &.light {
@@ -223,7 +226,11 @@
         }
 
         .move--left & {
-            max-width: calc(100vw - 780px);
+            max-width: calc(100vw - 790px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 840px);
+            }
         }
 
         .markdown-inline-img {
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 09b6534b0..f1bce335c 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -104,13 +104,13 @@
             padding: 0 .5em;
 
             .heading {
-                color: $white;
                 display: inline-block;
                 font-weight: 600;
                 line-height: 50px;
                 margin-right: 5px;
                 max-width: calc(100% - 200px);
                 overflow: hidden;
+                text-overflow: ellipsis;
                 vertical-align: top;
             }
 
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 8181ac270..907b14b6d 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -207,6 +207,10 @@
         }
     }
 
+    .sidebar--right__title {
+        @include clearfix;
+    }
+
     .sidebar--right__header {
         @include flex(0 0 44px);
         border-bottom: 1px solid;
@@ -214,6 +218,7 @@
         font-size: 1em;
         height: 44px;
         line-height: 44px;
+        overflow: hidden;
         padding: 0 5px 0 15px;
         text-transform: uppercase;
     }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 862c3a59c..28b28a8f9 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -781,10 +781,7 @@
 
                     .settings-content {
                         .section-edit {
-                            padding-right: 0;
-                            position: absolute;
-                            right: 15px;
-                            top: 14px;
+                            text-align: left;
 
                             .fa {
                                 display: inline-block;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 6778bb026..e9a73ff03 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -540,11 +540,11 @@ export function applyTheme(theme) {
 
     if (theme.sidebarHeaderTextColor) {
         changeCss('.app__body .status-wrapper .status_dropdown__toggle .status-edit, .multi-teams .team-sidebar .team-wrapper .team-container .team-btn, .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor);
-        changeCss('.app__body .sidebar--left .status-wrapper .status_dropdown__toggle .offline--icon, .app__body .sidebar-header-dropdown__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
+        changeCss('.app__body .icon--sidebarHeaderTextColor svg, .app__body .sidebar--left .status-wrapper .status_dropdown__toggle .offline--icon, .app__body .sidebar-header-dropdown__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
         changeCss('.sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8));
         changeCss('.sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .modal .modal-header .modal-title, .app__body .modal .modal-header .modal-title .name, .app__body .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor);
-        changeCss('.app__body #navbar .navbar-default .navbar-brand .heading', 'color:' + theme.sidebarHeaderTextColor);
+        changeCss('.app__body #navbar .navbar-default .navbar-brand .dropdown-toggle', 'color:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body #navbar .navbar-default .navbar-toggle .icon-bar', 'background:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .post-list__timestamp > div', 'border-color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.5));
         changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'color:' + theme.sidebarHeaderTextColor);