Add toggle states and colors to toggle vid and audio buttons

src/packages/collaboration/lib/participant-view.coffee

@@ -41,6 +41,8 @@ class ParticipantView extends View
   onClickRemove: =>
     false
   onClickToggleVideo: =>
+    @toggleVideoButton.toggleClass('disabled')
     false
   onClickToggleAudio: =>
+    @toggleAudioButton.toggleClass('disabled')
     false

src/packages/collaboration/stylesheets/collaboration.less

@@ -4,8 +4,6 @@
 @video-padding: 5px;
 @large-width: 160px;
 @small-width: 42px;
-// @user-color: #3facc1;
-@user-color: #00f;
 
 .collaboration-status{
   float: right;
@@ -112,13 +110,6 @@
         margin-left: 5px;
         .mini-icon(arr-up);
       }
-
-      .remove:before, .toggle-audio:before, .toggle-video:before {
-        color: rgba(255, 255, 255, 0.8);
-      }
-      .remove:hover:before, .toggle-audio:hover:before, .toggle-video:hover:before {
-        color: #fff;
-      }
     }
 
     &:hover{

themes/atom-dark-ui/collaboration.less

@@ -6,6 +6,12 @@
 @site-3-color: #db2ff4;
 @site-4-color: #f4541e;
 
+@action-icon-disabled-color: rgba(255, 255, 255, 0.5);
+@action-icon-disabled-hover-color: #fff;
+
+@action-icon-color: fade(@running-color, 80%);
+@action-icon-hover-color: @running-color;
+
 .site-colors(@site, @color) {
   .collaboration-participant{
     .site-@{site} {
@@ -35,9 +41,8 @@
 .site-colors(8, @site-4-color);
 
 .collaboration-status{
-
   .guest {
-    color: #96CBFE;
+    color: @guest-color;
   }
 
   .running {
@@ -45,3 +50,23 @@
     &:hover { color: lighten(@running-color, 15%); }
   }
 }
+
+.collaboration-participant {
+  &.large{
+    .actions{
+      .remove:before, .toggle-audio.disabled:before, .toggle-video.disabled:before {
+        color: @action-icon-disabled-color;
+      }
+      .remove:hover:before, .toggle-audio.disabled:hover:before, .toggle-video.disabled:hover:before {
+        color: @action-icon-disabled-hover-color;
+      }
+
+      .toggle-audio:before, .toggle-video:before {
+        color: @action-icon-color;
+      }
+      .toggle-audio:hover:before, .toggle-video:hover:before {
+        color: @action-icon-hover-color;
+      }
+    }
+  }
+}