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

7 files changed, 19 insertions, 16 deletions

diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx
index b79b732bc..6e54e57e7 100644
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/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
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index a980a8227..a49a84b88 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/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 = '';
diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 3fe13878e..d8e471110 100644
--- a/webapp/components/search_results_item.jsx
+++ b/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 (
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index d20cff8ae..08074c59a 100644
--- a/webapp/sass/layout/_post.scss
+++ b/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;
diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index 61658ea5e..976b8361b 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/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;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 55090fc82..4e293c50e 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -467,16 +467,16 @@ export default {
             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',
             uiName: 'Button BG'
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 84c2ed4ce..9e01594cf 100644
--- a/webapp/utils/utils.jsx
+++ b/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);
     }