2 files changed, 51 insertions, 21 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index cb31020d..5f5779a0 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -3,6 +3,24 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFile,
+  faMusic,
+  faImage,
+  faVideo,
+  faPlayCircle,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFile,
+  faMusic,
+  faImage,
+  faVideo,
+  faPlayCircle,
+  faTimes
+)
 
 const Attachment = {
   props: [
@@ -39,10 +57,10 @@ const Attachment = {
       return this.attachment.description
     },
     placeholderIconClass () {
-      if (this.type === 'image') return 'icon-picture'
-      if (this.type === 'video') return 'icon-video'
-      if (this.type === 'audio') return 'icon-music'
-      return 'icon-doc'
+      if (this.type === 'image') return 'image'
+      if (this.type === 'video') return 'video'
+      if (this.type === 'audio') return 'music'
+      return 'file'
     },
     referrerpolicy () {
       return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 19c713d5..2c1c1682 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,7 +12,7 @@
       :alt="attachment.description"
       :title="attachment.description"
     >
-      <span :class="placeholderIconClass" />
+      <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
   </div>
@@ -36,20 +36,19 @@
         :src="nsfwImage"
         :class="{'small': isSmall}"
       >
-      <i
+      <FAIcon
         v-if="type === 'video'"
-        class="play-icon icon-play-circled"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
-    <div
+    <button
       v-if="nsfw && hideNsfwLocal && !hidden"
-      class="hider"
+      class="button-unstyled hider"
+      @click.prevent="toggleHidden"
     >
-      <a
-        href="#"
-        @click.prevent="toggleHidden"
-      >Hide</a>
-    </div>
+      <FAIcon icon="times" />
+    </button>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
@@ -83,9 +82,10 @@
         @play="$emit('play')"
         @pause="$emit('pause')"
       />
-      <i
+      <FAIcon
         v-if="!allowPlay"
-        class="play-icon icon-play-circled"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
 
@@ -142,6 +142,10 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 100%;
+
+    svg {
+      color: inherit;
+    }
   }
 
   .nsfw-placeholder {
@@ -228,15 +232,23 @@
   .hider {
     position: absolute;
     right: 0;
-    white-space: nowrap;
     margin: 10px;
-    padding: 5px;
-    background: rgba(230,230,230,0.6);
-    font-weight: bold;
+    padding: 0;
     z-index: 4;
-    line-height: 1;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    text-align: center;
+    width: 2em;
+    height: 2em;
+    font-size: 1.25em;
+    // TODO: theming? hard to theme with unknown background image color
+    background: rgba(230, 230, 230, 0.7);
+    .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    &:hover .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.9);
+    }
   }
 
   video {