From 4a082601cde20e1a0c593f6f703bb5f8ec4c046b Mon Sep 17 00:00:00 2001
From: Chris Whilar <chwhilar@microsoft.com>
Date: Mon, 21 Aug 2023 21:05:32 -0400
Subject: [PATCH] clean up

---
 Project/src/App.css                           |  83 +++---
 Project/src/App.js                            |   4 +-
 Project/src/MakeCall/AddParticipantPopover.js |  51 ++--
 Project/src/MakeCall/CallCard.js              | 256 ++++++++++++------
 Project/src/MakeCall/DataChannelCard.js       |   5 +-
 Project/src/MakeCall/Login.js                 |   4 +-
 Project/src/MakeCall/MakeCall.js              |  18 +-
 .../RawVideoAccess/CustomVideoEffects.js      |   2 +-
 .../VideoEffects/VideoEffectsContainer.js     |   4 +-
 9 files changed, 255 insertions(+), 172 deletions(-)

diff --git a/Project/src/App.css b/Project/src/App.css
index a32286b..7a28078 100644
--- a/Project/src/App.css
+++ b/Project/src/App.css
@@ -34,15 +34,17 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 500;
+  font-weight: 400;
   margin-top: 0;
   margin-bottom: .5rem;
 }
 
 .header {
-  padding-top: 2em;
+  padding-top: 3em;
+  padding-bottom: 2em;
   margin-left: 1em;
   margin-right: 1em;
+  border-bottom: 1px solid #414141;
 }
 
 .sdk-docs-header {
@@ -60,7 +62,7 @@ input:disabled {
 
 .loader {
   border: 5px solid #edebe9;
-  border-top: 5px solid #ca5010;
+  border-top: 5px solid #b9692f;
   border-radius: 50%;
   width: 20px;
   height: 20px;
@@ -69,7 +71,7 @@ input:disabled {
 
 .ringing-loader {
   border: 5px solid #edebe9;
-  border-top: 5px solid #ca5010;
+  border-top: 5px solid #b9692f;
   border-radius: 50%;
   width: 30px;
   height: 30px;
@@ -98,7 +100,7 @@ input:disabled {
 }
 
 .identity {
-  color: #ca5010
+  color: #b9692f
 }
 
 .ListGroup {
@@ -118,7 +120,7 @@ button:focus {
 .card {
   background-color: #201f1e;
   border: 1px solid #605e5c;
-  border-radius: 0px;
+  border-radius: 1em;
   padding: 3em;
   margin-top: 3em;
 }
@@ -131,12 +133,6 @@ ul {
   list-style-type: none;
 }
 
-.participants-panel {
-  padding: 1em;
-  border: 1px solid #605e5c;
-  width: fit-content;
-}
-
 .pre-call-grid-container {
   display: flex;
   flex-wrap: wrap;
@@ -162,15 +158,11 @@ ul {
   width: 8em
 }
 
-/* Dominant Speaker switch*/
-.ms-Toggle-background[aria-checked="true"],
-.ms-Toggle-background[aria-checked="true"]:hover {
-  background-color: #ca5010
-}
-
-.participants-panel-title {
-  margin-top: 1em;
-  ;
+.participants-panel {
+  max-height: 60em;
+  overflow-y: auto;
+  padding: 1em;
+  width: fit-content;
 }
 
 .participants-panel-list {
@@ -253,17 +245,18 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
 }
 
 .primary-button {
+  height: 2.75em;
   color: #edebe9;
-  background-color: #ca5010;
-  border: 1px solid #ca5010;
+  background-color: #201f1e;
+  border: 1px solid #916546;
   outline: none;
   margin-right: 1em;
   margin-bottom: 1em;
 }
 
 .primary-button:hover {
-  background-color: #8e562e;
-  border: 1px solid #8e562e;
+  background-color: #201f1e;
+  border: 1px solid #916546;
 }
 
 .primary-button:disabled {
@@ -273,6 +266,21 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
   color: #000000;
 }
 
+.secondary-button {
+  height: 2.75em;
+  color: #edebe9;
+  background-color: #201f1e;
+  border: 1px solid #4b4a48;
+  outline: none;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+
+.secondary-button:hover {
+  background-color: #201f1e;
+  border: 1px solid #4b4a48;
+}
+
 .call-input-panel {
   padding: 0 2em;
 }
@@ -282,7 +290,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
   padding-bottom: 0.4em;
   padding-right: 0.4em;
   padding-left: 0.4em;
-  font-size: x-large;
+  font-size: 2em;
 }
 
 .incoming-call-button,
@@ -360,11 +368,11 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
 }
 
 .speaking-border-for-initials>.ms-Persona-coin>.ms-Persona-imageArea>.ms-Persona-initials {
-  box-shadow: 0px 0px 0px 3px #ca5010, 0px 0px 20px 5px #ca5010;
+  box-shadow: 0px 0px 0px 3px #b9692f, 0px 0px 20px 5px #b9692f;
 }
 
 .speaking-border-for-video {
-  box-shadow: 0px 0px 0px 3px #ca5010;
+  box-shadow: 0px 0px 0px 3px #b9692f;
 }
 
 .remote-video-container {
@@ -380,7 +388,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
 .remote-video-loading-spinner {
   border: 12px solid #f3f3f3;
   border-radius: 50%;
-  border-top: 12px solid #ca5010;
+  border-top: 12px solid #b9692f;
   width: 100px;
   height: 100px;
   -webkit-animation: spin 2s linear infinite;
@@ -976,7 +984,7 @@ div.callDebugInfoJSONStringDiv {
   .remote-video-loading-spinner {
     border: 8px solid #f3f3f3;
     border-radius: 50%;
-    border-top: 8px solid #ca5010;
+    border-top: 8px solid #b9692f;
     width: 60px;
     height: 60px;
     -webkit-animation: spin 2s linear infinite;
@@ -995,7 +1003,7 @@ div.callDebugInfoJSONStringDiv {
 .video-effects-loading-spinner {
   border: 8px solid #f3f3f3;
   border-radius: 50%;
-  border-top: 8px solid #ca5010;
+  border-top: 8px solid #b9692f;
   width: 50px;
   height: 50px;
   -webkit-animation: spin 2s linear infinite;
@@ -1058,7 +1066,7 @@ div.volumeVisualizer::before {
   bottom: 0;
   left: 0;
   width: var(--volume);
-  background-color: #ca5010;
+  background-color: #b9692f;
   transition: width 100ms linear;
 }
 
@@ -1118,7 +1126,7 @@ div.volumeVisualizer::before {
 }
 
 .spotlightEnabled {
-  border: 1px solid  #ca5010;
+  border: 1px solid  #b9692f;
 }
 
 .lobby-action{
@@ -1127,7 +1135,7 @@ div.volumeVisualizer::before {
 
 .lobby-action a{
   display: inline-block;
-  color: #ca5010;
+  color: #b9692f;
   text-decoration: none;
 }
 
@@ -1144,5 +1152,10 @@ div.volumeVisualizer::before {
 }
 
 .callFeatureEnabled, .callFeatureEnabled:hover {
-  color: #ca5010;
+  color: #b9692f;
+}
+
+.dominant-speakers-list {
+  max-height: 8em;
+  overflow-y: auto;
 }
\ No newline at end of file
diff --git a/Project/src/App.js b/Project/src/App.js
index 04a6ad7..d75552f 100644
--- a/Project/src/App.js
+++ b/Project/src/App.js
@@ -17,9 +17,9 @@ function App() {
       <div className="header ms-Grid">
         <div className="ms-Grid-row">
           <div className="ms-Grid-col ms-lg6">
-            <h2>
+            <h1>
               Azure Communication Services - Calling SDK for Javascript - { VWebSdkVersion() }
-            </h2>
+            </h1>
           </div>
           <div className="ms-Grid-col ms-lg6">
             <div className="sdk-docs-header">
diff --git a/Project/src/MakeCall/AddParticipantPopover.js b/Project/src/MakeCall/AddParticipantPopover.js
index 2698024..55b2b66 100644
--- a/Project/src/MakeCall/AddParticipantPopover.js
+++ b/Project/src/MakeCall/AddParticipantPopover.js
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { TextField } from 'office-ui-fabric-react';
-import { Button } from 'office-ui-fabric-react'
+import { PrimaryButton, TextField } from 'office-ui-fabric-react';
 import { CallKind } from "@azure/communication-calling";
 import { createIdentifierFromRawId } from '@azure/communication-common';
 
@@ -8,7 +7,6 @@ export default function AddParticipantPopover({call}) {
     const [userId, setUserId] = useState('');
     const [threadId, setThreadId] = useState('');
     const [alternateCallerId, setAlternateCallerId] = useState('');
-    const [showAddParticipantPanel, setShowAddParticipantPanel] = useState(false);
 
     function handleAddParticipant() {
         console.log('handleAddParticipant', userId);
@@ -31,42 +29,31 @@ export default function AddParticipantPopover({call}) {
         }
     }
 
-    function toggleAddParticipantPanel() {
-        setShowAddParticipantPanel(!showAddParticipantPanel);
-    }
-
     return (
-        <>
-        <span><h3>Participants</h3></span>
-        <span><a href="#" onClick={toggleAddParticipantPanel}><i className="add-participant-button ms-Icon ms-Icon--AddFriend" aria-hidden="true"></i></a></span>
         <div className="ms-Grid">
             <div className="ms-Grid-row">
                 <div className="ms-Grid-col ms-lg12">
-                    {
-                        showAddParticipantPanel &&
-                        <div className="add-participant-panel">
-                            <h3 className="add-participant-panel-header">Add a participant</h3>
-                            <div className="add-participant-panel-header">
-                                <TextField className="text-left" label="Identifier" onChange={e => setUserId(e.target.value)} />
-                                { 
-                                    call._kind === CallKind.TeamsCall && 
-                                    <TextField className="text-left" label="Thread Id (Needed if SDK is initialized for Teams User )" onChange={e => setThreadId(e.target.value)} />
-                                }
-                                {
-                                    call._kind === CallKind.Call && 
-                                    <TextField className="text-left" label="Alternate Caller Id (For adding phone number only)" onChange={e => setAlternateCallerId(e.target.value)} />
-                                }
-                                    <Button className="mt-3" onClick={handleAddParticipant}>Add Participant</Button>
-                                {
-                                    call._kind === CallKind.Call && 
-                                <   Button className="mt-1" onClick={handleAddPhoneNumber}>Add Phone Number</Button>
-                                }
-                            </div>
+                    <div className="add-participant-panel">
+                        <h3 className="add-participant-panel-header">Add a participant</h3>
+                        <div className="add-participant-panel-header">
+                            <TextField className="text-left" label="Identifier" onChange={e => setUserId(e.target.value)} />
+                            { 
+                                call._kind === CallKind.TeamsCall && 
+                                <TextField className="text-left" label="Thread Id (Needed if SDK is initialized for Teams User )" onChange={e => setThreadId(e.target.value)} />
+                            }
+                            {
+                                call._kind === CallKind.Call && 
+                                <TextField className="text-left" label="Alternate Caller Id (For adding phone number only)" onChange={e => setAlternateCallerId(e.target.value)} />
+                            }
+                                <PrimaryButton className="secondary-button mt-3" onClick={handleAddParticipant}>Add Participant</PrimaryButton>
+                            {
+                                call._kind === CallKind.Call && 
+                            <   PrimaryButton className="secondary-button mt-1" onClick={handleAddPhoneNumber}>Add Phone Number</PrimaryButton>
+                            }
                         </div>
-                    }
+                    </div>
                 </div>
             </div>
         </div>
-        </>
     );
 }
\ No newline at end of file
diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index f726e51..d6b27e2 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -19,6 +19,7 @@ import CurrentCallInformation from "./CurrentCallInformation";
 import DataChannelCard from './DataChannelCard';
 import CallCaption from "./CallCaption";
 import { ParticipantMenuOptions } from './ParticipantMenuOptions';
+
 export default class CallCard extends React.Component {
     constructor(props) {
         super(props);
@@ -37,6 +38,7 @@ export default class CallCard extends React.Component {
         this.spotlightFeature = this.call.feature(Features.Spotlight);
         this.raiseHandFeature = this.call.feature(Features.RaiseHand);
         this.capabilitiesFeature = this.call.feature(Features.Capabilities);
+        this.dominantSpeakersFeature = this.call.feature(Features.DominantSpeakers);
         this.identifier = props.identityMri;
         this.isTeamsUser = props.isTeamsUser;
         this.dummyStreamTimeout = undefined;
@@ -78,7 +80,10 @@ export default class CallCard extends React.Component {
             mediaCollector: undefined,
             isSpotlighted: false,
             isHandRaised: false,
-            showParticipantsCard: true
+            dominantSpeakersListActive: false,
+            dominantSpeakers:[],
+            showDataChannel: false,
+            showAddParticipantPanel: false
         };
         this.selectedRemoteParticipants = new Set();
         this.dataChannelRef = React.createRef();
@@ -102,6 +107,7 @@ export default class CallCard extends React.Component {
         this.call.feature(Features.Spotlight).off('spotlightChanged', this.spotlightStateChangedHandler);
         this.call.feature(Features.RaiseHand).off('raisedHandEvent', this.raiseHandChangedHandler);
         this.call.feature(Features.RaiseHand).off('loweredHandEvent', this.raiseHandChangedHandler);
+        this.dominantSpeakersFeature.off('dominantSpeakersChanged', this.dominantSpeakersChanged);
     }
 
     componentDidMount() {
@@ -392,6 +398,7 @@ export default class CallCard extends React.Component {
             this.raiseHandFeature.on("loweredHandEvent", this.raiseHandChangedHandler);
             this.raiseHandFeature.on("raisedHandEvent", this.raiseHandChangedHandler);
             this.capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChangedHandler);
+            this.dominantSpeakersFeature.on('dominantSeapkersChanged', this.dominantSpeakersChanged);
         }
     }
 
@@ -482,6 +489,16 @@ export default class CallCard extends React.Component {
         }
     }
 
+    dominantSpeakersChanged = () => {
+        const dominantSpeakersMris = this.dominantSpeakersFeature.dominantSpeakers.speakersList;
+        const remoteParticipants = dominantSpeakersMris.map(dominantSpeakerMri => {
+            const remoteParticipant = utils.getRemoteParticipantObjFromIdentifier(this.call, dominantSpeakerMri);
+            return remoteParticipant;
+        });
+
+        this.setState({dominantSpeakers: remoteParticipants});
+    }
+
     async handleVideoOnOff() {
         try {
             if (!this.state.videoOn) {
@@ -593,17 +610,24 @@ export default class CallCard extends React.Component {
         }));
     }
 
-    async handleMediaStatsLogState() {
+    async handleDominantSpeakersListActive() {
+        if (this.state.dominantSpeakersListActive) {
+            this.dominantSpeakersFeature.off('dominantSpeakersChanged', this.dominantSpeakersChanged)
+        } else {
+            this.dominantSpeakersFeature.on('dominantSpeakersChanged', this.dominantSpeakersChanged)
+            this.dominantSpeakersChanged();
+        }
+
         this.setState(prevState => ({
             ...prevState,
-            logMediaStats: !prevState.logMediaStats
+            dominantSpeakersListActive: !prevState.dominantSpeakersListActive
         }));
     }
 
-    async toggleParticipantsCard() {
+    async handleMediaStatsLogState() {
         this.setState(prevState => ({
             ...prevState,
-            showParticipantsCard: !prevState.showParticipantsCard
+            logMediaStats: !prevState.logMediaStats
         }));
     }
 
@@ -918,6 +942,19 @@ export default class CallCard extends React.Component {
                                 <Icon iconName="MicOff2" />
                             }
                         </span>
+                        <span className="in-call-button"
+                            title={`${this.state.showAddParticipantPanel ? 'Hide' : 'Show'} add participant panel`}
+                            variant="secondary"
+                            onClick={() => this.setState({showAddParticipantPanel: !this.state.showAddParticipantPanel})}>
+                            {
+                                this.state.showAddParticipantPanel &&
+                                <Icon iconName="AddFriend" />
+                            }
+                            {
+                                !this.state.showAddParticipantPanel &&
+                                <Icon iconName="AddFriend" />
+                            }
+                        </span>
                         <span className="in-call-button"
                             title={`${this.state.incomingAudioMuted ? 'Unmute' : 'Mute'} incoming audio`}
                             variant="secondary"
@@ -1005,31 +1042,70 @@ export default class CallCard extends React.Component {
                             }
                         </span>
                         <span className="in-call-button"
-                            title={`${this.state.logMediaStats ? 'Stop' : 'Start'} logging MediaStats`}
+                            title={`${this.state.captionOn ? 'Turn captions off' : 'Turn captions on'}`}
                             variant="secondary"
-                            onClick={() => this.handleMediaStatsLogState()}>
+                            onClick={() => { this.setState({ captionOn: !this.state.captionOn })}}>
                             {
-                                this.state.logMediaStats &&
-                                <Icon iconName="NumberedList" />
+                                this.state.captionOn &&
+                                <Icon iconName="TextBox" />
                             }
                             {
-                                !this.state.logMediaStats &&
-                                <Icon iconName="NumberedListText" />
+                                !this.state.captionOn &&
+                                <Icon iconName="TextBox" />
+                            }
+                        </span>
+                        <span className="in-call-button"
+                            title={`${this.state.showDataChannel ? 'Turn off data channel' : 'Turn on data channel'}`}
+                            variant="secondary"
+                            onClick={() => { this.setState({ showDataChannel: !this.state.showDataChannel })}}>
+                            {
+                                this.state.showDataChannel &&
+                                <Icon iconName="Send" />
+                            }
+                            {
+                                !this.state.showDataChannel &&
+                                <Icon iconName="Send" />
                             }
                         </span>
                         <span className="in-call-button"
-                            title={`${!this.state.showParticipantsCard ? `Show Participants and Caption Panel` : `Hide Participants and Caption Panel`}`}
+                            title={`${this.state.dominantSpeakersListActive ? 'Show dominant speakers list' : 'Hide dominant speakers list'} to call`}
                             variant="secondary"
-                            onClick={() => this.toggleParticipantsCard()}>
+                            onClick={() => this.handleDominantSpeakersListActive()}>
                             {
-                                this.state.showParticipantsCard &&
-                                <Icon iconName="Hide3" />
+                                this.state.dominantSpeakersListActive &&
+                                <Icon iconName="PeopleBlock" />
                             }
                             {
-                                !this.state.showParticipantsCard &&
+                                !this.state.dominantSpeakersListActive &&
                                 <Icon iconName="People" />
                             }
                         </span>
+                        <span className="in-call-button"
+                            title={`${this.state.dominantSpeakerMode ? 'Render most dominant speaker video only' : 'Render all participants videos'} to call`}
+                            variant="secondary"
+                            onClick={() => this.toggleDominantSpeakerMode()}>
+                            {
+                                this.state.dominantSpeakerMode &&
+                                <Icon iconName="UserRemove" />
+                            }
+                            {
+                                !this.state.dominantSpeakerMode &&
+                                <Icon iconName="ReminderPerson" />
+                            }
+                        </span>
+                        <span className="in-call-button"
+                            title={`${this.state.logMediaStats ? 'Stop' : 'Start'} logging MediaStats`}
+                            variant="secondary"
+                            onClick={() => this.handleMediaStatsLogState()}>
+                            {
+                                this.state.logMediaStats &&
+                                <Icon iconName="NumberedList" />
+                            }
+                            {
+                                !this.state.logMediaStats &&
+                                <Icon iconName="NumberedListText" />
+                            }
+                        </span>
                         <span className="in-call-button "
                             title={`${this.state.isHandRaised  ? 'LowerHand' : 'RaiseHand'}`}
                             variant="secondary"
@@ -1138,7 +1214,8 @@ export default class CallCard extends React.Component {
                         </div>
                     </div>
                 }
-                {   this.state.localScreenSharingMode &&
+                {
+                    this.state.localScreenSharingMode &&
                     <div className="mt-5">
                         <div className="ms-Grid-row">
                             <h3>Local screen sharing preview</h3>
@@ -1183,86 +1260,93 @@ export default class CallCard extends React.Component {
                         </div>
                     </div>
                 }
-                {
-                    this.state.callState === 'Connected' && this.state.showParticipantsCard &&
-                    <div>
-                        <div className="participants-panel mt-5 mb-3">
-                            <Toggle label={
-                                <div>
-                                    Dominant Speaker mode{' '}
-                                    <TooltipHost content={`Render the most dominant speaker's video streams only or render all remote participant video streams`}>
-                                        <Icon iconName="Info" aria-label="Info tooltip" />
-                                    </TooltipHost>
-                                </div>
-                            }
-                                styles={{
-                                    text: { color: '#edebe9' },
-                                    label: { color: '#edebe9' },
-                                }}
-                                inlineLabel
-                                onText="On"
-                                offText="Off"
-                                onChange={() => { this.toggleDominantSpeakerMode() }}
-                            />
-                            {
-                                this.state.dominantSpeakerMode &&
-                                <div>
-                                    Current dominant speaker: {this.state.dominantRemoteParticipant ? utils.getIdentifierText(this.state.dominantRemoteParticipant.identifier) : `None`}
-                                </div>
-                            }
-                            <div className="participants-panel-title custom-row text-center">
-                                <AddParticipantPopover call={this.call} />
-                            </div>
-                            {
-                                this.state.remoteParticipants.length === 0 &&
-                                <p className="text-center">No other participants currently in the call</p>
-                            }
-                            <ul className="participants-panel-list">
-                                {
-                                    this.state.remoteParticipants.map(remoteParticipant =>
-                                        <RemoteParticipantCard
-                                            key={`${utils.getIdentifierText(remoteParticipant.identifier)}`}
-                                            remoteParticipant={remoteParticipant}
-                                            call={this.call}
-                                            menuOptionsHandler={this.getParticipantMenuCallBacks()}
-                                            onSelectionChanged={(identifier, isChecked) => this.remoteParticipantSelectionChanged(identifier, isChecked)}
-                                            />
-                                    )
-                                }
-                            </ul>
+                {   this.state.dominantSpeakersListActive &&
+                    <div className="mt-5">
+                        <div className="ms-Grid-row">
+                            <h3>Dominant Speakers</h3>
                         </div>
-                        <div className="participants-panel mt-1 mb-3">
-                                <Toggle label={
+                        <div className="dominant-speakers-list">
+                           {
+                                this.state.dominantSpeakers.map((dominantSpeaker, index) =>
+                                    <div>
                                         <div>
-                                            Caption{' '}
-                                            <TooltipHost content={`Turn on Captions to see the conversation script`}>
-                                                <Icon iconName="Info" aria-label="Info tooltip" />
-                                            </TooltipHost>
+                                            Index {index}
                                         </div>
-                                    }
-                                    styles={{
-                                        text : { color: '#edebe9' },
-                                        label: { color: '#edebe9' },
-                                    }}
-                                    inlineLabel
-                                    onText="On"
-                                    offText="Off"
-                                    defaultChecked={this.state.captionOn}
-                                    onChange={() => { this.setState({ captionOn: !this.state.captionOn })}}
-                                />
-
-                                {
-                                    this.state.captionOn &&
-                                    <CallCaption call={this.call} isTeamsUser={this.isTeamsUser}/>
-                                }
+                                        <div className="ml-3">
+                                            mri: {utils.getIdentifierText(dominantSpeaker.identifier)}
+                                        </div>
+                                        <div className="ml-3">
+                                            displayName: {dominantSpeaker.displayName ?? 'None'}
+                                        </div>
+                                    </div>
+                                )
+                           }
+                        </div>
+                    </div>
+                }
+                {
+                    this.state.captionOn &&
+                    <div className="mt-5">
+                        <div className="ms-Grid-row">
+                            <h3>Captions</h3>
                         </div>
+                        <div className="md-grid-row">
+                            {
+                                this.state.captionOn &&
+                                <CallCaption call={this.call} isTeamsUser={this.isTeamsUser}/>
+                            }
+                        </div>
+                    </div>
+                }
+                {
+                    this.state.showDataChannel &&
+                    <div className="mt-5">
                         <div className="ms-Grid-row">
+                            <h3>Data Channel</h3>
+                        </div>
+                        <div className="md-grid-row">
                         {
                             this.state.callState === 'Connected' &&
                                 <DataChannelCard call={this.call} ref={this.dataChannelRef} remoteParticipants={this.state.remoteParticipants} />
                         }
                         </div>
                     </div>
+                }
+                {
+                    this.state.callState === 'Connected' &&
+                    <div className="mt-5">
+                        <div className="ms-Grid-row">
+                            <h3>Participants</h3>
+                        </div>
+                        <div>
+                            {   this.state.showAddParticipantPanel &&
+                                <AddParticipantPopover call={this.call} />
+                            }
+                        </div>
+                        {
+                            this.state.dominantSpeakerMode &&
+                            <div>
+                                Current dominant speaker: {this.state.dominantRemoteParticipant ? utils.getIdentifierText(this.state.dominantRemoteParticipant.identifier) : `None`}
+                            </div>
+                        }
+                        {
+                            this.state.remoteParticipants.length === 0 &&
+                            <p>No other participants currently in the call</p>
+                        }
+                        <ul className="">
+                            {
+                                this.state.remoteParticipants.map(remoteParticipant =>
+                                    <RemoteParticipantCard
+                                        key={`${utils.getIdentifierText(remoteParticipant.identifier)}`}
+                                        remoteParticipant={remoteParticipant}
+                                        call={this.call}
+                                        menuOptionsHandler={this.getParticipantMenuCallBacks()}
+                                        onSelectionChanged={(identifier, isChecked) => this.remoteParticipantSelectionChanged(identifier, isChecked)}
+                                        />
+                                )
+                            }
+                        </ul>
+                    </div>
 
                 }
             </div>
diff --git a/Project/src/MakeCall/DataChannelCard.js b/Project/src/MakeCall/DataChannelCard.js
index 78a6a4d..694ee7c 100644
--- a/Project/src/MakeCall/DataChannelCard.js
+++ b/Project/src/MakeCall/DataChannelCard.js
@@ -104,8 +104,7 @@ export default class DataChannelCard extends React.Component {
         return (
             <div className="ms-Grid">
                 <div className="ms-Grid-row mb-6 mt-6">
-                    <h3>DataChannel</h3>
-                    <div>when no remote participant checkbox is selected, message will broadcast in the channel</div>
+                    <div>When no remote participant checkbox is selected, message will broadcast in the channel</div>
                     <div className="ms-Grid-col ms-lg6 ms-sm6">
                         <TextField
                             label="message"
@@ -123,7 +122,7 @@ export default class DataChannelCard extends React.Component {
                             value={this.state.inputMessage}
                         />
                         <PrimaryButton
-                            className="primary-button"
+                            className="secondary-button"
                             iconProps={{ iconName: 'Send', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                             text="Send"
                             onClick={() => this.sendMessage()}>
diff --git a/Project/src/MakeCall/Login.js b/Project/src/MakeCall/Login.js
index 02a8076..bcc1513 100644
--- a/Project/src/MakeCall/Login.js
+++ b/Project/src/MakeCall/Login.js
@@ -565,12 +565,12 @@ const isSupportedEnvironment = this.environmentInfo.isSupportedEnvironment;
                             <div className="ms-Grid-row">
                                 <h2 className="ms-Grid-col ms-lg6 ms-sm6 mb-4">User Identity Provisioning and Calling SDK Initialization</h2>
                                 <div className="ms-Grid-col ms-lg6 ms-sm6 text-right">
-                                    <PrimaryButton className="primary-button"
+                                    <PrimaryButton className="secondary-button"
                                         iconProps={{iconName: 'Settings', style: {verticalAlign: 'middle', fontSize: 'large'}}}
                                         text={`${this.state.showCallClientOptions ? 'Hide' : 'Show'} options`}
                                         onClick={() => this.setState({showCallClientOptions: !this.state.showCallClientOptions})}>
                                     </PrimaryButton>
-                                    <PrimaryButton className="primary-button"
+                                    <PrimaryButton className="secondary-button"
                                         iconProps={{iconName: 'ReleaseGate', style: {verticalAlign: 'middle', fontSize: 'large'}}}
                                         text={`${this.state.showUserProvisioningAndSdkInitializationCode ? 'Hide' : 'Show'} code`}
                                         onClick={() => this.setState({showUserProvisioningAndSdkInitializationCode: !this.state.showUserProvisioningAndSdkInitializationCode})}>
diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js
index 3ecd7c9..ca68d6e 100644
--- a/Project/src/MakeCall/MakeCall.js
+++ b/Project/src/MakeCall/MakeCall.js
@@ -792,19 +792,19 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
                             </div>
                             <div className="ms-Grid-col ms-lg6 ms-sm6 text-right">
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'Download', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`Get Logs`}
                                     onClick={this.downloadLog}>
                                 </PrimaryButton>
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'Download', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`Get Debug Info Log Dump`}
                                     onClick={this.downloadDebugInfoLogDump}>
                                 </PrimaryButton>
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'TransferCall', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`${this.state.showCallSampleCode ? 'Hide' : 'Show'} code`}
                                     onClick={() => this.setState({ showCallSampleCode: !this.state.showCallSampleCode })}>
@@ -1035,14 +1035,14 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
                             <h2 className="ms-Grid-col ms-lg6 ms-sm6 mb-4">Pre Call Diagnostics</h2>
                             <div className="ms-Grid-col ms-lg6 text-right">
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'TestPlan', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`Run Pre Call Diagnostics`}
                                     disabled={this.state.call || !this.state.loggedIn}
                                     onClick={() => this.runPreCallDiagnostics()}>
                                 </PrimaryButton>
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'TestPlan', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`${this.state.showPreCallDiagnosticsSampleCode ? 'Hide' : 'Show'} code`}
                                     onClick={() => this.setState({ showPreCallDiagnosticsSampleCode: !this.state.showPreCallDiagnosticsSampleCode })}>
@@ -1173,7 +1173,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
                             <h2 className="ms-Grid-col ms-lg6 ms-sm6 mb-4">Video, Screen sharing, and local video preview</h2>
                             <div className="ms-Grid-col ms-lg6 ms-sm6 text-right">
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'Video', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`${this.state.showStreamingSampleCode ? 'Hide' : 'Show'} code`}
                                     onClick={() => this.setState({ showStreamingSampleCode: !this.state.showStreamingSampleCode })}>
@@ -1211,7 +1211,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
                             <h2 className="ms-Grid-col ms-lg6 ms-sm6 mb-4">Mute / Unmute</h2>
                             <div className="ms-Grid-col ms-lg6 ms-sm6 text-right">
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'Microphone', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`${this.state.showMuteUnmuteSampleCode ? 'Hide' : 'Show'} code`}
                                     onClick={() => this.setState({ showMuteUnmuteSampleCode: !this.state.showMuteUnmuteSampleCode })}>
@@ -1241,7 +1241,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
                             <h2 className="ms-Grid-col ms-lg6 ms-sm6 mb-4">Hold / Unhold</h2>
                             <div className="ms-Grid-col ms-lg6 ms-sm6 text-right">
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'Play', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`${this.state.showHoldUnholdSampleCode ? 'Hide' : 'Show'} code`}
                                     onClick={() => this.setState({ showHoldUnholdSampleCode: !this.state.showHoldUnholdSampleCode })}>
@@ -1271,7 +1271,7 @@ this.deviceManager.on('selectedSpeakerChanged', () => { console.log(this.deviceM
                             <h2 className="ms-Grid-col ms-lg6 ms-sm6 mb-4">Device Manager</h2>
                             <div className="ms-Grid-col ms-lg6 ms-sm6 text-right">
                                 <PrimaryButton
-                                    className="primary-button"
+                                    className="secondary-button"
                                     iconProps={{ iconName: 'Settings', style: { verticalAlign: 'middle', fontSize: 'large' } }}
                                     text={`${this.state.showDeviceManagerSampleCode ? 'Hide' : 'Show'} code`}
                                     onClick={() => this.setState({ showDeviceManagerSampleCode: !this.state.showDeviceManagerSampleCode })}>
diff --git a/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js b/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js
index f33c347..d4636d6 100644
--- a/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js
+++ b/Project/src/MakeCall/RawVideoAccess/CustomVideoEffects.js
@@ -178,7 +178,7 @@ export default class CustomVideoEffects extends React.Component {
                         return <div>
                             <PrimaryButton 
                                 key={`${idx}-abcd`} 
-                                className="primary-button" 
+                                className="secondary-button" 
                                 onClick={async (e) => this.addEffect(e)}
                                 disabled={this.state.buttons[obj].disabled}>
                                     {this.state.buttons[obj].label}
diff --git a/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js b/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js
index c275934..e508e7c 100644
--- a/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js
+++ b/Project/src/MakeCall/VideoEffects/VideoEffectsContainer.js
@@ -176,14 +176,14 @@ export default class VideoEffectsContainer extends React.Component {
                             styles={{ dropdown: { width: 300, color: 'black' } }}
                         />
                         <PrimaryButton
-                            className='primary-button mt-2'
+                            className='secondary-button mt-2'
                             onClick={() => this.startEffects()}
                         >
                             {this.state.startEffectsLoading ? <LoadingSpinner /> : 'Start Effects'}
                         </PrimaryButton>
 
                         <PrimaryButton
-                            className='primary-button mt-2'
+                            className='secondary-button mt-2'
                             onClick={() => this.stopEffects()}
                         >
                             {this.state.stopEffectsLoading ? <LoadingSpinner /> : 'Stop Effects'}