1 files changed, 43 insertions, 16 deletions
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 2c5a67e2..c6fb1ca7 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,31 +1,58 @@
 @import '../../_variables.scss';
 
 .Timeline {
-  .loadmore-text {
-    opacity: 1;
+  .alert-dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: var(--badgeNeutral);
+  }
+
+  .alert-badge {
+    font-size: 0.75em;
+    line-height: 1;
+    text-align: right;
+    border-radius: var(--tooltipRadius);
+    position: absolute;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.4em);
+    padding: 0.2em;
+    margin-left: 0.7em;
+    margin-top: -1em;
+    background-color: var(--badgeNeutral);
+    color: var(--badgeNeutralText);
+  }
+
+  .loadmore-button {
+    position: relative;
   }
 
   &.-blocked {
     cursor: progress;
   }
 
-  .timeline-heading {
-    max-width: 100%;
-    flex-wrap: nowrap;
-    align-items: center;
-    position: relative;
+  .conversation-heading {
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
+    z-index: 2;
+  }
 
-    .loadmore-button {
-      flex-shrink: 0;
+  &.-nonpanel {
+    .timeline-heading {
+      text-align: center;
+      line-height: 2.75em;
+      padding: 0 0.5em;
     }
 
-    .loadmore-text {
-      flex-shrink: 0;
-      line-height: 1em;
+    .timeline-heading {
+      .button-default, .alert {
+        line-height: 2em;
+        width: 100%;
+      }
     }
   }
-
-  .timeline-footer {
-    border: none;
-  }
 }