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

client/components/cards/cardDetails.jade

@@ -89,6 +89,9 @@ template(name="cardDetails")
       h2 {{ _ 'activity'}}
       .material-toggle-switch
         span.toggle-switch-title {{_ 'hide-system-messages'}}
+        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

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,8 +84,10 @@ BlazeComponent.extendComponent({
       evt.preventDefault();
       Utils.goBoardId(Session.get('currentBoard'));
     } else {
+      if (!Meteor.user().hasHiddenSystemMessages()) {
         $('.toggle-switch').prop('checked', false);
       }
+    }
   },
 
   cardIsSelected() {