3 files changed, 40 insertions, 36 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 142e1fc6..f9c710ab 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -26,7 +26,6 @@ import {
   faTimes,
   faRetweet,
   faReply,
-  faExternalLinkSquareAlt,
   faPlusSquare,
   faSmileBeam,
   faEllipsisH,
@@ -44,7 +43,6 @@ library.add(
   faTimes,
   faRetweet,
   faReply,
-  faExternalLinkSquareAlt,
   faPlusSquare,
   faStar,
   faSmileBeam,
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0a94de32..58b55bc8 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -29,6 +29,8 @@ $status-margin: 0.75em;
   &.-conversation {
     border-left-width: 4px;
     border-left-style: solid;
+    border-left-color: $fallback--cRed;
+    border-left-color: var(--cRed, $fallback--cRed);
   }
 
   .gravestone {
@@ -137,6 +139,20 @@ $status-margin: 0.75em;
   .heading-right {
     display: flex;
     flex-shrink: 0;
+
+    .button-unstyled {
+      padding: 5px;
+      margin: -5px;
+
+      &:hover svg {
+        color: $fallback--lightText;
+        color: var(--lightText, $fallback--lightText);
+      }
+    }
+
+    .svg-inline--fa {
+      margin-left: 0.25em;
+    }
   }
 
   .timeago {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 21412faa..6ee8117f 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -47,16 +47,15 @@
         >
           {{ muteWordHits.join(', ') }}
         </small>
-        <a
-          href="#"
-          class="unmute fa-scale-110 fa-old-padding"
+        <button
+          class="unmute button-unstyled"
           @click.prevent="toggleMute"
         >
           <FAIcon
             icon="eye-slash"
             class="fa-scale-110 fa-old-padding"
           />
-        </a>
+        </button>
       </div>
     </template>
     <template v-else>
@@ -185,43 +184,34 @@
                   :title="status.visibility | capitalize"
                 >
                   <FAIcon
-                    class="fa-scale-110 fa-old-padding"
+                    fixed-width
+                    class="fa-scale-110"
                     :icon="visibilityIcon(status.visibility)"
                   />
                 </span>
-                <a
-                  v-if="!status.is_local && !isPreview"
-                  :href="status.external_url"
-                  target="_blank"
-                  class="source_url"
-                  title="Source"
-                >
-                  <FAIcon
-                    class="fa-scale-110 fa-old-padding"
-                    icon="external-link-square-alt"
-                  />
-                </a>
-                <a
+                <button
                   v-if="expandable && !isPreview"
-                  href="#"
-                  title="Expand"
+                  class="button-unstyled"
+                  :title="$t('status.expand')"
                   @click.prevent="toggleExpanded"
                 >
                   <FAIcon
-                    class="fa-scale-110 fa-old-padding"
+                    fixed-width
+                    class="fa-scale-110"
                     icon="plus-square"
                   />
-                </a>
-                <a
+                </button>
+                <button
                   v-if="unmuted"
-                  href="#"
+                  class="button-unstyled"
                   @click.prevent="toggleMute"
                 >
                   <FAIcon
+                    fixed-width
                     icon="eye-slash"
-                    class="fa-scale-110 fa-old-padding"
+                    class="fa-scale-110"
                   />
-                </a>
+                </button>
               </span>
             </div>
 
@@ -237,9 +227,8 @@
                   style="min-width: 0"
                   :class="{ '-strikethrough': !status.parent_visible }"
                 >
-                  <a
-                    class="reply-to"
-                    href="#"
+                  <button
+                    class="button-unstyled reply-to"
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
@@ -253,7 +242,7 @@
                     >
                       {{ $t('status.reply_to') }}
                     </span>
-                  </a>
+                  </button>
                 </StatusPopover>
 
                 <span
@@ -286,11 +275,12 @@
                   :key="reply.id"
                   :status-id="reply.id"
                 >
-                  <a
-                    href="#"
-                    class="reply-link"
+                  <button
+                    class="button-unstyled -link reply-link"
                     @click.prevent="gotoOriginal(reply.id)"
-                  >{{ reply.name }}</a>
+                  >
+                    {{ reply.name }}
+                  </button>
                 </StatusPopover>
               </div>
             </div>