add message viz toggle component to be able to toggle one chat message at a time; address https://github.com/owncast/owncast/issues/568

web/styles/chat.scss

@@ -4,13 +4,12 @@
     min-width: 20px;
   }
   .ant-table-tbody > tr > td {
-    transition: background 0.15s;
+    transition: background-color 0.15s;
   }
   .ant-table-row.hidden {
     .ant-table-cell {
-      color: #444450; 
+      color: rgba(0,0,0,.25)
     }
-
   }
   .ant-table-cell {
     font-size: 12px;
@@ -43,16 +42,18 @@
   .bulk-editor {
     margin: .5rem 0;
     padding: .5rem;
-    border: 1px solid #333;
+    border: 1px solid #ccc;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     border-radius: 4px;
+    opacity: .5;
 
     &.active {
+      opacity: 1;
       .label {
-        color: #ccc;
+        color: #000;
       }
     }
 
@@ -79,8 +80,28 @@
   align-items: center;
   flex-wrap: nowrap;
   justify-content: flex-end;
+  transition: opacity .15s;
 
   .outcome-icon {
     margin-right: .5rem;
   }
+  &.hidden {
+    opacity: .25;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  .ant-btn {
+    .anticon {
+      opacity: .5;
+    }
+    &:hover {
+      .anticon {
+        opacity: 1;
+      }
+    }
+  }
+  .ant-btn-text:hover {
+    background-color: rgba(0,0,0,.1)
+  }
 }

web/styles/globals.scss

@@ -71,6 +71,10 @@ code {
     background-color: rgb(44,44,44) !important;
     color:lightgrey !important;
   }
+.ant-btn {
+  transition-duration: .15s;
+  transition-delay: 0s;
+}
 
   // Hide extra toolbar buttons.
   .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {