fix(WebexMeeting): use local component styles for layout

webex · Mar 20, 2020 · 64067f5 · 64067f5
1 parent b6d3b1a
commit 64067f5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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