2 files changed, 10 insertions, 1 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 3a274374..d2dd91de 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,6 +1,7 @@
 import Status from '../status/status.vue'
 import StillImage from '../still-image/still-image.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 
 const Notification = {
   data () {
@@ -18,6 +19,14 @@ const Notification = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     }
+  },
+  computed: {
+    userClass () {
+      return highlightClass(this.notification.action.user, this.$store)
+    },
+    userStyle () {
+      return highlightStyle(this.notification.action.user, this.$store)
+    },
   }
 }
 
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index eed598a8..97673752 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,6 +1,6 @@
 <template>
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
-  <div class="non-mention" v-else>
+  <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
     <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
       <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
     </a>