chore(deps) Cleanup (#13246)

Remove @atlaskit and styled-components
Upgrade @emotion and @mui packages
Move @types packages to devDeps

package.json

@@ -16,12 +16,8 @@
   "readmeFilename": "README.md",
   "dependencies": {
     "@amplitude/react-native": "2.7.0",
-    "@atlaskit/inline-dialog": "13.0.9",
-    "@atlaskit/inline-message": "11.0.8",
-    "@atlaskit/multi-select": "15.0.5",
-    "@atlaskit/theme": "11.0.2",
-    "@emotion/react": "11.10.0",
-    "@emotion/styled": "11.10.0",
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
     "@giphy/js-fetch-api": "4.7.1",
     "@giphy/react-components": "6.8.1",
     "@giphy/react-native-sdk": "1.7.0",
@@ -33,8 +29,8 @@
     "@jitsi/rtcstats": "9.5.1",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
     "@microsoft/microsoft-graph-client": "3.0.1",
-    "@mui/material": "5.10.2",
-    "@mui/styles": "5.10.2",
+    "@mui/material": "5.12.1",
+    "@mui/styles": "5.12.0",
     "@react-native-async-storage/async-storage": "1.17.3",
     "@react-native-community/clipboard": "1.5.1",
     "@react-native-community/netinfo": "7.1.7",
@@ -48,10 +44,6 @@
     "@svgr/webpack": "6.3.1",
     "@tensorflow/tfjs-backend-wasm": "3.13.0",
     "@tensorflow/tfjs-core": "3.13.0",
-    "@types/amplitude-js": "8.16.2",
-    "@types/audioworklet": "0.0.29",
-    "@types/w3c-image-capture": "1.0.6",
-    "@types/w3c-web-hid": "1.0.3",
     "@vladmandic/human": "2.6.5",
     "@vladmandic/human-models": "2.5.9",
     "@xmldom/xmldom": "0.8.7",
@@ -123,7 +115,6 @@
     "redux-thunk": "2.4.1",
     "resemblejs": "4.0.0",
     "seamless-scroll-polyfill": "2.1.8",
-    "styled-components": "3.4.9",
     "tss-react": "4.4.4",
     "util": "0.12.1",
     "uuid": "8.3.2",
@@ -140,6 +131,8 @@
     "@babel/preset-flow": "7.16.0",
     "@babel/preset-react": "7.16.0",
     "@jitsi/eslint-config": "4.1.5",
+    "@types/amplitude-js": "8.16.2",
+    "@types/audioworklet": "0.0.29",
     "@types/js-md5": "0.4.3",
     "@types/lodash": "4.14.182",
     "@types/react": "17.0.14",
@@ -151,6 +144,8 @@
     "@types/resemblejs": "^4.1.0",
     "@types/unorm": "1.3.28",
     "@types/uuid": "8.3.4",
+    "@types/w3c-image-capture": "1.0.6",
+    "@types/w3c-web-hid": "1.0.3",
     "@types/zxcvbn": "4.4.1",
     "@typescript-eslint/eslint-plugin": "5.30.5",
     "@typescript-eslint/parser": "5.30.4",

react/features/app/components/App.web.tsx

@@ -1,4 +1,3 @@
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React from 'react';
 
 import GlobalStyles from '../../base/ui/components/GlobalStyles.web';
@@ -46,11 +45,9 @@ export class App extends AbstractApp {
     _createMainElement(component: React.ComponentType, props: any) {
         return (
             <JitsiThemeProvider>
-                <AtlasKitThemeProvider mode = 'dark'>
-                    <GlobalStyles />
-                    <ChromeExtensionBanner />
-                    { super._createMainElement(component, props) }
-                </AtlasKitThemeProvider>
+                <GlobalStyles />
+                <ChromeExtensionBanner />
+                { super._createMainElement(component, props) }
             </JitsiThemeProvider>
         );
     }
@@ -63,9 +60,7 @@ export class App extends AbstractApp {
     _renderDialogContainer() {
         return (
             <JitsiThemeProvider>
-                <AtlasKitThemeProvider mode = 'dark'>
-                    <DialogContainer />
-                </AtlasKitThemeProvider>
+                <DialogContainer />
             </JitsiThemeProvider>
         );
     }

react/features/base/ui/components/web/TextWithOverflow.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useRef } from 'react';
-import { keyframes } from 'styled-components';
+import { keyframes } from 'tss-react';
 import { makeStyles } from 'tss-react/mui';
 
 import { TEXT_OVERFLOW_TYPES } from '../../constants.web';

react/features/invite/components/dial-in-summary/web/DialInSummaryApp.tsx

@@ -1,4 +1,3 @@
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React, { ComponentType } from 'react';
 
 import BaseApp from '../../../../base/app/components/BaseApp';
@@ -55,10 +54,8 @@ export default class DialInSummaryApp extends BaseApp<any> {
     _createMainElement(component: ComponentType<any>, props: Object) {
         return (
             <JitsiThemeProvider>
-                <AtlasKitThemeProvider mode = 'dark'>
-                    <GlobalStyles />
-                    {super._createMainElement(component, props)}
-                </AtlasKitThemeProvider>
+                <GlobalStyles />
+                {super._createMainElement(component, props)}
             </JitsiThemeProvider>
         );
     }

react/features/prejoin/components/web/PrejoinApp.tsx

@@ -1,4 +1,3 @@
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React, { ComponentType } from 'react';
 import { batch } from 'react-redux';
 
@@ -79,10 +78,8 @@ export default class PrejoinApp extends BaseApp<Props> {
     _createMainElement(component: ComponentType<any>, props: Object) {
         return (
             <JitsiThemeProvider>
-                <AtlasKitThemeProvider mode = 'dark'>
-                    <GlobalStyles />
-                    { super._createMainElement(component, props) }
-                </AtlasKitThemeProvider>
+                <GlobalStyles />
+                { super._createMainElement(component, props) }
             </JitsiThemeProvider>
         );
     }
@@ -95,9 +92,7 @@ export default class PrejoinApp extends BaseApp<Props> {
     _renderDialogContainer() {
         return (
             <JitsiThemeProvider>
-                <AtlasKitThemeProvider mode = 'dark'>
-                    <DialogContainer />
-                </AtlasKitThemeProvider>
+                <DialogContainer />
             </JitsiThemeProvider>
         );
     }