fix(FEC-11707): V3 - cast on multiple players - when casting started …

…by some player, "Cast" buttons become enabled on all players (#642)

Change cast button styles so that cast button would be highlighted only in actively casting player.
Fixes FEC-11707.

src/components/cast/_cast.scss

@@ -8,12 +8,20 @@
     background-color: rgba(255, 255, 255, 0);
     border: none;
     cursor: pointer;
-    --connected-color: rgba(1, 172, 205, 0.8);
+    --connected-color: #{$grayscale4};
     --disconnected-color: #{$grayscale4};
-  }
 
-  .cast-button:hover {
-    --disconnected-color: #{$white};
-    --connected-color: #{$brand-color};
+    &:hover {
+      --connected-color: #{$white};
+      --disconnected-color: #{$white};
+    }
+
+    &.cast-button-active {
+      --connected-color: rgba(1, 172, 205, 0.8);
+
+      &:hover {
+        --connected-color: #{$brand-color};  
+      }
+    }
   }
 }

src/components/cast/cast.js

@@ -73,6 +73,7 @@ class Cast extends Component {
    */
   render(props: any): ?React$Element<any> {
     if (props.isCasting || props.isCastAvailable) {
+      const className = props.isCasting ? `${style.castButton} ${style.castButtonActive}` : style.castButton;
       return (
         <div
           role="button"
@@ -81,7 +82,7 @@ class Cast extends Component {
           onClick={this.onClick}
           onKeyDown={this.onKeyDown}>
           <Tooltip label={this.props.castText}>
-            <google-cast-launcher className={style.castButton} tabIndex="0" />
+            <google-cast-launcher className={className} tabIndex="0" />
           </Tooltip>
         </div>
       );