From 4bd019ac102d31b9e64351a63eb458134954209d Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 12 Jul 2019 01:29:10 +0500
Subject: [PATCH] MM-16803 - Updating post styling (#3088)

* MM-16803 - Updating post styling

* Updating 12 hour clock display
---
 .../post_body_additional_content.test.jsx.snap         | 10 +++++-----
 .../post_body_additional_content.jsx                   |  2 +-
 sass/layout/_post.scss                                 |  2 +-
 sass/responsive/_mobile.scss                           |  5 ++++-
 sass/responsive/_tablet.scss                           | 10 +++++-----
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.jsx.snap b/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.jsx.snap
index 2e121d484ff0..9d2ae5953618 100644
--- a/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.jsx.snap
+++ b/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.jsx.snap
@@ -4,7 +4,7 @@ exports[`PostBodyAdditionalContent with a YouTube video should not render conten
 <div>
   <button
     aria-label="Toggle Embed Visibility"
-    className="style--none post__embed-visibility pull-left"
+    className="style--none post__embed-visibility color--link pull-left"
     data-expanded={false}
     key="toggle"
     onClick={[Function]}
@@ -19,7 +19,7 @@ exports[`PostBodyAdditionalContent with a YouTube video should render correctly
 <div>
   <button
     aria-label="Toggle Embed Visibility"
-    className="style--none post__embed-visibility pull-left"
+    className="style--none post__embed-visibility color--link pull-left"
     data-expanded={true}
     key="toggle"
     onClick={[Function]}
@@ -42,7 +42,7 @@ exports[`PostBodyAdditionalContent with a YouTube video should render the toggle
   </span>
   <button
     aria-label="Toggle Embed Visibility"
-    className="style--none post__embed-visibility "
+    className="style--none post__embed-visibility color--link "
     data-expanded={true}
     key="toggle"
     onClick={[Function]}
@@ -72,7 +72,7 @@ exports[`PostBodyAdditionalContent with an image preview should render correctly
 <div>
   <button
     aria-label="Toggle Embed Visibility"
-    className="style--none post__embed-visibility pull-left"
+    className="style--none post__embed-visibility color--link pull-left"
     data-expanded={true}
     key="toggle"
     onClick={[Function]}
@@ -114,7 +114,7 @@ exports[`PostBodyAdditionalContent with an image preview should render the toggl
   </span>
   <button
     aria-label="Toggle Embed Visibility"
-    className="style--none post__embed-visibility "
+    className="style--none post__embed-visibility color--link "
     data-expanded={true}
     key="toggle"
     onClick={[Function]}
diff --git a/components/post_view/post_body_additional_content/post_body_additional_content.jsx b/components/post_view/post_body_additional_content/post_body_additional_content.jsx
index b1ba83ab4eaf..e051dbd097a8 100644
--- a/components/post_view/post_body_additional_content/post_body_additional_content.jsx
+++ b/components/post_view/post_body_additional_content/post_body_additional_content.jsx
@@ -118,7 +118,7 @@ export default class PostBodyAdditionalContent extends React.PureComponent {
         return (
             <button
                 key='toggle'
-                className={`style--none post__embed-visibility ${prependToggle ? 'pull-left' : ''}`}
+                className={`style--none post__embed-visibility color--link ${prependToggle ? 'pull-left' : ''}`}
                 data-expanded={this.props.isEmbedVisible}
                 aria-label='Toggle Embed Visibility'
                 onClick={this.toggleEmbedVisibility}
diff --git a/sass/layout/_post.scss b/sass/layout/_post.scss
index a7dae8b13b54..2780eada79f7 100644
--- a/sass/layout/_post.scss
+++ b/sass/layout/_post.scss
@@ -1617,6 +1617,7 @@
 
         .post-reaction-list {
             display: flex;
+            padding: 4px 0 0;
             align-items: center;
             min-height: 30px;
             position: relative;
@@ -1662,7 +1663,6 @@
                 line-height: 0;
                 margin: 0 5px;
                 position: relative;
-                top: 1px;
                 vertical-align: middle;
             }
 
diff --git a/sass/responsive/_mobile.scss b/sass/responsive/_mobile.scss
index f2686a98e42e..ebe321e72e18 100644
--- a/sass/responsive/_mobile.scss
+++ b/sass/responsive/_mobile.scss
@@ -421,7 +421,10 @@
         }
 
         .post-add-reaction {
-            display: none;
+            .post-reaction {
+                opacity: 1;
+                visibility: visible;
+            }
         }
 
         .browser--ie & {
diff --git a/sass/responsive/_tablet.scss b/sass/responsive/_tablet.scss
index 7a1de8b11124..08af7ef1ce3c 100644
--- a/sass/responsive/_tablet.scss
+++ b/sass/responsive/_tablet.scss
@@ -309,14 +309,14 @@
             .channel__wrap & {
                 .post__permalink {
                     position: absolute;
-                    left: -50px;
-                    top: 2px;
+                    left: -76px;
+                    top: 1px;
+                    width: 60px;
+                    text-align: right;
                 }
 
                 .post__time {
                     font-size: .85em;
-                    text-align: right;
-                    width: 60px;
                 }
 
                 .star-icon__container {
@@ -502,7 +502,7 @@
                     .post__permalink {
                         position: absolute;
                         left: -18px;
-                        top: 5px;
+                        top: 3px;
 
                         .sidebar--right & {
                             left: -18px;