Add icons for private message actions. Fixes #582

4 files changed, 73 insertions, 22 deletions

diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 8ced73f0..afd9bf95 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -369,6 +369,7 @@ export class Inbox extends Component<any, InboxState> {
       this.sendUnreadCount();
       window.scrollTo(0, 0);
       this.setState(this.state);
+      setupTippy();
     } else if (res.op == UserOperation.MarkAllAsRead) {
       this.state.replies = [];
       this.state.mentions = [];
diff --git a/ui/src/components/private-message-form.tsx b/ui/src/components/private-message-form.tsx
index f5f0cc75..7e498bae 100644
--- a/ui/src/components/private-message-form.tsx
+++ b/ui/src/components/private-message-form.tsx
@@ -27,6 +27,7 @@ import {
   toast,
   randomStr,
   setupTribute,
+  setupTippy,
 } from '../utils';
 import Tribute from 'tributejs/src/Tribute.js';
 import autosize from 'autosize';
@@ -108,6 +109,7 @@ export class PrivateMessageForm extends Component<
       this.setState(this.state);
       autosize.update(textarea);
     });
+    setupTippy();
   }
 
   componentWillUnmount() {
@@ -170,18 +172,28 @@ export class PrivateMessageForm extends Component<
                 />
               )}
 
-              <ul class="float-right list-inline mb-1 text-muted small font-weight-bold">
+              <ul class="float-right list-inline mb-1 text-muted font-weight-bold">
                 <li class="list-inline-item">
                   <span
                     onClick={linkEvent(this, this.handleShowDisclaimer)}
                     class="pointer"
+                    data-tippy-content={i18n.t('disclaimer')}
                   >
-                    {i18n.t('disclaimer')}
+                    <svg class={`icon icon-inline`}>
+                      <use xlinkHref="#icon-alert-triangle"></use>
+                    </svg>
                   </span>
                 </li>
                 <li class="list-inline-item">
-                  <a href={markdownHelpUrl} target="_blank" class="text-muted">
-                    {i18n.t('formatting_help')}
+                  <a
+                    href={markdownHelpUrl}
+                    target="_blank"
+                    class="text-muted"
+                    title={i18n.t('formatting_help')}
+                  >
+                    <svg class="icon icon-inline">
+                      <use xlinkHref="#icon-help-circle"></use>
+                    </svg>
                   </a>
                 </li>
               </ul>
diff --git a/ui/src/components/private-message.tsx b/ui/src/components/private-message.tsx
index a2f82ad1..d9ccfc80 100644
--- a/ui/src/components/private-message.tsx
+++ b/ui/src/components/private-message.tsx
@@ -63,7 +63,7 @@ export class PrivateMessage extends Component<
             </li>
             <li className="list-inline-item">
               <Link
-                className="text-info"
+                className="text-body font-weight-bold"
                 to={
                   this.mine
                     ? `/u/${message.recipient_name}`
@@ -100,7 +100,15 @@ export class PrivateMessage extends Component<
                 className="pointer text-monospace"
                 onClick={linkEvent(this, this.handleMessageCollapse)}
               >
-                {this.state.collapsed ? '[+]' : '[-]'}
+                {this.state.collapsed ? (
+                  <svg class="icon icon-inline">
+                    <use xlinkHref="#icon-plus-square"></use>
+                  </svg>
+                ) : (
+                  <svg class="icon icon-inline">
+                    <use xlinkHref="#icon-minus-square"></use>
+                  </svg>
+                )}
               </div>
             </li>
           </ul>
@@ -121,58 +129,85 @@ export class PrivateMessage extends Component<
                   dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
                 />
               )}
-              <ul class="list-inline mb-1 text-muted small font-weight-bold">
+              <ul class="list-inline mb-1 text-muted h5 font-weight-bold">
                 {!this.mine && (
                   <>
-                    <li className="list-inline-item">
+                    <li className="list-inline-item-action">
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleMarkRead)}
+                        data-tippy-content={
+                          message.read
+                            ? i18n.t('mark_as_unread')
+                            : i18n.t('mark_as_read')
+                        }
                       >
-                        {message.read
-                          ? i18n.t('mark_as_unread')
-                          : i18n.t('mark_as_read')}
+                        <svg
+                          class={`icon icon-inline ${message.read &&
+                            'text-success'}`}
+                        >
+                          <use xlinkHref="#icon-check"></use>
+                        </svg>
                       </span>
                     </li>
-                    <li className="list-inline-item">
+                    <li className="list-inline-item-action">
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleReplyClick)}
+                        data-tippy-content={i18n.t('reply')}
                       >
-                        {i18n.t('reply')}
+                        <svg class="icon icon-inline">
+                          <use xlinkHref="#icon-reply1"></use>
+                        </svg>
                       </span>
                     </li>
                   </>
                 )}
                 {this.mine && (
                   <>
-                    <li className="list-inline-item">
+                    <li className="list-inline-item-action">
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleEditClick)}
+                        data-tippy-content={i18n.t('edit')}
                       >
-                        {i18n.t('edit')}
+                        <svg class="icon icon-inline">
+                          <use xlinkHref="#icon-edit"></use>
+                        </svg>
                       </span>
                     </li>
-                    <li className="list-inline-item">
+                    <li className="list-inline-item-action">
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleDeleteClick)}
+                        data-tippy-content={
+                          !message.deleted
+                            ? i18n.t('delete')
+                            : i18n.t('restore')
+                        }
                       >
-                        {!message.deleted
-                          ? i18n.t('delete')
-                          : i18n.t('restore')}
+                        <svg
+                          class={`icon icon-inline ${message.deleted &&
+                            'text-danger'}`}
+                        >
+                          <use xlinkHref="#icon-trash"></use>
+                        </svg>
                       </span>
                     </li>
                   </>
                 )}
-                <li className="list-inline-item">•</li>
-                <li className="list-inline-item">
+                <li className="list-inline-item-action">
                   <span
                     className="pointer"
                     onClick={linkEvent(this, this.handleViewSource)}
+                    data-tippy-content={i18n.t('view_source')}
                   >
-                    {i18n.t('view_source')}
+                    <svg
+                      class={`icon icon-inline ${this.state.viewSource &&
+                        'text-success'}`}
+                    >
+                      <use xlinkHref="#icon-file-text"></use>
+                    </svg>
                   </span>
                 </li>
               </ul>
diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx
index d44d0cfd..e7760269 100644
--- a/ui/src/components/symbols.tsx
+++ b/ui/src/components/symbols.tsx
@@ -15,6 +15,9 @@ export class Symbols extends Component<any, any> {
         xmlnsXlink="http://www.w3.org/1999/xlink"
       >
         <defs>
+          <symbol id="icon-alert-triangle" viewBox="0 0 24 24">
+            <path d="M11.148 4.374c0.073-0.123 0.185-0.242 0.334-0.332 0.236-0.143 0.506-0.178 0.756-0.116s0.474 0.216 0.614 0.448l8.466 14.133c0.070 0.12 0.119 0.268 0.128 0.434-0.015 0.368-0.119 0.591-0.283 0.759-0.18 0.184-0.427 0.298-0.693 0.301l-16.937-0.001c-0.152-0.001-0.321-0.041-0.481-0.134-0.239-0.138-0.399-0.359-0.466-0.607s-0.038-0.519 0.092-0.745zM9.432 3.346l-8.47 14.14c-0.422 0.731-0.506 1.55-0.308 2.29s0.68 1.408 1.398 1.822c0.464 0.268 0.976 0.4 1.475 0.402h16.943c0.839-0.009 1.587-0.354 2.123-0.902s0.864-1.303 0.855-2.131c-0.006-0.536-0.153-1.044-0.406-1.474l-8.474-14.147c-0.432-0.713-1.11-1.181-1.854-1.363s-1.561-0.081-2.269 0.349c-0.429 0.26-0.775 0.615-1.012 1.014zM11 9v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
+          </symbol>
           <symbol id="icon-zap" viewBox="0 0 24 24">
             <path d="M11.585 5.26l-0.577 4.616c0.033 0.716 0.465 1.124 0.992 1.124h6.865l-6.45 7.74 0.577-4.616c-0.033-0.716-0.465-1.124-0.992-1.124h-6.865zM12.232 1.36l-10 12c-0.354 0.424-0.296 1.055 0.128 1.408 0.187 0.157 0.415 0.233 0.64 0.232h7.867l-0.859 6.876c-0.069 0.548 0.32 1.048 0.868 1.116 0.349 0.044 0.678-0.098 0.892-0.352l10-12c0.354-0.424 0.296-1.055-0.128-1.408-0.187-0.157-0.415-0.233-0.64-0.232h-7.867l0.859-6.876c0.069-0.548-0.32-1.048-0.868-1.116-0.349-0.044-0.678 0.098-0.892 0.352z"></path>
           </symbol>