refactor(virtual-background): use jss instead of sass (#11152)

react/features/virtual-background/components/VirtualBackgroundPreview.js

@@ -1,6 +1,7 @@
 // @flow
 
 import Spinner from '@atlaskit/spinner';
+import { withStyles } from '@material-ui/core/styles';
 import React, { PureComponent } from 'react';
 
 import { hideDialog } from '../../base/dialog';
@@ -29,6 +30,11 @@ export type Props = {
      */
     _currentCameraDeviceId: string,
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * The redux {@code dispatch} function.
      */
@@ -71,6 +77,55 @@ type State = {
     jitsiTrack: Object
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = theme => {
+    return {
+        virtualBackgroundPreview: {
+            '& .video-preview': {
+                height: '250px'
+            },
+
+            '& .video-background-preview-entry': {
+                marginLeft: '-10px',
+                height: '250px',
+                width: '570px',
+                marginBottom: `${theme.spacing(2)}px`,
+                zIndex: 2,
+
+                '@media (max-width: 632px)': {
+                    maxWidth: '336px'
+                }
+            },
+
+            '& .video-preview-loader': {
+                borderRadius: '6px',
+                backgroundColor: 'transparent',
+                height: '250px',
+                marginBottom: `${theme.spacing(2)}px`,
+                width: '572px',
+                position: 'fixed',
+                zIndex: 2,
+
+                '& svg': {
+                    position: 'absolute',
+                    top: '40%',
+                    left: '45%'
+                },
+
+                '@media (min-width: 432px) and (max-width: 632px)': {
+                    width: '340px'
+                }
+            }
+        }
+    };
+};
+
 /**
  * Implements a React {@link PureComponent} which displays the virtual
  * background preview.
@@ -264,12 +319,13 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
      * @inheritdoc
      */
     render() {
-        const { jitsiTrack } = this.state;
+        const { classes, jitsiTrack } = this.state;
 
-        return jitsiTrack
-            ? <div className = 'video-preview'>{this._renderPreviewEntry(jitsiTrack)}</div>
-            : <div className = 'video-preview-loader'>{this._loadVideoPreview()}</div>
-        ;
+        return (<div className = { classes.virtualBackgroundPreview }>
+            {jitsiTrack
+                ? <div className = 'video-preview'>{this._renderPreviewEntry(jitsiTrack)}</div>
+                : <div className = 'video-preview-loader'>{this._loadVideoPreview()}</div>
+            }</div>);
     }
 }
 
@@ -287,4 +343,4 @@ function _mapStateToProps(state): Object {
     };
 }
 
-export default translate(connect(_mapStateToProps)(VirtualBackgroundPreview));
+export default translate(connect(_mapStateToProps)(withStyles(styles)(VirtualBackgroundPreview)));