UX: improve styling of closed messages

also cleans up styling of time gaps on mobile

app/assets/javascripts/discourse/components/small-action.js.es6

@@ -22,8 +22,16 @@ export default Ember.Component.extend({
     if (actionCode) {
       const dt = new Date(this.get('post.created_at'));
       const when =  Discourse.Formatter.relativeAge(dt, {format: 'medium-with-ago'});
-      const result = I18n.t(`action_codes.${actionCode}`, {when});
-      return result + (this.get('post.cooked') || '');
+      var result = I18n.t(`action_codes.${actionCode}`, {when});
+      var cooked = this.get('post.cooked');
+
+      result = "<p>" + result + "</p>";
+
+      if (!Em.isEmpty(cooked)) {
+        result += "<div class='custom-message'>" + cooked + "</div>";
+      }
+
+      return result;
     }
   }.property('actionCode', 'post.created_at', 'post.cooked'),
 

app/assets/javascripts/discourse/templates/components/small-action.hbs

@@ -11,5 +11,5 @@
       {{avatar post imageSize="small"}}
     </a>
   {{/if}}
-  <p>{{{description}}}</p>
+  {{{description}}}
 </div>

app/assets/stylesheets/common/base/topic-post.scss

@@ -279,14 +279,24 @@ table.md-table {
     text-transform: uppercase;
     font-weight: bold;
     font-size: 0.9em;
-    color: lighten($primary, 60%);
+    color: lighten($primary, 50%);
+
+    .custom-message {
+      text-transform: none;
+      margin: 15px 0px 5px;
+      font-weight: normal;
+      font-size: 14px;
+      p {
+        margin: 5px 0;
+      }
+    }
 
     .avatar {
       margin-right: 0.8em;
       float: left;
     }
 
-    p {
+    > p {
       margin: 0;
       padding-top: 4px;
     }

app/assets/stylesheets/mobile/topic-post.scss

@@ -512,3 +512,17 @@ span.highlighted {
 .read-state {
   display: none;
 }
+
+.small-action .small-action-desc {
+  .custom-message {
+    margin-left: -40px;
+  }
+}
+
+.small-action .topic-avatar {
+  padding: 0;
+}
+
+.small-action.time-gap .topic-avatar {
+  margin-top: -5px;
+}