haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(dep) Upgrade MUI (#12089)

This commit is contained in:
Robert Pintilii 2022-09-13 10:36:00 +03:00 committed by GitHub
parent 3ef3233242
commit 139884fbe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
93 changed files with 2301 additions and 1296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/ci.yml vendored
View File

@ -21,5 +21,5 @@ jobs:
- run: npm run lint
- run: for file in lang/*.json; do npx --yes jsonlint -q $file || exit 1; done
- env:
NODE_OPTIONS: '--max-old-space-size=4096'
NODE_OPTIONS: '--max-old-space-size=8192'
run: make

1816
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -28,6 +28,8 @@
"@atlaskit/tabs": "12.1.2",
"@atlaskit/theme": "11.0.2",
"@atlaskit/tooltip": "17.1.2",
"@emotion/react": "11.10.0",
"@emotion/styled": "11.10.0",
"@giphy/js-fetch-api": "4.1.2",
"@giphy/react-components": "5.6.0",
"@giphy/react-native-sdk": "1.7.0",
@ -36,9 +38,10 @@
"@jitsi/logger": "2.0.0",
"@jitsi/rnnoise-wasm": "0.1.0",
"@jitsi/rtcstats": "9.3.0",
"@material-ui/core": "4.11.3",
"@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",
"@react-native-async-storage/async-storage": "1.15.14",
"@react-native-community/clipboard": "1.5.1",
"@react-native-community/netinfo": "7.1.7",
@ -127,6 +130,7 @@
"resemblejs": "4.0.0",
"seamless-scroll-polyfill": "2.1.8",
"styled-components": "3.4.9",
"tss-react": "4.0.0",
"util": "0.12.1",
"uuid": "8.3.2",
"wasm-check": "2.0.1",

4
react/features/app/types.ts
View File

@ -1,3 +1,5 @@
import { AnyAction, Dispatch } from 'redux';
import { IAnalyticsState } from '../analytics/reducer';
import { IAuthenticationState } from '../authentication/reducer';
import { IAVModerationState } from '../av-moderation/reducer';
@ -73,7 +75,7 @@ import { IVideoSipGW } from '../videosipgw/reducer';
import { IVirtualBackground } from '../virtual-background/reducer';
export interface IStore {
dispatch: Function;
dispatch: Dispatch<AnyAction>;
getState: () => IState;
}

9
react/features/base/avatar/components/web/StatelessAvatar.tsx
View File

@ -1,4 +1,4 @@
import { withStyles } from '@material-ui/core/styles';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React from 'react';
@ -56,8 +56,8 @@ const styles = () => {
borderRadius: '50%',
color: 'rgba(255, 255, 255, 1)',
fontWeight: '100',
objectFit: 'cover',
textAlign: 'center',
objectFit: 'cover' as const,
textAlign: 'center' as const,
'&.avatar-small': {
height: '28px !important',
@ -80,7 +80,7 @@ const styles = () => {
},
badge: {
position: 'relative',
position: 'relative' as const,
'&.avatar-badge:after': {
borderRadius: '50%',
@ -262,5 +262,4 @@ class StatelessAvatar extends AbstractStatelessAvatar<Props> {
}
}
// @ts-ignore
export default withStyles(styles)(StatelessAvatar);

7
react/features/base/buttons/CopyButton.tsx
View File

@ -1,12 +1,12 @@
/* eslint-disable react/jsx-no-bind */
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import Icon from '../icons/components/Icon';
import { IconCheck, IconCopy } from '../icons/svg';
import { withPixelLineHeight } from '../styles/functions.web';
import { Theme } from '../ui/types';
import { copyText } from '../util/helpers';
const styles = (theme: Theme) => {
@ -41,7 +41,7 @@ const styles = (theme: Theme) => {
content: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
whiteSpace: 'nowrap' as const,
maxWidth: 292,
marginRight: theme.spacing(3),
@ -214,5 +214,4 @@ CopyButton.defaultProps = {
className: ''
};
// @ts-ignore
export default withStyles(styles)(CopyButton);

23
react/features/base/components/context-menu/ContextMenu.tsx
View File

@ -1,8 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
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';
// @ts-ignore
import { getComputedOuterHeight } from '../../../participants-pane/functions';
@ -10,6 +11,7 @@ import { getComputedOuterHeight } from '../../../participants-pane/functions';
import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
// @ts-ignore
import { showOverflowDrawer } from '../../../toolbox/functions.web';
import { withPixelLineHeight } from '../../styles/functions.web';
import participantsPaneTheme from '../themes/participantsPaneTheme.json';
type Props = {
@ -82,15 +84,14 @@ type Props = {
const MAX_HEIGHT = 400;
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
contextMenu: {
backgroundColor: theme.palette.ui02,
borderRadius: `${theme.shape.borderRadius / 2}px`,
borderRadius: `${Number(theme.shape.borderRadius) / 2}px`,
boxShadow: '0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25)',
color: theme.palette.text01,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
...withPixelLineHeight(theme.typography.bodyShortRegular),
marginTop: `${(participantsPaneTheme.panePadding * 2) + theme.typography.bodyShortRegular.fontSize}px`,
position: 'absolute',
right: `${participantsPaneTheme.panePadding}px`,
@ -108,8 +109,7 @@ const useStyles = makeStyles((theme: any) => {
drawer: {
'& > div': {
...theme.typography.bodyShortRegularLarge,
lineHeight: `${theme.typography.bodyShortRegularLarge.lineHeight}px`,
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
'& svg': {
fill: theme.palette.icon01
@ -140,7 +140,7 @@ const ContextMenu = ({
}: Props) => {
const [ isHidden, setIsHidden ] = useState(true);
const containerRef = useRef<HTMLDivElement | null>(null);
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const _overflowDrawer = useSelector(showOverflowDrawer);
useLayoutEffect(() => {
@ -195,7 +195,7 @@ const ContextMenu = ({
</JitsiPortal>
: <div
aria-label = { accessibilityLabel }
className = { clsx(participantsPaneTheme.ignoredChildClassName,
className = { cx(participantsPaneTheme.ignoredChildClassName,
styles.contextMenu,
isHidden && styles.contextMenuHidden,
className
@ -206,8 +206,7 @@ const ContextMenu = ({
onMouseLeave = { onMouseLeave }
ref = { containerRef }>
{children}
</div>
;
</div>;
};
export default ContextMenu;

12
react/features/base/components/context-menu/ContextMenuItem.tsx
View File

@ -1,7 +1,7 @@
import { makeStyles } from '@material-ui/styles';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React, { ReactNode } from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { showOverflowDrawer } from '../../../toolbox/functions.web';
@ -71,7 +71,7 @@ export type Props = {
textClassName?: string;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
contextMenuItem: {
alignItems: 'center',
@ -82,7 +82,7 @@ const useStyles = makeStyles((theme: any) => {
boxSizing: 'border-box',
'& > *:not(:last-child)': {
marginRight: `${theme.spacing(3)}px`
marginRight: theme.spacing(3)
},
'&:hover': {
@ -119,14 +119,14 @@ const ContextMenuItem = ({
testId,
text,
textClassName }: Props) => {
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const _overflowDrawer: boolean = useSelector(showOverflowDrawer);
return (
<div
aria-disabled = { disabled }
aria-label = { accessibilityLabel }
className = { clsx(styles.contextMenuItem,
className = { cx(styles.contextMenuItem,
_overflowDrawer && styles.contextMenuItemDrawer,
disabled && styles.contextMenuItemDisabled,
className

9
react/features/base/components/context-menu/ContextMenuItemGroup.tsx
View File

@ -1,5 +1,6 @@
import { makeStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React, { ReactNode } from 'react';
import { makeStyles } from 'tss-react/mui';
import ContextMenuItem, { Props as ItemProps } from './ContextMenuItem';
@ -17,11 +18,11 @@ type Props = {
children?: ReactNode;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
contextMenuItemGroup: {
'&:not(:empty)': {
padding: `${theme.spacing(2)}px 0`
padding: `${theme.spacing(2)} 0`
},
'& + &:not(:empty)': {
@ -35,7 +36,7 @@ const ContextMenuItemGroup = ({
actions,
children
}: Props) => {
const styles = useStyles();
const { classes: styles } = useStyles();
return (
<div className = { styles.contextMenuItemGroup }>

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

@ -1,9 +1,10 @@
import { makeStyles } from '@material-ui/styles';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React, { ReactNode } from 'react';
import { makeStyles } from 'tss-react/mui';
import { ACTION_TRIGGER } from '../../../participants-pane/constants';
import { isMobileBrowser } from '../../environment/utils';
import { withPixelLineHeight } from '../../styles/functions.web';
import participantsPaneTheme from '../themes/participantsPaneTheme.json';
type Props = {
@ -75,14 +76,13 @@ type Props = {
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
alignItems: 'center',
color: theme.palette.text01,
display: 'flex',
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
...withPixelLineHeight(theme.typography.bodyShortRegular),
margin: `0 -${participantsPaneTheme.panePadding}px`,
padding: `0 ${participantsPaneTheme.panePadding}px`,
position: 'relative',
@ -104,9 +104,8 @@ const useStyles = makeStyles((theme: any) => {
},
[`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
...theme.typography.bodyShortRegularLarge,
lineHeight: `${theme.typography.bodyShortRegularLarge.lineHeight}px`,
padding: `${theme.spacing(2)}px ${participantsPaneTheme.panePadding}px`
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
padding: `${theme.spacing(2)} ${participantsPaneTheme.panePadding}px`
}
},
@ -126,7 +125,7 @@ const useStyles = makeStyles((theme: any) => {
name: {
display: 'flex',
flex: 1,
marginRight: `${theme.spacing(2)}px`,
marginRight: theme.spacing(2),
overflow: 'hidden',
flexDirection: 'column',
justifyContent: 'flex-start'
@ -143,7 +142,7 @@ const useStyles = makeStyles((theme: any) => {
},
'& > *:not(:last-child)': {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
},
'& .jitsi-icon': {
@ -190,7 +189,7 @@ const ListItem = ({
textChildren,
trigger
}: Props) => {
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const _isMobile = isMobileBrowser();
let timeoutHandler: number;
@ -228,7 +227,7 @@ const ListItem = ({
return (
<div
className = { clsx('list-item-container',
className = { cx('list-item-container',
styles.container,
isHighlighted && styles.highlighted,
className
@ -253,7 +252,7 @@ const ListItem = ({
</div>
{indicators && (
<div
className = { clsx('indicators',
className = { cx('indicators',
styles.indicators,
(isHighlighted || trigger === ACTION_TRIGGER.PERMANENT) && styles.indicatorsHidden
) }>
@ -262,7 +261,7 @@ const ListItem = ({
)}
{!hideActions && (
<div
className = { clsx('actions',
className = { cx('actions',
styles.actionsContainer,
trigger === ACTION_TRIGGER.PERMANENT && styles.actionsPermanent,
isHighlighted && styles.actionsVisible

7
react/features/base/dialog/components/web/ModalHeader.tsx
View File

@ -9,7 +9,8 @@ import {
TitleText
// @ts-ignore
} from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
import { withStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React from 'react';
import { WithTranslation } from 'react-i18next';
@ -52,14 +53,14 @@ interface Props extends WithTranslation {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
closeButton: {
borderRadius: theme.shape.borderRadius,
cursor: 'pointer',
padding: 13,
[theme.breakpoints.down('480')]: {
[theme.breakpoints.down(480)]: {
background: theme.palette.action02
},

7
react/features/base/dialog/components/web/StatelessDialog.tsx
View File

@ -1,6 +1,7 @@
/* eslint-disable lines-around-comment */
import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
import { withStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React, { Component, ReactElement } from 'react';
import { WithTranslation } from 'react-i18next';
@ -107,7 +108,7 @@ interface Props extends DialogProps, WithTranslation {
* @param {Object} theme - The theme.
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
footer: {
boxShadow: 'none'
@ -117,7 +118,7 @@ const styles = (theme: any) => {
display: 'flex',
'& > button:first-child': {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
}
}
};

8
react/features/base/label/components/web/Label.tsx
View File

@ -1,4 +1,5 @@
import { withStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React from 'react';
@ -51,14 +52,13 @@ type Props = AbstractProps & {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
label: {
...withPixelLineHeight(theme.typography.labelRegular),
alignItems: 'center',
background: theme.palette.ui04,
borderRadius: theme.shape.borderRadius / 2,
borderRadius: Number(theme.shape.borderRadius) / 2,
color: theme.palette.text01,
display: 'flex',
height: 28,

14
react/features/base/premeeting/components/web/ActionButton.tsx
View File

@ -1,4 +1,5 @@
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { ReactNode, useCallback } from 'react';
@ -92,7 +93,7 @@ type Props = {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
actionButton: {
...withPixelLineHeight(theme.typography.bodyLongBold),
@ -103,7 +104,7 @@ const styles = (theme: any) => {
display: 'inline-block',
marginBottom: '16px',
padding: '7px 16px',
position: 'relative',
position: 'relative' as const,
textAlign: 'center',
width: '100%',
border: 0,
@ -147,19 +148,19 @@ const styles = (theme: any) => {
},
[theme.breakpoints.down('400')]: {
[theme.breakpoints.down(400)]: {
fontSize: 16,
marginBottom: 8,
padding: '11px 16px'
}
},
options: {
borderRadius: theme.shape.borderRadius / 2,
borderRadius: Number(theme.shape.borderRadius) / 2,
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
position: 'absolute',
position: 'absolute' as const,
right: 0,
top: 0,
width: 36,
@ -253,5 +254,4 @@ function ActionButton({
);
}
// @ts-ignore
export default withStyles(styles)(ActionButton);

10
react/features/base/premeeting/components/web/ConnectionStatus.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback, useState } from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../../app/types';
import { translate } from '../../../i18n/functions';
@ -26,7 +28,7 @@ interface Props extends WithTranslation {
connectionType: string;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
connectionStatus: {
borderRadius: '6px',
@ -37,7 +39,7 @@ const useStyles = makeStyles((theme: any) => {
position: 'absolute',
width: '100%',
[theme.breakpoints.down('400')]: {
[theme.breakpoints.down(400)]: {
margin: 0,
width: '100%'
},
@ -150,7 +152,7 @@ const CONNECTION_TYPE_MAP: {
* @returns {ReactElement}
*/
function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
const classes = useStyles();
const { classes } = useStyles();
const [ showDetails, toggleDetails ] = useState(false);
const arrowClassName = showDetails

2
react/features/base/premeeting/components/web/PreMeetingScreen.js
View File

@ -1,6 +1,6 @@
// @flow
import { withStyles } from '@material-ui/styles';
import { withStyles } from '@mui/styles';
import React, { PureComponent } from 'react';
import { connect } from '../../../../base/redux';

6
react/features/base/react/components/web/BaseIndicator.tsx
View File

@ -1,6 +1,6 @@
import { makeStyles } from '@material-ui/core';
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../i18n/functions';
import Icon from '../../../icons/components/Icon';
@ -61,7 +61,7 @@ interface Props extends WithTranslation {
tooltipPosition: string;
}
const useStyles = makeStyles(() => {
const useStyles = makeStyles()(() => {
return {
indicator: {
width: '20px',
@ -90,7 +90,7 @@ const BaseIndicator = ({
tooltipKey,
tooltipPosition = 'top'
}: Props) => {
const styles = useStyles();
const { classes: styles } = useStyles();
const style: any = {};
if (iconSize) {

2
react/features/base/styles/functions.web.ts
View File

@ -32,7 +32,7 @@ export function getFixedPlatformStyle(style: StyleType): StyleType {
* @param {Object} base - The base object containing the `lineHeight` property.
* @returns {Object}
*/
export function withPixelLineHeight(base: any): Object {
export function withPixelLineHeight(base: any) {
return {
...base,
lineHeight: `${base.lineHeight}px`

35
react/features/base/ui/components/GlobalStyles.ts
View File

@ -1,35 +0,0 @@
import { createStyles, makeStyles } from '@material-ui/core';
import { commonStyles, getGlobalStyles } from '../constants';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { formatCommonClasses } from '../functions';
/**
* Creates all the global styles.
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
const useStyles = makeStyles((theme: any) =>
createStyles({
'@global': {
...formatCommonClasses(commonStyles(theme)),
...getGlobalStyles(theme)
}
})
);
/**
* A component generating all the global styles.
*
* @returns {void}
*/
function GlobalStyles() {
useStyles();
return null;
}
export default GlobalStyles;

22
react/features/base/ui/components/GlobalStyles.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import { GlobalStyles as MUIGlobalStyles } from 'tss-react';
import { useStyles } from 'tss-react/mui';
import { commonStyles, getGlobalStyles } from '../constants';
/**
* A component generating all the global styles.
*
* @returns {void}
*/
function GlobalStyles() {
const { theme } = useStyles();
return (<MUIGlobalStyles
styles = {{
...commonStyles(theme),
...getGlobalStyles(theme)
}} />);
}
export default GlobalStyles;

8
react/features/base/ui/components/JitsiThemeProvider.web.tsx
View File

@ -1,4 +1,4 @@
import { ThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import * as React from 'react';
import { connect } from 'react-redux';
@ -26,7 +26,11 @@ type Props = {
* @returns {React.ReactNode}
*/
function JitsiThemeProvider(props: Props) {
return <ThemeProvider theme = { props._theme }>{ props.children }</ThemeProvider>;
return (
<StyledEngineProvider injectFirst = { true }>
<ThemeProvider theme = { props._theme }>{ props.children }</ThemeProvider>
</StyledEngineProvider>
);
}
/**

19
react/features/base/ui/components/web/Button.tsx
View File

@ -1,12 +1,11 @@
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { BUTTON_TYPES } from '../../constants';
import { Theme } from '../../types';
import { ButtonProps } from '../types';
interface IButtonProps extends ButtonProps {
@ -48,7 +47,7 @@ interface IButtonProps extends ButtonProps {
testId?: string;
}
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
button: {
backgroundColor: theme.palette.action01,
@ -76,7 +75,7 @@ const useStyles = makeStyles((theme: Theme) => {
boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`
},
'& svg': {
'& div > svg': {
fill: theme.palette.icon01
}
},
@ -95,7 +94,7 @@ const useStyles = makeStyles((theme: Theme) => {
backgroundColor: theme.palette.action02Active
},
'& svg': {
'& div > svg': {
fill: theme.palette.icon04
}
},
@ -138,7 +137,7 @@ const useStyles = makeStyles((theme: Theme) => {
color: theme.palette.text03
},
'& svg': {
'& div > svg': {
fill: theme.palette.icon03
}
},
@ -148,7 +147,7 @@ const useStyles = makeStyles((theme: Theme) => {
},
textWithIcon: {
marginLeft: `${theme.spacing(2)}px`
marginLeft: theme.spacing(2)
},
small: {
@ -192,13 +191,13 @@ const Button = React.forwardRef<any, any>(({
testId,
type = BUTTON_TYPES.PRIMARY
}: IButtonProps, ref) => {
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const { t } = useTranslation();
return (
<button
aria-label = { accessibilityLabel }
className = { clsx(styles.button, styles[type],
className = { cx(styles.button, styles[type],
disabled && styles.disabled,
icon && !(labelKey || label) && `${styles.iconButton} iconButton`,
styles[size], fullWidth && styles.fullWidth, className) }

43
react/features/base/ui/components/web/Checkbox.tsx
View File

@ -1,12 +1,11 @@
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { IconCheckMark } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import BaseTheme from '../BaseTheme.web';
interface CheckboxProps {
@ -41,7 +40,7 @@ interface CheckboxProps {
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
formControl: {
...withPixelLineHeight(theme.typography.bodyLongRegular),
@ -151,25 +150,27 @@ const Checkbox = ({
name,
onChange
}: CheckboxProps) => {
const styles = useStyles();
const { classes: styles, cx, theme } = useStyles();
const isMobile = isMobileBrowser();
return (<div className = { clsx(styles.formControl, isMobile && 'is-mobile', className) }>
<label className = { clsx(styles.activeArea, isMobile && 'is-mobile') }>
<input
checked = { checked }
disabled = { disabled }
name = { name }
onChange = { onChange }
type = 'checkbox' />
<Icon
className = 'checkmark'
color = { disabled ? BaseTheme.palette.icon03 : BaseTheme.palette.icon01 }
size = { 18 }
src = { IconCheckMark } />
</label>
<label>{label}</label>
</div>);
return (
<div className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
<label className = { cx(styles.activeArea, isMobile && 'is-mobile') }>
<input
checked = { checked }
disabled = { disabled }
name = { name }
onChange = { onChange }
type = 'checkbox' />
<Icon
className = 'checkmark'
color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
size = { 18 }
src = { IconCheckMark } />
</label>
<label>{label}</label>
</div>
);
};
export default Checkbox;

27
react/features/base/ui/components/web/ClickableIcon.tsx
View File

@ -1,10 +1,9 @@
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { Theme } from '../../types';
interface IProps {
accessibilityLabel: string;
@ -12,7 +11,7 @@ interface IProps {
onClick: () => void;
}
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
button: {
padding: '2px',
@ -37,17 +36,19 @@ const useStyles = makeStyles((theme: Theme) => {
});
const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => {
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const isMobile = isMobileBrowser();
return (<button
aria-label = { accessibilityLabel }
className = { clsx(styles.button, isMobile && 'is-mobile') }
onClick = { onClick }>
<Icon
size = { 24 }
src = { icon } />
</button>);
return (
<button
aria-label = { accessibilityLabel }
className = { cx(styles.button, isMobile && 'is-mobile') }
onClick = { onClick }>
<Icon
size = { 24 }
src = { icon } />
</button>
);
};
export default ClickableIcon;

121
react/features/base/ui/components/web/Input.tsx
View File

@ -1,13 +1,12 @@
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { IconCloseCircle } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { Theme } from '../../../ui/types';
import { InputProps } from '../types';
interface IInputProps extends InputProps {
@ -26,7 +25,7 @@ interface IInputProps extends InputProps {
type?: 'text' | 'email' | 'number' | 'password';
}
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
inputContainer: {
display: 'flex',
@ -36,7 +35,7 @@ const useStyles = makeStyles((theme: Theme) => {
label: {
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
marginBottom: `${theme.spacing(2)}px`,
marginBottom: theme.spacing(2),
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
@ -113,7 +112,7 @@ const useStyles = makeStyles((theme: Theme) => {
},
bottomLabel: {
marginTop: `${theme.spacing(2)}px`,
marginTop: theme.spacing(2),
...withPixelLineHeight(theme.typography.labelRegular),
color: theme.palette.text02,
@ -151,7 +150,7 @@ const Input = React.forwardRef<any, IInputProps>(({
type = 'text',
value
}: IInputProps, ref) => {
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const isMobile = isMobileBrowser();
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
@ -159,61 +158,63 @@ const Input = React.forwardRef<any, IInputProps>(({
const clearInput = useCallback(() => onChange(''), []);
return (<div className = { clsx(styles.inputContainer, className) }>
{label && <span className = { clsx(styles.label, isMobile && 'is-mobile') }>{label}</span>}
<div className = { styles.fieldContainer }>
{icon && <Icon
{ ...(iconClick ? { tabIndex: 0 } : {}) }
className = { clsx(styles.icon, iconClick && styles.iconClickable) }
onClick = { iconClick }
size = { 20 }
src = { icon } />}
{textarea ? (
<TextareaAutosize
aria-label = { accessibilityLabel }
autoFocus = { autoFocus }
className = { clsx(styles.input, isMobile && 'is-mobile',
error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
disabled = { disabled }
{ ...(id ? { id } : {}) }
maxRows = { maxRows }
minRows = { minRows }
name = { name }
onChange = { handleChange }
onKeyPress = { onKeyPress }
placeholder = { placeholder }
ref = { ref }
value = { value } />
) : (
<input
aria-label = { accessibilityLabel }
autoFocus = { autoFocus }
className = { clsx(styles.input, isMobile && 'is-mobile',
error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
disabled = { disabled }
{ ...(id ? { id } : {}) }
maxLength = { maxLength }
name = { name }
onChange = { handleChange }
onKeyPress = { onKeyPress }
placeholder = { placeholder }
ref = { ref }
type = { type }
value = { value } />
)}
{clearable && !disabled && value !== '' && <button className = { styles.clearButton }>
<Icon
onClick = { clearInput }
return (
<div className = { cx(styles.inputContainer, className) }>
{label && <span className = { cx(styles.label, isMobile && 'is-mobile') }>{label}</span>}
<div className = { styles.fieldContainer }>
{icon && <Icon
{ ...(iconClick ? { tabIndex: 0 } : {}) }
className = { cx(styles.icon, iconClick && styles.iconClickable) }
onClick = { iconClick }
size = { 20 }
src = { IconCloseCircle } />
</button>}
src = { icon } />}
{textarea ? (
<TextareaAutosize
aria-label = { accessibilityLabel }
autoFocus = { autoFocus }
className = { cx(styles.input, isMobile && 'is-mobile',
error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
disabled = { disabled }
{ ...(id ? { id } : {}) }
maxRows = { maxRows }
minRows = { minRows }
name = { name }
onChange = { handleChange }
onKeyPress = { onKeyPress }
placeholder = { placeholder }
ref = { ref }
value = { value } />
) : (
<input
aria-label = { accessibilityLabel }
autoFocus = { autoFocus }
className = { cx(styles.input, isMobile && 'is-mobile',
error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
disabled = { disabled }
{ ...(id ? { id } : {}) }
maxLength = { maxLength }
name = { name }
onChange = { handleChange }
onKeyPress = { onKeyPress }
placeholder = { placeholder }
ref = { ref }
type = { type }
value = { value } />
)}
{clearable && !disabled && value !== '' && <button className = { styles.clearButton }>
<Icon
onClick = { clearInput }
size = { 20 }
src = { IconCloseCircle } />
</button>}
</div>
{bottomLabel && (
<span className = { cx(styles.bottomLabel, isMobile && 'is-mobile', error && 'error') }>
{bottomLabel}
</span>
)}
</div>
{bottomLabel && (
<span className = { clsx(styles.bottomLabel, isMobile && 'is-mobile', error && 'error') }>
{bottomLabel}
</span>
)}
</div>);
);
});
export default Input;

34
react/features/base/ui/components/web/Switch.tsx
View File

@ -1,6 +1,6 @@
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import { SwitchProps } from '../types';
@ -13,7 +13,7 @@ interface Props extends SwitchProps {
id?: string;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
position: 'relative',
@ -79,25 +79,27 @@ const useStyles = makeStyles((theme: any) => {
});
const Switch = ({ id, checked, disabled, onChange }: Props) => {
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const isMobile = isMobileBrowser();
const change = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.checked);
}, []);
return (<label
className = { clsx('toggle-container', styles.container, checked && styles.containerOn,
isMobile && 'is-mobile', disabled && 'disabled') }>
<input
type = 'checkbox'
{ ...(id ? { id } : {}) }
checked = { checked }
className = { styles.checkbox }
disabled = { disabled }
onChange = { change } />
<div className = { clsx('toggle', styles.toggle, checked && styles.toggleOn, isMobile && 'is-mobile') } />
</label>);
return (
<label
className = { cx('toggle-container', styles.container, checked && styles.containerOn,
isMobile && 'is-mobile', disabled && 'disabled') }>
<input
type = 'checkbox'
{ ...(id ? { id } : {}) }
checked = { checked }
className = { styles.checkbox }
disabled = { disabled }
onChange = { change } />
<div className = { cx('toggle', styles.toggle, checked && styles.toggleOn, isMobile && 'is-mobile') } />
</label>
);
};
export default Switch;

114
react/features/base/ui/constants.ts
View File

@ -1,4 +1,4 @@
import { Theme } from './types';
import { Theme } from '@mui/material';
/**
* The types of the buttons.
@ -19,24 +19,6 @@ export const BUTTON_MODES: {
CONTAINED: 'contained'
};
/**
* An object containing all the class names for common CSS.
* Add a new name here and the styles to {@code commonStyles} object.
*
*/
export const commonClassName = {
emptyList: 'empty-list',
muteDialog: 'mute-dialog',
overflowMenuItem: 'overflow-menu-item',
overflowMenuItemIcon: 'overflow-menu-item-icon',
participantAvatar: 'participant-avatar',
prejoinDialog: 'prejoin-dialog',
prejoinDialogButton: 'prejoin-dialog-btn',
toolboxIcon: 'toolbox-icon',
toolboxButton: 'toolbox-button',
toolboxContentItems: 'toolbox-content-items'
};
/**
* Returns an object containing the declaration of the common, reusable CSS classes.
*
@ -46,15 +28,15 @@ export const commonClassName = {
*/
export const commonStyles = (theme: Theme) => {
return {
// '.empty-list'
[commonClassName.emptyList]: {
'.empty-list': {
listStyleType: 'none',
margin: 0,
padding: 0
},
[commonClassName.muteDialog]: {
'.mute-dialog': {
'& .separator-line': {
margin: `${theme.spacing(4)}px 0 ${theme.spacing(4)}px -20px`,
margin: `${theme.spacing(4)} 0 ${theme.spacing(4)} -20px`,
padding: '0 20px',
width: '100%',
height: '1px',
@ -64,14 +46,15 @@ export const commonStyles = (theme: Theme) => {
'& .control-row': {
display: 'flex',
justifyContent: 'space-between',
marginTop: `${theme.spacing(3)}px`,
marginTop: theme.spacing(3),
'& label': {
fontSize: '14px'
}
}
},
[commonClassName.overflowMenuItem]: {
'.overflow-menu-item': {
alignItems: 'center',
color: theme.palette.text01,
cursor: 'pointer',
@ -81,7 +64,7 @@ export const commonStyles = (theme: Theme) => {
height: 40,
lineHeight: '24px',
padding: '8px 16px',
boxSizing: 'border-box',
boxSizing: 'border-box' as const,
'& > div': {
display: 'flex',
alignItems: 'center'
@ -113,7 +96,8 @@ export const commonStyles = (theme: Theme) => {
}
}
},
[commonClassName.overflowMenuItemIcon]: {
'.overflow-menu-item-icon': {
marginRight: '16px',
'& i': {
@ -138,10 +122,12 @@ export const commonStyles = (theme: Theme) => {
width: 20
}
},
[commonClassName.participantAvatar]: {
margin: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(2)}px 0`
'.participant-avatar': {
margin: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)} 0`
},
[commonClassName.prejoinDialog]: {
'.prejoin-dialog': {
background: '#1C2025',
boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.5)',
borderRadius: '5px',
@ -149,53 +135,53 @@ export const commonStyles = (theme: Theme) => {
height: '400px',
width: '375px',
[`${commonClassName.prejoinDialog}--small`]: {
'.prejoin-dialog--small': {
height: 300,
width: 400
},
[`${commonClassName.prejoinDialog}-label`]: {
'.prejoin-dialog-label': {
fontSize: '15px',
lineHeight: '24px'
},
[`${commonClassName.prejoinDialog}-label-num`]: {
'.prejoin-dialog-label-num': {
background: '#2b3b4b',
border: '1px solid #A4B8D1',
borderRadius: '50%',
color: '#fff',
display: 'inline-block',
height: '24px',
marginRight: `${theme.spacing(2)}px`,
marginRight: theme.spacing(2),
width: '24px'
},
[`${commonClassName.prejoinDialog}-container`]: {
'.prejoin-dialog-container': {
alignItems: 'center',
background: 'rgba(0,0,0,0.6)',
display: 'flex',
height: '100vh',
justifyContent: 'center',
left: 0,
position: 'absolute',
position: 'absolute' as const,
top: 0,
width: '100vw',
zIndex: 3
},
[`${commonClassName.prejoinDialog}-flag`]: {
'.prejoin-dialog-flag': {
display: 'inline-block',
marginRight: `${theme.spacing(2)}px}`,
marginRight: theme.spacing(2),
transform: 'scale(1.2)'
},
[`${commonClassName.prejoinDialog}-title`]: {
'.prejoin-dialog-title': {
display: 'inline-block',
fontSize: '24px',
lineHeight: '32px'
},
[`${commonClassName.prejoinDialog}-icon`]: {
'.prejoin-dialog-icon': {
cursor: 'pointer',
'& > svg': {
@ -203,15 +189,15 @@ export const commonStyles = (theme: Theme) => {
}
},
[commonClassName.prejoinDialogButton]: {
'.prejoin-dialog-btn': {
width: '309px'
},
[`${commonClassName.prejoinDialog}-dialin-container`]: {
textAlign: 'center'
'.prejoin-dialog-dialin-container': {
textAlign: 'center' as const
},
[`${commonClassName.prejoinDialog}-delimiter`]: {
'.prejoin-dialog-delimiter': {
background: '#5f6266',
border: '0',
height: '1px',
@ -220,37 +206,37 @@ export const commonStyles = (theme: Theme) => {
width: '100%'
},
[`${commonClassName.prejoinDialog}-delimiter-container`]: {
margin: `${theme.spacing(3)}px 0 ${theme.spacing(4)}px 0`,
position: 'relative'
'.prejoin-dialog-delimiter-container': {
margin: `${theme.spacing(3)} 0 ${theme.spacing(4)} 0`,
position: 'relative' as const
},
[`${commonClassName.prejoinDialog}-delimiter-txt-container`]: {
position: 'absolute',
textAlign: 'center',
'.prejoin-dialog-delimiter-txt-container': {
position: 'absolute' as const,
textAlign: 'center' as const,
top: '-8px',
width: '100%'
},
[`${commonClassName.prejoinDialog}-delimiter-txt`]: {
'.prejoin-dialog-delimiter-txt': {
background: '#1C2025',
color: '#5f6266',
fontSize: '11px',
textTransform: 'uppercase',
padding: `0 ${theme.spacing(2)}px`
textTransform: 'uppercase' as const,
padding: `0 ${theme.spacing(2)}`
}
},
[commonClassName.prejoinDialogButton]: {
[`&.primary, &${commonClassName.prejoinDialogButton}.text`]: {
'.prejoin-dialog-btn': {
'&.primary, &.prejoin-dialog-btn.text': {
width: '310px'
}
},
[commonClassName.toolboxIcon]: {
'.toolbox-icon': {
display: 'flex',
borderRadius: 3,
flexDirection: 'column',
flexDirection: 'column' as const,
fontSize: 24,
height: 48,
justifyContent: 'center',
@ -261,7 +247,7 @@ export const commonStyles = (theme: Theme) => {
background: theme.palette.ui04
}
},
[theme.breakpoints.down('320')]: {
[theme.breakpoints.down(320)]: {
height: 36,
width: 36
},
@ -279,20 +265,22 @@ export const commonStyles = (theme: Theme) => {
}
}
},
[commonClassName.toolboxButton]: {
'.toolbox-button': {
color: theme.palette.text01,
cursor: 'pointer',
display: 'inline-block',
lineHeight: '48px',
textAlign: 'center'
textAlign: 'center' as const
},
[commonClassName.toolboxContentItems]: {
'.toolbox-content-items': {
background: theme.palette.ui01,
borderRadius: 6,
margin: '0 auto',
padding: 6,
textAlign: 'center',
pointerEvents: 'all',
textAlign: 'center' as const,
pointerEvents: 'all' as const,
boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
'& > div': {

49
react/features/base/ui/functions.web.ts
View File

@ -1,8 +1,17 @@
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme, adaptV4Theme } from '@mui/material/styles';
import { Palette as Palette1, Typography } from '../ui/types';
import { Theme } from './types';
import { createColorTokens } from './utils';
declare module '@mui/material/styles' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface Palette extends Palette1 {}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface TypographyVariants extends Typography {}
}
interface ThemeProps {
breakpoints: Object;
colorMap: Object;
@ -19,41 +28,19 @@ interface ThemeProps {
* @param {Object} arg - The ui tokens.
* @returns {Object}
*/
export function createWebTheme({ font, colors, colorMap, shape, spacing, typography, breakpoints }: ThemeProps): Theme {
return createMuiTheme({
props: {
// disable ripple effect on buttons globally
MuiButtonBase: {
disableRipple: true
}
},
// use token spacing array
spacing
}, {
export function createWebTheme({ font, colors, colorMap, shape, spacing, typography, breakpoints }: ThemeProps) {
return createTheme(adaptV4Theme({
spacing,
palette: createColorTokens(colorMap, colors),
shape,
// @ts-ignore
typography: {
// @ts-ignore
font,
...typography
},
breakpoints
}) as unknown as Theme;
}
/**
* Formats the common styles object to be interpreted as proper CSS.
*
* @param {Object} stylesObj - The styles object.
* @returns {Object}
*/
export function formatCommonClasses(stylesObj: Object) {
const formatted: any = {};
for (const [ key, value ] of Object.entries(stylesObj)) {
formatted[`.${key}`] = value;
}
return formatted;
}));
}

153
react/features/base/ui/types.ts
View File

@ -5,85 +5,76 @@ interface TypographyType {
lineHeight: number;
}
export interface Theme {
breakpoints: {
down: (value: number | string) => string;
up: (value: number | string) => string;
};
palette: {
action01: string;
action01Active: string;
action01Hover: string;
action02: string;
action02Active: string;
action02Hover: string;
action03: string;
action03Active: string;
action03Hover: string;
actionDanger: string;
actionDangerActive: string;
actionDangerHover: string;
disabled01: string;
field01: string;
focus01: string;
icon01: string;
icon02: string;
icon03: string;
icon04: string;
iconError: string;
link01: string;
link01Active: string;
link01Hover: string;
success01: string;
success02: string;
support01: string;
support02: string;
support03: string;
support04: string;
support05: string;
support06: string;
support07: string;
support08: string;
support09: string;
text01: string;
text02: string;
text03: string;
text04: string;
textError: string;
ui01: string;
ui02: string;
ui03: string;
ui04: string;
ui05: string;
ui06: string;
ui07: string;
ui08: string;
ui09: string;
ui10: string;
uiBackground: string;
warning01: string;
warning02: string;
};
shape: {
borderRadius: number;
};
spacing: (index: number) => number;
typography: {
bodyLongBold: TypographyType;
bodyLongBoldLarge: TypographyType;
bodyLongRegular: TypographyType;
bodyLongRegularLarge: TypographyType;
bodyShortBold: TypographyType;
bodyShortBoldLarge: TypographyType;
bodyShortRegular: TypographyType;
bodyShortRegularLarge: TypographyType;
heading1: TypographyType;
heading2: TypographyType;
heading3: TypographyType;
heading4: TypographyType;
heading5: TypographyType;
heading6: TypographyType;
labelBold: TypographyType;
labelRegular: TypographyType;
};
export interface Palette {
action01: string;
action01Active: string;
action01Hover: string;
action02: string;
action02Active: string;
action02Hover: string;
action03: string;
action03Active: string;
action03Hover: string;
actionDanger: string;
actionDangerActive: string;
actionDangerHover: string;
disabled01: string;
field01: string;
focus01: string;
icon01: string;
icon02: string;
icon03: string;
icon04: string;
iconError: string;
link01: string;
link01Active: string;
link01Hover: string;
success01: string;
success02: string;
support01: string;
support02: string;
support03: string;
support04: string;
support05: string;
support06: string;
support07: string;
support08: string;
support09: string;
text01: string;
text02: string;
text03: string;
text04: string;
textError: string;
ui01: string;
ui02: string;
ui03: string;
ui04: string;
ui05: string;
ui06: string;
ui07: string;
ui08: string;
ui09: string;
ui10: string;
uiBackground: string;
warning01: string;
warning02: string;
}
export interface Typography {
bodyLongBold: TypographyType;
bodyLongBoldLarge: TypographyType;
bodyLongRegular: TypographyType;
bodyLongRegularLarge: TypographyType;
bodyShortBold: TypographyType;
bodyShortBoldLarge: TypographyType;
bodyShortRegular: TypographyType;
bodyShortRegularLarge: TypographyType;
heading1: TypographyType;
heading2: TypographyType;
heading3: TypographyType;
heading4: TypographyType;
heading5: TypographyType;
heading6: TypographyType;
labelBold: TypographyType;
labelRegular: TypographyType;
}

8
react/features/chat/components/web/GifMessage.tsx
View File

@ -1,5 +1,5 @@
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
type Props = {
@ -9,7 +9,7 @@ type Props = {
url: string;
};
const useStyles = makeStyles(() => {
const useStyles = makeStyles()(() => {
return {
container: {
display: 'flex',
@ -21,14 +21,14 @@ const useStyles = makeStyles(() => {
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
flexGrow: '1'
flexGrow: 1
}
}
};
});
const GifMessage = ({ url }: Props) => {
const styles = useStyles();
const { classes: styles } = useStyles();
return (<div className = { styles.container }>
<img

7
react/features/chat/components/web/NewMessagesButton.tsx
View File

@ -1,6 +1,7 @@
import { makeStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
@ -15,7 +16,7 @@ export interface INewMessagesButtonProps extends WithTranslation {
onGoToFirstUnreadMessage: () => void;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
position: 'absolute',
@ -70,7 +71,7 @@ const useStyles = makeStyles((theme: any) => {
* @returns {JSX.Element}
*/
function NewMessagesButton({ onGoToFirstUnreadMessage, t }: INewMessagesButtonProps): JSX.Element {
const styles = useStyles();
const { classes: styles } = useStyles();
return (
<div

9
react/features/chat/components/web/TouchmoveHack.tsx
View File

@ -1,6 +1,5 @@
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import React, { ReactElement, useEffect, useRef } from 'react';
import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../base/environment/utils';
@ -23,7 +22,7 @@ type Props = {
};
const useStyles = makeStyles(() => {
const useStyles = makeStyles()(() => {
return {
flex: {
display: 'flex',
@ -72,11 +71,11 @@ function TouchmoveHack({ children, isModal, flex }: Props) {
}
};
}, []);
const classes = useStyles();
const { classes, cx } = useStyles();
return (
<div
className = { clsx(classes.base, flex && classes.flex) }
className = { cx(classes.base, flex && classes.flex) }
ref = { touchMoveElementRef }>
{children}
</div>

11
react/features/conference/components/web/RaisedHandsCountLabel.tsx
View File

@ -1,19 +1,20 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
import { IconRaisedHand } from '../../../base/icons/svg';
import Label from '../../../base/label/components/web/Label';
// @ts-ignore
import { Tooltip } from '../../../base/tooltip';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
// @ts-ignore
import { open as openParticipantsPane } from '../../../participants-pane/actions';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
label: {
backgroundColor: theme.palette.warning02,
@ -24,7 +25,7 @@ const useStyles = makeStyles((theme: any) => {
});
const RaisedHandsCountLabel = () => {
const styles = useStyles();
const { classes: styles, theme } = useStyles();
const dispatch = useDispatch();
const raisedHandsCount = useSelector((state: IState) =>
(state['features/base/participants'].raisedHandsQueue || []).length);
@ -39,7 +40,7 @@ const RaisedHandsCountLabel = () => {
<Label
className = { styles.label }
icon = { IconRaisedHand }
iconColor = { BaseTheme.palette.uiBackground }
iconColor = { theme.palette.uiBackground }
id = 'raisedHandsCountLabel'
onClick = { onClick }
text = { `${raisedHandsCount}` } />

9
react/features/connection-indicator/components/web/ConnectionIndicator.tsx
View File

@ -1,5 +1,7 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React from 'react';
import { WithTranslation } from 'react-i18next';
@ -116,11 +118,10 @@ type Props = AbstractProps & WithTranslation & {
*/
audioSsrc: number;
/**
* An object containing the CSS classes.
*/
classes: Object;
classes: any;
/**
* The Redux dispatch function.
@ -153,7 +154,7 @@ type State = AbstractState & {
popoverVisible: boolean;
};
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
container: {
display: 'inline-block'

20
react/features/connection-stats/components/ConnectionStatsTable.tsx
View File

@ -1,4 +1,5 @@
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
@ -193,11 +194,11 @@ function onClick(event: React.MouseEvent) {
event.stopPropagation();
}
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
actions: {
margin: '10px auto',
textAlign: 'center'
textAlign: 'center' as const
},
connectionStatsTable: {
'&, & > table': {
@ -221,17 +222,17 @@ const styles = (theme: any) => {
}
},
contextMenu: {
position: 'relative',
position: 'relative' as const,
marginTop: 0,
right: 'auto',
padding: `${theme.spacing(2)}px ${theme.spacing(1)}px`,
marginLeft: `${theme.spacing(1)}px`,
marginRight: `${theme.spacing(1)}px`,
marginBottom: `${theme.spacing(1)}px`
padding: `${theme.spacing(2)} ${theme.spacing(1)}`,
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
marginBottom: theme.spacing(1)
},
download: {},
mobile: {
margin: `${theme.spacing(3)}px`
margin: theme.spacing(3)
},
status: {
fontWeight: 'bold'
@ -961,5 +962,4 @@ function getStringFromArray(array: string[]) {
return res;
}
// @ts-ignore
export default translate(withStyles(styles)(ConnectionStatsTable));

12
react/features/display-name/components/web/DisplayName.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { connect } from 'react-redux';
@ -13,6 +14,7 @@ import {
} from '../../../base/participants/functions';
// @ts-ignore
import { updateSettings } from '../../../base/settings';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
// @ts-ignore
import { Tooltip } from '../../../base/tooltip';
// @ts-ignore
@ -88,11 +90,10 @@ type State = {
isEditing: boolean;
};
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
displayName: {
...theme.typography.labelBold,
lineHeight: `${theme.typography.labelBold.lineHeight}px`,
...withPixelLineHeight(theme.typography.labelBold),
color: theme.palette.text01,
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -105,8 +106,7 @@ const styles = (theme: any) => {
background: 'none',
boxShadow: 'none',
padding: 0,
...theme.typography.labelBold,
lineHeight: `${theme.typography.labelBold.lineHeight}px`,
...withPixelLineHeight(theme.typography.labelBold),
color: theme.palette.text01
}
};

9
react/features/display-name/components/web/DisplayNameBadge.tsx
View File

@ -1,9 +1,8 @@
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { Theme } from '../../../base/ui/types';
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
const { text01 } = theme.palette;
return {
@ -27,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => {
* @returns {ReactElement}
*/
const DisplayNameBadge: React.FC<{ name: string; }> = ({ name }) => {
const classes = useStyles();
const { classes } = useStyles();
return (
<div className = { classes.badge }>

11
react/features/display-name/components/web/StageParticipantNameLabel.tsx
View File

@ -1,8 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
// @ts-ignore
@ -19,7 +20,7 @@ import { isLayoutTileView } from '../../../video-layout';
import DisplayNameBadge from './DisplayNameBadge';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
badgeContainer: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
@ -47,7 +48,7 @@ const useStyles = makeStyles((theme: any) => {
* @returns {ReactElement|null}
*/
const StageParticipantNameLabel = () => {
const classes = useStyles();
const { classes, cx } = useStyles();
const largeVideoParticipant: Participant = useSelector(getLargeVideoParticipant);
const selectedId = largeVideoParticipant?.id;
const nameToDisplay = useSelector((state: IState) => getParticipantDisplayName(state, selectedId));
@ -62,7 +63,7 @@ const StageParticipantNameLabel = () => {
if (showDisplayName && nameToDisplay && selectedId !== localId && !isTileView) {
return (
<div
className = { clsx(
className = { cx(
'stage-participant-label',
classes.badgeContainer,
toolboxVisible && classes.containerElevated

26
react/features/dynamic-branding/functions.web.ts
View File

@ -1,4 +1,5 @@
import { createMuiTheme } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { createTheme, adaptV4Theme } from '@mui/material/styles';
import { font, colors, colorMap, spacing, shape, typography, breakpoints } from '../base/ui/Tokens';
import { createColorTokens } from '../base/ui/utils';
@ -9,7 +10,7 @@ import { createColorTokens } from '../base/ui/utils';
* @param {Object} customTheme - The branded custom theme.
* @returns {Object} - The MUI theme.
*/
export function createMuiBrandingTheme(customTheme: any) {
export function createMuiBrandingTheme(customTheme: Theme) {
const {
palette: customPalette,
shape: customShape,
@ -45,28 +46,23 @@ export function createMuiBrandingTheme(customTheme: any) {
overwriteRecurrsive(newBreakpoints, customBreakpoints);
}
let newSpacing = [ ...spacing ];
let newSpacing: any = [ ...spacing ];
if (customSpacing?.length) {
newSpacing = customSpacing;
}
return createMuiTheme({
props: {
// disable ripple effect on buttons globally
MuiButtonBase: {
disableRipple: true
}
},
// use token spacing array
spacing: newSpacing
}, {
return createTheme(adaptV4Theme({
spacing: newSpacing,
palette: newPalette,
shape: newShape,
// @ts-ignore
typography: newTypography,
// @ts-ignore
breakpoints: newBreakpoints
});
}));
}
/**

2
react/features/filmstrip/components/web/Filmstrip.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import _ from 'lodash';
import React, { PureComponent } from 'react';

6
react/features/filmstrip/components/web/PinnedIndicator.tsx
View File

@ -1,6 +1,6 @@
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
import { IconPinParticipant } from '../../../base/icons/svg';
@ -32,7 +32,7 @@ type Props = {
tooltipPosition: string;
};
const useStyles = makeStyles(() => {
const useStyles = makeStyles()(() => {
return {
pinnedIndicator: {
backgroundColor: 'rgba(0, 0, 0, .7)',
@ -60,7 +60,7 @@ const PinnedIndicator = ({
const activePinnedParticipants: Array<{ participantId: string; pinned: boolean; }>
= useSelector(getPinnedActiveParticipants);
const isPinned = activePinnedParticipants.find(p => p.participantId === participantId);
const styles = useStyles();
const { classes: styles } = useStyles();
if ((stageFilmstrip && !isPinned) || (!stageFilmstrip && !pinned)) {
return null;

10
react/features/filmstrip/components/web/RaisedHandIndicator.tsx
View File

@ -1,13 +1,13 @@
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
import { IconRaisedHand } from '../../../base/icons/svg';
import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
import { Participant } from '../../../base/participants/types';
import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
/**
* The type of the React {@code Component} props of {@link RaisedHandIndicator}.
@ -31,7 +31,7 @@ type Props = {
tooltipPosition: string;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
raisedHandIndicator: {
backgroundColor: theme.palette.warning02,
@ -57,7 +57,7 @@ const RaisedHandIndicator = ({
const participant: Participant | undefined = useSelector((state: IState) =>
getParticipantById(state, participantId));
const _raisedHand = hasRaisedHand(participant);
const styles = useStyles();
const { classes: styles, theme } = useStyles();
if (!_raisedHand) {
return null;
@ -67,7 +67,7 @@ const RaisedHandIndicator = ({
<div className = { styles.raisedHandIndicator }>
<BaseIndicator
icon = { IconRaisedHand }
iconColor = { BaseTheme.palette.uiBackground }
iconColor = { theme.palette.uiBackground }
iconSize = { `${iconSize}px` }
tooltipKey = 'raisedHand'
tooltipPosition = { tooltipPosition } />

22
react/features/filmstrip/components/web/Thumbnail.tsx
View File

@ -1,8 +1,10 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import debounce from 'lodash/debounce';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createScreenSharingIssueEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions';
@ -23,7 +25,6 @@ import {
hasRaisedHand
} from '../../../base/participants/functions';
import { Participant } from '../../../base/participants/types';
import { connect } from '../../../base/redux/functions';
import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
// @ts-ignore
import { isTestModeEnabled } from '../../../base/testing';
@ -279,19 +280,19 @@ export type Props = {
width?: number;
};
const defaultStyles = (theme: any) => {
const defaultStyles = (theme: Theme) => {
return {
indicatorsContainer: {
position: 'absolute',
padding: `${theme.spacing(1)}px`,
position: 'absolute' as const,
padding: theme.spacing(1),
zIndex: 10,
width: '100%',
boxSizing: 'border-box',
boxSizing: 'border-box' as const,
display: 'flex',
left: 0,
'&.tile-view-mode': {
padding: `${theme.spacing(2)}px`
padding: theme.spacing(2)
}
},
@ -326,7 +327,7 @@ const defaultStyles = (theme: any) => {
},
containerBackground: {
position: 'absolute',
position: 'absolute' as const,
top: 0,
left: 0,
height: '100%',
@ -336,7 +337,7 @@ const defaultStyles = (theme: any) => {
},
borderIndicator: {
position: 'absolute',
position: 'absolute' as const,
width: '100%',
height: '100%',
zIndex: 9,
@ -360,7 +361,7 @@ const defaultStyles = (theme: any) => {
},
gif: {
position: 'absolute',
position: 'absolute' as const,
width: '100%',
height: '100%',
zIndex: 11,
@ -1309,5 +1310,4 @@ function _mapStateToProps(state: IState, ownProps: any): Object {
};
}
// @ts-ignore
export default connect(_mapStateToProps)(withStyles(defaultStyles)(Thumbnail));

7
react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx
View File

@ -1,7 +1,8 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import {
getMultipleVideoSupportFeatureFlag,
@ -51,7 +52,7 @@ type Props = {
thumbnailType: string;
};
const useStyles = makeStyles(() => {
const useStyles = makeStyles()(() => {
return {
nameContainer: {
display: 'flex',
@ -78,7 +79,7 @@ const ThumbnailBottomIndicators = ({
showStatusIndicators = true,
thumbnailType
}: Props) => {
const styles = useStyles();
const { classes: styles } = useStyles();
const _allowEditing = !useSelector(isNameReadOnly);
const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
const _isMultiStreamEnabled = useSelector(getMultipleVideoSupportFeatureFlag);

79
react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx
View File

@ -1,8 +1,8 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import clsx from 'clsx';
import React from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
// @ts-ignore
@ -72,7 +72,7 @@ type Props = {
thumbnailType: string;
};
const useStyles = makeStyles(() => {
const useStyles = makeStyles()(() => {
return {
container: {
display: 'flex',
@ -95,7 +95,7 @@ const ThumbnailTopIndicators = ({
showPopover,
thumbnailType
}: Props) => {
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const _isMobile = isMobileBrowser();
const { NORMAL = 16 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
@ -124,44 +124,43 @@ const ThumbnailTopIndicators = ({
const tooltipPosition = getIndicatorsTooltipPosition(thumbnailType);
return (
<>
<div className = { styles.container }>
<PinnedIndicator
return (<>
<div className = { styles.container }>
<PinnedIndicator
iconSize = { _indicatorIconSize }
participantId = { participantId }
tooltipPosition = { tooltipPosition } />
{!_connectionIndicatorDisabled
&& <ConnectionIndicator
alwaysVisible = { showConnectionIndicator }
enableStatsDisplay = { true }
iconSize = { _indicatorIconSize }
participantId = { participantId }
tooltipPosition = { tooltipPosition } />
{!_connectionIndicatorDisabled
&& <ConnectionIndicator
alwaysVisible = { showConnectionIndicator }
enableStatsDisplay = { true }
iconSize = { _indicatorIconSize }
participantId = { participantId }
statsPopoverPosition = { STATS_POPOVER_POSITION[thumbnailType] } />
}
<RaisedHandIndicator
iconSize = { _indicatorIconSize }
participantId = { participantId }
tooltipPosition = { tooltipPosition } />
{thumbnailType !== THUMBNAIL_TYPE.TILE && (
<div className = { clsx(indicatorsClassName, 'top-indicators') }>
<StatusIndicators
participantID = { participantId }
screenshare = { !_isMultiStreamEnabled } />
</div>
)}
</div>
<div className = { styles.container }>
<VideoMenuTriggerButton
hidePopover = { hidePopover }
local = { local }
participantId = { participantId }
popoverVisible = { popoverVisible }
showPopover = { showPopover }
thumbnailType = { thumbnailType }
visible = { isHovered } />
</div>
</>);
statsPopoverPosition = { STATS_POPOVER_POSITION[thumbnailType] } />
}
<RaisedHandIndicator
iconSize = { _indicatorIconSize }
participantId = { participantId }
tooltipPosition = { tooltipPosition } />
{thumbnailType !== THUMBNAIL_TYPE.TILE && (
<div className = { cx(indicatorsClassName, 'top-indicators') }>
<StatusIndicators
participantID = { participantId }
screenshare = { !_isMultiStreamEnabled } />
</div>
)}
</div>
<div className = { styles.container }>
<VideoMenuTriggerButton
hidePopover = { hidePopover }
local = { local }
participantId = { participantId }
popoverVisible = { popoverVisible }
showPopover = { showPopover }
thumbnailType = { thumbnailType }
visible = { isHovered } />
</div>
</>);
};
export default ThumbnailTopIndicators;

31
react/features/gifs/components/web/GifsMenu.tsx
View File

@ -1,18 +1,18 @@
/* eslint-disable lines-around-comment */
import { GiphyFetch, TrendingOptions } from '@giphy/js-fetch-api';
import { Grid } from '@giphy/react-components';
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { batch, useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { createGifSentEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions';
import { IState } from '../../../app/types';
// @ts-ignore
import InputField from '../../../base/premeeting/components/web/InputField';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
// @ts-ignore
import { sendMessage } from '../../../chat/actions.any';
import { SCROLL_SIZE } from '../../../filmstrip/constants';
@ -28,13 +28,13 @@ import { setGifDrawerVisibility } from '../../actions';
// @ts-ignore
import { formatGifUrlMessage, getGifAPIKey, getGifUrl } from '../../functions';
const OVERFLOW_DRAWER_PADDING = BaseTheme.spacing(3);
const OVERFLOW_DRAWER_PADDING = 16;
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
gifsMenu: {
width: '100%',
marginBottom: `${theme.spacing(2)}px`,
marginBottom: theme.spacing(2),
display: 'flex',
flexDirection: 'column',
@ -49,12 +49,11 @@ const useStyles = makeStyles((theme: any) => {
borderRadius: `${theme.shape.borderRadius}px`,
border: 'none',
outline: 0,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
...withPixelLineHeight(theme.typography.bodyShortRegular),
color: theme.palette.text01,
padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
width: '100%',
marginBottom: `${theme.spacing(3)}px`
marginBottom: theme.spacing(3)
},
gifContainer: {
@ -69,11 +68,11 @@ const useStyles = makeStyles((theme: any) => {
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
marginTop: `${theme.spacing(1)}px`
marginTop: theme.spacing(1)
},
overflowMenu: {
padding: `${theme.spacing(3)}px`,
padding: theme.spacing(3),
width: '100%',
boxSizing: 'border-box'
},
@ -98,7 +97,7 @@ function GifsMenu() {
const API_KEY: string = useSelector(getGifAPIKey);
const giphyFetch = new GiphyFetch(API_KEY);
const [ searchKey, setSearchKey ] = useState<string>();
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const dispatch = useDispatch();
const { t } = useTranslation();
const overflowDrawer: boolean = useSelector(showOverflowDrawer);
@ -190,18 +189,18 @@ function GifsMenu() {
const gifMenu = (
<div
className = { clsx(styles.gifsMenu,
className = { cx(styles.gifsMenu,
overflowDrawer && styles.overflowMenu
) }>
<InputField
autoFocus = { true }
className = { clsx(styles.searchField, 'gif-input') }
className = { cx(styles.searchField, 'gif-input') }
onChange = { handleSearchKeyChange }
placeHolder = { t('giphy.search') }
testId = 'gifSearch.key'
type = 'text' />
<div
className = { clsx(styles.gifContainer,
className = { cx(styles.gifContainer,
overflowDrawer && styles.gifContainerOverflow) }>
<Grid
columns = { 2 }

5
react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx
View File

@ -1,4 +1,5 @@
import { withStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
@ -31,7 +32,7 @@ interface Props extends WithTranslation {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
list: {
listStyleType: 'none',

117
react/features/large-video/components/ScreenSharePlaceholder.web.tsx
View File

@ -1,70 +1,72 @@
/* eslint-disable lines-around-comment */
import { makeStyles, createStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { WithTranslation } from 'react-i18next';
import { useStore } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../base/i18n/functions';
import { Theme } from '../../base/ui/types';
// @ts-ignore
import { setSeeWhatIsBeingShared } from '../actions.web';
const useStyles = makeStyles((theme: Theme) => createStyles({
overlayContainer: {
width: '100%',
height: '100%',
backgroundColor: theme.palette.ui02,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute'
},
content: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
laptop: {
width: '88px',
height: '56px',
boxSizing: 'border-box',
border: '3px solid',
borderColor: theme.palette.text01,
borderRadius: '6px'
},
laptopStand: {
width: '40px',
height: '4px',
backgroundColor: theme.palette.text01,
boxSizing: 'border-box',
borderRadius: '6px',
marginTop: '4px'
},
sharingMessage: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '20px',
lineHeight: '28px',
marginTop: '24px',
letterSpacing: '-0.012em',
color: theme.palette.text01
},
showSharing: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '14px',
lineHeight: '20px',
height: '20px',
marginTop: '16px',
color: theme.palette.link01,
cursor: 'pointer',
const useStyles = makeStyles()((theme: Theme) => {
return {
overlayContainer: {
width: '100%',
height: '100%',
backgroundColor: theme.palette.ui02,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute'
},
content: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
laptop: {
width: '88px',
height: '56px',
boxSizing: 'border-box',
border: '3px solid',
borderColor: theme.palette.text01,
borderRadius: '6px'
},
laptopStand: {
width: '40px',
height: '4px',
backgroundColor: theme.palette.text01,
boxSizing: 'border-box',
borderRadius: '6px',
marginTop: '4px'
},
sharingMessage: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '20px',
lineHeight: '28px',
marginTop: '24px',
letterSpacing: '-0.012em',
color: theme.palette.text01
},
showSharing: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '14px',
lineHeight: '20px',
height: '20px',
marginTop: '16px',
color: theme.palette.link01,
cursor: 'pointer',
'&:hover': {
color: theme.palette.link01Hover
'&:hover': {
color: theme.palette.link01Hover
}
}
}
}));
};
});
/**
* Component that displays a placeholder for when the screen is shared.
@ -73,10 +75,9 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
* @returns {ReactElement}
*/
const ScreenSharePlaceholder: React.FC<WithTranslation> = ({ t }) => {
const classes = useStyles();
const { classes } = useStyles();
const store = useStore();
const updateShowMeWhatImSharing = useCallback(() => {
store.dispatch(setSeeWhatIsBeingShared(true));
}, []);

8
react/features/notifications/components/web/NotificationsContainer.tsx
View File

@ -1,7 +1,8 @@
/* eslint-disable lines-around-comment */
import { FlagGroupContext } from '@atlaskit/flag/flag-group';
import { AtlasKitThemeProvider } from '@atlaskit/theme';
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
@ -55,10 +56,10 @@ interface Props extends WithTranslation {
portal?: boolean;
}
const useStyles = (theme: any) => {
const useStyles = (theme: Theme) => {
return {
container: {
position: 'absolute',
position: 'absolute' as const,
left: '16px',
bottom: '90px',
width: '400px',
@ -252,5 +253,4 @@ function _mapStateToProps(state: IState) {
};
}
// @ts-ignore
export default translate(connect(_mapStateToProps)(withStyles(useStyles)(NotificationsContainer)));

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

@ -1,15 +1,17 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React, { ReactElement, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../../../app/types';
import ListItem from '../../../../../base/components/participants-pane-list/ListItem';
import Icon from '../../../../../base/icons/components/Icon';
import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg';
import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
import { withPixelLineHeight } from '../../../../../base/styles/functions.web';
// @ts-ignore
import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
import { ACTION_TRIGGER } from '../../../../constants';
@ -82,7 +84,7 @@ type Props = {
toggleParticipantMenu: Function;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
boxShadow: 'none'
@ -91,9 +93,8 @@ const useStyles = makeStyles((theme: any) => {
roomName: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
...theme.typography.labelButton,
lineHeight: `${theme.typography.labelButton.lineHeight}px`,
whiteSpace: 'nowrap', // @ts-ignore
...withPixelLineHeight(theme.typography.labelButton),
padding: '12px 0'
},
@ -123,7 +124,7 @@ export const CollapsibleRoom = ({
toggleParticipantMenu
}: Props) => {
const { t } = useTranslation();
const styles = useStyles();
const { classes: styles, cx } = useStyles();
const [ collapsed, setCollapsed ] = useState(false);
const toggleCollapsed = useCallback(() => {
setCollapsed(!collapsed);
@ -153,41 +154,39 @@ export const CollapsibleRoom = ({
participantName: displayName
}), [ room, moderator ]);
return (
<>
<ListItem
actions = { children }
className = { clsx(styles.container, 'breakout-room-container') }
icon = { arrow }
isHighlighted = { isHighlighted }
onClick = { toggleCollapsed }
onLongPress = { raiseMenu }
onMouseLeave = { onLeave }
testId = { room.id }
textChildren = { roomName }
trigger = { actionsTrigger } />
{!collapsed && room?.participants
&& Object.values(room?.participants || {}).map(p =>
participantMatchesSearch(p, searchString) && (
<ParticipantItem
actionsTrigger = { ACTION_TRIGGER.HOVER }
displayName = { p.displayName || defaultRemoteDisplayName }
isHighlighted = { participantContextEntity?.jid === p.jid }
key = { p.jid }
local = { false }
openDrawerForParticipant = { raiseParticipantMenu }
overflowDrawer = { overflowDrawer }
participantID = { p.jid }>
{!overflowDrawer && moderator && (
<ParticipantActionEllipsis
accessibilityLabel = { t('breakoutRoom.more') }
onClick = { toggleParticipantMenu({ room,
jid: p.jid,
participantName: p.displayName }) } />
)}
</ParticipantItem>
))
}
</>
);
return (<>
<ListItem
actions = { children }
className = { cx(styles.container, 'breakout-room-container') }
icon = { arrow }
isHighlighted = { isHighlighted }
onClick = { toggleCollapsed }
onLongPress = { raiseMenu }
onMouseLeave = { onLeave }
testId = { room.id }
textChildren = { roomName }
trigger = { actionsTrigger } />
{!collapsed && room?.participants
&& Object.values(room?.participants || {}).map(p =>
participantMatchesSearch(p, searchString) && (
<ParticipantItem
actionsTrigger = { ACTION_TRIGGER.HOVER }
displayName = { p.displayName || defaultRemoteDisplayName }
isHighlighted = { participantContextEntity?.jid === p.jid }
key = { p.jid }
local = { false }
openDrawerForParticipant = { raiseParticipantMenu }
overflowDrawer = { overflowDrawer }
participantID = { p.jid }>
{!overflowDrawer && moderator && (
<ParticipantActionEllipsis
accessibilityLabel = { t('breakoutRoom.more') }
onClick = { toggleParticipantMenu({ room,
jid: p.jid,
participantName: p.displayName }) } />
)}
</ParticipantItem>
))
}
</>);
};

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

@ -1,13 +1,14 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { createBreakoutRoomsEvent } from '../../../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../../../analytics/functions';
import Button from '../../../../../base/ui/components/web/Button';
import { Theme } from '../../../../../base/ui/types';
// @ts-ignore
import { moveToRoom } from '../../../../../breakout-rooms/actions';
@ -22,16 +23,16 @@ type Props = {
};
};
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
button: {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
}
};
});
const JoinActionButton = ({ room }: Props) => {
const styles = useStyles();
const { classes: styles } = useStyles();
const { t } = useTranslation();
const dispatch = useDispatch();

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

@ -1,15 +1,15 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React, { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { Avatar } from '../../../../../base/avatar';
// @ts-ignore
import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/components';
import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
import { Theme } from '../../../../../base/ui/types';
// @ts-ignore
import { getBreakoutRooms } from '../../../../../breakout-rooms/functions';
// @ts-ignore
@ -18,6 +18,7 @@ import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
import SendToRoomButton from '../../../../../video-menu/components/web/SendToRoomButton';
import { AVATAR_SIZE } from '../../../../constants';
type Props = {
/**
@ -50,7 +51,7 @@ type Props = {
onSelect: Function;
};
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
text: {
color: theme.palette.text02,
@ -71,7 +72,7 @@ export const RoomParticipantContextMenu = ({
onLeave,
onSelect
}: Props) => {
const styles = useStyles();
const { classes: styles } = useStyles();
const { t } = useTranslation();
const isLocalModerator = useSelector(isLocalParticipantModerator);
const lowerMenu = useCallback(() => onSelect(true), [ onSelect ]);

7
react/features/participants-pane/components/web/FooterContextMenu.tsx
View File

@ -1,8 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import {
requestDisableAudioModeration,
@ -41,7 +42,7 @@ import { SETTINGS_TABS } from '../../../settings/constants';
// @ts-ignore
import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
contextMenu: {
bottom: 'auto',
@ -108,7 +109,7 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
const enableVideoModeration = useCallback(() => dispatch(requestEnableVideoModeration()), [ dispatch ]);
const classes = useStyles();
const { classes } = useStyles();
const muteAllVideo = useCallback(
() => dispatch(openDialog(MuteEveryonesVideoDialog)), [ dispatch ]);

12
react/features/participants-pane/components/web/LobbyParticipantItem.tsx
View File

@ -1,8 +1,10 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback, useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import ContextMenu from '../../../base/components/context-menu/ContextMenu';
import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
@ -37,15 +39,15 @@ type Props = {
participant: Participant;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
button: {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
},
moreButton: {
paddingRight: '6px',
paddingLeft: '6px',
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
},
contextMenu: {
position: 'fixed',
@ -64,7 +66,7 @@ export const LobbyParticipantItem = ({
const [ admit, reject, chat ] = useLobbyActions({ participantID: id });
const { t } = useTranslation();
const [ isOpen, setIsOpen ] = useState(false);
const styles = useStyles();
const { classes: styles } = useStyles();
const showChat = useSelector(showLobbyChatButton(p));

9
react/features/participants-pane/components/web/LobbyParticipants.tsx
View File

@ -1,8 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector, useDispatch } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { Avatar } from '../../../base/avatar';
@ -23,7 +24,7 @@ import { useLobbyActions, useParticipantDrawer } from '../../hooks';
// @ts-ignore
import LobbyParticipantItems from './LobbyParticipantItems';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
drawerActions: {
listStyleType: 'none',
@ -39,7 +40,6 @@ const useStyles = makeStyles((theme: any) => {
'&:first-child': {
marginTop: '15px'
},
'&:hover': {
@ -56,6 +56,7 @@ const useStyles = makeStyles((theme: any) => {
justifyContent: 'space-between'
},
heading: {
// @ts-ignore
...withPixelLineHeight(theme.typography.heading7),
color: theme.palette.text02
},
@ -76,7 +77,7 @@ export default function LobbyParticipants() {
const lobbyEnabled = useSelector(getLobbyEnabled);
const participants: Array<Object> = useSelector(getKnockingParticipants);
const { t } = useTranslation();
const classes = useStyles();
const { classes } = useStyles();
const dispatch = useDispatch();
const admitAll = useCallback(() => {
dispatch(admitMultiple(participants));

17
react/features/participants-pane/components/web/MeetingParticipants.tsx
View File

@ -1,8 +1,10 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
// @ts-ignore
@ -15,6 +17,7 @@ import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
import { MEDIA_TYPE } from '../../../base/media/constants';
import { getParticipantById } from '../../../base/participants/functions';
import { connect } from '../../../base/redux/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Input from '../../../base/ui/components/web/Input';
import { normalizeAccents } from '../../../base/util/strings.web';
// @ts-ignore
@ -34,17 +37,17 @@ import MeetingParticipantContextMenu from './MeetingParticipantContextMenu';
// @ts-ignore
import MeetingParticipantItems from './MeetingParticipantItems';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
heading: {
color: theme.palette.text02,
...theme.typography.labelButton,
lineHeight: `${theme.typography.labelButton.lineHeight}px`,
// @ts-ignore
...withPixelLineHeight(theme.typography.labelButton),
margin: `8px 0 ${participantsPaneTheme.panePadding}px`,
[`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
...theme.typography.labelButtonLarge,
lineHeight: `${theme.typography.labelButtonLarge.lineHeight}px`
// @ts-ignore
...withPixelLineHeight(theme.typography.labelButtonLarge)
}
},
@ -109,7 +112,7 @@ function MeetingParticipants({
const muteParticipantButtonText = t('dialog.muteParticipantButton');
const isBreakoutRoom = useSelector(isInBreakoutRoom);
const styles = useStyles();
const { classes: styles } = useStyles();
return (
<>

16
react/features/participants-pane/components/web/ParticipantItem.tsx
View File

@ -1,19 +1,22 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { ReactElement, useCallback } from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { Avatar } from '../../../base/avatar';
import ListItem from '../../../base/components/participants-pane-list/ListItem';
import { translate } from '../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import {
ACTION_TRIGGER,
AudioStateIcons,
MEDIA_STATE,
type ActionTrigger,
type MediaState,
VideoStateIcons
VideoStateIcons,
MediaState
} from '../../constants';
import { RaisedHandIndicator } from './RaisedHandIndicator';
@ -96,7 +99,7 @@ interface Props extends WithTranslation {
youText?: string;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
nameContainer: {
display: 'flex',
@ -111,8 +114,7 @@ const useStyles = makeStyles((theme: any) => {
},
moderatorLabel: {
...theme.typography.labelRegular,
lineHeight: `${theme.typography.labelRegular.lineHeight}px`,
...withPixelLineHeight(theme.typography.labelRegular),
color: theme.palette.text03
}
};
@ -148,7 +150,7 @@ function ParticipantItem({
displayName
}), []);
const styles = useStyles();
const { classes: styles } = useStyles();
const icon = (
<Avatar

12
react/features/participants-pane/components/web/ParticipantQuickAction.tsx
View File

@ -1,13 +1,15 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { approveParticipant } from '../../../av-moderation/actions';
import Button from '../../../base/ui/components/web/Button';
import { Theme } from '../../../base/ui/types';
// @ts-ignore
import { QUICK_ACTION_BUTTON } from '../../constants';
type Props = {
@ -48,10 +50,10 @@ type Props = {
participantName: string;
};
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
button: {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
}
};
});
@ -64,7 +66,7 @@ const ParticipantQuickAction = ({
participantID,
participantName
}: Props) => {
const styles = useStyles();
const { classes: styles } = useStyles();
const dispatch = useDispatch();
const { t } = useTranslation();

19
react/features/participants-pane/components/web/ParticipantsPane.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
@ -15,7 +16,6 @@ import { connect } from '../../../base/redux/functions';
import Button from '../../../base/ui/components/web/Button';
import ClickableIcon from '../../../base/ui/components/web/ClickableIcon';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { Theme } from '../../../base/ui/types';
// @ts-ignore
import { isAddBreakoutRoomButtonVisible } from '../../../breakout-rooms/functions';
// @ts-ignore
@ -107,10 +107,10 @@ type State = {
const styles = (theme: Theme) => {
return {
container: {
boxSizing: 'border-box',
boxSizing: 'border-box' as const,
flex: 1,
overflowY: 'auto',
position: 'relative',
overflowY: 'auto' as const,
position: 'relative' as const,
padding: `0 ${participantsPaneTheme.panePadding}px`,
[`& > * + *:not(.${participantsPaneTheme.ignoredChildClassName})`]: {
@ -131,7 +131,7 @@ const styles = (theme: Theme) => {
header: {
alignItems: 'center',
boxSizing: 'border-box',
boxSizing: 'border-box' as const,
display: 'flex',
height: `${participantsPaneTheme.headerSize}px`,
padding: '0 20px',
@ -153,15 +153,15 @@ const styles = (theme: Theme) => {
footer: {
display: 'flex',
justifyContent: 'flex-end',
padding: `${theme.spacing(4)}px ${participantsPaneTheme.panePadding}px`,
padding: `${theme.spacing(4)} ${participantsPaneTheme.panePadding}px`,
'& > *:not(:last-child)': {
marginRight: `${theme.spacing(3)}px`
marginRight: theme.spacing(3)
}
},
footerMoreContainer: {
position: 'relative'
position: 'relative' as const
}
};
};
@ -377,5 +377,4 @@ function _mapStateToProps(state: IState) {
};
}
// @ts-ignore
export default translate(connect(_mapStateToProps)(withStyles(styles)(ParticipantsPane)));

12
react/features/participants-pane/components/web/RaisedHandIndicator.tsx
View File

@ -1,15 +1,15 @@
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../base/icons/components/Icon';
import { IconRaisedHandHollow } from '../../../base/icons/svg';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
indicator: {
backgroundColor: theme.palette.warning02,
borderRadius: `${theme.shape.borderRadius / 2}px`,
borderRadius: `${Number(theme.shape.borderRadius) / 2}px`,
height: '24px',
width: '24px'
}
@ -17,12 +17,12 @@ const useStyles = makeStyles((theme: any) => {
});
export const RaisedHandIndicator = () => {
const styles = useStyles();
const { classes: styles, theme } = useStyles();
return (
<div className = { styles.indicator }>
<Icon
color = { BaseTheme.palette.uiBackground }
color = { theme.palette.uiBackground }
size = { 16 }
src = { IconRaisedHandHollow } />
</div>

11
react/features/polls/components/web/PollAnswer.tsx
View File

@ -1,19 +1,20 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import Button from '../../../base/ui/components/web/Button';
import Checkbox from '../../../base/ui/components/web/Checkbox';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { Theme } from '../../../base/ui/types';
// @ts-ignore
import { isSubmitAnswerDisabled } from '../../functions';
import AbstractPollAnswer, { AbstractProps } from '../AbstractPollAnswer';
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
buttonMargin: {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
}
};
});
@ -29,7 +30,7 @@ const PollAnswer = ({
t
}: AbstractProps) => {
const { changingVote } = poll;
const styles = useStyles();
const { classes: styles } = useStyles();
return (
<div className = 'poll-answer'>

10
react/features/polls/components/web/PollCreate.tsx
View File

@ -1,6 +1,7 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../base/icons/components/Icon';
import { IconMenu } from '../../../base/icons/svg';
@ -8,17 +9,16 @@ import { IconMenu } from '../../../base/icons/svg';
import { Tooltip } from '../../../base/tooltip';
import Button from '../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { Theme } from '../../../base/ui/types';
import { ANSWERS_LIMIT, CHAR_LIMIT } from '../../constants';
// @ts-ignore
import AbstractPollCreate from '../AbstractPollCreate';
// @ts-ignore
import type { AbstractProps } from '../AbstractPollCreate';
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
buttonMargin: {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
}
};
});
@ -36,7 +36,7 @@ const PollCreate = ({
setQuestion,
t
}: AbstractProps) => {
const styles = useStyles();
const { classes: styles } = useStyles();
/*
* This ref stores the Array of answer input fields, allowing us to focus on them.

9
react/features/prejoin/components/DropdownButton.tsx
View File

@ -1,4 +1,5 @@
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React from 'react';
import Icon from '../../base/icons/components/Icon';
@ -43,7 +44,7 @@ type Props = {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
prejoinPreviewDropdownBtn: {
alignItems: 'center',
@ -53,10 +54,10 @@ const styles = (theme: any) => {
height: 40,
fontSize: 15,
lineHeight: '24px',
padding: '0 16px',
padding: '0 16px', // @ts-ignore
backgroundColor: theme.palette.field02,
'&:hover': {
'&:hover': { // @ts-ignore
backgroundColor: theme.palette.field02Hover
}
},

12
react/features/prejoin/components/dialogs/CallingDialog.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { Avatar } from '../../../base/avatar';
@ -34,7 +36,7 @@ interface Props extends WithTranslation {
status: string;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
callingDialog: {
padding: theme.spacing(3),
@ -46,13 +48,13 @@ const useStyles = makeStyles((theme: any) => {
'& .prejoin-dialog-calling-label': {
fontSize: '15px',
margin: `${theme.spacing(2)}px 0 ${theme.spacing(3)}px 0`
margin: `${theme.spacing(2)} 0 ${theme.spacing(3)} 0`
},
'& .prejoin-dialog-calling-number': {
fontSize: '19px',
lineHeight: '28px',
margin: `${theme.spacing(3)}px 0`
margin: `${theme.spacing(3)} 0`
}
}
};
@ -66,7 +68,7 @@ const useStyles = makeStyles((theme: any) => {
*/
function CallingDialog(props: Props) {
const { number, onClose, status, t } = props;
const classes = useStyles();
const { classes } = useStyles();
return (
<div className = { classes.callingDialog }>

12
react/features/prejoin/components/dialogs/DialInDialog.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
@ -46,14 +48,14 @@ interface Props extends WithTranslation {
passCode: string;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
dialInDialog: {
textAlign: 'center',
'& .prejoin-dialog-dialin-header': {
alignItems: 'center',
margin: `${theme.spacing(3)}px 0 ${theme.spacing(5)}px ${theme.spacing(3)}px`,
margin: `${theme.spacing(3)} 0 ${theme.spacing(5)} ${theme.spacing(3)}`,
display: 'flex'
},
'& .prejoin-dialog-dialin-icon': {
@ -70,7 +72,7 @@ const useStyles = makeStyles((theme: any) => {
'& .prejoin-dialog-dialin-num-container': {
minHeight: '48px',
margin: `${theme.spacing(2)}px 0`
margin: `${theme.spacing(2)} 0`
}
},
@ -110,7 +112,7 @@ function DialinDialog(props: Props) {
passCode,
t
} = props;
const classes = useStyles();
const { classes } = useStyles();
const flagClassName = `prejoin-dialog-flag iti-flag ${getCountryCodeFromPhone(
number
)}`;

14
react/features/prejoin/components/dialogs/DialOutDialog.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
@ -31,18 +33,18 @@ interface Props extends WithTranslation {
onTextButtonClick: Function;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
dialOutDialog: {
padding: `${theme.spacing(3)}px`
padding: theme.spacing(3)
},
header: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: `${theme.spacing(4)}px`
marginBottom: theme.spacing(4)
},
picker: {
margin: `${theme.spacing(2)}px 0 ${theme.spacing(3)}px 0`
margin: `${theme.spacing(2)} 0 ${theme.spacing(3)} 0`
}
};
});
@ -56,7 +58,7 @@ const useStyles = makeStyles((theme: any) => {
*/
function DialOutDialog(props: Props) {
const { onClose, onTextButtonClick, onSubmit, t } = props;
const classes = useStyles();
const { classes } = useStyles();
return (
<div className = { classes.dialOutDialog }>

10
react/features/prejoin/components/preview/DeviceStatus.tsx
View File

@ -1,7 +1,7 @@
import { makeStyles } from '@material-ui/styles';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
@ -29,7 +29,7 @@ export interface Props extends WithTranslation {
deviceStatusType: string;
}
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
deviceStatus: {
alignItems: 'center',
@ -84,10 +84,10 @@ const iconMap = {
* @returns {ReactElement}
*/
function DeviceStatus({ deviceStatusType, deviceStatusText, t }: Props) {
const classes = useStyles();
const { classes, cx } = useStyles();
const { src, className } = iconMap[deviceStatusType as keyof typeof iconMap];
const hasError = deviceStatusType === 'warning';
const containerClassName = clsx(classes.deviceStatus, { 'device-status-error': hasError });
const containerClassName = cx(classes.deviceStatus, { 'device-status-error': hasError });
return (
<div

2
react/features/reactions/actions.any.ts
View File

@ -29,7 +29,7 @@ export function setReactionQueue(queue: Array<ReactionEmojiProps>): ReactionsAct
* @param {string} uid - Id of the reaction to be removed.
* @returns {Function}
*/
export function removeReaction(uid: string): Function {
export function removeReaction(uid: string): any {
return (dispatch: Function, getState: Function) => {
const queue = getState()['features/reactions'].queue;

22
react/features/reactions/components/web/ReactionsMenu.tsx
View File

@ -1,8 +1,10 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { ClassNameMap, withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { createReactionMenuEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents';
@ -12,8 +14,6 @@ import { isMobileBrowser } from '../../../base/environment/utils';
import { translate } from '../../../base/i18n/functions';
import { raiseHand } from '../../../base/participants/actions';
import { getLocalParticipant, hasRaisedHand } from '../../../base/participants/functions';
import { connect } from '../../../base/redux/functions';
import { Theme } from '../../../base/ui/types';
import GifsMenu from '../../../gifs/components/web/GifsMenu';
// @ts-ignore
import GifsMenuButton from '../../../gifs/components/web/GifsMenuButton';
@ -28,10 +28,6 @@ import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../constants';
// @ts-ignore
import ReactionButton from './ReactionButton';
interface Classes {
overflow: string;
}
interface Props extends WithTranslation {
/**
@ -67,7 +63,7 @@ interface Props extends WithTranslation {
/**
* An object containing the CSS classes.
*/
classes: Classes;
classes: ClassNameMap<string>;
/**
* The Redux Dispatch function.
@ -77,7 +73,7 @@ interface Props extends WithTranslation {
/**
* Whether or not it's displayed in the overflow menu.
*/
overflowMenu: boolean;
overflowMenu?: boolean;
}
const styles = (theme: Theme) => {
@ -88,8 +84,8 @@ const styles = (theme: Theme) => {
backgroundColor: theme.palette.ui01,
boxShadow: 'none',
borderRadius: 0,
position: 'relative',
boxSizing: 'border-box',
position: 'relative' as const,
boxSizing: 'border-box' as const,
height: `${REACTIONS_MENU_HEIGHT}px`
}
};
@ -265,8 +261,6 @@ function mapDispatchToProps(dispatch: IStore['dispatch']) {
...bindActionCreators(
{
_dockToolbox: dockToolbox
// @ts-ignore
}, dispatch)
};
}
@ -274,6 +268,4 @@ function mapDispatchToProps(dispatch: IStore['dispatch']) {
export default translate(connect(
mapStateToProps,
mapDispatchToProps
// @ts-ignore
)(withStyles(styles)(ReactionsMenu)));

11
react/features/recording/components/Recording/web/HighlightButton.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React from 'react';
// @ts-ignore
@ -54,7 +55,7 @@ type State = {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
container: {
position: 'relative'
@ -63,11 +64,11 @@ const styles = (theme: any) => {
background: theme.palette.text02,
margin: '0 4px 4px 4px'
},
regular: {
regular: { // @ts-ignore
background: theme.palette.field02,
margin: '0 4px 4px 4px'
},
highlightNotification: {
highlightNotification: { // @ts-ignore
backgroundColor: theme.palette.field02,
borderRadius: '6px',
boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
@ -81,7 +82,7 @@ const styles = (theme: any) => {
top: '32px',
width: 320
},
highlightNotificationButton: {
highlightNotificationButton: { // @ts-ignore
color: theme.palette.field01Focus,
cursor: 'pointer',
fontWeight: '600',

5
react/features/recording/components/web/RecordingLabel.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React from 'react';
import { translate } from '../../../base/i18n/functions';
@ -18,7 +19,7 @@ import AbstractRecordingLabel, {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
[JitsiRecordingConstants.mode.STREAM]: {
background: theme.palette.ui03

7
react/features/salesforce/components/web/RecordItem.tsx
View File

@ -1,6 +1,7 @@
import { makeStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { RECORD_TYPE } from '../../constants';
@ -30,7 +31,7 @@ type Props = {
type: string;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
recordItem: {
display: 'flex',
@ -80,8 +81,8 @@ export const RecordItem = ({
type
}: Props) => {
const { t } = useTranslation();
const classes = useStyles();
const Icon = RECORD_TYPE[type as keyof typeof RECORD_TYPE].icon;
const { classes } = useStyles();
return (
<li

15
react/features/salesforce/components/web/SalesforceLinkDialog.tsx
View File

@ -1,9 +1,10 @@
/* eslint-disable lines-around-comment */
import Spinner from '@atlaskit/spinner';
import { makeStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
// @ts-ignore
import { Dialog, hideDialog } from '../../../base/dialog';
@ -11,7 +12,7 @@ import Icon from '../../../base/icons/components/Icon';
import { IconSearch } from '../../../base/icons/svg';
// @ts-ignore
import { getFieldValue } from '../../../base/react';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { NOTES_MAX_LENGTH } from '../../constants';
// @ts-ignore
import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
@ -19,7 +20,7 @@ import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
import { RecordItem } from './RecordItem';
// @ts-ignore
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
minHeight: '450px',
@ -54,8 +55,7 @@ const useStyles = makeStyles((theme: any) => {
height: 40,
'&::placeholder': {
color: theme.palette.text03,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
...withPixelLineHeight(theme.typography.bodyShortRegular)
}
},
spinner: {
@ -106,6 +106,7 @@ const useStyles = makeStyles((theme: any) => {
border: '1px solid',
borderColor: theme.palette.ui05,
backgroundColor: theme.palette.field01,
// @ts-ignore
color: theme.palette.field02,
borderRadius: theme.shape.borderRadius,
padding: '10px 16px'
@ -121,7 +122,7 @@ const useStyles = makeStyles((theme: any) => {
*/
function SalesforceLinkDialog() {
const { t } = useTranslation();
const classes = useStyles();
const { classes, theme } = useStyles();
const dispatch = useDispatch();
const {
hasDetailsErrors,
@ -190,7 +191,7 @@ function SalesforceLinkDialog() {
<div className = { classes.recordsSearchContainer }>
<Icon
className = { classes.searchIcon }
color = { BaseTheme.palette.icon03 }
color = { theme.palette.icon03 }
src = { IconSearch } />
<input
autoComplete = 'off'

13
react/features/settings/components/web/SettingsDialog.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React, { Component } from 'react';
import { IState } from '../../../app/types';
@ -86,7 +87,7 @@ type Props = {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
settingsDialog: {
display: 'flex',
@ -97,7 +98,7 @@ const styles = (theme: any) => {
},
'& .auth-name': {
marginBottom: `${theme.spacing(1)}px`
marginBottom: theme.spacing(1)
},
'& .calendar-tab, & .device-selection': {
@ -109,7 +110,7 @@ const styles = (theme: any) => {
fontSize: '12px',
fontWeight: 600,
lineHeight: 1.33,
padding: `20px 0px ${theme.spacing(1)}px 0px`
padding: `20px 0px ${theme.spacing(1)} 0px`
},
'& input[type="checkbox"]:checked + svg': {
@ -138,7 +139,7 @@ const styles = (theme: any) => {
'& .profile-edit-field': {
flex: 0.5,
marginRight: '20px',
marginTop: `${theme.spacing(3)}px`
marginTop: theme.spacing(3)
},
'& .settings-sub-pane': {
@ -159,7 +160,7 @@ const styles = (theme: any) => {
'& .settings-checkbox': {
display: 'flex',
marginBottom: `${theme.spacing(2)}px`
marginBottom: theme.spacing(2)
},
'& .moderator-settings-wrapper': {

13
react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx
View File

@ -1,12 +1,12 @@
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Switch from '../../../base/ui/components/web/Switch';
import { Theme } from '../../../base/ui/types';
// @ts-ignore
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
switchContainer: {
display: 'flex',
@ -15,8 +15,7 @@ const useStyles = makeStyles((theme: Theme) => {
switchLabel: {
marginRight: 10,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
...withPixelLineHeight(theme.typography.bodyShortRegular)
}
};
});
@ -44,7 +43,7 @@ type Props = {
* @returns {React$Element<any>}
*/
export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: Props) {
const classes = useStyles();
const { classes } = useStyles();
const { t } = useTranslation();
return (

7
react/features/speaker-stats/components/web/SpeakerStats.tsx
View File

@ -1,7 +1,8 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React, { useCallback, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
// @ts-ignore
@ -20,7 +21,7 @@ import SpeakerStatsLabels from './SpeakerStatsLabels';
import SpeakerStatsList from './SpeakerStatsList';
import SpeakerStatsSearch from './SpeakerStatsSearch';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
speakerStats: {
'& .row': {
@ -96,7 +97,7 @@ const SpeakerStats = () => {
const displaySwitch = faceLandmarks?.enableDisplayFaceExpressions && clientWidth > DISPLAY_SWITCH_BREAKPOINT;
const displayLabels = clientWidth > MOBILE_BREAKPOINT;
const dispatch = useDispatch();
const classes = useStyles();
const { classes } = useStyles();
const onToggleFaceExpressions = useCallback(() =>
dispatch(toggleFaceExpressions())

12
react/features/speaker-stats/components/web/SpeakerStatsLabels.tsx
View File

@ -1,12 +1,15 @@
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { Tooltip } from '../../../base/tooltip';
import { FACE_EXPRESSIONS_EMOJIS } from '../../../face-landmarks/constants';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
labels: {
padding: '22px 0 7px 0',
@ -14,8 +17,7 @@ const useStyles = makeStyles((theme: any) => {
},
emojis: {
paddingLeft: 27,
...theme.typography.bodyShortRegularLarge,
lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
}
};
});
@ -33,7 +35,7 @@ type Props = {
const SpeakerStatsLabels = (props: Props) => {
const { t } = useTranslation();
const classes = useStyles();
const { classes } = useStyles();
const nameTimeClass = `name-time${
props.showFaceExpressions ? ' name-time_expressions-on' : ''
}`;

30
react/features/speaker-stats/components/web/SpeakerStatsList.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { MOBILE_BREAKPOINT } from '../../constants';
// @ts-ignore
import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
@ -9,20 +11,20 @@ import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
// @ts-ignore
import SpeakerStatsItem from './SpeakerStatsItem';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
list: {
marginTop: `${theme.spacing(3)}px`,
marginBottom: `${theme.spacing(3)}px`
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3)
},
item: {
height: `${theme.spacing(7)}px`,
height: theme.spacing(7),
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
height: `${theme.spacing(8)}px`
height: theme.spacing(8)
}
},
avatar: {
height: `${theme.spacing(5)}px`
height: theme.spacing(5)
},
expressions: {
paddingLeft: 29
@ -31,21 +33,17 @@ const useStyles = makeStyles((theme: any) => {
color: theme.palette.text03
},
displayName: {
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
...withPixelLineHeight(theme.typography.bodyShortRegular),
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
...theme.typography.bodyShortRegularLarge,
lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
}
},
time: {
padding: '2px 4px',
borderRadius: '4px',
...theme.typography.labelBold,
lineHeight: `${theme.typography.labelBold.lineHeight}px`,
...withPixelLineHeight(theme.typography.labelBold),
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
...theme.typography.bodyShortRegularLarge,
lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
}
},
dominant: {
@ -60,7 +58,7 @@ const useStyles = makeStyles((theme: any) => {
* @returns {React$Element<any>}
*/
const SpeakerStatsList = () => {
const classes = useStyles();
const { classes } = useStyles();
const items = abstractSpeakerStatsList(SpeakerStatsItem, classes);
return (

17
react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx
View File

@ -1,19 +1,20 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../base/icons/components/Icon';
import { IconSearch } from '../../../base/icons/svg';
// @ts-ignore
import { getFieldValue } from '../../../base/react';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { MOBILE_BREAKPOINT } from '../../constants';
// @ts-ignore
import { isSpeakerStatsSearchDisabled } from '../../functions';
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
speakerStatsSearchContainer: {
position: 'relative'
@ -41,15 +42,13 @@ const useStyles = makeStyles((theme: any) => {
height: 40,
'&::placeholder': {
color: theme.palette.text03,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
...withPixelLineHeight(theme.typography.bodyShortRegular)
},
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
height: 48,
padding: '13px 16px 13px 44px',
'&::placeholder': {
...theme.typography.bodyShortRegularLarge,
lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
...withPixelLineHeight(theme.typography.bodyShortRegular)
}
}
}
@ -74,7 +73,7 @@ type Props = {
* @returns {React$Element<any>}
*/
function SpeakerStatsSearch({ onSearch }: Props) {
const classes = useStyles();
const { classes, theme } = useStyles();
const { t } = useTranslation();
const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
const [ searchValue, setSearchValue ] = useState<string>('');
@ -105,7 +104,7 @@ function SpeakerStatsSearch({ onSearch }: Props) {
<div className = { classes.speakerStatsSearchContainer }>
<Icon
className = { classes.searchIcon }
color = { BaseTheme.palette.icon03 }
color = { theme.palette.icon03 }
src = { IconSearch } />
<input
autoComplete = 'off'

6
react/features/subtitles/components/LanguageList.tsx
View File

@ -1,5 +1,5 @@
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import LanguageListItem from './LanguageListItem';
@ -10,7 +10,7 @@ interface ILanguageListProps {
selectedLanguage: string;
}
const useStyles = makeStyles(() => {
const useStyles = makeStyles()(() => {
return {
itemsContainer: {
display: 'flex',
@ -35,7 +35,7 @@ const LanguageList = ({
items,
onLanguageSelected
}: ILanguageListProps) => {
const styles = useStyles();
const { classes: styles } = useStyles();
const listItems = items.map(item => (<LanguageListItem
key = { item.id }
lang = { item.lang }

8
react/features/subtitles/components/LanguageListItem.tsx
View File

@ -1,11 +1,11 @@
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../base/i18n/functions';
import Icon from '../../base/icons/components/Icon';
import { IconCheck } from '../../base/icons/svg';
import { Theme } from '../../base/ui/types';
interface ILanguageListItemProps extends WithTranslation {
@ -25,7 +25,7 @@ interface ILanguageListItemProps extends WithTranslation {
selected?: boolean;
}
const useStyles = makeStyles((theme: Theme) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
itemContainer: {
display: 'flex',
@ -56,7 +56,7 @@ const LanguageListItem = ({
selected,
onLanguageSelected
}: ILanguageListItemProps) => {
const styles = useStyles();
const { classes: styles } = useStyles();
const onLanguageSelectedWrapper = useCallback(() => onLanguageSelected(lang), [ lang ]);
return (

7
react/features/toolbox/components/web/Drawer.tsx
View File

@ -1,5 +1,6 @@
import { makeStyles } from '@material-ui/core';
import { Theme } from '@mui/material';
import React, { ReactElement, useCallback } from 'react';
import { makeStyles } from 'tss-react/mui';
import { DRAWER_MAX_HEIGHT } from '../../constants';
@ -27,7 +28,7 @@ type Props = {
onClose: Function;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
drawer: {
backgroundColor: theme.palette.ui02,
@ -47,7 +48,7 @@ function Drawer({
isOpen,
onClose
}: Props) {
const styles = useStyles();
const { classes: styles } = useStyles();
/**
* Handles clicks within the menu, preventing the propagation of the click event.

7
react/features/toolbox/components/web/OverflowMenuButton.tsx
View File

@ -1,14 +1,14 @@
/* eslint-disable lines-around-comment */
import InlineDialog from '@atlaskit/inline-dialog';
import { withStyles } from '@material-ui/styles';
import { withStyles } from '@mui/styles';
import React, { Component, ReactElement } from 'react';
import { WithTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions';
import { IState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
// @ts-ignore
import { ReactionEmoji, ReactionsMenu } from '../../../reactions/components';
import { type ReactionEmojiProps, REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
@ -71,7 +71,7 @@ interface Props extends WithTranslation {
const styles = () => {
return {
overflowMenuDrawer: {
overflowY: 'auto',
overflowY: 'auto' as const,
height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)`
}
};
@ -209,5 +209,4 @@ function mapStateToProps(state: IState) {
};
}
// @ts-ignore
export default withStyles(styles)(translate(connect(mapStateToProps)(OverflowMenuButton)));

11
react/features/toolbox/components/web/Toolbox.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/core/styles';
import { withStyles } from '@mui/styles';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { batch } from 'react-redux';
@ -244,7 +244,6 @@ interface Props extends WithTranslation {
*/
_isProfileDisabled: boolean;
/**
* Whether or not the current meeting belongs to a JaaS user.
*/
@ -341,16 +340,17 @@ declare let APP: any;
const styles = () => {
return {
contextMenu: {
position: 'relative',
position: 'relative' as const,
right: 'auto',
maxHeight: 'inherit',
margin: 0
},
hangupMenu: {
position: 'relative',
position: 'relative' as const,
right: 'auto',
display: 'flex',
flexDirection: 'column',
flexDirection: 'column' as const,
rowGap: '8px',
margin: 0,
padding: '16px'
@ -1537,5 +1537,4 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
};
}
// @ts-ignore
export default translate(connect(_mapStateToProps)(withStyles(styles)(Toolbox)));

8
react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx
View File

@ -1,8 +1,8 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { withStyles } from '@mui/styles';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { batch, connect } from 'react-redux';
import { batch } from 'react-redux';
import { IState } from '../../../app/types';
import ContextMenu from '../../../base/components/context-menu/ContextMenu';
@ -14,6 +14,7 @@ import { IconHorizontalPoints } from '../../../base/icons/svg';
import { getLocalParticipant } from '../../../base/participants/functions';
// @ts-ignore
import { Popover } from '../../../base/popover';
import { connect } from '../../../base/redux/functions';
// @ts-ignore
import { setParticipantContextMenuOpen } from '../../../base/responsive-ui/actions';
// @ts-ignore
@ -125,7 +126,7 @@ const styles = () => {
},
contextMenu: {
position: 'relative',
position: 'relative' as const,
marginTop: 0,
right: 'auto',
padding: '0',
@ -308,5 +309,4 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
};
}
// @ts-ignore
export default translate(connect(_mapStateToProps)(withStyles(styles)(LocalVideoMenuTriggerButton)));

8
react/features/video-menu/components/web/ParticipantContextMenu.tsx
View File

@ -1,8 +1,10 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
// @ts-ignore
@ -117,7 +119,7 @@ type Props = {
thumbnailMenu?: boolean;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
text: {
color: theme.palette.text02,
@ -146,7 +148,7 @@ const ParticipantContextMenu = ({
}: Props) => {
const dispatch = useDispatch();
const { t } = useTranslation();
const styles = useStyles();
const { classes: styles } = useStyles();
const localParticipant = useSelector(getLocalParticipant);
const _isModerator = Boolean(localParticipant?.role === PARTICIPANT_ROLE.MODERATOR);

12
react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx
View File

@ -1,8 +1,8 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { withStyles } from '@mui/styles';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import { batch, connect } from 'react-redux';
import { batch } from 'react-redux';
import { IState } from '../../../app/types';
import { isMobileBrowser } from '../../../base/environment/utils';
@ -13,6 +13,7 @@ import { getParticipantById } from '../../../base/participants/functions';
import { Participant } from '../../../base/participants/types';
// @ts-ignore
import { Popover } from '../../../base/popover';
import { connect } from '../../../base/redux/functions';
// @ts-ignore
import { setParticipantContextMenuOpen } from '../../../base/responsive-ui/actions';
import Button from '../../../base/ui/components/web/Button';
@ -120,7 +121,7 @@ const styles = () => {
},
contextMenu: {
position: 'relative',
position: 'relative' as const,
marginTop: 0,
right: 'auto',
padding: '0',
@ -302,13 +303,12 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
_disabled: remoteVideoMenu?.disabled,
_menuPosition,
_overflowDrawer: overflowDrawer,
_participant: participant,
_participantDisplayName,
_participant: participant ?? { id: '' },
_participantDisplayName: _participantDisplayName ?? '',
_remoteControlState,
_showConnectionInfo: showConnectionInfo
};
}
export default translate(connect(_mapStateToProps)(
// @ts-ignore
withStyles(styles)(RemoteVideoMenuTriggerButton)));

14
react/features/video-menu/components/web/VolumeSlider.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
@ -44,13 +45,13 @@ type State = {
volumeLevel: number;
};
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
container: {
minHeight: '40px',
minWidth: '180px',
width: '100%',
boxSizing: 'border-box',
boxSizing: 'border-box' as const,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
@ -64,17 +65,17 @@ const styles = (theme: any) => {
icon: {
minWidth: '20px',
padding: '5px',
position: 'relative'
position: 'relative' as const
},
sliderContainer: {
position: 'relative',
position: 'relative' as const,
width: '100%',
paddingRight: '5px'
},
slider: {
position: 'absolute',
position: 'absolute' as const,
width: '100%',
top: '50%',
transform: 'translate(0, -50%)'
@ -168,5 +169,4 @@ class VolumeSlider extends Component<Props, State> {
}
}
// @ts-ignore
export default translate(withStyles(styles)(VolumeSlider));

18
react/features/video-quality/components/Slider.tsx
View File

@ -1,8 +1,6 @@
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React from 'react';
import { commonClassName } from '../../base/ui/constants';
import { makeStyles } from 'tss-react/mui';
type Props = {
@ -37,7 +35,7 @@ type Props = {
value: number;
};
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
// keep the same height for all elements:
// input, input track & fake track(div)
const height = 6;
@ -54,7 +52,7 @@ const useStyles = makeStyles((theme: any) => {
width: 24
};
const focused = {
const focused = { // @ts-ignore
outline: `1px solid ${theme.palette.action03Focus}`
};
@ -83,7 +81,7 @@ const useStyles = makeStyles((theme: any) => {
},
track: {
background: theme.palette.ui02,
borderRadius: theme.shape.borderRadius / 2,
borderRadius: Number(theme.shape.borderRadius) / 2,
height
},
slider: {
@ -141,12 +139,12 @@ const useStyles = makeStyles((theme: any) => {
* @returns {ReactElement}
*/
function Slider({ ariaLabel, max, min, onChange, step, value }: Props) {
const classes = useStyles();
const { classes, cx } = useStyles();
const knobs = [ ...Array(Math.floor((max - min) / step) + 1) ];
return (
<div className = { classes.sliderContainer }>
<ul className = { clsx(commonClassName.emptyList, classes.knobContainer) }>
<ul className = { cx('empty-list', classes.knobContainer) }>
{knobs.map((_, i) => (
<li
className = { classes.knob }
@ -155,7 +153,7 @@ function Slider({ ariaLabel, max, min, onChange, step, value }: Props) {
<div className = { classes.track } />
<input
aria-label = { ariaLabel }
className = { clsx(classes.slider, 'custom-slider') }
className = { cx(classes.slider, 'custom-slider') }
max = { max }
min = { min }
onChange = { onChange }

5
react/features/video-quality/components/VideoQualitySlider.web.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable lines-around-comment */
import { withStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import clsx from 'clsx';
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
@ -90,7 +91,7 @@ interface Props extends WithTranslation {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
dialog: {
color: theme.palette.text01

14
react/features/virtual-background/components/UploadImageButton.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable lines-around-comment */
import { makeStyles } from '@material-ui/styles';
import { Theme } from '@mui/material';
import React, { useCallback, useRef } from 'react';
import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { v4 as uuidv4 } from 'uuid';
import { translate } from '../../base/i18n/functions';
@ -42,10 +44,10 @@ interface Props extends WithTranslation {
}
// @ts-ignore
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
addBackground: {
marginRight: `${theme.spacing(2)}px`
marginRight: theme.spacing(2)
},
button: {
display: 'none'
@ -55,8 +57,8 @@ const useStyles = makeStyles((theme: any) => {
fontWeight: '600',
lineHeight: '20px',
marginLeft: '-10px',
marginTop: `${theme.spacing(3)}px`,
marginBottom: `${theme.spacing(2)}px`,
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
color: '#669aec',
display: 'inline-flex',
cursor: 'pointer'
@ -78,7 +80,7 @@ function UploadImageButton({
storedImages,
t
}: Props) {
const classes = useStyles();
const { classes } = useStyles();
const uploadImageButton = useRef<HTMLInputElement>(null);
const uploadImageKeyPress = useCallback(e => {
if (uploadImageButton.current && (e.key === ' ' || e.key === 'Enter')) {

22
react/features/virtual-background/components/VirtualBackgroundDialog.tsx
View File

@ -4,11 +4,11 @@ import Spinner from '@atlaskit/spinner';
import Bourne from '@hapi/bourne';
// @ts-ignore
import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
import { makeStyles } from '@material-ui/styles';
import clsx from 'clsx';
import { Theme } from '@mui/material';
import React, { useState, useEffect, useCallback } from 'react';
import { WithTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../app/types';
// @ts-ignore
@ -126,7 +126,7 @@ function _mapStateToProps(state: IState): Object {
const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackground));
const useStyles = makeStyles((theme: any) => {
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
display: 'flex',
@ -152,7 +152,7 @@ const useStyles = makeStyles((theme: any) => {
border: '2px solid #99bbf3'
},
'& .background-option': {
marginTop: `${theme.spacing(2)}px`,
marginTop: theme.spacing(2),
borderRadius: `${theme.shape.borderRadius}px`,
height: '60px',
width: '107px',
@ -295,7 +295,7 @@ function VirtualBackground({
initialOptions,
t
}: Props) {
const classes = useStyles();
const { classes, cx } = useStyles();
const [ previewIsLoaded, setPreviewIsLoaded ] = useState(false);
const [ options, setOptions ] = useState<any>({ ...initialOptions });
const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
@ -575,7 +575,7 @@ function VirtualBackground({
showLabel = { previewIsLoaded }
storedImages = { storedImages } />}
<div
className = { clsx(classes.dialog, { [classes.dialogMarginTop]: previewIsLoaded }) }
className = { cx(classes.dialog, { [classes.dialogMarginTop]: previewIsLoaded }) }
role = 'radiogroup'
tabIndex = { -1 }>
<Tooltip
@ -584,7 +584,7 @@ function VirtualBackground({
<div
aria-checked = { _selectedThumbnail === 'none' }
aria-label = { t('virtualBackground.removeBackground') }
className = { clsx('background-option', 'virtual-background-none', {
className = { cx('background-option', 'virtual-background-none', {
'none-selected': _selectedThumbnail === 'none'
}) }
onClick = { removeBackground }
@ -600,7 +600,7 @@ function VirtualBackground({
<div
aria-checked = { _selectedThumbnail === 'slight-blur' }
aria-label = { t('virtualBackground.slightBlur') }
className = { clsx('background-option', 'slight-blur', {
className = { cx('background-option', 'slight-blur', {
'slight-blur-selected': _selectedThumbnail === 'slight-blur'
}) }
onClick = { enableSlideBlur }
@ -616,7 +616,7 @@ function VirtualBackground({
<div
aria-checked = { _selectedThumbnail === 'blur' }
aria-label = { t('virtualBackground.blur') }
className = { clsx('background-option', 'blur', {
className = { cx('background-option', 'blur', {
'blur-selected': _selectedThumbnail === 'blur'
}) }
onClick = { enableBlur }
@ -633,7 +633,7 @@ function VirtualBackground({
<div
aria-checked = { _selectedThumbnail === 'desktop-share' }
aria-label = { t('virtualBackground.desktopShare') }
className = { clsx('background-option', 'desktop-share', {
className = { cx('background-option', 'desktop-share', {
'desktop-share-selected': _selectedThumbnail === 'desktop-share'
}) }
onClick = { shareDesktop }
@ -675,7 +675,7 @@ function VirtualBackground({
<img
alt = { t('virtualBackground.uploadedImage', { index: index + 1 }) }
aria-checked = { _selectedThumbnail === image.id }
className = { clsx('background-option', {
className = { cx('background-option', {
'thumbnail-selected': _selectedThumbnail === image.id,
'thumbnail': _selectedThumbnail !== image.id
}) }

9
react/features/virtual-background/components/VirtualBackgroundPreview.tsx
View File

@ -1,6 +1,7 @@
/* eslint-disable lines-around-comment */
import Spinner from '@atlaskit/spinner';
import { withStyles } from '@material-ui/core/styles';
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React, { PureComponent } from 'react';
import { WithTranslation } from 'react-i18next';
@ -89,7 +90,7 @@ type State = {
*
* @returns {Object}
*/
const styles = (theme: any) => {
const styles = (theme: Theme) => {
return {
virtualBackgroundPreview: {
'& .video-preview': {
@ -100,7 +101,7 @@ const styles = (theme: any) => {
marginLeft: '-10px',
height: '250px',
width: '570px',
marginBottom: `${theme.spacing(2)}px`,
marginBottom: theme.spacing(2),
zIndex: 2,
'@media (max-width: 632px)': {
@ -112,7 +113,7 @@ const styles = (theme: any) => {
borderRadius: '6px',
backgroundColor: 'transparent',
height: '250px',
marginBottom: `${theme.spacing(2)}px`,
marginBottom: theme.spacing(2),
width: '572px',
position: 'fixed',
zIndex: 2,