4 files changed, 26 insertions, 35 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index d2dd91de..33482891 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -22,11 +22,14 @@ const Notification = {
   },
   computed: {
     userClass () {
-      return highlightClass(this.notification.action.user, this.$store)
+      return highlightClass(this.notification.action.user)
     },
     userStyle () {
-      return highlightStyle(this.notification.action.user, this.$store)
-    },
+      const highlight = this.$store.state.config.highlight
+      const user = this.notification.action.user
+      const color = highlight[user.screen_name]
+      return highlightStyle(color)
+    }
   }
 }
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fcdc6f61..2b5bcb55 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -38,19 +38,23 @@ const Status = {
     },
     repeaterClass () {
       const user = this.statusoid.user
-      return highlightClass(user, this.$store)
+      return highlightClass(user)
     },
     userClass () {
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
-      return highlightClass(user, this.$store)
+      return highlightClass(user)
     },
     repeaterStyle () {
       const user = this.statusoid.user
-      return highlightStyle(user, this.$store)
+      const highlight = this.$store.state.config.highlight
+      const color = highlight[user.screen_name]
+      return highlightStyle(color)
     },
     userStyle () {
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
-      return highlightStyle(user, this.$store)
+      const highlight = this.$store.state.config.highlight
+      const color = highlight[user.screen_name]
+      return highlightStyle(color)
     },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 7e0ea0da..48e0ea02 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -3,16 +3,6 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio' ],
-  data() {
-    return {
-      userHighlightLocal: ''
-    }
-  },
-  mounted () {
-    const config = this.$store.state.config
-    config.highlight = config.highlight || {}
-    this.userHighlightLocal = config.highlight[this.user.screen_name]
-  },
   computed: {
     headingStyle () {
       const color = this.$store.state.config.colors.bg
@@ -45,29 +35,22 @@ export default {
     },
     userHighlightEnabled: {
       get () {
-        return this.userHighlightLocal
+        return this.$store.state.config.highlight[this.user.screen_name]
       },
-      set (value) {
-        const config = this.$store.state.config
-        config.highlight = config.highlight || {}
-        if (value) {
-          this.userHighlightLocal = config.highlight[this.user.screen_name] = '#FFFFFF'
+      set (enabled) {
+        if (enabled) {
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' })
         } else {
-          this.userHighlightLocal = undefined
-          delete config.highlight[this.user.screen_name]
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
         }
       }
     },
     userHighlightColor: {
       get () {
-        const config = this.$store.state.config
-        config.highlight = config.highlight || {}
-        return config.highlight[this.user.screen_name]
+        return this.$store.state.config.highlight[this.user.screen_name]
       },
-      set (value) {
-        const config = this.$store.state.config
-        config.highlight = config.highlight || {}
-        config.highlight[this.user.screen_name] = value
+      set (color) {
+        this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
       }
     }
   },
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 7d48870b..c7a270f1 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -9,9 +9,10 @@
           <i class="icon-link-ext usersettings"></i>
         </a>
         <div class="floater" v-if="switcher || isOtherUser">
-          <input type="checkbox" id="userHighlightCheck" v-model="userHighlightEnabled">
-          <label :title="$t('settings.highlight')" for="userHighlightCheck"></label>
-          <input type="color" id="userHighlightColor" v-if="userHighlightLocal" v-model="userHighlightColor"/>
+          <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+          <input type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
+          <input type="checkbox" class="button" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled">
+          <label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id"></label>
         </div>
         <div class='container'>
           <router-link :to="{ name: 'user-profile', params: { id: user.id } }">