feat(ui) update AtlasKit components

css/_atlaskit_overrides.scss

  * Move the @atlaskit/flag container up a little bit so it does not cover the
  * toolbar with the first notification.
  */
-.jIMojv{
+.atlaskit-portal > #notifications-container {
     bottom: calc(#{$newToolbarSizeWithPadding}) !important;
 }
 
-/**
- * Disable the slide-in animation for @atlaskit/flag due to the animation
- * repeating for each queued flag once it becomes the top flag.
- */
- .mIBKA:first-child {
-    animation: cbfRuT 0s !important;
-    -webkit-animation: cbfRuT 0s !important;
-}
-
 .modal-dialog-form {
-    /**
-     * Update the @atlaskit/dropdown-menu trigger wrapper to make sure it looks
-     * click-able.
-     */
-    .cjJUnw {
-        cursor: pointer;
-    }
-
     /**
      * Override @atlaskit/dropdown-menu styling when in a modal because the
      * dropdown backgrounds clash with the modal backgrounds.
      */
-    .cksvax[data-role=droplistContent] {
-        border: 1px solid #455166;
+    .dropdown-menu div[style*="transform"] {
+        outline: 1px solid #455166;
     }
 }
 
 /**
- * Override @atlaskit/theme styling for the top toolbar so it displays over
- * the video thumbnail while obscuring as little as possible.
+ * Override @atlaskit/modal-dialog header styling
  */
-.videocontainer .tOoji {
-    background: none;
+.atlaskit-portal [role="dialog"] header {
+    .jitsi-icon svg {
+        fill: #B8C7E0;
+        cursor: pointer;
+    }
 }
 
 /**
- * Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
- * with the correct height.
+ * Override @atlaskit/theme styling for the top toolbar so it displays over
+ * the video thumbnail while obscuring as little as possible.
  */
-.toolbox-button-wth-dialog .eYJELv {
-    max-height: initial;
+.videocontainer__toptoolbar > div > div {
+    background: none;
 }
 
-/**
- * Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
- * a scrollable list of elements at small screen widths.
- */
-.sc-eNQAEJ {
-    overflow-y: auto;
-}
 
 /**
  * Keep overflow menu within screen vertical bounds and make it scrollable.
  */
-.toolbox-button-wth-dialog .sc-ckVGcZ.fdAqDG > :first-child {
-    max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 16px);
+ .toolbox-button-wth-dialog > div:nth-child(2) {
+    max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
     overflow-y: auto;
-}
+}

css/_audio-preview.scss

         top: 18px;
     }
 
-   // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div > div:nth-child(2) > div > div {
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
         outline: none;
         padding: 0;
     }

css/_base.scss

  * pad the modal container in order for the modals to be centered
  * while also taking the chat size into consideration.
 */
-@media (min-width: 480px + $sidebarWidth) {
-    .shift-right [class^="Modal__FillScreen"] {
+@media (min-width: 581px) {
+    .shift-right .atlaskit-portal > div:not(.Tooltip) {
         padding-left: $sidebarWidth;
     }
 }
 
-/**
- * Similarly, we offset the notifications when the chat is open by
- * padding the container.
-*/
-.shift-right [class^="styledFlagGroup-"] {
-    padding-left: $sidebarWidth;
-}
-
 .jitsi-icon svg {
     fill: white;
 }

css/_chat.scss

     position: relative;
     width: 100%;
     z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    align-items: center;
+    box-sizing: border-box;
+    color: #fff;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
 
-    .chat-close {
-        align-items: center;
-        bottom: 8px;
-        color: white;
+    .jitsi-icon > svg {
         cursor: pointer;
-        display: flex;
-        font-size: 18px;
-        height: 40px;
-        justify-content: center;
-        line-height: 15px;
-        padding: 4px;
-        position: absolute;
-        right: 5px;
-        width: 40px;
-
-        &:hover {
-            color: rgba(255, 255, 255, 0.8);
-        }
+        fill: #A4B8D1;
     }
 }
 
         text-overflow: ellipsis;
         overflow: hidden;
     }
+
+    @media (max-width: 580px) {
+        display: none !important;
+    }
 }
 
 .chatmessage {

css/_country-picker.scss

 }
 
 // Override @Atlaskit/inline-dialog styles
-.cpick-container > div > div:nth-child(2) > div > div {
+.cpick-container > div:nth-child(2) {
     outline: none;
     padding: 8px 0 0 0;
 }

css/_prejoin.scss

     }
 
     &-dropdown-container {
-        & > div > div:nth-child(2) > div > div {
+        & > div:nth-child(2) {
             background: #fff;
             padding: 0;
         }

css/_responsive.scss

 }
 
 @media (min-width: 480px) and (max-width: 580px) {
-    .shift-right [class^="Modal__PositionerAbsolute"] {
+    .shift-right .focus-lock > div > div {
         @include full-size-modal-positioner();
     }
 
-    .shift-right [class^="Modal__Dialog-"] {
+    .shift-right .focus-lock [role="dialog"] {
         @include full-size-modal-dialog();
     }
 }
 
 @media (min-width: 580px) and (max-width: 680px) {
     .mobile-browser {
-        &.shift-right [class^="Modal__PositionerAbsolute"] {
+        &.shift-right .focus-lock > div > div {
             @include full-size-modal-positioner();
         }
 
-        &.shift-right [class^="Modal__Dialog-"] {
+        &.shift-right .focus-lock [role="dialog"] {
             @include full-size-modal-dialog();
         }
     }
-}
+}

css/_toolbars.scss

         display: none;
     }
 
-    &.shift-right {
-        margin-left: $sidebarWidth;
-        width: calc(100% - #{$sidebarWidth});
+    @media (min-width: 581px) {
+        &.shift-right {
+            margin-left: $sidebarWidth;
+            width: calc(100% - #{$sidebarWidth});
+        }
     }
 
     .toolbox-background {
                     margin: 0px 4px;
                     width: 38px;
                     height: 38px;
-        
+
                     &:hover {
                         background-color: #daebfa;
                         border: 1px solid #daebfa;
                     }
-        
+
                     &.toggled {
                         background: #2a3a4b;
                         border: 1px solid #5e6d7a;
-    
+
                         svg {
                             fill: #fff;
                         }
-        
+
                         &:hover {
                             background-color: #5e6d7a;
                         }
                     }
-        
+
                     &.disabled, .disabled & {
                         cursor: initial;
                         color: #fff;
                         background-color: #a4b8d1;
                     }
-    
+
                     svg {
                         fill: #5e6d7a;
                     }
                         border: 1px solid $hangupColor;
                         width: 40px;
                         height: 40px;
-                
+
                         &:hover {
                             background-color: $hangupColor;
                         }
             &:hover, &.toggled {
                 background: $newToolbarButtonHoverColor;
             }
-    
+
             &.disabled {
                 cursor: initial !important;
                 background-color: #a4b8d1 !important;

css/_video-preview.scss

     }
 
     // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div > div:nth-child(2) > div > div {
+    & > div:nth-child(2) {
         outline: none;
         padding: 0;
     }

css/_videolayout_default.scss

         z-index: $zindex2;
     }
 
-    &.shift-right {
-        &#largeVideoContainer {
-            margin-left: $sidebarWidth;
-            width: calc(100% - #{$sidebarWidth});
+    @media (min-width: 581px) {
+        &.shift-right {
+            &#largeVideoContainer {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
+            }
         }
     }
 }

css/filmstrip/_tile_view.scss

         width: 100%;
         z-index: $filmstripVideosZ;
 
-        &.shift-right {
-            margin-left: $sidebarWidth;
-            width: calc(100% - #{$sidebarWidth});
+        @media (min-width: 581px) {
+            &.shift-right {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
 
-            #filmstripRemoteVideos {
-                width: calc(100vw - #{$sidebarWidth});
+                #filmstripRemoteVideos {
+                    width: calc(100vw - #{$sidebarWidth});
+                }
             }
         }
     }

css/modals/device-selection/_device-selection.scss

 
         .device-selector-trigger-text {
             overflow: hidden;
-            margin-left: 8px;
+            text-align: center;
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 100%;

css/modals/settings/_settings.scss

         padding: 20px 0px 4px 0px;
     }
 
+    input[type="checkbox"] + svg + span {
+        color: #9FB0CC;
+    }
+
     .calendar-tab,
     .more-tab,
     .profile-edit {

modules/UI/videolayout/LargeVideoManager.js

         let widthToUse = this.preferredWidth || window.innerWidth;
         const { isOpen } = APP.store.getState()['features/chat'];
 
-        if (isOpen) {
+        if (isOpen && window.innerWidth > 580) {
             /**
              * If chat state is open, we re-compute the container width
              * by subtracting the default width of the chat.

package.json

   "author": "",
   "readmeFilename": "README.md",
   "dependencies": {
-    "@atlaskit/button": "10.1.1",
-    "@atlaskit/checkbox": "5.0.10",
-    "@atlaskit/dropdown-menu": "6.1.25",
-    "@atlaskit/field-text": "7.0.19",
-    "@atlaskit/field-text-area": "4.0.15",
-    "@atlaskit/flag": "13.0.0",
-    "@atlaskit/icon": "15.0.3",
-    "@atlaskit/inline-dialog": "5.3.0",
-    "@atlaskit/inline-message": "7.0.10",
-    "@atlaskit/lozenge": "6.2.4",
-    "@atlaskit/modal-dialog": "8.0.1",
-    "@atlaskit/multi-select": "11.0.13",
-    "@atlaskit/spinner": "9.0.13",
-    "@atlaskit/tabs": "8.0.11",
-    "@atlaskit/theme": "7.0.2",
-    "@atlaskit/toggle": "5.0.14",
-    "@atlaskit/tooltip": "12.1.13",
+    "@atlaskit/button": "15.1.4",
+    "@atlaskit/checkbox": "12.0.0",
+    "@atlaskit/dropdown-menu": "10.1.2",
+    "@atlaskit/field-text": "11.0.4",
+    "@atlaskit/field-text-area": "8.0.4",
+    "@atlaskit/flag": "14.1.0",
+    "@atlaskit/icon": "21.2.0",
+    "@atlaskit/inline-dialog": "13.0.9",
+    "@atlaskit/inline-message": "11.0.8",
+    "@atlaskit/lozenge": "10.1.1",
+    "@atlaskit/modal-dialog": "11.2.4",
+    "@atlaskit/multi-select": "15.0.5",
+    "@atlaskit/spinner": "15.0.6",
+    "@atlaskit/tabs": "12.1.2",
+    "@atlaskit/theme": "11.0.2",
+    "@atlaskit/toggle": "12.0.3",
+    "@atlaskit/tooltip": "17.1.2",
     "@jitsi/js-utils": "1.0.5",
     "@microsoft/microsoft-graph-client": "1.1.0",
     "@react-native-async-storage/async-storage": "1.13.2",
     "i18next": "17.0.6",
     "i18next-browser-languagedetector": "3.0.1",
     "i18next-xhr-backend": "3.0.0",
-    "jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0",
     "jitsi-meet-logger": "github:jitsi/jitsi-meet-logger#v1.0.0",
     "jquery": "3.5.1",
     "jquery-contextmenu": "2.4.5",
     "jquery-i18next": "1.2.1",
+    "jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
     "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#be18ff34bedf38c7475fe4953074c7959000e15f",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "pixelmatch": "5.1.0",
     "punycode": "2.1.1",
-    "react": "16.9",
-    "react-dom": "16.9",
+    "react": "16.12",
+    "react-dom": "16.12",
     "react-emoji-render": "1.2.4",
     "react-i18next": "10.11.4",
     "react-linkify": "1.0.0-alpha",

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

+// @flow
+/* eslint-disable react/no-multi-comp */
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import {
+    Header,
+    Title,
+    titleIconWrapperStyles,
+    TitleText
+} from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
+import React from 'react';
+
+import { Icon, IconClose } from '../../../icons';
+
+const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
+    if (!appearance) {
+        return null;
+    }
+
+    const IconSymbol = appearance === 'danger' ? ErrorIcon : WarningIcon;
+
+    return (
+        <span css = { titleIconWrapperStyles(appearance) }>
+            <IconSymbol label = { `${appearance} icon` } />
+        </span>
+    );
+};
+
+type Props = {
+    id: string,
+    appearance?: 'danger' | 'warning',
+    heading: string,
+    onClose: Function,
+    showKeyline: boolean,
+    isHeadingMultiline: boolean,
+    testId: string,
+    t: Function
+}
+
+/**
+ * A default header for modal-dialog components
+ *
+ * @export
+ * @class ModalHeader
+ * @extends {React.Component<Props>}
+ */
+export default class ModalHeader extends React.Component<Props> {
+    static defaultProps = {
+        isHeadingMultiline: true
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            id,
+            appearance,
+            heading,
+            onClose,
+            showKeyline,
+            isHeadingMultiline,
+            testId
+        } = this.props;
+
+        if (!heading) {
+            return null;
+        }
+
+        return (
+            <Header showKeyline = { showKeyline }>
+                <Title>
+                    <TitleIcon appearance = { appearance } />
+                    <TitleText
+                        data-testid = { testId && `${testId}-heading` }
+                        id = { id }
+                        isHeadingMultiline = { isHeadingMultiline }>
+                        {heading}
+                    </TitleText>
+                </Title>
+                <Icon
+                    onClick = { onClose }
+                    src = { IconClose } />
+            </Header>
+        );
+    }
+}

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

 // @flow
 
-import Button, { ButtonGroup } from '@atlaskit/button';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
 import _ from 'lodash';
 import React, { Component } from 'react';
 import { translate } from '../../../i18n/functions';
 import type { DialogProps } from '../../constants';
 
+import ModalHeader from './ModalHeader';
+
 /**
  * The ID to be used for the cancel button if enabled.
  * @type {string}
             <Modal
                 autoFocus = { true }
                 components = {{
-                    Header: customHeader
+                    Header: customHeader ? customHeader : props => (
+                        <ModalHeader
+                            { ...props }
+                            heading = { titleString || t(titleKey) } />
+                    )
                 }}
                 footer = { this._renderFooter }
-                heading = { customHeader ? undefined : titleString || t(titleKey) }
                 i18n = { this.props.i18n }
                 onClose = { this._onDialogDismissed }
                 onDialogDismissed = { this._onDialogDismissed }

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

+import {
+    Dialog,
+    FillScreen,
+    dialogWidth,
+    dialogHeight,
+    PositionerAbsolute,
+    PositionerRelative
+} from '@atlaskit/modal-dialog/dist/es2019/styled/Modal.js';
+import { N0, DN50 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import React from 'react';
+
+const ThemedDialog = props => {
+    const style = { backgroundColor: props.isChromeless ? 'transparent' : themed({ light: N0,
+        dark: DN50 })({ theme: { mode: 'dark' } }) };
+
+    return (<Dialog
+        { ...props }
+        aria-modal = { true }
+        style = { style }
+        theme = {{ mode: 'dark' }} />);
+};
+
+
+export { ThemedDialog as Dialog, FillScreen, dialogWidth, dialogHeight, PositionerAbsolute, PositionerRelative };

react/features/base/popover/components/Popover.web.js

  * @returns {string}
  */
 function _mapPositionToPaddingClass(position = 'left') {
-    return DIALOG_TO_PADDING_POSITION[position.split(' ')[0]];
+    return DIALOG_TO_PADDING_POSITION[position.split('-')[0]];
 }
 
 /**
                 <InlineDialog
                     content = { this._renderContent() }
                     isOpen = { this.state.showDialog }
-                    position = { position }>
+                    placement = { position }>
                     { children }
                 </InlineDialog>
             </div>

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

 /* @flow */
 
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/standard-button';
 import React, { Component } from 'react';
 
 type Props = {

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

 /* @flow */
 
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/standard-button';
 import React, { Component } from 'react';
 
 import { translate } from '../../../i18n';

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

 /* @flow */
 
-import { ToggleStateless } from '@atlaskit/toggle';
+import Toggle from '@atlaskit/toggle';
 import React, { Component } from 'react';
 
 type Props = {
 
+    /**
+     * ID of the toggle
+     */
+    id: string,
+
     /**
      * CSS class name.
      */
             disabled,
             onValueChange,
             value,
+            id,
             ...props
         } = this.props;
 
 
         return (
             <div className = { className }>
-                <ToggleStateless
+                <Toggle
+                    id = { id }
                     isChecked = { value }
                     isDisabled = { disabled }
                     onChange = { onValueChange }

react/features/base/util/react-focus-lock-wrapper.js

 
         const props = {
             ...otherProps,
-            disabled: true
+            crossFrame: false
         };
 
         // MoveFocusInside is added in order to initially bring the focus on the dialog.
-        return <FocusLock { ...props } ><MoveFocusInside>{children}</MoveFocusInside></FocusLock>;
+        return (
+            <FocusLock
+                { ...props }
+                className = 'focus-lock'>
+                <MoveFocusInside>{children}</MoveFocusInside>
+            </FocusLock>
+        );
     }
 }
 

react/features/chat/components/web/Chat.js

 import React from 'react';
 
 import { translate } from '../../../base/i18n';
-import { Icon, IconClose } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import AbstractChat, {
     _mapDispatchToProps,
 } from '../AbstractChat';
 
 import ChatDialog from './ChatDialog';
+import Header from './ChatDialogHeader';
 import ChatInput from './ChatInput';
 import DisplayNameForm from './DisplayNameForm';
 import MessageContainer from './MessageContainer';
      */
     _renderChatHeader() {
         return (
-            <div className = 'chat-header'>
-                <div
-                    className = 'chat-close'
-                    onClick = { this.props._onToggleChat }>
-                    <Icon src = { IconClose } />
-                </div>
-            </div>
+            <Header
+                className = 'chat-header'
+                onCancel = { this.props._onToggleChat } />
         );
     }
 

react/features/chat/components/web/ChatDialogHeader.js

      */
     onCancel: Function,
 
+    /**
+     * An optional class name.
+     */
+    className: string,
+
     /**
      * Invoked to obtain translated strings.
      */
  *
  * @returns {React$Element<any>}
  */
-function Header({ onCancel, t }: Props) {
+function Header({ onCancel, className, t }: Props) {
     return (
         <div
-            className = 'chat-dialog-header'>
+            className = { className || 'chat-dialog-header' }>
             { t('chat.title') }
             <Icon
                 onClick = { onCancel }

react/features/deep-linking/components/DeepLinkingDesktopPage.web.js

 // @flow
 
-import Button, { ButtonGroup } from '@atlaskit/button';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/standard-button';
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';

react/features/device-selection/components/DeviceSelector.web.js

 /* @flow */
 
-import AKDropdownMenu from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import DropdownMenu, {
+    DropdownItem,
+    DropdownItemGroup
+} from '@atlaskit/dropdown-menu';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n/functions';
         super(props);
 
         this._onSelect = this._onSelect.bind(this);
+        this._createDropdownItem = this._createDropdownItem.bind(this);
     }
 
     /**
         }
 
         const items = this.props.devices.map(this._createDropdownItem);
-        const defaultSelected = items.find(item =>
-            item.value === this.props.selectedDeviceId
+        const defaultSelected = this.props.devices.find(item =>
+            item.deviceId === this.props.selectedDeviceId
         );
 
         return this._createDropdown({
     _createDropdownTrigger(triggerText) {
         return (
             <div className = 'device-selector-trigger'>
-                <span
-                    className = { `device-selector-icon ${this.props.icon}` } />
                 <span className = 'device-selector-trigger-text'>
                     { triggerText }
                 </span>
-                <ChevronDownIcon
-                    label = 'expand'
-                    size = 'large' />
             </div>
         );
     }
 
+    _createDropdownItem: (Object) => void;
+
     /**
      * Creates an object in the format expected by AKDropdownMenu for an option.
      *
      * format recognized as a valid AKDropdownMenu item.
      */
     _createDropdownItem(device) {
-        return {
-            content: device.label,
-            value: device.deviceId
-        };
+        return (
+            <DropdownItem
+                key = { device.deviceId }
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick = {
+                    e => {
+                        e.stopPropagation();
+                        this._onSelect(device.deviceId);
+                    }
+                }>
+                { device.label || device.deviceId }
+            </DropdownItem>
+        );
     }
 
     /**
      */
     _createDropdown(options) {
         const triggerText
-            = (options.defaultSelected && options.defaultSelected.content)
+            = (options.defaultSelected && (options.defaultSelected.label || options.defaultSelected.deviceId))
                 || options.placeholder;
         const trigger = this._createDropdownTrigger(triggerText);
 
-        if (options.isDisabled) {
+        if (options.isDisabled || !options.items.length) {
             return (
                 <div className = 'device-selector-trigger-disabled'>
                     { trigger }
         }
 
         return (
-            <AKDropdownMenu
-                items = { [ { items: options.items || [] } ] }
-                onItemActivated = { this._onSelect }
-                shouldFitContainer = { true }>
-                { trigger }
-            </AKDropdownMenu>
+            <div className = 'dropdown-menu'>
+                <DropdownMenu
+                    shouldFitContainer = { true }
+                    trigger = { triggerText }
+                    triggerButtonProps = {{
+                        shouldFitContainer: true
+                    }}
+                    triggerType = 'button'>
+                    <DropdownItemGroup>
+                        { options.items }
+                    </DropdownItemGroup>
+                </DropdownMenu>
+            </div>
         );
     }
 
     /**
      * Invokes the passed in callback to notify of selection changes.
      *
-     * @param {Object} selection - Event from choosing a AKDropdownMenu option.
+     * @param {Object} newDeviceId - Selected device id from DropdownMenu option.
      * @private
      * @returns {void}
      */
-    _onSelect(selection) {
-        const newDeviceId = selection.item.value;
-
+    _onSelect(newDeviceId) {
         if (this.props.selectedDeviceId !== newDeviceId) {
-            this.props.onSelect(selection.item.value);
+            this.props.onSelect(newDeviceId);
         }
     }
 

react/features/e2ee/components/E2EESection.js

                         </span>
                 }
                 <div className = 'control-row'>
-                    <label>
+                    <label htmlFor = 'e2ee-section-switch'>
                         { t('dialog.e2eeLabel') }
                     </label>
                     <Switch
+                        id = 'e2ee-section-switch'
                         onValueChange = { this._onToggle }
                         value = { enabled } />
                 </div>

react/features/filmstrip/components/web/Thumbnail.js

 
         switch (_currentLayout) {
         case LAYOUTS.TILE_VIEW:
-            statsPopoverPosition = 'right top';
+            statsPopoverPosition = 'right-start';
             tooltipPosition = 'right';
             break;
         case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-            statsPopoverPosition = 'left top';
+            statsPopoverPosition = 'left-start';
             tooltipPosition = 'left';
             break;
         default:
-            statsPopoverPosition = 'top center';
+            statsPopoverPosition = 'auto';
             tooltipPosition = 'top';
         }
 

react/features/lobby/components/web/LobbySection.js

                         { t('lobby.enableDialogText') }
                     </p>
                     <div className = 'control-row'>
-                        <label>
+                        <label htmlFor = 'lobby-section-switch'>
                             { t('lobby.toggleLabel') }
                         </label>
                         <Switch
+                            id = 'lobby-section-switch'
                             onValueChange = { this._onToggleLobby }
                             value = { this.state.lobbyEnabled } />
                     </div>

react/features/notifications/components/web/Notification.js

         const {
             appearance,
             hideErrorSupportLink,
-            isDismissAllowed,
-            onDismissed,
             t,
             title,
             titleArguments,
                 description = { this._renderDescription() }
                 icon = { this._mapAppearanceToIcon() }
                 id = { uid }
-                isDismissAllowed = { isDismissAllowed }
-                onDismissed = { onDismissed }
                 testId = { titleKey }
                 title = { title || t(titleKey, titleArguments) } />
         );

react/features/notifications/components/web/NotificationsContainer.js

         }
 
         return (
-            <FlagGroup onDismissed = { this._onDismissed }>
+            <FlagGroup
+                id = 'notifications-container'
+                onDismissed = { this._onDismissed }>
                 { this._renderFlags() }
             </FlagGroup>
         );
                     { ...props }
                     id = { uid }
                     key = { uid }
+                    onDismissed = { this._onDismissed }
                     uid = { uid } />
 
             );

react/features/recording/components/LiveStream/web/StreamKeyPicker.js

                     key = { broadcast.boundStreamID }
 
                     // eslint-disable-next-line react/jsx-no-bind
-                    onClick = { () => this._onSelect(broadcast.boundStreamID) }>
+                    onClick = {
+                        e => {
+                            e.stopPropagation();
+                            this._onSelect(broadcast.boundStreamID);
+                        }
+                    }>
                     { broadcast.title }
                 </DropdownItem>));
         const selected
             = (selected && selected.title) || t('liveStreaming.choose');
 
         return (
-            <div className = 'broadcast-dropdown'>
+            <div className = 'broadcast-dropdown dropdown-menu'>
                 <DropdownMenuStateless
                     isOpen = { this.state.isDropdownOpen }
                     onItemActivated = { this._onSelect }

react/features/remote-video-menu/components/web/RemoteVideoMenuTriggerButton.js

 
     switch (currentLayout) {
     case LAYOUTS.TILE_VIEW:
-        _menuPosition = 'left top';
+        _menuPosition = 'left-start';
         break;
     case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-        _menuPosition = 'left bottom';
+        _menuPosition = 'left-end';
         break;
     default:
-        _menuPosition = 'top center';
+        _menuPosition = 'auto';
     }
 
     return {

react/features/settings/components/web/CalendarTab.js

 // @flow
 
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/standard-button';
 import Spinner from '@atlaskit/spinner';
 import React, { Component } from 'react';
 

react/features/settings/components/web/MoreTab.js

 
                     // eslint-disable-next-line react/jsx-no-bind
                     onClick = {
-                        () => super._onChange({ currentLanguage: language }) }>
+                        e => {
+                            e.stopPropagation();
+                            super._onChange({ currentLanguage: language });
+                        }
+                    }>
                     { t(`languages:${language}`) }
                 </DropdownItem>));
 
                 <div className = 'mock-atlaskit-label'>
                     { t('settings.language') }
                 </div>
-                <DropdownMenu
-                    isOpen = { this.state.isLanguageSelectOpen }
-                    onOpenChange = { this._onLanguageDropdownOpenChange }
-                    shouldFitContainer = { true }
-                    trigger = { currentLanguage
-                        ? t(`languages:${currentLanguage}`)
-                        : '' }
-                    triggerButtonProps = {{
-                        appearance: 'primary',
-                        shouldFitContainer: true
-                    }}
-                    triggerType = 'button'>
-                    <DropdownItemGroup>
-                        { languageItems }
-                    </DropdownItemGroup>
-                </DropdownMenu>
+                <div className = 'dropdown-menu'>
+                    <DropdownMenu
+                        isOpen = { this.state.isLanguageSelectOpen }
+                        onOpenChange = { this._onLanguageDropdownOpenChange }
+                        shouldFitContainer = { true }
+                        trigger = { currentLanguage
+                            ? t(`languages:${currentLanguage}`)
+                            : '' }
+                        triggerButtonProps = {{
+                            shouldFitContainer: true
+                        }}
+                        triggerType = 'button'>
+                        <DropdownItemGroup>
+                            { languageItems }
+                        </DropdownItemGroup>
+                    </DropdownMenu>
+                </div>
             </div>
         );
     }

react/features/settings/components/web/ProfileTab.js

 // @flow
 
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/standard-button';
 import { FieldTextStateless } from '@atlaskit/field-text';
 import React from 'react';
 

react/features/settings/components/web/audio/AudioSettingsPopup.js

                     setAudioOutputDevice = { setAudioOutputDevice } /> }
                 isOpen = { isOpen }
                 onClose = { onClose }
-                position = 'top left'>
+                placement = 'top-start'>
                 {children}
             </InlineDialog>
         </div>

react/features/settings/components/web/video/VideoSettingsPopup.js

                     videoDeviceIds = { videoDeviceIds } /> }
                 isOpen = { isOpen }
                 onClose = { onClose }
-                position = 'top right'>
+                placement = 'top-end'>
                 { children }
             </InlineDialog>
         </div>

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

                             content = { children }
                             isOpen = { isOpen }
                             onClose = { this._onCloseDialog }
-                            position = { 'top right' }>
+                            placement = 'top-end'>
                             {this._renderToolbarButton()}
                         </InlineDialog>
                     )

webpack.config.js

             test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/,
             resolve: {
                 alias: {
-                    'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`
+                    'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`,
+                    '../styled/Modal': `${__dirname}/react/features/base/dialog/components/web/ThemedDialog.js`
                 }
             }
         }, {