From 36cb5f30389c8f5dbb9d2d5a784c342d87919868 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 29 Jul 2019 11:54:23 -0400
Subject: [PATCH] UX: Increase contrast of pinned/tracking reason text, improve
layout
---
.../stylesheets/common/base/topic-post.scss | 9 +++++++++
app/assets/stylesheets/desktop/topic-post.scss | 3 ---
app/assets/stylesheets/mobile/topic-post.scss | 17 +++++++++++++----
3 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index f0004e3bed7..00d73f66297 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -931,3 +931,12 @@ a.mention-group {
margin-right: 0.65em;
}
}
+
+#topic-footer-buttons {
+ .reason {
+ color: $primary-high;
+ display: inline;
+ margin: 0 0 0 8px;
+ line-height: $line-height-medium;
+ }
+}
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 0ac6faa4b2e..07238d3ceaf 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -441,9 +441,6 @@ nav.post-controls {
#topic-footer-buttons {
padding: 10px 10px 0 0;
float: left;
- p {
- color: dark-light-choose($primary-medium, $secondary-medium);
- }
.btn {
@include topic-footer-button;
.d-icon-bookmark.bookmarked {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index e87327b25ea..726c6fd614d 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -246,10 +246,19 @@ a.reply-to-tab {
}
}
-#topic-footer-buttons .reason {
- /* this is to force the drop-down notification state description para below the button */
- margin: 0;
- color: dark-light-choose($primary-medium, $secondary-medium);
+#topic-footer-buttons {
+ .topic-notifications-button,
+ .pinned-button {
+ display: flex;
+ align-items: center;
+ @include breakpoint(mobile-medium) {
+ display: inline-block;
+ .reason {
+ display: block;
+ margin: 0.5em 0 0 0;
+ }
+ }
+ }
}
#topic-footer-button {