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

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

@@ -8,10 +8,12 @@ import {
     titleIconWrapperStyles,
     TitleText
 } from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
+import { withStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import { translate } from '../../../i18n';
 import { Icon, IconClose } from '../../../icons';
+import { withPixelLineHeight } from '../../../styles/functions';
 
 const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
     if (!appearance) {
@@ -30,6 +32,7 @@ const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
 type Props = {
     id: string,
     appearance?: 'danger' | 'warning',
+    classes: Object,
     heading: string,
     hideCloseIconButton: boolean,
     onClose: Function,
@@ -39,6 +42,40 @@ type Props = {
     t: Function
 }
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = theme => {
+    return {
+        closeButton: {
+            borderRadius: theme.shape.borderRadius,
+            cursor: 'pointer',
+            padding: 13,
+
+            [theme.breakpoints.down('480')]: {
+                background: theme.palette.action02
+            },
+
+            '&:hover': {
+                background: theme.palette.action02
+            }
+        },
+        header: {
+            boxShadow: 'none',
+
+            '& h4': {
+                ...withPixelLineHeight(theme.typography.heading5),
+                color: theme.palette.text01
+            }
+        }
+    };
+};
+
+
 /**
  * A default header for modal-dialog components
  *
@@ -90,6 +127,7 @@ class ModalHeader extends React.Component<Props> {
         const {
             id,
             appearance,
+            classes,
             heading,
             hideCloseIconButton,
             onClose,
@@ -104,7 +142,9 @@ class ModalHeader extends React.Component<Props> {
         }
 
         return (
-            <Header showKeyline = { showKeyline }>
+            <Header
+                className = { classes.header }
+                showKeyline = { showKeyline }>
                 <Title>
                     <TitleIcon appearance = { appearance } />
                     <TitleText
@@ -116,16 +156,21 @@ class ModalHeader extends React.Component<Props> {
                 </Title>
 
                 {
-                    !hideCloseIconButton && <Icon
-                        ariaLabel = { t('dialog.close') }
-                        onClick = { onClose }
-                        onKeyPress = { this._onKeyPress }
-                        role = 'button'
-                        src = { IconClose }
-                        tabIndex = { 0 } />
+                    !hideCloseIconButton
+                        && <div
+                            className = { classes.closeButton }
+                            id = 'modal-header-close-button'
+                            onClick = { onClose }>
+                            <Icon
+                                ariaLabel = { t('dialog.close') }
+                                onKeyPress = { this._onKeyPress }
+                                role = 'button'
+                                src = { IconClose }
+                                tabIndex = { 0 } />
+                        </div>
                 }
             </Header>
         );
     }
 }
-export default translate(ModalHeader);
+export default translate(withStyles(styles)(ModalHeader));