From 64067f548af81f4b6a0a3babd2353d3512cfcc9f Mon Sep 17 00:00:00 2001
From: Adam Weeks <adweeks@cisco.com>
Date: Thu, 19 Mar 2020 13:24:57 -0400
Subject: [PATCH] fix(WebexMeeting): use local component styles for layout

---
 src/components/WebexMeeting/WebexMeeting.js    | 18 +++++++++---------
 src/components/WebexMeeting/WebexMeeting.scss  | 10 +---------
 .../__snapshots__/WebexMeeting.test.js.snap    |  4 ++++
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/components/WebexMeeting/WebexMeeting.js b/src/components/WebexMeeting/WebexMeeting.js
index 93d87cc30..d9fed76b0 100644
--- a/src/components/WebexMeeting/WebexMeeting.js
+++ b/src/components/WebexMeeting/WebexMeeting.js
@@ -21,22 +21,22 @@ export default function WebexMeeting({meetingDestination, controls}) {
   const {ID, remoteVideo} = useMeetingDestination(meetingDestination);
   const isActive = remoteVideo !== null;
 
-  const classBaseName = 'meeting';
-  const classObjects = {};
-
-  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}`] = true;
-  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}-active`] = ID && isActive;
-
-  const cssClasses = classNames(classObjects);
+  const classBaseName = `${WEBEX_COMPONENTS_CLASS_PREFIX}-meeting`;
+  const mainClasses = {
+    [classBaseName]: true,
+    [`${classBaseName}-active`]: ID && isActive,
+  };
 
   const meetingControls = controls(isActive).map((key) => <WebexMeetingControl key={key} type={key} />);
 
   return (
-    <div className={cssClasses}>
+    <div className={classNames(mainClasses)}>
       {ID ? (
         <Fragment>
           {isActive ? <WebexInMeeting meetingID={ID} /> : <WebexInterstitialMeeting meetingID={ID} />}
-          <WebexMeetingControls meetingID={ID}>{meetingControls}</WebexMeetingControls>
+          <WebexMeetingControls className="meeting-controls-container" meetingID={ID}>
+            {meetingControls}
+          </WebexMeetingControls>
         </Fragment>
       ) : (
         <Spinner />
diff --git a/src/components/WebexMeeting/WebexMeeting.scss b/src/components/WebexMeeting/WebexMeeting.scss
index 3aaaf184a..1aaa33238 100644
--- a/src/components/WebexMeeting/WebexMeeting.scss
+++ b/src/components/WebexMeeting/WebexMeeting.scss
@@ -12,19 +12,11 @@
   min-height: 25rem;
   min-width: 20rem; // Standard small phone width
 
-  .meeting-controls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
+  .meeting-controls-container {
     position: absolute;
     bottom: 2rem;
 
     z-index: 100; // Arbitrary large number
-
-    > * {
-      margin: 0.3125rem;
-    }
   }
 
   &-active  {
diff --git a/src/components/WebexMeeting/__snapshots__/WebexMeeting.test.js.snap b/src/components/WebexMeeting/__snapshots__/WebexMeeting.test.js.snap
index 2ce553f81..78ae86aa2 100644
--- a/src/components/WebexMeeting/__snapshots__/WebexMeeting.test.js.snap
+++ b/src/components/WebexMeeting/__snapshots__/WebexMeeting.test.js.snap
@@ -8,6 +8,7 @@ exports[`Webex Meeting component snapshot matches snapshot of a user that has jo
     meetingID="remoteMedia"
   />
   <WebexMeetingControls
+    className="meeting-controls-container"
     meetingID="remoteMedia"
   >
     <WebexMeetingControl
@@ -34,6 +35,7 @@ exports[`Webex Meeting component snapshot matches snapshot of a user that has jo
     meetingID="remoteMedia"
   />
   <WebexMeetingControls
+    className="meeting-controls-container"
     meetingID="remoteMedia"
   >
     <WebexMeetingControl
@@ -52,6 +54,7 @@ exports[`Webex Meeting component snapshot matches snapshot of a user waiting to
     meetingID="localMedia"
   />
   <WebexMeetingControls
+    className="meeting-controls-container"
     meetingID="localMedia"
   >
     <WebexMeetingControl
@@ -78,6 +81,7 @@ exports[`Webex Meeting component snapshot matches snapshot of a user waiting to
     meetingID="localMedia"
   />
   <WebexMeetingControls
+    className="meeting-controls-container"
     meetingID="localMedia"
   >
     <WebexMeetingControl