fix(styles) Remove Theme type annotation (#12544)

* tss-react doesn't need a type anotation for the Theme

* Update tss-react to 4.4.4

package-lock.json

@@ -127,7 +127,7 @@
         "resemblejs": "4.0.0",
         "seamless-scroll-polyfill": "2.1.8",
         "styled-components": "3.4.9",
-        "tss-react": "4.0.0",
+        "tss-react": "4.4.4",
         "util": "0.12.1",
         "uuid": "8.3.2",
         "wasm-check": "2.0.1",
@@ -19019,9 +19019,9 @@
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
     "node_modules/tss-react": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.0.0.tgz",
-      "integrity": "sha512-pPkOKWiWWPbKdQFnGGeHEgRceUwkjrv0eldVCAdBll3j6Y3Ys/xwqsnlWYwWOU3SMJygVRE/S4CsIYx6KPpOkA==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.4.4.tgz",
+      "integrity": "sha512-Bzyg99bIQq3Lk4Rwc5XMOps58c1biw1rghCkApIX5XkAB+/VjGCIFSl63PePhmiRNvKRxJRpawGPPxHytiw1TA==",
       "dependencies": {
         "@emotion/cache": "*",
         "@emotion/serialize": "*",
@@ -34738,9 +34738,9 @@
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
     "tss-react": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.0.0.tgz",
-      "integrity": "sha512-pPkOKWiWWPbKdQFnGGeHEgRceUwkjrv0eldVCAdBll3j6Y3Ys/xwqsnlWYwWOU3SMJygVRE/S4CsIYx6KPpOkA==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.4.4.tgz",
+      "integrity": "sha512-Bzyg99bIQq3Lk4Rwc5XMOps58c1biw1rghCkApIX5XkAB+/VjGCIFSl63PePhmiRNvKRxJRpawGPPxHytiw1TA==",
       "requires": {
         "@emotion/cache": "*",
         "@emotion/serialize": "*",

package.json

@@ -132,7 +132,7 @@
     "resemblejs": "4.0.0",
     "seamless-scroll-polyfill": "2.1.8",
     "styled-components": "3.4.9",
-    "tss-react": "4.0.0",
+    "tss-react": "4.4.4",
     "util": "0.12.1",
     "uuid": "8.3.2",
     "wasm-check": "2.0.1",

react/features/base/buttons/CopyButton.web.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-bind */
-import { Theme } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -8,7 +7,7 @@ import { IconCheck, IconCopy } from '../icons/svg';
 import { withPixelLineHeight } from '../styles/functions.web';
 import { copyText } from '../util/copyText.web';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         copyButton: {
             ...withPixelLineHeight(theme.typography.bodyShortBold),

react/features/base/components/participants-pane-list/ListItem.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -76,7 +75,7 @@ interface IProps {
 
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             alignItems: 'center',

react/features/base/label/components/web/Label.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -45,7 +44,7 @@ interface IProps {
 
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         label: {
             ...withPixelLineHeight(theme.typography.labelRegular),

react/features/base/premeeting/components/web/ActionButton.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactNode, useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -80,7 +79,7 @@ interface IProps {
     type: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         actionButton: {
             ...withPixelLineHeight(theme.typography.bodyLongBold),

react/features/base/premeeting/components/web/ConnectionStatus.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -25,7 +24,7 @@ interface IProps extends WithTranslation {
     connectionType?: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         connectionStatus: {
             borderRadius: '6px',

react/features/base/premeeting/components/web/PreMeetingScreen.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -85,7 +84,7 @@ interface IProps {
     videoTrack?: Object;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         subtitle: {
             ...withPixelLineHeight(theme.typography.heading5),

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -47,7 +46,7 @@ interface IProps extends IButtonProps {
     testId?: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         button: {
             backgroundColor: theme.palette.action01,

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -40,7 +39,7 @@ interface ICheckboxProps {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         formControl: {
             ...withPixelLineHeight(theme.typography.bodyLongRegular),

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -12,7 +11,7 @@ interface IProps {
     onClick: () => void;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         button: {
             padding: '2px',

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -104,7 +103,7 @@ interface IProps {
 
 const MAX_HEIGHT = 400;
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         contextMenu: {
             backgroundColor: theme.palette.ui01,

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -71,7 +70,7 @@ export interface IProps {
     textClassName?: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         contextMenuItem: {
             alignItems: 'center',

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -18,7 +17,7 @@ interface IProps {
     children?: ReactNode;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         contextMenuItemGroup: {
             '&:not(:empty)': {

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback, useContext, useEffect } from 'react';
 import FocusLock from 'react-focus-lock';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +14,7 @@ import ClickableIcon from './ClickableIcon';
 import { DialogTransitionContext } from './DialogTransition';
 
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             width: '100%',

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { makeStyles } from 'tss-react/mui';
@@ -26,7 +25,7 @@ interface IProps extends IInputProps {
     type?: 'text' | 'email' | 'number' | 'password';
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         inputContainer: {
             display: 'flex',

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ChangeEvent } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -53,7 +52,7 @@ interface ISelectProps {
     value: number | string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             display: 'flex',

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -15,7 +14,7 @@ interface IProps extends ISwitchProps {
     id?: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             position: 'relative',

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -18,7 +17,7 @@ interface ITabProps {
     }>;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             display: 'flex'

react/features/chat/components/web/NewMessagesButton.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -17,7 +16,7 @@ export interface INewMessagesButtonProps extends WithTranslation {
     onGoToFirstUnreadMessage: () => void;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             position: 'absolute',

react/features/conference/components/web/RaisedHandsCountLabel.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -12,7 +11,7 @@ import Label from '../../../base/label/components/web/Label';
 import { Tooltip } from '../../../base/tooltip';
 import { open as openParticipantsPane } from '../../../participants-pane/actions';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         label: {
             backgroundColor: theme.palette.warning02,

react/features/display-name/components/web/DisplayName.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -50,7 +49,7 @@ interface IProps {
     thumbnailType: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         displayName: {
             ...withPixelLineHeight(theme.typography.labelBold),

react/features/display-name/components/web/DisplayNameBadge.tsx

@@ -1,8 +1,7 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     const { text01 } = theme.palette;
 
     return {

react/features/display-name/components/web/StageParticipantNameLabel.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
 
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -22,7 +21,7 @@ import { isLayoutTileView } from '../../../video-layout';
 
 import DisplayNameBadge from './DisplayNameBadge';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         badgeContainer: {
             ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),

react/features/filmstrip/components/web/RaisedHandIndicator.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -31,7 +30,7 @@ interface IProps {
     tooltipPosition: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         raisedHandIndicator: {
             backgroundColor: theme.palette.warning02,

react/features/gifs/components/web/GifsMenu.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable lines-around-comment */
 import { GiphyFetch, TrendingOptions } from '@giphy/js-fetch-api';
 import { Grid } from '@giphy/react-components';
-import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { batch, useDispatch, useSelector } from 'react-redux';
@@ -29,7 +28,7 @@ import {
 
 const OVERFLOW_DRAWER_PADDING = 16;
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         gifsMenu: {
             width: '100%',

react/features/invite/components/add-people-dialog/web/CopyMeetingLinkSection.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -15,7 +14,7 @@ interface IProps {
     url: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         label: {
             display: 'block',

react/features/invite/components/add-people-dialog/web/DialInLimit.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -7,7 +6,7 @@ import { translate } from '../../../../base/i18n/functions';
 import { withPixelLineHeight } from '../../../../base/styles/functions.web';
 import { UPGRADE_OPTIONS_LINK, UPGRADE_OPTIONS_TEXT } from '../../../constants';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         limitContainer: {
             backgroundColor: theme.palette.warning01,

react/features/invite/components/add-people-dialog/web/DialInSection.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -21,7 +20,7 @@ interface IProps {
     phoneNumber: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             '& .info-label': {

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -35,7 +34,7 @@ interface IProps {
     inviteTextiOS: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             marginTop: theme.spacing(4)

react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -25,7 +24,7 @@ interface IProps {
  *
  * @returns {Object}
  */
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         list: {
             listStyleType: 'none',

react/features/large-video/components/ScreenSharePlaceholder.web.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { useStore } from 'react-redux';
@@ -9,7 +8,7 @@ import { translate } from '../../base/i18n/functions';
 // @ts-ignore
 import { setSeeWhatIsBeingShared } from '../actions.web';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         overlayContainer: {
             width: '100%',

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

@@ -1,6 +1,6 @@
 import { FlagGroupContext } from '@atlaskit/flag/flag-group';
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import { Theme } from '@mui/material';
+import { Theme } from '@mui/material/styles';
 import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';

react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactElement, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -80,7 +79,7 @@ interface IProps {
     toggleParticipantMenu: Function;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             boxShadow: 'none'

react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -20,7 +19,7 @@ interface IProps {
     };
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         button: {
             marginRight: theme.spacing(2)

react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -49,7 +48,7 @@ interface IProps {
     onSelect: (force?: any) => void;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         text: {
             color: theme.palette.text02,

react/features/participants-pane/components/web/FooterContextMenu.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -39,7 +38,7 @@ import { SETTINGS_TABS } from '../../../settings/constants';
 // @ts-ignore
 import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         contextMenu: {
             bottom: 'auto',

react/features/participants-pane/components/web/LobbyParticipantItem.tsx

@@ -1,6 +1,5 @@
 // eslint-disable-next-line lines-around-comment
 
-import { Theme } from '@mui/material';
 import React, { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -39,7 +38,7 @@ interface IProps {
     participant: IParticipant;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         button: {
             marginRight: theme.spacing(2)

react/features/participants-pane/components/web/LobbyParticipants.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -22,7 +21,7 @@ import { useLobbyActions, useParticipantDrawer } from '../../hooks';
 // @ts-ignore
 import LobbyParticipantItems from './LobbyParticipantItems';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         drawerActions: {
             listStyleType: 'none',

react/features/participants-pane/components/web/MeetingParticipants.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
 
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,7 +29,7 @@ import MeetingParticipantContextMenu from './MeetingParticipantContextMenu';
 // @ts-ignore
 import MeetingParticipantItems from './MeetingParticipantItems';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         heading: {
             color: theme.palette.text02,

react/features/participants-pane/components/web/ParticipantItem.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactElement, useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -97,7 +96,7 @@ interface IProps extends WithTranslation {
     youText?: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         nameContainer: {
             display: 'flex',

react/features/participants-pane/components/web/ParticipantQuickAction.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -46,7 +45,7 @@ interface IProps {
     participantName: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         button: {
             marginRight: theme.spacing(2)

react/features/participants-pane/components/web/ParticipantsPane.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -32,7 +31,7 @@ import LobbyParticipants from './LobbyParticipants';
 import MeetingParticipants from './MeetingParticipants';
 
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             boxSizing: 'border-box' as const,

react/features/participants-pane/components/web/RaisedHandIndicator.tsx

@@ -1,11 +1,10 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../base/icons/components/Icon';
 import { IconRaiseHand } from '../../../base/icons/svg';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         indicator: {
             backgroundColor: theme.palette.warning02,

react/features/polls/components/web/PollAnswer.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -9,7 +8,7 @@ import { BUTTON_TYPES } from '../../../base/ui/constants.web';
 import { isSubmitAnswerDisabled } from '../../functions';
 import AbstractPollAnswer, { AbstractProps } from '../AbstractPollAnswer';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         buttonMargin: {
             marginRight: theme.spacing(2)

react/features/polls/components/web/PollCreate.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -15,7 +14,7 @@ import AbstractPollCreate from '../AbstractPollCreate';
 // @ts-ignore
 import type { AbstractProps } from '../AbstractPollCreate';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         buttonMargin: {
             marginRight: theme.spacing(2)

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -33,7 +32,7 @@ interface IProps {
 }
 
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         prejoinPreviewDropdownBtn: {
             alignItems: 'center',

react/features/prejoin/components/web/dialogs/CallingDialog.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
 
-import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -36,7 +35,7 @@ interface IProps extends WithTranslation {
     status: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         callingDialog: {
             padding: theme.spacing(3),

react/features/prejoin/components/web/dialogs/DialInDialog.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
 
-import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -47,7 +46,7 @@ interface IProps extends WithTranslation {
     passCode: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         dialInDialog: {
             textAlign: 'center',

react/features/prejoin/components/web/dialogs/DialOutDialog.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
 
-import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -32,7 +31,7 @@ interface IProps extends WithTranslation {
     onTextButtonClick: Function;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         dialOutDialog: {
             padding: theme.spacing(3)

react/features/prejoin/components/web/preview/DeviceStatus.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -27,7 +26,7 @@ export interface IProps extends WithTranslation {
     deviceStatusType?: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         deviceStatus: {
             alignItems: 'center',

react/features/salesforce/components/web/RecordItem.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -31,7 +30,7 @@ interface IProps {
     type: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         recordItem: {
             display: 'flex',

react/features/salesforce/components/web/SalesforceLinkDialog.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
 import Spinner from '@atlaskit/spinner';
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -17,7 +16,7 @@ import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
 
 import { RecordItem } from './RecordItem';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         container: {
             minHeight: '450px',

react/features/speaker-stats/components/web/SpeakerStats.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -18,7 +17,7 @@ import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
 import SpeakerStatsSearch from './SpeakerStatsSearch';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         speakerStats: {
             '& .row': {

react/features/speaker-stats/components/web/SpeakerStatsLabels.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -9,7 +8,7 @@ import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { Tooltip } from '../../../base/tooltip';
 import { FACE_EXPRESSIONS_EMOJIS } from '../../../face-landmarks/constants';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         labels: {
             padding: '22px 0 7px 0',

react/features/speaker-stats/components/web/SpeakerStatsList.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -11,7 +10,7 @@ import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
 // @ts-ignore
 import SpeakerStatsItem from './SpeakerStatsItem';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         list: {
             marginTop: theme.spacing(3),

react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -11,7 +10,7 @@ import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { MOBILE_BREAKPOINT } from '../../constants';
 import { isSpeakerStatsSearchDisabled } from '../../functions';
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         speakerStatsSearchContainer: {
             position: 'relative'

react/features/subtitles/components/LanguageListItem.web.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -25,7 +24,7 @@ interface ILanguageListItemProps extends WithTranslation {
     selected?: boolean;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         itemContainer: {
             display: 'flex',

react/features/subtitles/components/LanguageSelectorDialog.web.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import { Theme } from '@mui/material';
 import i18next from 'i18next';
 import React, { useCallback, useEffect, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -27,7 +26,7 @@ interface ILanguageSelectorDialogProps extends WithTranslation {
     _translationLanguagesHead: Array<string>;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         paragraphWrapper: {
             fontSize: 14,

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

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { ReactElement, useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -28,7 +27,7 @@ interface IProps {
     onClose: Function;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         drawer: {
             backgroundColor: theme.palette.ui01,

react/features/video-menu/components/web/ParticipantContextMenu.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
 
-import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -106,7 +105,7 @@ interface IProps {
     thumbnailMenu?: boolean;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         text: {
             color: theme.palette.text02,

react/features/video-quality/components/Slider.web.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -35,7 +34,7 @@ interface IProps {
     value: number;
 }
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     // keep the same height for all elements:
     // input, input track & fake track(div)
     const height = 6;

react/features/virtual-background/components/UploadImageButton.tsx

@@ -1,4 +1,3 @@
-import { Theme } from '@mui/material';
 import React, { useCallback, useRef } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -39,8 +38,7 @@ interface IProps extends WithTranslation {
     storedImages: Array<Image>;
 }
 
-// @ts-ignore
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         addBackground: {
             marginRight: theme.spacing(2)
@@ -50,7 +48,7 @@ const useStyles = makeStyles()((theme: Theme) => {
         },
         label: {
             fontSize: '14px',
-            fontWeight: '600',
+            fontWeight: 600,
             lineHeight: '20px',
             marginTop: theme.spacing(3),
             marginBottom: theme.spacing(2),

react/features/virtual-background/components/VirtualBackgroundDialog.tsx

@@ -4,7 +4,6 @@ import Spinner from '@atlaskit/spinner';
 import Bourne from '@hapi/bourne';
 // @ts-ignore
 import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
-import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -112,7 +111,7 @@ function _mapStateToProps(state: IReduxState): Object {
 
 const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackground));
 
-const useStyles = makeStyles()((theme: Theme) => {
+const useStyles = makeStyles()(theme => {
     return {
         dialogContainer: {
             width: 'auto'