PLT-3177 - Fixing ordering for custom themes (#3226)

Fix for bot tag and webhook attachments

Adding theme styling for webhooks

Removing embed styling

Improving margins on compcat view for line breaks

webapp/components/post_view/components/post_header.jsx

@@ -38,7 +38,7 @@ export default class PostHeader extends React.Component {
                 );
             }
 
-            botIndicator = <li className='col col__name bot-indicator'>{Constants.BOT_NAME}</li>;
+            botIndicator = <li className='bot-indicator'>{Constants.BOT_NAME}</li>;
         } else if (PostUtils.isSystemMessage(post)) {
             userProfile = (
                 <UserProfile

webapp/components/rhs_comment.jsx

@@ -154,7 +154,7 @@ export default class RhsComment extends React.Component {
         let botIndicator;
 
         if (post.props && post.props.from_webhook) {
-            botIndicator = <li className='col col__name bot-indicator'>{Constants.BOT_NAME}</li>;
+            botIndicator = <li className='bot-indicator'>{Constants.BOT_NAME}</li>;
         }
         let loading;
         let postClass = '';

webapp/components/search_results_item.jsx

@@ -71,7 +71,7 @@ export default class SearchResultsItem extends React.Component {
         let botIndicator;
 
         if (post.props && post.props.from_webhook) {
-            botIndicator = <li className='col col__name bot-indicator'>{Constants.BOT_NAME}</li>;
+            botIndicator = <li className='bot-indicator'>{Constants.BOT_NAME}</li>;
         }
 
         return (

webapp/sass/layout/_post.scss

@@ -502,13 +502,6 @@ body.ios {
             }
         }
 
-        .post__embed-container {
-            img {
-                max-height: 150px;
-                max-width: 150px;
-            }
-        }
-
         .markdown__heading {
             font-size: 1em;
             margin: 0 0 7px;
@@ -520,6 +513,10 @@ body.ios {
             margin-top: -1px;
             padding: 3px 0;
 
+            p + p {
+                margin-top: 1em;
+            }
+
             ol,
             ul {
                 display: inline-block;

webapp/sass/layout/_webhooks.scss

@@ -86,6 +86,10 @@
         display: inline-block;
     }
 
+    .attachment__image {
+        max-height: 300px;
+    }
+
     .attachment__author-name {
         @include opacity(.6);
     }
@@ -119,7 +123,8 @@
 
     .attachment__thumb-container {
         float: right;
-        width: 20%;
+        text-align: right;
+        width: 80px;
 
         img {
             max-height: 75px;

webapp/utils/constants.jsx

@@ -466,16 +466,16 @@ export default {
             id: 'mentionHighlightBg',
             uiName: 'Mention Highlight BG'
         },
-        {
-            group: 'centerChannelElements',
-            id: 'mentionHighlightLink',
-            uiName: 'Mention Highlight Link'
-        },
         {
             group: 'linkAndButtonElements',
             id: 'linkColor',
             uiName: 'Link Color'
         },
+        {
+            group: 'centerChannelElements',
+            id: 'mentionHighlightLink',
+            uiName: 'Mention Highlight Link'
+        },
         {
             group: 'linkAndButtonElements',
             id: 'buttonBg',

webapp/utils/utils.jsx

@@ -718,6 +718,7 @@ export function applyTheme(theme) {
 
     if (theme.linkColor) {
         changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor, 1);
+        changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5), 1);
         changeCss('.app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor, 1);
     }