Merge branch 'dev' into federation

[lemmy.git] / ui / src / components / private-message.tsx

diff --git a/ui/src/components/private-message.tsx b/ui/src/components/private-message.tsx
index 409dce4d4b52378804652b5285fea3401484a3ac..3acd6e19f06c1c40d2171866ee1f63d4830e38d4 100644 (file)
--- a/ui/src/components/private-message.tsx
+++ b/ui/src/components/private-message.tsx
@@ -14,7 +14,6 @@ import {
 import { MomentTime } from './moment-time';
 import { PrivateMessageForm } from './private-message-form';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface PrivateMessageState {
   showReply: boolean;
@@ -56,15 +55,16 @@ export class PrivateMessage extends Component<
   render() {
     let message = this.props.privateMessage;
     return (
-      <div class="mb-2">
+      <div class="border-top border-light">
         <div>
           <ul class="list-inline mb-0 text-muted small">
+            {/* TODO refactor this */}
             <li className="list-inline-item">
               {this.mine ? i18n.t('to') : i18n.t('from')}
             </li>
             <li className="list-inline-item">
               <Link
-                className="text-info"
+                className="text-body font-weight-bold"
                 to={
                   this.mine
                     ? `/u/${message.recipient_name}`
@@ -101,7 +101,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>
@@ -122,59 +130,89 @@ 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-0 text-muted font-weight-bold">
                 {!this.mine && (
                   <>
                     <li className="list-inline-item">
-                      <span
-                        class="pointer"
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         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')}
-                      </span>
+                        <svg
+                          class={`icon icon-inline ${
+                            message.read && 'text-success'
+                          }`}
+                        >
+                          <use xlinkHref="#icon-check"></use>
+                        </svg>
+                      </button>
                     </li>
                     <li className="list-inline-item">
-                      <span
-                        class="pointer"
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleReplyClick)}
+                        data-tippy-content={i18n.t('reply')}
                       >
-                        <T i18nKey="reply">#</T>
-                      </span>
+                        <svg class="icon icon-inline">
+                          <use xlinkHref="#icon-reply1"></use>
+                        </svg>
+                      </button>
                     </li>
                   </>
                 )}
                 {this.mine && (
                   <>
                     <li className="list-inline-item">
-                      <span
-                        class="pointer"
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleEditClick)}
+                        data-tippy-content={i18n.t('edit')}
                       >
-                        <T i18nKey="edit">#</T>
-                      </span>
+                        <svg class="icon icon-inline">
+                          <use xlinkHref="#icon-edit"></use>
+                        </svg>
+                      </button>
                     </li>
                     <li className="list-inline-item">
-                      <span
-                        class="pointer"
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleDeleteClick)}
+                        data-tippy-content={
+                          !message.deleted
+                            ? i18n.t('delete')
+                            : i18n.t('restore')
+                        }
                       >
-                        {!message.deleted
-                          ? i18n.t('delete')
-                          : i18n.t('restore')}
-                      </span>
+                        <svg
+                          class={`icon icon-inline ${
+                            message.deleted && 'text-danger'
+                          }`}
+                        >
+                          <use xlinkHref="#icon-trash"></use>
+                        </svg>
+                      </button>
                     </li>
                   </>
                 )}
-                <li className="list-inline-item">•</li>
                 <li className="list-inline-item">
-                  <span
-                    className="pointer"
+                  <button
+                    class="btn btn-link btn-sm btn-animate text-muted"
                     onClick={linkEvent(this, this.handleViewSource)}
+                    data-tippy-content={i18n.t('view_source')}
                   >
-                    <T i18nKey="view_source">#</T>
-                  </span>
+                    <svg
+                      class={`icon icon-inline ${
+                        this.state.viewSource && 'text-success'
+                      }`}
+                    >
+                      <use xlinkHref="#icon-file-text"></use>
+                    </svg>
+                  </button>
                 </li>
               </ul>
             </div>
@@ -249,6 +287,6 @@ export class PrivateMessage extends Component<
   handlePrivateMessageCreate() {
     this.state.showReply = false;
     this.setState(this.state);
-    toast(i18n.t('message_sent'), 'danger');
+    toast(i18n.t('message_sent'));
   }
 }