Multiple Ui improvements (#5398)

* PLT-5475 - Adjusting tutorials on mobile

* PLT-5475 - Adjusting tutorials on mobile

* PLT-5457 - Adjusting save button

* PLT-5443 - Updating highllight on status compact

* PLT-5413 - Team sidebar not scrolling

* PLT-5358 - Maintaing aspect ratio for emojis

* PLT-5411 - Removing help text from LDAP signin

* PLT-5420 - Updating emoticon for headings

* Updating emoji size

* Updating emoji size

* Removing emoticon tag

* Updating emoticon sizes

* Updating emoji size

webapp/components/emoji/components/add_emoji.jsx

@@ -186,9 +186,9 @@ export default class AddEmoji extends React.Component {
                             defaultMessage='This is a sentence with {image} in it.'
                             values={{
                                 image: (
-                                    <img
+                                    <span
                                         className='emoticon'
-                                        src={this.state.imageUrl}
+                                        style={{backgroundImage: 'url(' + this.state.imageUrl + ')'}}
                                     />
                                 )
                             }}

webapp/components/emoji/components/emoji_list_item.jsx

@@ -98,9 +98,9 @@ export default class EmojiListItem extends React.Component {
                     {':' + emoji.name + ':'}
                 </td>
                 <td className='emoji-list__image'>
-                    <img
+                    <span
                         className='emoticon'
-                        src={EmojiStore.getEmojiImageUrl(emoji)}
+                        style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(emoji) + ')'}}
                     />
                 </td>
                 <td className='emoji-list__creator'>

webapp/components/post_view/components/reaction.jsx

@@ -188,9 +188,9 @@ export default class Reaction extends React.Component {
                     className={className}
                     onClick={handleClick}
                 >
-                    <img
+                    <span
-                        className='post-reaction__emoji'
+                        className='post-reaction__emoji emoticon'
-                        src={EmojiStore.getEmojiImageUrl(EmojiStore.get(this.props.emojiName))}
+                        style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(EmojiStore.get(this.props.emojiName)) + ')'}}
                     />
                     <span className='post-reaction__count'>
                         {this.props.reactions.length}

webapp/components/profile_popover.jsx

@@ -244,7 +244,7 @@ export default class ProfilePopover extends React.Component {
                 <div
                     data-toggle='tooltip'
                     key='user-popover-dm'
-                    className='popover-dm__content'
+                    className='popover__row'
                 >
                     <a
                         href='#'

webapp/components/user_settings/user_settings_general.jsx

@@ -500,7 +500,6 @@ class UserSettingsGeneralTab extends React.Component {
                                 }}
                             />
                         </div>
-                        {helpText}
                     </div>
                 );
             } else if (this.props.user.auth_service === Constants.SAML_SERVICE) {

webapp/sass/components/_emoticons.scss

@@ -6,7 +6,9 @@
     background-size: contain;
     display: inline-block;
     height: 20px;
-    vertical-align: text-top;
+    min-height: 1em;
+    min-width: 1em;
+    vertical-align: middle;
     width: 20px;
 }
 

webapp/sass/components/_popover.scss

@@ -35,26 +35,16 @@
         }
     }
 
-    .popover-dm__content {
+    .popover__row {
-        -webkit-border-radius: 0;
+        border-top: 1px solid transparent;
-        -moz-border-radius: 0;
+        margin: 9px -15px 0;
-        -ms-border-radius: 0;
+        padding: 9px 15px 0;
-        -o-border-radius: 0;
+
-        border-radius: 0;
-        max-width: 100%;
-        overflow: hidden;
-        padding: 5px 5px 5px 0px;
-        text-overflow: ellipsis;
-        margin: 0;
-        font-size: 14px;
-        border-top: 1px solid #ebebeb;
-        border-color: rgba(221, 221, 221, 0.2);
-        margin-top: 5px;
-        margin-bottom: -5px;
         > a {
             > i {
                 margin-right: 5px;
             }
+
             > span {
                 text-transform: capitalize;
             }

webapp/sass/layout/_post.scss

@@ -575,14 +575,16 @@
 
             .status {
                 bottom: auto;
-                left: -3px;
+                height: 13px;
+                left: -2px;
                 position: relative;
                 right: auto;
                 top: auto;
+                width: 13px;
             }
 
             svg {
-                top: 0;
+                top: 1px;
             }
 
             &:after {
@@ -1023,7 +1025,7 @@
         word-wrap: break-word;
 
         div {
-            margin: 0 0 .4em;
+            margin-bottom: .4em;
         }
 
         p + p {
@@ -1135,10 +1137,11 @@
             padding: 0 4px 0 3px;
 
             .post-reaction__emoji {
-                height: 16px;
+                height: auto;
                 margin: 2px 3px 0 0;
-                vertical-align: top;
+                max-height: 16px;
-                width: 16px;
+                max-width: 16px;
+                vertical-align: middle;
             }
 
             .post-reaction__count {

webapp/sass/layout/_team-sidebar.scss

@@ -8,7 +8,8 @@
         z-index: 5;
 
         .team-wrapper {
-            background-color: rgba(0, 0, 0, 0.2);
+            -webkit-overflow-scrolling: touch;
+            background-color: alpha-color($black, .2);
             height: 100%;
             overflow: auto;
             padding-top: 15px;

webapp/sass/responsive/_mobile.scss

@@ -1556,17 +1556,24 @@
     }
 
     .tutorial-steps__container {
+        left: 0;
+        position: fixed;
+        top: 0;
+
         .tutorial__content {
             .tutorial__steps {
+                margin-top: 20px;
+                min-height: auto;
                 padding: 0 20px;
                 width: 100%;
 
                 h1 {
-                    font-size: 35px;
+                    font-size: 2em;
                     margin: -5px 0 20px;
                 }
 
                 h3 {
+                    font-size: 1.5em;
                     margin-bottom: 10px;
                 }
 
@@ -1575,14 +1582,14 @@
                 }
 
                 .tutorial__circles {
-                    bottom: 60px;
+                    bottom: auto;
-                    margin: 0 0 15px;
+                    margin: 15px 0 20px;
-                    position: absolute;
+                    position: relative;
                 }
 
                 .tutorial__footer {
-                    bottom: 30px;
+                    bottom: auto;
-                    position: absolute;
+                    position: relative;
                 }
             }
         }

webapp/sass/routes/_backstage.scss

@@ -396,22 +396,22 @@
 }
 
 .emoji-list__name {
-    padding: 20px 0px 20px 15px;
+    padding: 20px 0 20px 15px;
     width: 30%;
 }
 
 .emoji-list__image {
-    padding: 15px 0px;
+    padding: 15px 0;
     width: 15%;
 }
 
 .emoji-list__creator {
-    padding: 15px 0px;
+    padding: 15px 0;
     width: 40%;
 }
 
 .emoji-list__actions {
-    padding: 20px 15px 20px 0px;
+    padding: 20px 15px 20px 0;
     width: 15%;
 }
 
@@ -434,8 +434,4 @@
 .add-emoji__filename,
 .add-emoji__preview {
     padding-top: 7px;
-
-    .emoticon {
-        margin-bottom: 0;
-    }
 }

webapp/sass/routes/_get-app.scss

@@ -19,6 +19,7 @@
     .get-app__continue-with-browser {
         display: block;
         margin-top: 40px;
+        padding-bottom: 30px;
         text-align: center;
     }
 }

webapp/utils/utils.jsx

@@ -548,6 +548,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);
+        changeCss('@media(max-width: 320px){.tutorial-steps__container', 'background:' + theme.centerChannelBg);
         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, .app__body .status-wrapper .status', 'background:' + theme.centerChannelBg);
         changeCss('#post-list .post-list-holder-by-time, .app__body .post .dropdown-menu a', 'background:' + theme.centerChannelBg);
         changeCss('#post-create', 'background:' + theme.centerChannelBg);
@@ -594,7 +595,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25));
         changeCss('.app__body .popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25));
         changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
-        changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover-dm__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover__row', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .suggestion-list__divider:before, .app__body .dropdown-menu .divider, .app__body .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor);
         changeCss('.app__body .custom-textarea', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));