fix(invite) fix mailto links not working on Brave for iOS

css/modals/invite/_invite_more.scss

@@ -97,18 +97,18 @@
                 border-top: none;
                 border-radius: 0 0 3px 3px;
 
-                & > * {
-                    display: flex;
-                    justify-content: center;
+                .copy-invite-icon, .provider-icon {
                     align-items: center;
-                    height: 40px;
-                    width: 40px;
-                    border-radius: 4px;
                     cursor: pointer;
+                    display: flex;
+                    height: 40px;
+                    place-content: center;
+                    width: 40px;
                 }
 
                 &:hover > div:hover {
                     background-color: rgba(255, 255, 255, 0.2);
+                    border-radius: 4px;
                 }
 
                 & > :not(:last-child) {

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

@@ -13,7 +13,7 @@ import {
     IconYahoo
 } from '../../../../base/icons';
 import { Tooltip } from '../../../../base/tooltip';
-import { copyText, openURLInBrowser } from '../../../../base/util';
+import { copyText } from '../../../../base/util';
 
 type Props = {
 
@@ -52,18 +52,6 @@ function InviteByEmailSection({ inviteSubject, inviteText, t }: Props) {
         copyText(inviteText);
     }
 
-    /**
-     * Opens an email provider containing the conference invite.
-     *
-     * @param {string} url - The url to be opened.
-     * @returns {Function}
-     */
-    function _onSelectProvider(url) {
-        return function() {
-            openURLInBrowser(url, true);
-        };
-    }
-
     /**
      * Toggles the email invite drawer.
      *
@@ -112,10 +100,13 @@ function InviteByEmailSection({ inviteSubject, inviteText, t }: Props) {
                             content = { t(tooltipKey) }
                             key = { idx }
                             position = 'top'>
-                            <div
-                                onClick = { _onSelectProvider(url) }>
+                            <a
+                                className = 'provider-icon'
+                                href = { url }
+                                rel = 'noopener noreferrer'
+                                target = '_blank'>
                                 <Icon src = { icon } />
-                            </div>
+                            </a>
                         </Tooltip>
                     ))
                 }