Multiple UI Improvements (#3038)

webapp/components/navbar_dropdown.jsx

@@ -80,7 +80,6 @@ export default class NavbarDropdown extends React.Component {
         var inviteLink = '';
         var manageLink = '';
         var sysAdminLink = '';
-        var adminDivider = '';
         var currentUser = this.props.currentUser;
         var isAdmin = false;
         var isSystemAdmin = false;
@@ -134,8 +133,6 @@ export default class NavbarDropdown extends React.Component {
                 </li>
             );
 
-            adminDivider = (<li className='divider'></li>);
-
             teamSettings = (
                 <li>
                     <a
@@ -312,7 +309,7 @@ export default class NavbarDropdown extends React.Component {
                                 />
                             </a>
                         </li>
-                        {adminDivider}
+                        <li className='divider'></li>
                         {teamSettings}
                         {integrationsLink}
                         {manageLink}

webapp/components/post.jsx

@@ -191,24 +191,21 @@ export default class Post extends React.Component {
             systemMessageClass = 'post--system';
         }
 
-        let profilePic = null;
+        let profilePic = (
-        if (!this.props.hideProfilePic || this.props.compactDisplay) {
+            <img
+                src={Utils.getProfilePicSrcForPost(post, timestamp)}
+                height='36'
+                width='36'
+            />
+        );
+
+        if (Utils.isSystemMessage(post)) {
             profilePic = (
-                <img
+                <span
-                    src={Utils.getProfilePicSrcForPost(post, timestamp)}
+                    className='icon'
-                    height='36'
+                    dangerouslySetInnerHTML={{__html: mattermostLogo}}
-                    width='36'
                 />
             );
-
-            if (Utils.isSystemMessage(post)) {
-                profilePic = (
-                    <span
-                        className='icon'
-                        dangerouslySetInnerHTML={{__html: mattermostLogo}}
-                    />
-                );
-            }
         }
 
         let centerClass = '';

webapp/components/rhs_thread.jsx

@@ -17,6 +17,14 @@ import Scrollbars from 'react-custom-scrollbars';
 
 import React from 'react';
 
+export function renderView(props) {
+    return (
+        <div
+            {...props}
+            className='scrollbar--view'
+        />);
+}
+
 export function renderThumbHorizontal(props) {
     return (
         <div
@@ -211,6 +219,7 @@ export default class RhsThread extends React.Component {
                         autoHideDuration={500}
                         renderThumbHorizontal={renderThumbHorizontal}
                         renderThumbVertical={renderThumbVertical}
+                        renderView={renderView}
                     >
                         <div className='post-right__scroll'>
                             <RootPost

webapp/components/team_general_tab.jsx

@@ -9,7 +9,7 @@ import Client from 'utils/web_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
+import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 const holders = defineMessages({
     dirDisabled: {
@@ -378,9 +378,9 @@ class GeneralTab extends React.Component {
                         </div>
                     </div>
                     <div className='setting-list__hint'>
-                        <FormattedMessage
+                        <FormattedHTMLMessage
                             id='general_tab.codeLongDesc'
-                            defaultMessage='The Invite Code is used as part of the URL in the team invitation link created by **Get Team Invite Link** in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.'
+                            defaultMessage='The Invite Code is used as part of the URL in the team invitation link created by <strong>Get Team Invite Link</strong> in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.'
                         />
                     </div>
                 </div>

webapp/i18n/en.json

@@ -893,7 +893,7 @@
   "find_team.submitError": "Please enter a valid email address",
   "general_tab.chooseName": "Please choose a new name for your team",
   "general_tab.codeDesc": "Click 'Edit' to regenerate Invite Code.",
-  "general_tab.codeLongDesc": "The Invite Code is used as part of the URL in the team invitation link created by **Get Team Invite Link** in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.",
+  "general_tab.codeLongDesc": "The Invite Code is used as part of the URL in the team invitation link created by <strong>Get Team Invite Link</strong> in the main menu. Regenerating creates a new team invitation link and invalidates the previous link.",
   "general_tab.codeTitle": "Invite Code",
   "general_tab.dirContact": "Contact your system administrator to turn on the team directory on the system home page.",
   "general_tab.dirDisabled": "Team Directory has been disabled.  Please ask a System Admin to enable the Team Directory in the System Console team settings.",

webapp/i18n/es.json

@@ -893,7 +893,7 @@
   "find_team.submitError": "Por favor ingresa una dirección válida",
   "general_tab.chooseName": "Por favor escoge otro nombre para tu equipo",
   "general_tab.codeDesc": "Pincha 'Editar' para regenerar el código de Invitación.",
-  "general_tab.codeLongDesc": "El Código de Invitación es utilizado como parte del URL del enlace creado por la opción **Obtener Enlace de invitación** en el menú principal. Regenerar este código crea un nuevo enlace e invalida los enlaces anteriores.",
+  "general_tab.codeLongDesc": "El Código de Invitación es utilizado como parte del URL del enlace creado por la opción <strong>Obtener Enlace de invitación</strong> en el menú principal. Regenerar este código crea un nuevo enlace e invalida los enlaces anteriores.",
   "general_tab.codeTitle": "Código de Invitación",
   "general_tab.dirContact": "Contácta a un administrador del sistema para habilitar el directorio de equipos en la página principal.",
   "general_tab.dirDisabled": "El directorio de Equipos ha sido deshabilitado.  Por favor solicita a un Administrador de Sistema que habilite la opción de Directorio de Equipos en la Consola del Sistema.",

webapp/i18n/pt.json

@@ -893,7 +893,7 @@
   "find_team.submitError": "Por favor entre um endereço de e-mail válido",
   "general_tab.chooseName": "Por favor escolha um novo nome para sua equipe",
   "general_tab.codeDesc": "Clique 'Edit' para re-gerar o Código de Convite.",
-  "general_tab.codeLongDesc": "O Código de convite é usado como parte da URL no link de convite da equipe criado por **Obter Link de Convite de Equipe** no menu principal. Re-gerar cria um novo link de convite de equipe e invalida os link anteriores.",
+  "general_tab.codeLongDesc": "O Código de convite é usado como parte da URL no link de convite da equipe criado por <strong>Obter Link de Convite de Equipe</strong> no menu principal. Re-gerar cria um novo link de convite de equipe e invalida os link anteriores.",
   "general_tab.codeTitle": "Código de Convite",
   "general_tab.dirContact": "Contate o seu administrador do sistema para ativar o diretório de equipe na página inicial do sistema.",
   "general_tab.dirDisabled": "Diretório de equipe foi desativado.  Por favor peça a um Administrador de Sistema para ativar o Diretório de Equipe nas configurações do Console do Sistema.",

webapp/sass/components/_scrollbar.scss

@@ -29,3 +29,11 @@ body {
     @include border-radius(2px);
     @include alpha-property(background-color, $black, .5);
 }
+
+.scrollbar--view {
+    -ms-overflow-style: none;
+
+    .browser--ie & {
+        margin: 0 !important;
+    }
+}

webapp/sass/layout/_markdown.scss

@@ -55,18 +55,14 @@
 
 .post-code__language {
     @include opacity(0);
-    @include translate3d(0, 0, 0);
+    @include transition(opacity, .6s);
     background: #21586d;
-    border-radius: 0 .25em;
+    border-radius: 0 0 0 2px;
     color: $white;
     padding: 4px 10px 5px;
     position: absolute;
     right: 0;
     top: 0;
-    -webkit-transition: opacity 0.6s;
-    -moz-transition: opacity 0.6s;
-    -o-transition: opacity 0.6s;
-    transition: opacity 0.6s;
     z-index: 5;
 }
 

webapp/sass/layout/_post.scss

@@ -600,6 +600,12 @@ body.ios {
                 }
             }
 
+            .post__img {
+                img {
+                    display: none;
+                }
+            }
+
             .post__header {
                 height: 0;
                 margin: 0;
@@ -619,9 +625,11 @@ body.ios {
                 display: none;
             }
 
-            .post__img {
+            &.same--user {
-                img {
+                .post__img {
-                    display: none;
+                    img {
+                        display: none;
+                    }
                 }
             }
         }
@@ -718,11 +726,11 @@ body.ios {
     }
 
     .post__img {
-        width: 46px;
+        width: 42px;
 
         svg {
-            height: 36px;
+            height: 32px;
-            width: 36px;
+            width: 32px;
         }
 
         path {
@@ -731,9 +739,9 @@ body.ios {
 
         img {
             @include border-radius(50px);
-            height: 36px;
+            height: 32px;
             vertical-align: inherit;
-            width: 36px;
+            width: 32px;
         }
     }
 

webapp/sass/layout/_sidebar-left.scss

@@ -40,7 +40,7 @@
     }
 
     .dropdown-menu {
-        max-height: 400px;
+        max-height: 80vh;
         max-width: 200px;
         overflow-x: hidden;
         overflow-y: auto;
@@ -140,6 +140,12 @@
                 text-transform: uppercase;
             }
 
+            .divider {
+                & + .divider {
+                    display: none;
+                }
+            }
+
             > a {
                 border-radius: 0;
                 line-height: 1.5;

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,12 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .post-code__language {
+        @include opacity(.6);
+        @include transition(none);
+        display: block;
+    }
+
     .backstage-filters {
         display: block;
 
@@ -1024,3 +1030,11 @@
         }
     }
 }
+
+@media screen and (max-width: 320px) {
+    .tip-overlay {
+        &.tip-overlay--sidebar {
+            min-height: 440px;
+        }
+    }
+}

webapp/sass/routes/_settings.scss

@@ -146,10 +146,10 @@
                             @include appearance(none);
                             appearance: none;
                             padding-right: 25px;
+                        }
 
-                            &::ms-expand {
+                        select::ms-expand {
-                                display: none;
+                            display: none;
-                            }
                         }
 
                         &:before {

webapp/sass/routes/_signup.scss

@@ -26,6 +26,10 @@
             @include flex(1.3 0 0);
             padding-right: 80px;
 
+            img {
+                max-width: 450px;
+            }
+
             p {
                 color: lighten($black, 50%);
             }

webapp/utils/constants.jsx

@@ -305,7 +305,7 @@ export default {
             sidebarTextHoverBg: '#e6f2fa',
             sidebarTextActiveBorder: '#378FD2',
             sidebarTextActiveColor: '#111111',
-            sidebarHeaderBg: '#2389d7',
+            sidebarHeaderBg: '#3481B9',
             sidebarHeaderTextColor: '#ffffff',
             onlineIndicator: '#7DBE00',
             awayIndicator: '#DCBD4E',
@@ -315,7 +315,7 @@ export default {
             centerChannelColor: '#333333',
             newMessageSeparator: '#FF8800',
             linkColor: '#2389d7',
-            buttonBg: '#2389d7',
+            buttonBg: '#23A2FF',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#fff2bb',
             mentionHighlightLink: '#2f81b7',