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

@@ -34,6 +34,10 @@ pre {
 .ant-card {
   border-radius: .5em;
 }
+.ant-btn {
+  transition-duration: .15s;
+  transition-delay: 0s;
+}
 
 @media (prefers-color-scheme: dark) {
   @import "~antd/dist/antd.dark";