[UI] add improvement to display entities with boxes

Resources/Gruntfile.js

@@ -100,7 +100,7 @@ module.exports = function(grunt) {
       sass: {
          dist: {
             options: {
-               debugInfo: true,
+               debugInfo: false,
             },
             files: [{
                expand: true,

Resources/public/sass/_custom.scss

@@ -1,5 +1,7 @@
 // YOUR CUSTOM SCSS
 @import 'custom/timeline';
+@import 'custom/mixins/entity';
+@import 'custom/activity';
 
 html,body { 
    min-height:100%;
@@ -147,7 +149,8 @@ div.input_with_post_text input {
 }
 /* <- INPUT CLASS */
 
-dl.chill_report_view_data {
+dl.chill_report_view_data,
+dl.chill_view_data {
     
     dt {
         margin-top: 1.5em;
@@ -168,3 +171,20 @@ dl.chill_report_view_data {
 .flash_message {
     margin-top: 2.5em;
 }
+
+blockquote.chill-user-quote {
+    border-left: 10px solid $chill-yellow;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+    quotes: "\201C""\201D""\2018""\2019";
+    background-color: $chill-llight-gray;
+    
+    
+    p { display: inline; }
+    
+}
+
+.chill-no-data-statement {
+    font-style: italic;
+    
+}

Resources/public/sass/custom/_activity.scss

@@ -0,0 +1,4 @@
+span.entity.entity-activity.activity-reason {
+    @include entity($chill-pink, white);
+}
+

Resources/public/sass/custom/mixins/entity.scss

@@ -0,0 +1,15 @@
+@mixin entity($background-color, $color: white) {
+    font-variant: small-caps;
+    display: inline;
+    padding: .2em .6em .3em;
+    font-size: 88%;
+    font-weight: bold;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25em;
+    color: $color;
+    background-color: $background-color;
+}
+