feat(dialogs): Redesign Video Quality dialog & change dialog background color

react/features/base/dialog/components/web/StatelessDialog.js

@@ -3,6 +3,7 @@
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
+import { withStyles } from '@material-ui/core/styles';
 import _ from 'lodash';
 import React, { Component } from 'react';
 
@@ -30,6 +31,11 @@ const OK_BUTTON_ID = 'modal-dialog-ok-button';
  */
 type Props = DialogProps & {
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * Custom dialog header that replaces the standard heading.
      */
@@ -101,6 +107,19 @@ type Props = DialogProps & {
     width: string
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @returns {Object}
+ */
+const styles = () => {
+    return {
+        footer: {
+            boxShadow: 'none'
+        }
+    };
+};
+
 /**
  * Web dialog that uses atlaskit modal-dialog to display dialogs.
  */
@@ -205,7 +224,9 @@ class StatelessDialog extends Component<Props> {
         }
 
         return (
-            <ModalFooter showKeyline = { propsFromModalFooter.showKeyline } >
+            <ModalFooter
+                className = { this.props.classes.footer }
+                showKeyline = { propsFromModalFooter.showKeyline } >
                 {
 
                     /**
@@ -367,4 +388,4 @@ class StatelessDialog extends Component<Props> {
     }
 }
 
-export default translate(StatelessDialog);
+export default translate(withStyles(styles)(StatelessDialog));