Ui improvements (#6089)

* PLT-6084 - Fixing emoji reaction overflow

* PLT-6158 - Fixing pinned badge alignment in RHS

* PLT-6306 - Post alignment in compact view

* PLT-6266 - Adjusting spacing for files (compact)

* PLT-6245 - Adjusting spacing in emoji screen modal

* PLT-6237 - Adjusting filter in system console

* PLT-6247 - Adjusting spacing on code block tag

* PLT-6302 - Margins not equal for paragraphs in post

webapp/components/emoji/components/delete_emoji_modal.jsx

@@ -25,7 +25,7 @@ export default class DeleteEmoji extends DeleteModalTrigger {
     get modalMessage() {
         return (
             <div className='alert alert-warning'>
-                <i className='fa fa-warning'/>
+                <i className='fa fa-warning fa-margin--right'/>
                 <FormattedMessage
                     id='emoji_list.delete.confirm.msg'
                     defaultMessage='This action permanently deletes the custom emoji. Are you sure you want to delete it?'

webapp/components/emoji_picker/components/emoji_picker_preview.jsx

@@ -44,7 +44,7 @@ export default class EmojiPickerPreview extends React.Component {
                     <div className='emoji-picker__preview-image-box'>
                         {previewImage}
                     </div>
-                    <div className='emoji-picker__preview-image-box'>
+                    <div className='emoji-picker__preview-detail-box'>
                         <span className='emoji-picker__preview-name'>{name}</span>
                         <span
                             className='emoji-picker__preview-aliases'

webapp/sass/components/_emoticons.scss

@@ -240,6 +240,7 @@
         margin: 3px;
     }
 }
+
 .emojisprite-wrapper {
     cursor: pointer;
 }
@@ -247,30 +248,33 @@
 .emoji-picker__preview {
     border-top: 1px solid;
     display: table-cell;
-    vertical-align: middle;
     flex-grow: 0;
     flex-shrink: 0;
-    height:45px;
+    height: 45px;
-    width: 278px;
     padding: 3px 10px;
+    vertical-align: middle;
+    width: 278px;
 
     &.emoji-picker__preview-placeholder {
         padding: 12px;
     }
 
-    .emoji-picker__preview-image-box {
+    > div {
         display: table-cell;
         vertical-align: middle;
+    }
+
+    .emoji-picker__preview-image-box {
         height: 36px;
         width: 42px;
 
         .sprite-preview {
-            height: 36px;
+            border: none;
-            width: 36px;
-            vertical-align: middle;
-            padding: 0px;
-            border: 0px;
             display: inline-block;
+            height: 36px;
+            padding: 0;
+            vertical-align: middle;
+            width: 36px;
         }
     }
 

webapp/sass/layout/_markdown.scss

@@ -64,19 +64,19 @@
     padding: 4px 10px 5px;
     position: absolute;
     right: 0;
-    top: 0;
+    top: 5;
     z-index: 5;
 }
 
 .post-code__lineno {
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    -webkit-user-select: none;
     border-right: 1px solid #aaa;
     color: #aaa;
     margin-right: .5em;
     text-align: right;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
     user-select: none;
 }
 

webapp/sass/layout/_post.scss

@@ -836,7 +836,7 @@
         }
 
         .post__img {
-            padding-top: 3px;
+            padding-top: 1px;
             width: 16px;
 
             img {
@@ -911,7 +911,7 @@
                 left: 36px;
                 margin-left: 7px;
                 position: absolute;
-                top: 8px;
+                top: 6px;
             }
 
             .post__img {
@@ -1034,6 +1034,7 @@
             right: 0;
             top: -4px;
             white-space: nowrap;
+            z-index: 6;
         }
 
         .col__remove {
@@ -1156,7 +1157,6 @@
         word-wrap: break-word;
 
         div {
-            margin-bottom: .4em;
         }
 
         p + p {

webapp/sass/layout/_sidebar-right.scss

@@ -42,6 +42,12 @@
     }
 
     .post {
+        &.post--compact {
+            .post__pinned-badge {
+                margin: 0 0 0 5px;
+            }
+        }
+
         .post__content {
             padding: 0 10px 0 0;
         }

webapp/sass/responsive/_tablet.scss

@@ -19,16 +19,18 @@
             width: 300px;
         }
     }
-    .post-right__scroll{
+
-        .post-create__container{
+    .post-right__scroll {
+        .post-create__container {
             .post-create-body {
                 .icon__emoji_picker {
-                    display:none;
+                    display: none;
                     top: -7px;
                 }
             }
         }
     }
+
     .post-create__container {
         form {
             padding: .5em 0 0;
@@ -262,8 +264,12 @@
             &:not(.post--thread) {
                 padding: 0 .5em 0 77px;
 
+                &.other--root {
+
+                }
+
                 .post__link {
-                    margin: 4px 0 7px;
+                    margin: 3px 0 7px;
                     vertical-align: bottom;
                 }
 
@@ -278,7 +284,7 @@
                 .post__header {
                     float: left;
                     height: 21px;
-                    padding-top: 3px;
+                    padding-top: 2px;
 
                     .col__name {
                         font-weight: bold;
@@ -298,14 +304,6 @@
                 }
 
                 &.other--root {
-                    .post__body {
-                        > div {
-                            &:first-child {
-                                min-height: 21px;
-                            }
-                        }
-                    }
-
                     .post__link + .post__body {
                         clear: both;
                     }
@@ -422,11 +420,11 @@
                         display: inline-block;
                         font-size: 11px;
                         left: -14px;
-                        line-height: 34px;
+                        line-height: 20px;
                         position: absolute;
                         text-align: right;
                         text-rendering: auto;
-                        top: -2px;
+                        top: 4px;
                         width: 51px;
 
                         &:hover {

webapp/sass/routes/_admin-console.scss

@@ -498,7 +498,11 @@
 
     .system-users__team-filter {
         display: inline-block;
-        width: 200px
+        width: 200px;
+    }
+
+    label {
+        font-weight: normal;
     }
 }