MM-16803 - Updating post styling (#3088)

* MM-16803 - Updating post styling * Updating 12 hour clock display
mattermost · Jul 11, 2019 · 4bd019a · 4bd019a
1 parent e6ba1db
commit 4bd019a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git a/...iew/post_body_additional_content/__snapshots__/post_body_additional_content.test.jsx.snap b/...iew/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
@@ -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
@@ -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
@@ -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
@@ -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;