fix(InMeeting): add style fixes

webex · Feb 25, 2020 · eda8e60 · eda8e60
1 parent 5267028
commit eda8e60
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 35 deletions.
diff --git a/src/components/WebexInMeeting/WebexInMeeting.css b/src/components/WebexInMeeting/WebexInMeeting.css
diff --git a/src/components/WebexInMeeting/WebexInMeeting.js b/src/components/WebexInMeeting/WebexInMeeting.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 
 import {WebexLocalMedia, WebexRemoteMedia} from '..';
 
-import './WebexInMeeting.css';
+import './WebexInMeeting.scss';
 
 /**
  * Webex In-Meeting component displays the remote stream plus
  * the local stream at the bottom right corner.
  *
- * @param {object} props
- * @returns {object} JSX of the component
+ * @param {string} props.meetingID  ID of the meeting for which to show media
+ * @returns {Object} JSX of the component
  */
 export default function WebexInMeeting({meetingID}) {
   return (

diff --git a/src/components/WebexInMeeting/WebexInMeeting.scss b/src/components/WebexInMeeting/WebexInMeeting.scss
@@ -0,0 +1,29 @@
+$shadow-offset: 0.25rem;
+$shadow-blur: 1rem;
+$shadow-spread: -0.125rem;
+$shadow-color: rgba(0, 0, 0, 0.2);
+
+.in-meeting {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .remote-media {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .local-media {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+
+    width: 13.5rem;
+    height: 7.5rem;
+
+    box-shadow: $shadow-offset $shadow-offset $shadow-blur $shadow-spread $shadow-color;
+    border-radius: 0.25rem;
+    z-index: 1;
+  }
+}
diff --git a/src/components/WebexInMeeting/WebexInMeeting.stories.js b/src/components/WebexInMeeting/WebexInMeeting.stories.js
@@ -6,23 +6,17 @@ import {WebexJSONAdapter} from '../../adapters';
 
 import {WebexInMeeting, WebexDataProvider} from '..';
 
-// Setup for the stories
 const stories = storiesOf('Webex InMeeting', module);
 const webexAdapter = new WebexJSONAdapter(jsonData);
-const wrapperStyle = {height: '500px', width: '800px', border: '1px solid black'};
 
 stories.add('remote and local media enabled', () => (
-  <div style={wrapperStyle}>
-    <WebexDataProvider adapter={webexAdapter}>
-      <WebexInMeeting meetingID="remote&localMedia" />
-    </WebexDataProvider>
-  </div>
+  <WebexDataProvider adapter={webexAdapter}>
+    <WebexInMeeting meetingID="remote&localMedia" />
+  </WebexDataProvider>
 ));
 
 stories.add('only remote media enabled', () => (
-  <div style={wrapperStyle}>
-    <WebexDataProvider adapter={webexAdapter}>
-      <WebexInMeeting meetingID="remoteMedia" />
-    </WebexDataProvider>
-  </div>
+  <WebexDataProvider adapter={webexAdapter}>
+    <WebexInMeeting meetingID="remoteMedia" />
+  </WebexDataProvider>
 ));