From 7b99ac0a91720a161a651f92edf3a572f46f2fde Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com>
Date: Fri, 3 Jun 2016 16:58:23 +0500
Subject: [PATCH] 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
---
 .../components/post_view/components/post_header.jsx   |  2 +-
 webapp/components/rhs_comment.jsx                     |  2 +-
 webapp/components/search_results_item.jsx             |  2 +-
 webapp/sass/layout/_post.scss                         | 11 ++++-------
 webapp/sass/layout/_webhooks.scss                     |  7 ++++++-
 webapp/utils/constants.jsx                            | 10 +++++-----
 webapp/utils/utils.jsx                                |  1 +
 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 b79b732bc1..6e54e57e73 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 a980a82279..a49a84b888 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 3fe13878ee..d8e4711101 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 d20cff8ae8..08074c59ab 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 61658ea5ee..976b8361b7 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 55090fc82e..4e293c50e9 100644
--- a/webapp/utils/constants.jsx
+++ b/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',
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 84c2ed4cef..9e01594cfe 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);
     }