visual update of replies

css/base.css

@@ -2556,22 +2556,46 @@ ul.tabbar li.active > a {
   outline: none;
 }
 
-/* Blue quote bar left of the quoted (cited) text */
+/* Quoted (cited) content */
 .reply-quote {
   position: relative;
   cursor: pointer;
-  padding-left: 1em;
-  border-left: solid #039be5;
+  padding: 0 0.5rem 0.2rem 0.5rem;
+  border-left: 0.25rem solid #039be5;
   line-height: 1.5em;
-  font-weight: 100;
-  margin-left: 0.2em;
+  font-weight: lighter;
+  border-radius: 0.25rem;
+  color: #666;
+}
+
+.chat-box .bubble .reply-quote {
+  margin: -0.25rem -0.75rem 0.5rem -0.75rem;
+}
+
+.chat-box .left .reply-quote {
+  background-color: #f3f9ed;
+}
+
+.chat-box .right .reply-quote {
+  background-color: white;
 }
 
 .reply-quote-header {
   color: #039be5;
 }
 
-.reply-quote-preview {
+#reply-quote-preview {
   display: flex;
   align-items: center;
 }
+
+#reply-quote-preview .reply-quote {
+  width: 100%;
+  background-color: #fafafa;
+  margin: 0.35rem 0.5rem 0 0;
+}
+
+#reply-quote-preview .cancel {
+  min-width: 2.4rem;
+  text-align: center;
+}

src/views/messages-view.jsx

@@ -1242,10 +1242,10 @@ function quotePreviewFmt(fmt, ent) {
       return [new_fmt, ent];
     case 'BN':
       new_fmt.tp = null;
-      return [new_fmt, { tp: 'IC', data: { orig: 'BN', iconName: 'button'}}];
+      return [new_fmt, { tp: 'IC', data: { orig: 'BN', name: 'button'}}];
     case 'FM':
       new_fmt.tp = null;
-      return [new_fmt, {tp: 'IC', data: { orig: 'FM', iconName: 'form'}}];
+      return [new_fmt, {tp: 'IC', data: { orig: 'FM', name: 'form'}}];
     case 'RW':
       return [null, null];
     case 'EX':
@@ -1255,7 +1255,7 @@ function quotePreviewFmt(fmt, ent) {
         // Render it normally.
         new_fmt.at = 0;
       }
-      return [new_fmt, {tp: 'IC', data: { orig: 'EX', iconName: 'attachment'}}];
+      return [new_fmt, {tp: 'IC', data: { orig: 'EX', name: 'attachment'}}];
     case 'QQ':
       // Quote/citation.
       return [null,null];
@@ -1348,28 +1348,23 @@ function draftyFormatter(style, data, values, key) {
         break;
       case 'IC':
         // Icon.
-        if (data.iconName == 'button') {
+        if (data.name == 'button') {
           attr.className = 'flat-button faux';
         } else {
-          let iconName;
-          let iconTitle;
-          switch (data.iconName) {
-            case 'form':
-              iconName = 'dashboard';
-              iconTitle = 'drafty_form';
-              break;
-            case 'attachment':
-              iconName = 'attachment';
-              iconTitle = 'drafty_attachment';
-              break;
-            default:
-              break;
-          }
+          const icons = {
+            form: {
+              name: 'dashboard', title: 'drafty_form'
+            },
+            attachment: {
+              name: 'attachment', title: 'drafty_attachment'
+            }
+          };
+          const icon = icons[data.name];
           el = React.Fragment;
-          if (iconName && iconTitle) {
-            const iconKey = data.orig.toLowerCase();
-            values = [<i key={iconKey} className="material-icons">{iconName}</i>,
-              formatMessage(messages[iconTitle])].concat(' ', values || []);
+          if (icon) {
+            const key = data.orig.toLowerCase();
+            values = [<i key={key} className="material-icons">{icon.name}</i>,
+              formatMessage(messages[icon.title])].concat(' ', values || []);
           } else {
             values = [];
           }

src/widgets/send-message.jsx

@@ -168,8 +168,10 @@ class SendMessage extends React.PureComponent {
     return (
       <div id="send-message-wrapper">
       {quote ?
-        <div className="reply-quote-preview">
-          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
+        <div id="reply-quote-preview">
+          <div className="cancel">
+            <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
+          </div>
           {quote}
         </div>
       :

umd/index.dev.js

@@ -4093,7 +4093,7 @@ function quotePreviewFmt(fmt, ent) {
         tp: 'IC',
         data: {
           orig: 'BN',
-          iconName: 'button'
+          name: 'button'
         }
       }];
 
@@ -4103,7 +4103,7 @@ function quotePreviewFmt(fmt, ent) {
         tp: 'IC',
         data: {
           orig: 'FM',
-          iconName: 'form'
+          name: 'form'
         }
       }];
 
@@ -4121,7 +4121,7 @@ function quotePreviewFmt(fmt, ent) {
         tp: 'IC',
         data: {
           orig: 'EX',
-          iconName: 'attachment'
+          name: 'attachment'
         }
       }];
 
@@ -4220,35 +4220,28 @@ function draftyFormatter(style, data, values, key) {
         break;
 
       case 'IC':
-        if (data.iconName == 'button') {
+        if (data.name == 'button') {
           attr.className = 'flat-button faux';
         } else {
-          let iconName;
-          let iconTitle;
-
-          switch (data.iconName) {
-            case 'form':
-              iconName = 'dashboard';
-              iconTitle = 'drafty_form';
-              break;
-
-            case 'attachment':
-              iconName = 'attachment';
-              iconTitle = 'drafty_attachment';
-              break;
-
-            default:
-              break;
-          }
-
+          const icons = {
+            form: {
+              name: 'dashboard',
+              title: 'drafty_form'
+            },
+            attachment: {
+              name: 'attachment',
+              title: 'drafty_attachment'
+            }
+          };
+          const icon = icons[data.name];
           el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
 
-          if (iconName && iconTitle) {
-            const iconKey = data.orig.toLowerCase();
+          if (icon) {
+            const key = data.orig.toLowerCase();
             values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
-              key: iconKey,
+              key: key,
               className: "material-icons"
-            }, iconName), formatMessage(messages[iconTitle])].concat(' ', values || []);
+            }, icon.name), formatMessage(messages[icon.title])].concat(' ', values || []);
           } else {
             values = [];
           }
@@ -11466,7 +11459,9 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "send-message-wrapper"
     }, quote ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "reply-quote-preview"
+      id: "reply-quote-preview"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "cancel"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
       onClick: e => {
@@ -11475,7 +11470,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       }
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons gray"
-    }, "close")), quote) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, "close"))), quote) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "send-message-panel"
     }, !this.props.disabled ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, this.props.onAttachFile ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",