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/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 {
-        -webkit-border-radius: 0;
-        -moz-border-radius: 0;
-        -ms-border-radius: 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;
+    .popover__row {
+        border-top: 1px solid transparent;
+        margin: 9px -15px 0;
+        padding: 9px 15px 0;
+
         > 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;
-                width: 16px;
+                max-height: 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;
-                    margin: 0 0 15px;
-                    position: absolute;
+                    bottom: auto;
+                    margin: 15px 0 20px;
+                    position: relative;
                 }
 
                 .tutorial__footer {
-                    bottom: 30px;
-                    position: absolute;
+                    bottom: auto;
+                    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;
     }
 }