3 files changed, 65 insertions, 8 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 1cf4c9bc..bb906b50 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,3 +1,5 @@
+import StatusContent from '../status_content/status_content.vue'
+import { mapState } from 'vuex'
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
@@ -16,10 +18,11 @@ const Notification = {
   },
   props: [ 'notification' ],
   components: {
-    Status,
+    StatusContent,
     UserAvatar,
     UserCard,
-    Timeago
+    Timeago,
+    Status
   },
   methods: {
     toggleUserExpanded () {
@@ -79,7 +82,10 @@ const Notification = {
     },
     isStatusNotification () {
       return isStatusNotification(this.notification.type)
-    }
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    })
   }
 }
 
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
new file mode 100644
index 00000000..d0e63d81
--- /dev/null
+++ b/src/components/notification/notification.scss
@@ -0,0 +1,52 @@
+// TODO Copypaste from Status, should unify it somehow
+.Notification {
+  &.-muted {
+    padding: 0.25em 0.6em;
+    height: 1.2em;
+    line-height: 1.2em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: nowrap;
+
+    & .status-username,
+    & .mute-thread,
+    & .mute-words {
+      word-wrap: normal;
+      word-break: normal;
+      white-space: nowrap;
+    }
+
+    & .status-username,
+    & .mute-words {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .status-username {
+      font-weight: normal;
+      flex: 0 1 auto;
+      margin-right: 0.2em;
+      font-size: smaller;
+    }
+
+    .mute-thread {
+      flex: 0 0 auto;
+    }
+
+    .mute-words {
+      flex: 1 0 5em;
+      margin-left: 0.2em;
+
+      &::before {
+        content: ' ';
+      }
+    }
+
+    .unmute {
+      flex: 0 0 auto;
+      margin-left: auto;
+      display: block;
+    }
+  }
+}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0e46a2a7..7fac3840 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -7,7 +7,7 @@
   <div v-else>
     <div
       v-if="needMute && !unmuted"
-      class="container muted"
+      class="Notification container -muted"
     >
       <small>
         <router-link :to="userProfileLink">
@@ -157,11 +157,9 @@
           </router-link>
         </div>
         <template v-else>
-          <status
+          <status-content
             class="faint"
-            :compact="true"
-            :statusoid="notification.action"
-            :no-heading="true"
+            :status="notification.action"
           />
         </template>
       </div>
@@ -170,3 +168,4 @@
 </template>
 
 <script src="./notification.js"></script>
+<style src="./notification.scss" lang="scss"></style>