Bug fixes (#5218)

* PLT-5319 - Fixing text alignment security modal

* PLT-5280 - Fixing add comment button in RHS mobile

* PLT-5397 - Fixing Floating timestamp on mobile

* PLT-5129 - Hiding formatting help text

* PLT-5242 - Adjusting team sidebar border on IE!!

* PLT-5226 - Placing settings toggle over header

* PLT-5222 - Placed team description tooltip on top

* PLT-5201 - Account settings overlap on mobile

* PLT-5138 - Adding bg to pending post actions

* PLT-5286 - Adjusting play button on youtube videos

* PLT-5313 - Adjusting space between emoji reactions

* PLT-5187 - Adjusting text in channel switcher

* PLT-5399 - Reverting button alignment in modal

webapp/components/select_team/components/select_team_item.jsx

@@ -49,7 +49,7 @@ export default class SelectTeamItem extends React.Component {
                 <OverlayTrigger
                     trigger={['hover', 'focus', 'click']}
                     delayShow={1000}
-                    placement='left'
+                    placement='top'
                     overlay={descriptionTooltip}
                     ref='descriptionOverlay'
                 >

webapp/components/setting_item_max.jsx

@@ -49,7 +49,7 @@ export default class SettingItemMax extends React.Component {
             submit = (
                 <input
                     type='submit'
-                    className='btn btn-sm btn-primary pull-right'
+                    className='btn btn-sm btn-primary'
                     href='#'
                     onClick={this.props.submit}
                     value={Utils.localizeMessage('setting_item_max.save', 'Save')}
@@ -88,7 +88,7 @@ export default class SettingItemMax extends React.Component {
                             {clientError}
                             {submit}
                             <a
-                                className='btn btn-sm pull-right'
+                                className='btn btn-sm'
                                 href='#'
                                 onClick={this.props.updateSection}
                             >

webapp/components/setting_item_min.jsx

@@ -10,7 +10,7 @@ export default class SettingItemMin extends React.Component {
         let editButton = null;
         if (!this.props.disableOpen) {
             editButton = (
-                <li className='col-sm-3 section-edit'>
+                <li className='col-xs-12 col-sm-3 section-edit'>
                     <a
                         className='theme'
                         href='#'
@@ -31,9 +31,9 @@ export default class SettingItemMin extends React.Component {
                 className='section-min'
                 onClick={this.props.updateSection}
             >
-                <li className='col-sm-9 section-title'>{this.props.title}</li>
+                <li className='col-xs-12 col-sm-9 section-title'>{this.props.title}</li>
                 {editButton}
-                <li className='col-sm-12 section-describe'>{this.props.describe}</li>
+                <li className='col-xs-12 section-describe'>{this.props.describe}</li>
             </ul>
         );
     }

webapp/components/setting_picture.jsx

@@ -73,7 +73,7 @@ export default class SettingPicture extends React.Component {
                 />
             );
         } else {
-            var confirmButtonClass = 'btn btn-sm pull-right';
+            var confirmButtonClass = 'btn btn-sm';
             if (this.props.submitActive) {
                 confirmButtonClass += ' btn-primary';
             } else {
@@ -132,7 +132,7 @@ export default class SettingPicture extends React.Component {
                             </span>
                             {confirmButton}
                             <a
-                                className='btn btn-sm theme pull-right'
+                                className='btn btn-sm theme'
                                 href='#'
                                 onClick={self.props.updateSection}
                             >

webapp/components/user_settings/user_settings_general.jsx

@@ -355,7 +355,7 @@ class UserSettingsGeneralTab extends React.Component {
 
             if (!emailEnabled) {
                 helpText = (
-                    <div className='setting-list__hint text-danger'>
+                    <div className='setting-list__hint col-sm-12 text-danger'>
                         <FormattedMessage
                             id='user.settings.general.emailHelp2'
                             defaultMessage='Email has been disabled by your System Administrator. No notification emails will be sent until it is enabled.'
@@ -437,7 +437,7 @@ class UserSettingsGeneralTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.general.emailGitlabCantUpdate'
                                 defaultMessage='Login occurs through GitLab. Email cannot be updated. Email address used for notifications is {email}.'
@@ -455,7 +455,7 @@ class UserSettingsGeneralTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.general.emailGoogleCantUpdate'
                                 defaultMessage='Login occurs through Google Apps. Email cannot be updated. Email address used for notifications is {email}.'
@@ -473,7 +473,7 @@ class UserSettingsGeneralTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.general.emailOffice365CantUpdate'
                                 defaultMessage='Login occurs through Office 365. Email cannot be updated. Email address used for notifications is {email}.'
@@ -491,7 +491,7 @@ class UserSettingsGeneralTab extends React.Component {
                         key='oauthEmailInfo'
                         className='padding-bottom'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.general.emailLdapCantUpdate'
                                 defaultMessage='Login occurs through AD/LDAP. Email cannot be updated. Email address used for notifications is {email}.'
@@ -509,7 +509,7 @@ class UserSettingsGeneralTab extends React.Component {
                         key='oauthEmailInfo'
                         className='padding-bottom'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.general.emailSamlCantUpdate'
                                 defaultMessage='Login occurs through SAML. Email cannot be updated. Email address used for notifications is {email}.'

webapp/components/user_settings/user_settings_security.jsx

@@ -387,7 +387,7 @@ export default class SecurityTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.security.passwordGitlabCantUpdate'
                                 defaultMessage='Login occurs through GitLab. Password cannot be updated.'
@@ -401,7 +401,7 @@ export default class SecurityTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.security.passwordLdapCantUpdate'
                                 defaultMessage='Login occurs through AD/LDAP. Password cannot be updated.'
@@ -415,7 +415,7 @@ export default class SecurityTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.security.passwordSamlCantUpdate'
                                 defaultMessage='This field is handled through your login provider. If you want to change it, you need to do so through your login provider.'
@@ -429,7 +429,7 @@ export default class SecurityTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.security.passwordGoogleCantUpdate'
                                 defaultMessage='Login occurs through Google Apps. Password cannot be updated.'
@@ -443,7 +443,7 @@ export default class SecurityTab extends React.Component {
                         key='oauthEmailInfo'
                         className='form-group'
                     >
-                        <div className='setting-list__hint'>
+                        <div className='setting-list__hint col-sm-12'>
                             <FormattedMessage
                                 id='user.settings.security.passwordOffice365CantUpdate'
                                 defaultMessage='Login occurs through Office 365. Password cannot be updated.'
@@ -834,7 +834,7 @@ export default class SecurityTab extends React.Component {
                 apps = (
                     <div className='padding-bottom x2 authorized-app'>
                         <div className='col-sm-12'>
-                            <div className='setting-list__hint'>
+                            <div className='setting-list__hint col-sm-12'>
                                 <FormattedMessage
                                     id='user.settings.security.noApps'
                                     defaultMessage='No OAuth 2.0 Applications are authorized.'

webapp/sass/components/_mentions.scss

@@ -21,6 +21,13 @@
     width: 100%;
     z-index: 101;
 
+    .status {
+        font-size: 15px;
+        text-align: center;
+        vertical-align: bottom;
+        width: 20px;
+    }
+
     .fa-user {
         position: relative;
         top: -1px;

webapp/sass/components/_videos.scss

@@ -1,93 +1,95 @@
 @charset 'UTF-8';
 
-.video-div {
+.post {
-    margin-bottom: 8px;
+    .video-div {
-    max-width: 480px;
+        margin-bottom: 8px;
-    position: relative;
+        max-width: 480px;
+        position: relative;
 
-    .video-thumbnail {
+        .video-thumbnail {
-        height: auto;
+            height: auto;
-        max-width: 100%;
+            max-width: 100%;
-    }
-
-    .video-thumbnail__error {
-        height: 100%;
-        line-height: 2;
-        padding: 110px 0;
-        text-align: center;
-        width: 100%;
-
-        .fa {
-            @include opacity(.5);
         }
 
-        div {
+        .video-thumbnail__error {
-            font-size: 1.2em;
+            height: 100%;
+            line-height: 2;
+            padding: 110px 0;
+            text-align: center;
+            width: 100%;
+
+            .fa {
+                @include opacity(.5);
+            }
+
+            div {
+                font-size: 1.2em;
+            }
+        }
+
+        .block {
+            background-color: alpha-color($black, .5);
+            border-radius: 10px;
+            height: 150px;
+            left: 50%;
+            margin: -75px 0 0 -100px;
+            position: absolute;
+            top: 50%;
+            width: 200px;
         }
     }
 
-    .block {
+    .video-type {
-        background-color: alpha-color($black, .5);
+        @include opacity(.8);
-        border-radius: 10px;
+        font-size: 15px;
-        height: 150px;
+        margin: 0;
-        left: 50%;
+        padding: 0;
-        margin: -75px 0 0 -100px;
+    }
+
+    .video-title {
+        font-size: 15px;
+        margin-top: 3px;
+    }
+
+    .play-button {
+        @include border-radius(14px);
+        border: 4px solid alpha-color($white, .4);
+        height: 100px;
         position: absolute;
-        top: 50%;
+        right: 51px;
-        width: 200px;
+        top: 26px;
-    }
+        width: 100px;
-}
 
-.video-type {
+        span {
-    @include opacity(.8);
+            border-bottom: 36px solid transparent;
-    font-size: 15px;
+            border-left: 60px solid alpha-color($white, .4);
-    margin: 0;
+            border-top: 36px solid transparent;
-    padding: 0;
+            height: 0;
-}
+            left: 20px;
-
+            position: absolute;
-.video-title {
+            top: 10px;
-    font-size: 15px;
+            width: 0;
-    margin-top: 3px;
+        }
-}
-
-.play-button {
-    @include border-radius(14px);
-    border: 4px solid alpha-color($white, .4);
-    height: 100px;
-    position: absolute;
-    right: 51px;
-    top: 26px;
-    width: 100px;
-
-    span {
-        border-bottom: 36px solid transparent;
-        border-left: 60px solid alpha-color($white, .4);
-        border-top: 36px solid transparent;
-        height: 0;
-        left: 20px;
-        position: absolute;
-        top: 10px;
-        width: 0;
-    }
-}
-
-.img-div {
-    -moz-force-broken-image-icon: 1;
-    border-radius: 5px;
-    margin-bottom: 8px;
-    max-height: 500px;
-    max-width: 450px;
-    position: relative;
-
-    &.placeholder {
-        height: 500px;
     }
 
-    .sidebar--right & {
+    .img-div {
-        max-width: 100%;
+        -moz-force-broken-image-icon: 1;
+        border-radius: 5px;
+        margin-bottom: 8px;
+        max-height: 500px;
+        max-width: 450px;
+        position: relative;
+
+        &.placeholder {
+            height: 500px;
+        }
+
+        .sidebar--right & {
+            max-width: 100%;
+        }
+    }
+
+    .video-loading {
+        height: 360px;
     }
 }
-
-.video-loading {
-    height: 360px;
-}

webapp/sass/layout/_headers.scss

@@ -275,8 +275,9 @@
         .sidebar-header-dropdown,
         .admin-navbar-dropdown {
             font-size: .85em;
-            position: absolute;
+            left: 0;
             margin-right: -15px;
+            position: absolute;
             right: 22px;
             top: 10px;
             z-index: 5;
@@ -287,16 +288,19 @@
                 @include single-transition(all, .1s, linear);
                 background: none;
                 color: $white;
-                float: right;
+                display: block;
                 font-size: 1em;
+                height: 40px;
+                left: 0;
                 line-height: 1.8;
                 padding: 10px;
+                width: 100%;
             }
 
             .dropdown-menu {
-                width: 199px;
-                margin-top: 4px;
                 margin-right: 3px;
+                margin-top: 4px;
+                width: 199px;
 
                 a {
                     overflow: hidden;
@@ -308,6 +312,7 @@
             .sidebar-header-dropdown__icon,
             .admin-navbar-dropdown__icon {
                 fill: $white;
+                float: right;
             }
         }
 

webapp/sass/layout/_post.scss

@@ -311,7 +311,7 @@
 
     &.scrolling {
         @include translateY(0);
-        @include opacity(.8);
+        @include opacity(.9);
     }
 
     &.rhs {
@@ -322,6 +322,7 @@
         @include border-radius(3px);
         @include font-smoothing(initial);
         background: $primary-color;
+        border: 1px solid;
         color: $white;
         display: inline-block;
         font-size: 12px;
@@ -585,6 +586,7 @@
                 top: 2px;
             }
         }
+
         .search-item-snippet {
             blockquote {
                 margin-top: 0;
@@ -1091,7 +1093,7 @@
         }
 
         .pending-post-actions {
-            background: alpha-property($black, .7);
+            background: alpha-color($black, .7);
             color: $white;
             font-size: .9em;
             padding: 5px 7px;
@@ -1111,6 +1113,42 @@
                 font-size: .87em;
             }
         }
+
+        .post-reaction-list {
+            min-height: 30px;
+        }
+
+        .post-reaction {
+            @include user-select(none);
+            @include border-radius(3px);
+            border: 1px solid $primary-color;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 11px;
+            height: 23px;
+            margin-bottom: 5px;
+            margin-right: 5px;
+            padding: 0 4px 0 3px;
+
+            .post-reaction__emoji {
+                height: 16px;
+                margin: 2px 3px 0 0;
+                vertical-align: top;
+                width: 16px;
+            }
+
+            .post-reaction__count {
+                line-height: 10px;
+                position: relative;
+                top: 3px;
+            }
+
+            &--current-user {
+                .post-reaction__count {
+                    font-weight: 600;
+                }
+            }
+        }
     }
 
     .post__link {
@@ -1299,39 +1337,3 @@
     margin-left: 50px !important;
     min-width: 320px;
 }
-
-.post-reaction-list {
-    min-height: 30px;
-}
-
-.post-reaction {
-    @include user-select(none);
-    @include border-radius(3px);
-    border: 1px solid $primary-color;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 11px;
-    height: 23px;
-    padding: 0 4px 0 3px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-
-    .post-reaction__emoji {
-        height: 16px;
-        margin: 2px 3px 0 0;
-        vertical-align: top;
-        width: 16px;
-    }
-
-    .post-reaction__count {
-        line-height: 10px;
-        position: relative;
-        top: 3px;
-    }
-
-    &--current-user {
-        .post-reaction__count {
-            font-weight: 600;
-        }
-    }
-}

webapp/sass/layout/_team-sidebar.scss

@@ -21,6 +21,8 @@
                 width: 100%;
 
                 a {
+                    display: block;
+                    margin-left: 11px;
                     text-decoration: none;
                 }
 

webapp/sass/responsive/_desktop.scss

@@ -54,6 +54,10 @@
         }
     }
 
+    .help__format-text {
+        display: none;
+    }
+
     .inner-wrap {
         &.move--left,
         &.webrtc--show {

webapp/sass/responsive/_mobile.scss

@@ -608,6 +608,17 @@
                         display: block;
 
                         .settings-content {
+                            .section-title {
+                                padding-right: 15px;
+                            }
+
+                            .section-edit {
+                                position: relative;
+                                right: 0;
+                                text-align: left;
+                                top: 0;
+                            }
+
                             .appearance-section {
                                 .theme-elements {
                                     .element {
@@ -1080,16 +1091,14 @@
             }
 
             .post-create-footer {
-                padding: 0 45px 0 45px;
-
                 .control-label {
                     margin: .5em 0;
                     top: 0;
                 }
 
                 .post-error {
-                    top: 0;
                     left: 0;
+                    top: 0;
                 }
             }
         }

webapp/sass/responsive/_tablet.scss

@@ -33,7 +33,6 @@
             }
 
             .post-error {
-                left: 32px;
                 position: relative;
                 top: 0;
 
@@ -117,10 +116,6 @@
         width: 100%;
     }
 
-    .help__format-text {
-        display: none;
-    }
-
     .inner-wrap {
         &:not(.move--left) {
             margin-right: 0 !important;

webapp/utils/utils.jsx

@@ -526,6 +526,7 @@ export function applyTheme(theme) {
         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-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);
     }