ref(styles) Move some styles from SCSS to JSS (#13565)

css/_e2ee.scss

@@ -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;
-        }
-    }
-}

css/_notice.scss

@@ -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;
-    }
-}

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';

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 (
-        <div className = 'notice'>
-            <span className = 'notice__message' >
-                {_message}
+        <div className = { classes.notice }>
+            <span className = { classes.message } >
+                {message}
             </span>
         </div>
     );
 };
 
-/**
- * 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;

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<IProps, IState> {
-    /**
-     * 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 (
-            <div id = 'e2ee-section'>
-                <p
-                    aria-live = 'polite'
-                    className = 'description'
-                    id = 'e2ee-section-description'>
-                    { description }
-                    { !_everyoneSupportE2EE && <br /> }
-                    { !_everyoneSupportE2EE && warning }
-                </p>
-                <div className = 'control-row'>
-                    <label htmlFor = 'e2ee-section-switch'>
-                        { label }
-                    </label>
-                    <Switch
-                        checked = { toggled }
-                        disabled = { !_enabled }
-                        id = 'e2ee-section-switch'
-                        onChange = { this._onToggle } />
-                </div>
-            </div>
-        );
-    }
+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<IProps, IState> {
      * @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 (
+        <div
+            className = { classes.e2eeSection }
+            id = 'e2ee-section'>
+            <p
+                aria-live = 'polite'
+                className = { classes.description }
+                id = 'e2ee-section-description'>
+                {description}
+                {!_everyoneSupportE2EE && <br />}
+                {!_everyoneSupportE2EE && warning}
+            </p>
+            <div className = { classes.controlRow }>
+                <label htmlFor = 'e2ee-section-switch'>
+                    {label}
+                </label>
+                <Switch
+                    checked = { toggled }
+                    disabled = { !_enabled }
+                    id = 'e2ee-section-switch'
+                    onChange = { _onToggle } />
+            </div>
+        </div>
+    );
+};
 
 /**
  * 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);