UX: improved dates styles in topics and dates are now relative

UX: improved dates styles in topics and dates are now relative

diff --git a/assets/javascripts/initializers/decorate-topic-title.js.es6 b/assets/javascripts/initializers/decorate-topic-title.js.es6
index 03edfd7..b450647 100644
--- a/assets/javascripts/initializers/decorate-topic-title.js.es6
+++ b/assets/javascripts/initializers/decorate-topic-title.js.es6
@@ -9,17 +9,20 @@ function initializeDecorateTopicTitle(api) {
       const date = moment.utc(startsAt);
 
       if (topicTitleType === "topic-list-item-title") {
-        if (node.querySelector(".event-date")) {
+        if (node.querySelector(".event-date-container")) {
           return;
         }
 
-        const dateContainer = document.createElement("span");
-        dateContainer.classList.add("event-date");
-        dateContainer.innerText = date
-          .tz(moment.tz.guess())
-          .format(guessDateFormat(date));
+        const eventdateContainer = document.createElement("div");
+        eventdateContainer.classList.add("event-date-container");
+
+        const eventDate = document.createElement("span");
+        eventDate.classList.add("event-date", "relative-future-date");
+        eventDate.dataset.time = date.tz(moment.tz.guess()).valueOf();
+        eventDate.innerText = date.tz(moment.tz.guess()).from(moment());
 
-        node.appendChild(dateContainer);
+        eventdateContainer.appendChild(eventDate);
+        node.appendChild(eventdateContainer);
       }
 
       if (topicTitleType === "header-title") {
diff --git a/assets/javascripts/initializers/future-relative-date.js.es6 b/assets/javascripts/initializers/future-relative-date.js.es6
new file mode 100644
index 0000000..a131818
--- /dev/null
+++ b/assets/javascripts/initializers/future-relative-date.js.es6
@@ -0,0 +1,30 @@
+import { later, cancel } from "@ember/runloop";
+
+export default {
+  name: "relative-future-date",
+
+  initialize() {
+    this._tick();
+  },
+
+  teardown() {
+    if (this._interval) {
+      cancel(this._interval);
+      this._interval = null;
+    }
+  },
+
+  _tick() {
+    this._interval && cancel(this._interval);
+
+    this._interval = later(() => {
+      document.querySelectorAll(".relative-future-date").forEach((date) => {
+        date.innerText = moment(parseInt(date.dataset.time, 10))
+          .tz(moment.tz.guess())
+          .from(moment());
+      });
+
+      this._tick();
+    }, 60 * 1000);
+  },
+};
diff --git a/assets/stylesheets/common/discourse-post-event-core-ext.scss b/assets/stylesheets/common/discourse-post-event-core-ext.scss
index ff156ca..a606988 100644
--- a/assets/stylesheets/common/discourse-post-event-core-ext.scss
+++ b/assets/stylesheets/common/discourse-post-event-core-ext.scss
@@ -1,22 +1,28 @@
 .raw-topic-link {
-  .event-date {
-    font-size: $font-down-2;
-    background: var(--primary-low, $primary-low);
-    padding: 0.25em;
-    border-radius: 3px;
-    vertical-align: middle;
-    margin-left: 0.25em;
+  .event-date-container {
+    display: inline-block;
+    .event-date {
+      font-size: $font-down-2;
+      border: 1px solid var(--primary-medium, $primary-medium);
+      background: none;
+      padding: 0.25em;
+      border-radius: 3px;
+      vertical-align: middle;
+      margin-left: 0.25em;
+    }
   }
 }
 
 .header-title {
   .event-date {
     font-size: $font-down-3;
-    background: var(--primary-low, $primary-low);
-    color: var(--primary-high, $primary-high);
+    background: none;
+    color: var(--primary-medium, $primary-medium);
+    border: 1px solid var(--primary-medium, $primary-medium);
     padding: 0.25em;
     border-radius: 3px;
     vertical-align: middle;
     margin-left: 0.25em;
+    font-weight: 500;
   }
 }
diff --git a/assets/stylesheets/mobile/discourse-post-event-core-ext.scss b/assets/stylesheets/mobile/discourse-post-event-core-ext.scss
new file mode 100644
index 0000000..a2e3819
--- /dev/null
+++ b/assets/stylesheets/mobile/discourse-post-event-core-ext.scss
@@ -0,0 +1,10 @@
+.raw-topic-link {
+  .event-date-container {
+    display: block;
+    margin-top: 0.25em;
+
+    .event-date {
+      margin: 0;
+    }
+  }
+}
diff --git a/plugin.rb b/plugin.rb
index 8662fbf..cef6484 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -13,6 +13,7 @@ load File.expand_path('../lib/calendar_settings_validator.rb', __FILE__)
 
 enabled_site_setting :calendar_enabled
 
+register_asset "javascripts/initializers/future-relative-date.js.es6"
 register_asset 'stylesheets/vendor/fullcalendar.min.css'
 register_asset 'stylesheets/common/discourse-calendar.scss'
 register_asset 'stylesheets/common/upcoming-events-calendar.scss'
@@ -22,6 +23,7 @@ register_asset 'stylesheets/common/discourse-post-event-builder.scss'
 register_asset 'stylesheets/common/discourse-post-event-invitees.scss'
 register_asset 'stylesheets/common/discourse-post-event-upcoming-events.scss'
 register_asset 'stylesheets/common/discourse-post-event-core-ext.scss'
+register_asset 'stylesheets/mobile/discourse-post-event-core-ext.scss', :mobile
 register_asset 'stylesheets/common/discourse-post-event-bulk-invite-modal.scss'
 register_asset 'stylesheets/mobile/discourse-calendar.scss', :mobile
 register_asset 'stylesheets/mobile/discourse-post-event.scss', :mobile

GitHub sha: 0854550f