fix(dialog) Improvements (#12590)

Remove focus outline for the close icon
Increase max height

react/features/base/ui/components/web/ClickableIcon.tsx

@@ -6,6 +6,7 @@ import Icon from '../../../icons/components/Icon';
 
 interface IProps {
     accessibilityLabel: string;
+    className?: string;
     icon: Function;
     id?: string;
     onClick: () => void;
@@ -40,14 +41,14 @@ const useStyles = makeStyles()(theme => {
     };
 });
 
-const ClickableIcon = ({ accessibilityLabel, icon, id, onClick }: IProps) => {
+const ClickableIcon = ({ accessibilityLabel, className, icon, id, onClick }: IProps) => {
     const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
 
     return (
         <button
             aria-label = { accessibilityLabel }
-            className = { cx(styles.button, isMobile && 'is-mobile') }
+            className = { cx(styles.button, isMobile && 'is-mobile', className) }
             id = { id }
             onClick = { onClick }>
             <Icon

react/features/base/ui/components/web/Dialog.tsx

@@ -67,7 +67,7 @@ const useStyles = makeStyles()(theme => {
             flexDirection: 'column',
             height: 'auto',
             minHeight: '200px',
-            maxHeight: '660px',
+            maxHeight: '760px',
             marginTop: '64px',
             animation: `${keyframes`
                 0% {
@@ -137,6 +137,12 @@ const useStyles = makeStyles()(theme => {
             justifyContent: 'space-between'
         },
 
+        closeIcon: {
+            '&:focus': {
+                boxShadow: 'none'
+            }
+        },
+
         title: {
             color: theme.palette.text01,
             ...withPixelLineHeight(theme.typography.heading5),
@@ -278,6 +284,7 @@ const Dialog = ({
                         {!hideCloseButton && (
                             <ClickableIcon
                                 accessibilityLabel = { t('dialog.close') }
+                                className = { classes.closeIcon }
                                 icon = { IconCloseLarge }
                                 id = 'modal-header-close-button'
                                 onClick = { onClose } />