fix(Safari): Fix mobile double tapping for toolbar and overflow.

* Create generic tooltip wrapper for mobile usability.
* Change overflow menu icon/font/padding sizes.
* Change overflow drawer expand icon.

css/_drawer.scss

@@ -7,7 +7,7 @@
 }
 
 .drawer-menu {
-    padding: 12px 16px;
+    padding: 0 16px;
     max-height: 50vh;
     background: #242528;
     border-radius: 16px 16px 0 0;
@@ -24,12 +24,14 @@
         height: 44px;
         cursor: pointer;
 
-        &:hover {
-            background-color: $overflowMenuItemHoverBG;
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                background-color: $overflowMenuItemHoverBG;
+            }
         }
 
-        svg, path {
-            fill: #b8c7e0;
+        svg {
+            fill: none;
         }
     }
 
@@ -57,7 +59,7 @@
             color: $overflowMenuItemColor;
             cursor: pointer;
             display: flex;
-            font-size: 14px;
+            font-size: 16px;
 
             div {
                 display: flex;
@@ -65,16 +67,20 @@
                 align-items: center;
             }
 
-            &:hover {
-                background-color: $overflowMenuItemHoverBG;
-                color: $overflowMenuItemHoverColor;
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    background-color: $overflowMenuItemHoverBG;
+                    color: $overflowMenuItemHoverColor;
+                }
             }
 
             &.unclickable {
                 cursor: default;
             }
-            &.unclickable:hover {
-                background: inherit;
+            @media (hover: hover) and (pointer: fine) {
+                &.unclickable:hover {
+                    background: inherit;
+                }
             }
             &.disabled {
                 cursor: initial;
@@ -93,15 +99,17 @@
         }
 
         .overflow-menu-item-icon {
-            margin-right: 10px;
+            margin-right: 16px;
 
             i {
                 display: inline;
                 font-size: 24px;
             }
 
-            i:hover {
-                background-color: initial;
+            @media (hover: hover) and (pointer: fine) {
+                i:hover {
+                    background-color: initial;
+                }
             }
 
             img {
@@ -111,11 +119,13 @@
 
             svg {
                 fill: #B8C7E0 !important;
+                height: 20px;
+                width: 20px;
             }
         }
 
         .profile-text {
-            max-width: 150px;
+            max-width: 100%;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;

css/_toolbars.scss

@@ -91,9 +91,11 @@
                     width: 38px;
                     height: 38px;
 
-                    &:hover {
-                        background-color: #daebfa;
-                        border: 1px solid #daebfa;
+                    @media (hover: hover) and (pointer: fine) {
+                        &:hover {
+                            background-color: #daebfa;
+                            border: 1px solid #daebfa;
+                        }
                     }
 
                     &.toggled {
@@ -104,8 +106,10 @@
                             fill: #fff;
                         }
 
-                        &:hover {
-                            background-color: #5e6d7a;
+                        @media (hover: hover) and (pointer: fine) {
+                            &:hover {
+                                background-color: #5e6d7a;
+                            }
                         }
                     }
 
@@ -127,8 +131,10 @@
                         width: 40px;
                         height: 40px;
 
-                        &:hover {
-                            background-color: $hangupColor;
+                        @media (hover: hover) and (pointer: fine) {
+                            &:hover {
+                                background-color: $hangupColor;
+                            }
                         }
 
                         svg {
@@ -159,8 +165,9 @@
                 cursor: pointer;
                 display: flex;
                 font-size: 14px;
-                height: 22px;
+                height: 40px;
                 padding: 5px 12px;
+                box-sizing: border-box;
 
                 div {
                     display: flex;
@@ -168,16 +175,20 @@
                     align-items: center;
                 }
 
-                &:hover {
-                    background-color: $overflowMenuItemHoverBG;
-                    color: $overflowMenuItemHoverColor;
+                @media (hover: hover) and (pointer: fine) {
+                    &:hover {
+                        background-color: $overflowMenuItemHoverBG;
+                        color: $overflowMenuItemHoverColor;
+                    }
                 }
 
                 &.unclickable {
                     cursor: default;
                 }
-                &.unclickable:hover {
-                    background: inherit;
+                @media (hover: hover) and (pointer: fine) {
+                    &.unclickable:hover {
+                        background: inherit;
+                    }
                 }
                 &.disabled {
                     cursor: initial;
@@ -196,15 +207,17 @@
             }
 
             .overflow-menu-item-icon {
-                margin-right: 10px;
+                margin-right: 16px;
 
                 i {
                     display: inline;
                     font-size: 24px;
                 }
 
-                i:hover {
-                    background-color: initial;
+                @media (hover: hover) and (pointer: fine) {
+                    i:hover {
+                        background-color: initial;
+                    }
                 }
 
                 img {
@@ -214,6 +227,8 @@
 
                 svg {
                     fill: #B8C7E0 !important;
+                    height: 20px;
+                    width: 20px;
                 }
             }
 
@@ -261,7 +276,13 @@
             justify-content: center;
             width: $newToolbarSize;
 
-            &:hover, &.toggled {
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    background: $newToolbarButtonHoverColor;
+                }
+            }
+
+            &.toggled {
                 background: $newToolbarButtonHoverColor;
             }
 

css/modals/invite/_invite_more.scss

@@ -32,8 +32,10 @@
         line-height: 24px;
         cursor: pointer;
 
-        &:hover {
-            background: #278ADF;
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                background: #278ADF;
+            }
         }
 
         &-text {

react/features/base/icons/svg/icon-arrow-down-wide.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="12" viewBox="0 0 29 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 2L14.2616 10L26.5 2" stroke="#929292" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

react/features/base/icons/svg/icon-arrow-up-wide.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="12" viewBox="0 0 29 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 10L14.2616 2L26.5 10" stroke="#929292" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

react/features/base/icons/svg/index.js

@@ -6,8 +6,10 @@ export { default as IconArrowBack } from './arrow_back.svg';
 export { default as IconArrowDown } from './arrow_down.svg';
 export { default as IconArrowDownLarge } from './arrow_down_large.svg';
 export { default as IconArrowDownSmall } from './arrow-down-small.svg';
+export { default as IconArrowDownWide } from './icon-arrow-down-wide.svg';
 export { default as IconArrowUp } from './arrow_up.svg';
 export { default as IconArrowUpLarge } from './arrow_up_large.svg';
+export { default as IconArrowUpWide } from './icon-arrow-up-wide.svg';
 export { default as IconArrowLeft } from './arrow-left.svg';
 export { default as IconAudioOnly } from './visibility.svg';
 export { default as IconAudioOnlyOff } from './visibility-off.svg';

react/features/base/react/components/web/BaseIndicator.js

@@ -1,10 +1,10 @@
 /* @flow */
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../../i18n';
 import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link BaseIndicator}.

react/features/base/toolbox/components/OverflowMenuItem.web.js

@@ -1,9 +1,9 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { Icon } from '../../icons';
+import { Tooltip } from '../../tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link OverflowMenuItem}.

react/features/base/toolbox/components/ToolboxItem.web.js

@@ -1,9 +1,9 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Fragment } from 'react';
 
 import { Icon } from '../../icons';
+import { Tooltip } from '../../tooltip';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
 import type { Props } from './AbstractToolboxItem';

react/features/base/tooltip/components/TooltipWrapper.js

@@ -0,0 +1,50 @@
+// @flow
+
+import Tooltip from '@atlaskit/tooltip';
+import React from 'react';
+
+import { isMobileBrowser } from '../../environment/utils';
+
+type Props = {
+
+    /**
+     * Children of the component.
+     */
+    children: React$Node,
+
+    /**
+     * The text to be displayed in the tooltip.
+     */
+    content?: string | null,
+
+    /**
+     * The position of the tooltip relative to the element it contains.
+     */
+    position?: string
+
+}
+
+/**
+ * Wrapper of AtlasKit Tooltip that doesn't render the actual tooltip in mobile browsers.
+ *
+ * @returns {ReactElement}
+ */
+function TooltipWrapper({
+    children,
+    content,
+    position
+}: Props) {
+    if (isMobileBrowser()) {
+        return children;
+    }
+
+    return (
+        <Tooltip
+            content = { content }
+            position = { position }>
+            {children}
+        </Tooltip>
+    );
+}
+
+export default TooltipWrapper;

react/features/base/tooltip/components/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { default as Tooltip } from './TooltipWrapper';

react/features/base/tooltip/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export * from './components';

react/features/calendar-sync/components/AddMeetingUrlButton.web.js

@@ -1,6 +1,5 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
 
@@ -11,6 +10,7 @@ import {
 import { translate } from '../../base/i18n';
 import { Icon, IconAdd } from '../../base/icons';
 import { connect } from '../../base/redux';
+import { Tooltip } from '../../base/tooltip';
 import { updateCalendarEvent } from '../actions';
 
 /**

react/features/calendar-sync/components/JoinButton.web.js

@@ -1,10 +1,10 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { Icon, IconAdd } from '../../base/icons';
+import { Tooltip } from '../../base/tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link JoinButton}.

react/features/e2ee/components/E2EELabel.js

@@ -1,12 +1,12 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { IconE2EE } from '../../base/icons';
 import { CircularLabel } from '../../base/label';
 import { connect } from '../../base/redux';
+import { Tooltip } from '../../base/tooltip';
 
 import { _mapStateToProps, type Props } from './AbstractE2EELabel';
 

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

@@ -1,6 +1,5 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { useState } from 'react';
 
 import { translate } from '../../../../base/i18n';
@@ -13,6 +12,7 @@ import {
     IconOutlook,
     IconYahoo
 } from '../../../../base/icons';
+import { Tooltip } from '../../../../base/tooltip';
 import { copyText, openURLInBrowser } from '../../../../base/util';
 
 type Props = {

react/features/local-recording/components/LocalRecordingLabel.web.js

@@ -1,11 +1,11 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n/index';
 import { CircularLabel } from '../../base/label/index';
 import { connect } from '../../base/redux';
+import { Tooltip } from '../../base/tooltip';
 
 
 /**

react/features/toolbox/components/web/Drawer.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Icon, IconArrowUp, IconArrowDown } from '../../../base/icons';
+import { Icon, IconArrowUpWide, IconArrowDownWide } from '../../../base/icons';
 
 type Props = {
 
@@ -78,7 +78,7 @@ function Drawer({
                     <div
                         className = 'drawer-toggle'
                         onClick = { toggleExpanded }>
-                        <Icon src = { expanded ? IconArrowDown : IconArrowUp } />
+                        <Icon src = { expanded ? IconArrowDownWide : IconArrowUpWide } />
                     </div>
                 )}
                 {children}

react/features/toolbox/components/web/OverflowMenuProfileItem.js

@@ -83,7 +83,7 @@ class OverflowMenuProfileItem extends Component<Props> {
                 <span className = 'overflow-menu-item-icon'>
                     <Avatar
                         participantId = { _localParticipant.id }
-                        size = { 24 } />
+                        size = { 20 } />
                 </span>
                 <span className = 'profile-text'>
                     { displayName }

react/features/toolbox/components/web/ToolbarButton.js

@@ -1,9 +1,9 @@
 /* @flow */
 
-import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 
 import { Icon } from '../../../base/icons';
+import { Tooltip } from '../../../base/tooltip';
 import AbstractToolbarButton from '../AbstractToolbarButton';
 import type { Props as AbstractToolbarButtonProps }
     from '../AbstractToolbarButton';

react/features/transcribing/components/TranscribingLabel.web.js

@@ -1,11 +1,11 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { CircularLabel } from '../../base/label';
 import { connect } from '../../base/redux';
+import { Tooltip } from '../../base/tooltip';
 
 import { _mapStateToProps, type Props } from './AbstractTranscribingLabel';
 

react/features/video-quality/components/VideoQualityLabel.web.js

@@ -1,12 +1,12 @@
 // @flow
 
-import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 
 import { translate } from '../../base/i18n';
 import { CircularLabel } from '../../base/label';
 import { MEDIA_TYPE } from '../../base/media';
 import { connect } from '../../base/redux';
+import { Tooltip } from '../../base/tooltip';
 import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
 
 import AbstractVideoQualityLabel, {