diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss
deleted file mode 100644
index 35a265e028..0000000000
--- a/css/_atlaskit_overrides.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Mixins that mimic the way Atlaskit fills the screen with modals at low screen widths.
- */
-@mixin full-size-modal-positioner() {
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- max-width: 100%;
- width: 100%;
-}
-
-@mixin full-size-modal-dialog() {
- height: 100%;
- max-height: 100%;
- border-radius: 0;
-}
-
-
-/**
- * Keep overflow menu within screen vertical bounds and make it scrollable.
- */
-.toolbox-button-wth-dialog > div:nth-child(2) {
- background: $menuBG;
- max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
- margin-bottom: 4px;
- padding: 0;
- overflow-y: auto;
-}
-
-/**
- * Remove background color and box-shadow for the context menu container.
- */
-.toolbox-button-wth-dialog.context-menu > div:nth-child(2) {
- background: transparent;
- box-shadow: none;
- overflow-y: initial;
-}
-
-.audio-preview > div:nth-child(2),
-.video-preview > div:nth-child(2) {
- margin-bottom: 4px;
- outline: none;
- padding: 0;
-}
-
-/**
- * The following selectors keep the chat modal full-size anywhere between 100px
- * and 580px for desktop or 680px for mobile.
- */
-@media (min-width: 100px) and (max-width: 320px) {
- .smiley-input {
- display: none;
- }
- .shift-right .focus-lock > div > div {
- @include full-size-modal-positioner();
- }
-
- .shift-right .focus-lock [role="dialog"] {
- @include full-size-modal-dialog();
- }
-}
-
-@media (min-width: 480px) and (max-width: 580px) {
- .shift-right .focus-lock > div > div {
- @include full-size-modal-positioner();
- }
-
- .shift-right .focus-lock [role="dialog"] {
- @include full-size-modal-dialog();
- }
-}
-
-@media (max-width: 580px) {
- // Override Atlaskit inline style for the modal background.
- // Important is unfortunately needed for that.
- .shift-right .focus-lock [role="dialog"][style] {
- background-color: $chatBackgroundColor !important;
- }
-
- // Remove Atlaskit padding from the chat dialog.
- .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
- padding: 0;
- }
-}
-
-div.Tooltip {
- color: #fff;
- font-size: 12px;
- line-height: 14px;
- padding: 8px;
-}
-
-// make modal full screen on landscape orientation
-@media (max-height: 420px) {
- .atlaskit-portal {
- .css-1oc7v0j {
- height: 100%;
- padding: 0;
- max-width: 100%;
- top: 0;
- width: 100%;
-
- &> div {
- height: 100%;
- }
- }
- }
-}
diff --git a/css/main.scss b/css/main.scss
index 66d0a26d09..ff1bba477b 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -25,7 +25,6 @@ $flagsImagePath: "../images/";
/* Modules BEGIN */
@import 'reset';
-@import 'atlaskit_overrides';
@import 'base';
@import 'utils';
@import 'overlay/overlay';
diff --git a/react/features/base/util/react-focus-lock-wrapper.js b/react/features/base/util/react-focus-lock-wrapper.js
deleted file mode 100644
index f71733fc8d..0000000000
--- a/react/features/base/util/react-focus-lock-wrapper.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// @flow
-import React from 'react';
-import FocusLock, { MoveFocusInside } from 'react-focus-lock';
-
-/**
- * FocusLock wrapper that disable the FocusLock in the @atlaskit/modal-dialog. We need to disable it because if the
- * iframe API is used and a dialog is displayed it is impossible to click on fields outside of the iframe (FocusLock
- * will steal the focus from any element that is not part of the dialog).
- *
- * @param {Object} props - The props passed to the FocusLock.
- * @returns {ReactElement}
- */
-export default (props: any) => {
- const { children, ...otherProps } = props;
-
- const forwardProps = {
- ...otherProps,
- crossFrame: false
- };
-
- // MoveFocusInside is added in order to initially bring the focus on the dialog.
- return (
-
- {children}
-
- );
-};
-
-export * from 'react-focus-lock';
diff --git a/react/features/chat/components/web/TouchmoveHack.tsx b/react/features/chat/components/web/TouchmoveHack.tsx
deleted file mode 100644
index 4e98544f73..0000000000
--- a/react/features/chat/components/web/TouchmoveHack.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { ReactElement, useEffect, useRef } from 'react';
-import { makeStyles } from 'tss-react/mui';
-
-import { isMobileBrowser } from '../../../base/environment/utils';
-
-interface IProps {
-
- /**
- * The component(s) that need to be scrollable on mobile.
- */
- children: ReactElement;
-
- /**
- * Whether the component should be flex container or not.
- */
- flex?: boolean;
-
- /**
- * Whether the component is rendered within a modal.
- */
- isModal: boolean;
-
-}
-
-const useStyles = makeStyles()(() => {
- return {
- flex: {
- display: 'flex',
- flex: 1
- },
- base: {
- height: '100%',
- overflow: 'auto'
- }
- };
-});
-
-/**
- * Component that disables {@code touchmove} propagation below it.
- *
- * @returns {ReactElement}
- */
-function TouchmoveHack({ children, isModal, flex }: IProps) {
- if (!isModal || !isMobileBrowser()) {
- return children;
- }
-
- const touchMoveElementRef = useRef(null);
-
- /**
- * Atlaskit's {@code Modal} uses a third party library to disable touchmove events
- * which makes scrolling inside dialogs impossible. We therefore employ this hack
- * to intercept and stop the propagation of touchmove events from this wrapper that
- * is placed around the chat conversation from the {@code ChatDialog}.
- *
- * @param {Event} event - The touchmove event fired within the component.
- * @returns {void}
- */
- function handleTouchMove(event: TouchEvent) {
- event.stopImmediatePropagation();
- }
-
- useEffect(() => {
- if (touchMoveElementRef?.current) {
- touchMoveElementRef.current.addEventListener('touchmove', handleTouchMove, true);
- }
-
- return () => {
- if (touchMoveElementRef?.current) {
- touchMoveElementRef.current.removeEventListener('touchmove', handleTouchMove, true);
- }
- };
- }, []);
- const { classes, cx } = useStyles();
-
- return (
-
- {children}
-
- );
-}
-
-export default TouchmoveHack;
diff --git a/webpack.config.js b/webpack.config.js
index d1309dd84c..d5af9be5f4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -149,21 +149,6 @@ function getConfig(options = {}) {
'style-loader',
'css-loader'
]
- }, {
- test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/,
- resolve: {
- alias: {
- 'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`,
- '../styled/Modal': `${__dirname}/react/features/base/dialog/components/web/ThemedDialog.js`
- }
- }
- }, {
- test: /\/react\/features\/base\/util\/react-focus-lock-wrapper.js$/,
- resolve: {
- alias: {
- 'react-focus-lock': `${__dirname}/node_modules/react-focus-lock`
- }
- }
}, {
test: /\.svg$/,
use: [ {