From d14851e552fb42b8132836ef450eca7af4b9f544 Mon Sep 17 00:00:00 2001
From: Joe <johani@discourse.org>
Date: Wed, 28 Aug 2019 16:18:27 +0800
Subject: [PATCH] UX: better alignment for tags in the header (#8047)

* Removes unused styles

This commit only removes unnecessary / duplicate styles. It does not cause any visual changes.

* adds class to `<h1>` tag in header topic info.

This is much better to target than `h1`

* removes unused styles

* header title margin adjustment

* minor header-title margin adjustments

* One more header-title margin adjustment
---
 .../widgets/header-topic-info.js.es6          |  2 +-
 .../stylesheets/common/base/header.scss       | 11 +++--
 app/assets/stylesheets/desktop/header.scss    |  3 --
 .../stylesheets/desktop/topic-post.scss       | 46 -------------------
 app/assets/stylesheets/mobile/header.scss     |  7 ++-
 5 files changed, 13 insertions(+), 56 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6 b/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
index f3b136b6abe..02edb15cbe6 100644
--- a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
+++ b/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
@@ -94,7 +94,7 @@ export default createWidget("header-topic-info", {
       );
     }
 
-    const title = [h("h1", heading)];
+    const title = [h("h1.header-title", heading)];
     const category = topic.get("category");
 
     if (loaded || category) {
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 705acde85f0..306388318f0 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -257,8 +257,12 @@
       color: $danger;
     }
   }
-  h1 {
-    margin: 0 0 0.25em 0;
+  .header-title {
+    margin: 0 0 0.15em 0;
+    .archetype-private_message & {
+      // PMs might have participant avatars in the header
+      margin: 0;
+    }
     font-size: $font-up-3;
     width: 100%;
   }
@@ -277,9 +281,6 @@
   }
   .badge-wrapper {
     margin-right: 8px;
-    &.bullet {
-      padding-top: 2px; // alignment hack
-    }
   }
   .badge-wrapper.bullet {
     .badge-category-parent-bg,
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 730edd2f61b..b76ac0d2931 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -18,9 +18,6 @@
     &:not(.two-rows) {
       min-height: 2.75em;
     }
-    h1 {
-      margin: 0 0 0.125em 0;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 21b94f83761..0ec4d3446b5 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -513,52 +513,6 @@ video {
   }
 }
 
-.extra-info-wrapper {
-  overflow: hidden;
-  .badge-wrapper,
-  i,
-  .topic-link {
-    -webkit-animation: fadein 0.7s;
-    animation: fadein 0.7s;
-  }
-  .topic-statuses {
-    .d-icon {
-      color: $header_primary-medium;
-    }
-    .d-icon-envelope {
-      color: $danger;
-    }
-  }
-  .topic-link {
-    color: $header_primary;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-/* default docked header CSS for all topics, including those without categories */
-
-.extra-info {
-  h1 {
-    margin: 5px 0 0 0;
-    font-size: $font-up-3;
-    line-height: $line-height-large;
-    width: 100%;
-  }
-}
-
-/* override docked header CSS for topics with categories */
-
-.extra-info.two-rows {
-  h1 {
-    line-height: $line-height-medium;
-    margin: 0;
-    width: 100%;
-  }
-}
-
 .open > .dropdown-menu {
   display: block;
 }
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 22610af8430..43e9813f2e6 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -38,8 +38,13 @@
       &:not(.two-rows) {
         min-height: 2.25em;
       }
-      h1 {
+      .header-title {
         font-size: $font-0;
+        margin: 0 0 0.35em 0;
+        .archetype-private_message & {
+          // PMs might have participant avatars in the header
+          margin: 0 0 0.15em 0;
+        }
       }
       .private-message-glyph-wrapper {
         float: left;