From 0dfb9261eab8faff3572aecef4a7c0259ed6b926 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Fri, 19 Jun 2015 11:24:10 +1000
Subject: [PATCH] Improve time gap styling

---
 .../discourse/components/time-gap.js.es6       |  2 ++
 app/assets/stylesheets/desktop/topic-post.scss | 18 ++++++++++++++----
 app/assets/stylesheets/mobile/topic-post.scss  |  4 ++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/time-gap.js.es6 b/app/assets/javascripts/discourse/components/time-gap.js.es6
index fb42dc32463..7b7b9a6c496 100644
--- a/app/assets/javascripts/discourse/components/time-gap.js.es6
+++ b/app/assets/javascripts/discourse/components/time-gap.js.es6
@@ -4,6 +4,8 @@ export default Ember.Component.extend({
   render(buffer) {
     const gapDays = this.get('gapDays');
 
+    buffer.push("<div class='topic-avatar'><i class='fa fa-clock-o'></i></div>");
+
     let timeGapWords;
     if (gapDays < 30) {
       timeGapWords = I18n.t('dates.later.x_days', {count: gapDays});
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 6b6eb254e87..081afbda712 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -720,16 +720,26 @@ $topic-avatar-width: 45px;
 .time-gap {
   width: 755px;
   border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  .topic-avatar {
+    padding: 5px 0;
+    border-top: none;
+  }
+}
+
+.time-gap .topic-avatar i {
+  font-size: 35px;
+  width: 45px;
+  text-align: center;
+  color: lighten($primary, 75%);
 }
 .time-gap-words {
   display: inline-block;
   padding: 0.5em 1em;
-  margin: 0.5em 0 0.5em 56px;
+  margin-top: 9px;
   text-transform: uppercase;
   font-weight: bold;
-  font-size: 0.8em;
-  background-color: dark-light-diff($primary, $secondary, 90%, -60%);
-  color: lighten($primary, 30%);
+  font-size: 0.9em;
+  color: lighten($primary, 60%);
 }
 
 .posts-wrapper {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 71e94ea58ea..535bee6214e 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -6,6 +6,10 @@
   margin: 10px 0;
 }
 
+.time-gap {
+  display: none;
+}
+
 .topic-post {
   border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 6px 0 3px 0;