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 d9ccfc80995375670de66f7bdf2c455deff08024..3acd6e19f06c1c40d2171866ee1f63d4830e38d4 100644 (file)
--- a/ui/src/components/private-message.tsx
+++ b/ui/src/components/private-message.tsx
@@ -55,9 +55,10 @@ 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>
@@ -129,12 +130,12 @@ export class PrivateMessage extends Component<
                   dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
                 />
               )}
-              <ul class="list-inline mb-1 text-muted h5 font-weight-bold">
+              <ul class="list-inline mb-0 text-muted font-weight-bold">
                 {!this.mine && (
                   <>
-                    <li className="list-inline-item-action">
-                      <span
-                        class="pointer"
+                    <li className="list-inline-item">
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleMarkRead)}
                         data-tippy-content={
                           message.read
@@ -143,42 +144,43 @@ export class PrivateMessage extends Component<
                         }
                       >
                         <svg
-                          class={`icon icon-inline ${message.read &&
-                            'text-success'}`}
+                          class={`icon icon-inline ${
+                            message.read && 'text-success'
+                          }`}
                         >
                           <use xlinkHref="#icon-check"></use>
                         </svg>
-                      </span>
+                      </button>
                     </li>
-                    <li className="list-inline-item-action">
-                      <span
-                        class="pointer"
+                    <li className="list-inline-item">
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleReplyClick)}
                         data-tippy-content={i18n.t('reply')}
                       >
                         <svg class="icon icon-inline">
                           <use xlinkHref="#icon-reply1"></use>
                         </svg>
-                      </span>
+                      </button>
                     </li>
                   </>
                 )}
                 {this.mine && (
                   <>
-                    <li className="list-inline-item-action">
-                      <span
-                        class="pointer"
+                    <li className="list-inline-item">
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleEditClick)}
                         data-tippy-content={i18n.t('edit')}
                       >
                         <svg class="icon icon-inline">
                           <use xlinkHref="#icon-edit"></use>
                         </svg>
-                      </span>
+                      </button>
                     </li>
-                    <li className="list-inline-item-action">
-                      <span
-                        class="pointer"
+                    <li className="list-inline-item">
+                      <button
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleDeleteClick)}
                         data-tippy-content={
                           !message.deleted
@@ -187,28 +189,30 @@ export class PrivateMessage extends Component<
                         }
                       >
                         <svg
-                          class={`icon icon-inline ${message.deleted &&
-                            'text-danger'}`}
+                          class={`icon icon-inline ${
+                            message.deleted && 'text-danger'
+                          }`}
                         >
                           <use xlinkHref="#icon-trash"></use>
                         </svg>
-                      </span>
+                      </button>
                     </li>
                   </>
                 )}
-                <li className="list-inline-item-action">
-                  <span
-                    className="pointer"
+                <li className="list-inline-item">
+                  <button
+                    class="btn btn-link btn-sm btn-animate text-muted"
                     onClick={linkEvent(this, this.handleViewSource)}
                     data-tippy-content={i18n.t('view_source')}
                   >
                     <svg
-                      class={`icon icon-inline ${this.state.viewSource &&
-                        'text-success'}`}
+                      class={`icon icon-inline ${
+                        this.state.viewSource && 'text-success'
+                      }`}
                     >
                       <use xlinkHref="#icon-file-text"></use>
                     </svg>
-                  </span>
+                  </button>
                 </li>
               </ul>
             </div>