Disable button when "Hide system messages" in user profile setting is valid

client/components/cards/cardDetails.jade

@@ -89,7 +89,10 @@ template(name="cardDetails")
       h2 {{ _ 'activity'}}
       .material-toggle-switch
         span.toggle-switch-title {{_ 'hide-system-messages'}}
-        input.toggle-switch(type="checkbox" id="toggleButton")
+        if hiddenSystemMessages
+          input.toggle-switch(type="checkbox" id="toggleButton" checked="checked" disabled)
+        else
+          input.toggle-switch(type="checkbox" id="toggleButton")
         label.toggle-label(for="toggleButton")
     if currentUser.isBoardMember
       +commentForm

client/components/cards/cardDetails.js

@@ -28,6 +28,11 @@ BlazeComponent.extendComponent({
     return card.findWatcher(Meteor.userId());
   },
 
+  hiddenSystemMessages() {
+    console.log('doo:', Meteor.user().hasHiddenSystemMessages());
+    return Meteor.user().hasHiddenSystemMessages();
+  },
+
   canModifyCard() {
     return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },

client/components/forms/forms.styl

@@ -668,11 +668,11 @@ button
     left: 20px
     background-color: #179588
 
-.toggle-switch:disabled ~ .toggle-label
+.toggle-switch:checked:disabled ~ .toggle-label
   background-color: #d5d5d5
   pointer-events: none
 
-  &after
+  &:after
     background-color: #bcbdbc
 
 .toggle-switch
@@ -682,6 +682,7 @@ button
   margin: 0 0.5em
   display: flex
 
+
 @media screen and (max-width: 800px)
   .edit-controls,
   .add-controls

client/components/lists/listBody.js

@@ -84,7 +84,9 @@ BlazeComponent.extendComponent({
       evt.preventDefault();
       Utils.goBoardId(Session.get('currentBoard'));
     } else {
-      $('.toggle-switch').prop('checked', false);
+      if (!Meteor.user().hasHiddenSystemMessages()) {
+        $('.toggle-switch').prop('checked', false);
+      }
     }
   },