diff --git a/css/_e2ee.scss b/css/_e2ee.scss deleted file mode 100644 index 192feac268..0000000000 --- a/css/_e2ee.scss +++ /dev/null @@ -1,21 +0,0 @@ -#e2ee-section { - display: flex; - flex-direction: column; - - .description { - font-size: 13px; - margin: 15px 0; - } - - .control-row { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 15px; - - label { - font-size: 14px; - font-weight: bold; - } - } -} \ No newline at end of file diff --git a/css/_notice.scss b/css/_notice.scss deleted file mode 100644 index cbd6c5159d..0000000000 --- a/css/_notice.scss +++ /dev/null @@ -1,15 +0,0 @@ -.notice { - position: absolute; - left: 50%; - z-index: $zindex3; - margin-top: 6px; - - @include transform(translateX(-50%)); - - &__message { - background-color: #000000; - color: white; - padding: 3px; - border-radius: 5px; - } -} diff --git a/css/main.scss b/css/main.scss index 8c522b2085..4ad2078a92 100644 --- a/css/main.scss +++ b/css/main.scss @@ -37,7 +37,6 @@ $flagsImagePath: "../images/"; @import 'modals/screen-share/share-audio'; @import 'modals/screen-share/share-screen-warning'; @import 'videolayout_default'; -@import 'notice'; @import 'subject'; @import 'popup_menu'; @import 'recording'; @@ -73,7 +72,6 @@ $flagsImagePath: "../images/"; @import 'premeeting/main'; @import 'modals/invite/invite_more'; @import 'modals/security/security'; -@import 'e2ee'; @import 'responsive'; @import 'drawer'; @import 'participants-pane'; diff --git a/react/features/conference/components/web/Notice.tsx b/react/features/conference/components/web/Notice.tsx index 953a91af6a..7832aaa8b4 100644 --- a/react/features/conference/components/web/Notice.tsx +++ b/react/features/conference/components/web/Notice.tsx @@ -1,43 +1,43 @@ import React from 'react'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; +import { makeStyles } from 'tss-react/mui'; import { IReduxState } from '../../../app/types'; -interface IProps { - _message?: string; -} +const useStyles = makeStyles()(theme => { + return { + notice: { + position: 'absolute', + left: '50%', + zIndex: 3, + marginTop: theme.spacing(2), + transform: 'translateX(-50%)' + }, + + message: { + backgroundColor: theme.palette.uiBackground, + color: theme.palette.text01, + padding: '3px', + borderRadius: '5px' + } + }; +}); + +const Notice = () => { + const message = useSelector((state: IReduxState) => state['features/base/config'].noticeMessage); + const { classes } = useStyles(); -const Notice = ({ _message }: IProps) => { - if (!_message) { + if (!message) { return null; } return ( -
- - {_message} +
+ + {message}
); }; -/** - * Maps (parts of) the Redux state to the associated - * {@code Notice}'s props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _message: string, - * }} - */ -function _mapStateToProps(state: IReduxState) { - const { - noticeMessage - } = state['features/base/config']; - - return { - _message: noticeMessage - }; -} -export default connect(_mapStateToProps)(Notice); +export default Notice; diff --git a/react/features/e2ee/components/E2EESection.tsx b/react/features/e2ee/components/E2EESection.tsx index 96fdf64251..e245eaed7b 100644 --- a/react/features/e2ee/components/E2EESection.tsx +++ b/react/features/e2ee/components/E2EESection.tsx @@ -1,17 +1,17 @@ -import React, { Component } from 'react'; -import { WithTranslation } from 'react-i18next'; +import React, { useCallback, useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { connect } from 'react-redux'; +import { makeStyles } from 'tss-react/mui'; import { createE2EEEvent } from '../../analytics/AnalyticsEvents'; import { sendAnalytics } from '../../analytics/functions'; import { IReduxState, IStore } from '../../app/types'; -import { translate } from '../../base/i18n/functions'; import Switch from '../../base/ui/components/web/Switch'; import { toggleE2EE } from '../actions'; import { MAX_MODE } from '../constants'; import { doesEveryoneSupportE2EE } from '../functions'; -interface IProps extends WithTranslation { +interface IProps { /** * The resource for the description, computed based on the maxMode and whether the switch is toggled or not. @@ -44,89 +44,53 @@ interface IProps extends WithTranslation { dispatch: IStore['dispatch']; } -interface IState { - - /** - * True if the switch is toggled on. - */ - toggled: boolean; -} +const useStyles = makeStyles()(() => { + return { + e2eeSection: { + display: 'flex', + flexDirection: 'column' + }, + + description: { + fontSize: '13px', + margin: '15px 0' + }, + + controlRow: { + display: 'flex', + justifyContent: 'space-between', + marginTop: '15px', + + '& label': { + fontSize: '14px', + fontWeight: 'bold' + } + } + }; +}); /** * Implements a React {@code Component} for displaying a security dialog section with a field * for setting the E2EE key. * - * @augments Component + * @param {IProps} props - Component's props. + * @returns {JSX} */ -class E2EESection extends Component { - /** - * Implements React's {@link Component#getDerivedStateFromProps()}. - * - * @inheritdoc - */ - static getDerivedStateFromProps(props: IProps, state: IState) { - if (props._toggled !== state.toggled) { - - return { - toggled: props._toggled - }; - } - - return null; - } - - /** - * Instantiates a new component. - * - * @inheritdoc - */ - constructor(props: IProps) { - super(props); - - this.state = { - toggled: false - }; - - // Bind event handlers so they are only bound once for every instance. - this._onToggle = this._onToggle.bind(this); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { _descriptionResource, _enabled, _e2eeLabels, _everyoneSupportE2EE, t } = this.props; - const { toggled } = this.state; - const description = _e2eeLabels?.description || t(_descriptionResource ?? ''); - const label = _e2eeLabels?.label || t('dialog.e2eeLabel'); - const warning = _e2eeLabels?.warning || t('dialog.e2eeWarning'); - - return ( -
-

- { description } - { !_everyoneSupportE2EE &&
} - { !_everyoneSupportE2EE && warning } -

-
- - -
-
- ); - } +const E2EESection = ({ + _descriptionResource, + _enabled, + _e2eeLabels, + _everyoneSupportE2EE, + _toggled, + dispatch +}: IProps) => { + const { classes } = useStyles(); + const { t } = useTranslation(); + const [ toggled, setToggled ] = useState(_toggled ?? false); + + useEffect(() => { + setToggled(_toggled); + }, [ _toggled ]); /** * Callback to be invoked when the user toggles E2EE on or off. @@ -134,17 +98,44 @@ class E2EESection extends Component { * @private * @returns {void} */ - _onToggle() { - const newValue = !this.state.toggled; + const _onToggle = useCallback(() => { + const newValue = !toggled; - this.setState({ - toggled: newValue - }); + setToggled(newValue); sendAnalytics(createE2EEEvent(`enabled.${String(newValue)}`)); - this.props.dispatch(toggleE2EE(newValue)); - } -} + dispatch(toggleE2EE(newValue)); + }, [ toggled ]); + + const description = _e2eeLabels?.description || t(_descriptionResource ?? ''); + const label = _e2eeLabels?.label || t('dialog.e2eeLabel'); + const warning = _e2eeLabels?.warning || t('dialog.e2eeWarning'); + + return ( +
+

+ {description} + {!_everyoneSupportE2EE &&
} + {!_everyoneSupportE2EE && warning} +

+
+ + +
+
+ ); +}; /** * Maps (parts of) the Redux state to the associated props for this component. @@ -180,4 +171,4 @@ function mapStateToProps(state: IReduxState) { }; } -export default translate(connect(mapStateToProps)(E2EESection)); +export default connect(mapStateToProps)(E2EESection);