[pull] master from mattermost:master

webapp/channels/src/components/advanced_text_editor/priority_labels/priority_labels.scss

@@ -10,6 +10,15 @@
         }
     }
 
+    .priorityLabelsAcknowledgements {
+        display: flex;
+        align-items: center;
+        color: var(--online-indicator);
+        font-size: 11px;
+        font-weight: 600;
+        line-height: 16px;
+    }
+
     .priorityLabelsClose {
         display: flex;
         align-items: center;

webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx

@@ -100,7 +100,7 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
 
         return (
             <ProfilePicture
-                size='md'
+                size={this.props.compactDisplay ? 'inherit' : 'md'}
                 src={src}
                 profileSrc={profileSrc}
                 isEmoji={isEmoji}

webapp/channels/src/components/profile_picture/index.tsx

@@ -53,8 +53,8 @@ function ProfilePicture(props: Props) {
                 triggerComponentAs='button'
                 triggerComponentStyle={{
                     borderRadius: '50%',
-                    width: `${getAvatarWidth(props?.size ?? 'md')}px`,
-                    height: `${getAvatarWidth(props?.size ?? 'md')}px`,
+                    width: getAvatarWidth(props?.size ?? 'md'),
+                    height: getAvatarWidth(props?.size ?? 'md'),
                 }}
             >
                 <>

webapp/channels/src/components/widgets/users/avatar/avatar.tsx

@@ -12,30 +12,30 @@ import BotDefaultIcon from 'images/bot_default_icon.png';
 
 import './avatar.scss';
 
-export type TAvatarSizeToken = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl-custom-GM' | 'xl-custom-DM' | 'xxl';
+export type TAvatarSizeToken = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl-custom-GM' | 'xl-custom-DM' | 'xxl' | 'inherit';
 
 export const getAvatarWidth = (size: TAvatarSizeToken) => {
     switch (size) {
     case 'xxs':
-        return 16;
+        return '16px';
     case 'xs':
-        return 20;
+        return '20px';
     case 'sm':
-        return 24;
+        return '24px';
     case 'md':
-        return 32;
+        return '32px';
     case 'lg':
-        return 36;
+        return '36px';
     case 'xl':
-        return 50;
+        return '50px';
     case 'xl-custom-GM':
-        return 72;
+        return '72px';
     case 'xl-custom-DM':
-        return 96;
+        return '96px';
     case 'xxl':
-        return 128;
+        return '128px';
     }
-    return 0;
+    return 'inherit';
 };
 
 type Props = {

webapp/channels/src/sass/components/_post.scss

@@ -749,10 +749,8 @@
 
         .post__img {
             width: 16px;
-            padding-top: 1px;
 
-            img,
-            button {
+            .profile-icon {
                 display: none;
             }
         }
@@ -807,11 +805,9 @@
         }
 
         .status-wrapper {
-            height: 14px;
-
             .status {
                 position: relative;
-                top: auto;
+                top: 1px;
                 right: auto;
                 bottom: auto;
                 left: -2px;