Add icons for private message actions. Fixes #582

1 files changed, 16 insertions, 4 deletions

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>