feat(Dialog): Make dialog close button more mobile friendly.

* Remove pointless custom headers, fall back to ModalHeader instead.

css/_atlaskit_overrides.scss

@@ -20,10 +20,25 @@
  * Override @atlaskit/modal-dialog header styling
  */
 .atlaskit-portal [role="dialog"] header {
-    .jitsi-icon svg {
+    .jitsi-icon {
-        fill: #B8C7E0;
         cursor: pointer;
     }
+
+    .jitsi-icon svg {
+        fill: #B8C7E0;
+    }
+}
+
+/**
+ * Make header close button more easily tappable on mobile.
+ */
+.mobile-browser .atlaskit-portal [role="dialog"] header .jitsi-icon {
+    display: grid;
+    place-items: center;
+    height: 48px;
+    width: 48px;
+    background: #2a3a4b;
+    border-radius: 3px;
 }
 
 /**

css/_chat.scss

@@ -113,8 +113,11 @@
     font-size: 24px;
     line-height: 32px;
 
-    .jitsi-icon > svg {
+    .jitsi-icon {
         cursor: pointer;
+    }
+
+    .jitsi-icon > svg {
         fill: #A4B8D1;
     }
 }
@@ -387,6 +390,7 @@
     &-header {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         margin: 16px 16px 24px;
         width: calc(100% - 32px);
         box-sizing: border-box;
@@ -395,8 +399,11 @@
         font-size: 24px;
         line-height: 32px;
 
-        .jitsi-icon > svg {
+        .jitsi-icon {
             cursor: pointer;
+        }
+
+        .jitsi-icon > svg {
             fill: #A4B8D1;
         }
     }
@@ -405,3 +412,15 @@
         width: 100%;
     }
 }
+
+/**
+ * Make header close button more easily tappable on mobile.
+ */
+.mobile-browser .chat-dialog-header .jitsi-icon {
+    display: grid;
+    place-items: center;
+    height: 48px;
+    width: 48px;
+    background: #2a3a4b;
+    border-radius: 3px;
+}

css/modals/embed-meeting/_embed-meeting.scss

@@ -2,22 +2,6 @@
     &-dialog {
         display: flex;
         flex-direction: column;
-
-        &-header {
-            display: flex;
-            justify-content: space-between;
-            margin: 16px 16px 24px;
-            width: calc(100% - 32px);
-            color: #fff;
-            font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
-
-            & > div > svg {
-                cursor: pointer;
-                fill: #A4B8D1;
-            }
-        }
     }
 
     &-copy {

css/modals/invite/_invite_more.scss

@@ -47,22 +47,6 @@
         font-size: 15px;
         line-height: 24px;
 
-        &.header {
-            display: flex;
-            justify-content: space-between;
-            margin: 16px 16px 24px;
-            width: calc(100% - 32px);
-            color: #fff;
-            font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
-
-            & > div > svg {
-                cursor: pointer;
-                fill: #A4B8D1;
-            }
-        }
-
         &.separator {
             margin: 24px 0 24px -20px;
             padding: 0 20px;

react/features/embed-meeting/components/EmbedMeetingDialog.js

@@ -8,8 +8,6 @@ import { getInviteURL } from '../../base/connection';
 import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 
-import Header from './Header';
-
 type Props = {
 
     /**
@@ -40,9 +38,9 @@ function EmbedMeeting({ t, url }: Props) {
 
     return (
         <Dialog
-            customHeader = { Header }
             hideCancelButton = { true }
             submitDisabled = { true }
+            titleKey = { 'embedMeeting.title' }
             width = 'small'>
             <div className = 'embed-meeting-dialog'>
                 <textarea

react/features/embed-meeting/components/Header.js

@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { translate } from '../../base/i18n';
-import { Icon, IconClose } from '../../base/icons';
-
-type Props = {
-
-    /**
-     * The {@link ModalDialog} closing function.
-     */
-    onClose: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
-/**
- * Custom header of the {@code EmbedMeetingDialog}.
- *
- * @returns {React$Element<any>}
- */
-function Header({ onClose, t }: Props) {
-    return (
-        <div
-            className = 'embed-meeting-dialog-header'>
-            { t('embedMeeting.title') }
-            <Icon
-                onClick = { onClose }
-                src = { IconClose } />
-        </div>
-    );
-}
-
-export default translate(Header);

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js

@@ -18,7 +18,6 @@ import { _getDefaultPhoneNumber, getInviteText, isAddPeopleEnabled, isDialOutEna
 
 import CopyMeetingLinkSection from './CopyMeetingLinkSection';
 import DialInSection from './DialInSection';
-import Header from './Header';
 import InviteByEmailSection from './InviteByEmailSection';
 import InviteContactsSection from './InviteContactsSection';
 import LiveStreamSection from './LiveStreamSection';
@@ -148,7 +147,6 @@ function AddPeopleDialog({
     return (
         <Dialog
             cancelKey = { 'dialog.close' }
-            customHeader = { Header }
             hideCancelButton = { true }
             submitDisabled = { true }
             titleKey = 'addPeople.inviteMorePrompt'

react/features/invite/components/add-people-dialog/web/Header.js

@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { translate } from '../../../../base/i18n';
-import { Icon, IconClose } from '../../../../base/icons';
-
-type Props = {
-
-    /**
-     * The {@link ModalDialog} closing function.
-     */
-    onClose: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
-/**
- * Custom header of the {@code AddPeopleDialog}.
- *
- * @returns {React$Element<any>}
- */
-function Header({ onClose, t }: Props) {
-    return (
-        <div
-            className = 'invite-more-dialog header'>
-            { t('addPeople.inviteMorePrompt') }
-            <Icon
-                onClick = { onClose }
-                src = { IconClose } />
-        </div>
-    );
-}
-
-export default translate(Header);

react/features/security/components/security-dialog/Header.js

@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { translate } from '../../../base/i18n';
-import { Icon, IconClose } from '../../../base/icons';
-
-type Props = {
-
-    /**
-     * The {@link ModalDialog} closing function.
-     */
-    onClose: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
-/**
- * Custom header of the {@code SecurityDialog}.
- *
- * @returns {React$Element<any>}
- */
-function Header({ onClose, t }: Props) {
-    return (
-        <div
-            className = 'invite-more-dialog header'>
-            { t('security.securityOptions') }
-            <Icon
-                onClick = { onClose }
-                src = { IconClose } />
-        </div>
-    );
-}
-
-export default translate(Header);

react/features/security/components/security-dialog/SecurityDialog.js

@@ -10,7 +10,6 @@ import { connect } from '../../../base/redux';
 import { E2EESection } from '../../../e2ee/components';
 import { LobbySection } from '../../../lobby';
 
-import Header from './Header';
 import PasswordSection from './PasswordSection';
 
 type Props = {
@@ -82,7 +81,6 @@ function SecurityDialog({
 
     return (
         <Dialog
-            customHeader = { Header }
             hideCancelButton = { true }
             submitDisabled = { true }
             titleKey = 'security.securityOptions'