ref(styles) Move some SCSS to JSS (#13568)

css/_drawer.scss

@@ -1,62 +0,0 @@
-.drawer-portal {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 351;
-    border-radius: 16px 16px 0 0;
-
-    &.notification-portal {
-        z-index: 901;
-    }
-}
-
-.drawer-portal::after {
-    content: '';
-    background-color: #141414;
-    margin-bottom: env(safe-area-inset-bottom, 0);
-}
-
-.drawer-menu-container {
-    height: 100vh;
-    display: flex;
-    align-items: flex-end;
-}
-
-.drawer-menu {
-    overflow-y: auto;
-    margin-bottom: env(safe-area-inset-bottom, 0);
-    width: 100%;
-
-    &#{&} .overflow-menu {
-        margin: auto;
-        font-size: 1.2em;
-        list-style-type: none;
-        padding: 0;
-        height: calc(80vh - 144px - 64px);
-        overflow-y: auto;
-
-        .overflow-menu-item {
-            box-sizing: border-box;
-            height: 48px;
-            padding: 12px 16px;
-
-            align-items: center;
-            color: #fff;
-            cursor: pointer;
-            display: flex;
-            font-size: 16px;
-
-            div {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-            }
-
-            &.disabled {
-                cursor: initial;
-                color: #3b475c;
-            }
-        }
-    }
-}

css/_participants-pane.scss

@@ -1,42 +1,3 @@
-.participants_pane {
-    background-color: #141414;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    transition: width .16s ease-in-out;
-    width: 315px;
-    z-index: $zindex0;
-}
-
-.participants_pane-content {
-    display: flex;
-    flex-direction: column;
-    font-weight: 600;
-    height: 100%;
-    width: 315px;
-
-    & > *:first-child,
-    & > *:last-child {
-        flex-shrink: 0;
-    }
-}
-
-@media (max-width: 580px) {
-    .participants_pane {
-        height: 100vh;
-        height: -webkit-fill-available;
-        left: 0;
-        position: fixed;
-        right: 0;
-        top: 0;
-        width: auto;
-    }
-
-    .participants_pane-content {
-        width: 100%;
-    }
-}
-
 .jitsi-icon {
     &-dominant-speaker {
         background-color: #1EC26A;

css/main.scss

@@ -73,7 +73,6 @@ $flagsImagePath: "../images/";
 @import 'modals/invite/invite_more';
 @import 'modals/security/security';
 @import 'responsive';
-@import 'drawer';
 @import 'participants-pane';
 @import 'reactions-menu';
 @import 'plan-limit';

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

@@ -30,6 +30,33 @@ import MeetingParticipants from './MeetingParticipants';
 
 const useStyles = makeStyles()(theme => {
     return {
+        participantsPane: {
+            backgroundColor: theme.palette.ui01,
+            flexShrink: 0,
+            overflow: 'hidden',
+            position: 'relative',
+            transition: 'width .16s ease-in-out',
+            width: '315px',
+            zIndex: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            fontWeight: 600,
+            height: '100%',
+
+            [[ '& > *:first-child', '& > *:last-child' ] as any]: {
+                flexShrink: 0
+            },
+
+            '@media (max-width: 580px)': {
+                height: '100vh',
+                position: 'fixed',
+                left: 0,
+                right: 0,
+                top: 0,
+                width: '100%'
+            }
+        },
+
         container: {
             boxSizing: 'border-box',
             flex: 1,
@@ -87,7 +114,7 @@ const useStyles = makeStyles()(theme => {
 });
 
 const ParticipantsPane = () => {
-    const { classes } = useStyles();
+    const { classes, cx } = useStyles();
     const paneOpen = useSelector(getParticipantsPaneOpen);
     const isBreakoutRoomsSupported = useSelector((state: IReduxState) => state['features/base/conference'])
         .conference?.getBreakoutRooms()?.isSupported();
@@ -136,49 +163,47 @@ const ParticipantsPane = () => {
     }
 
     return (
-        <div className = 'participants_pane'>
-            <div className = 'participants_pane-content'>
-                <div className = { classes.header }>
-                    <ClickableIcon
-                        accessibilityLabel = { t('participantsPane.close', 'Close') }
-                        icon = { IconCloseLarge }
-                        onClick = { onClosePane } />
-                </div>
-                <div className = { classes.container }>
-                    <LobbyParticipants />
-                    <br className = { classes.antiCollapse } />
-                    <MeetingParticipants
-                        searchString = { searchString }
-                        setSearchString = { setSearchString } />
-                    {isBreakoutRoomsSupported && <RoomList searchString = { searchString } />}
-                    {showAddRoomButton && <AddBreakoutRoomButton />}
-                </div>
-                {showFooter && (
-                    <div className = { classes.footer }>
-                        {showMuteAllButton && (
+        <div className = { cx('participants_pane', classes.participantsPane) }>
+            <div className = { classes.header }>
+                <ClickableIcon
+                    accessibilityLabel = { t('participantsPane.close', 'Close') }
+                    icon = { IconCloseLarge }
+                    onClick = { onClosePane } />
+            </div>
+            <div className = { classes.container }>
+                <LobbyParticipants />
+                <br className = { classes.antiCollapse } />
+                <MeetingParticipants
+                    searchString = { searchString }
+                    setSearchString = { setSearchString } />
+                {isBreakoutRoomsSupported && <RoomList searchString = { searchString } />}
+                {showAddRoomButton && <AddBreakoutRoomButton />}
+            </div>
+            {showFooter && (
+                <div className = { classes.footer }>
+                    {showMuteAllButton && (
+                        <Button
+                            accessibilityLabel = { t('participantsPane.actions.muteAll') }
+                            labelKey = { 'participantsPane.actions.muteAll' }
+                            onClick = { onMuteAll }
+                            type = { BUTTON_TYPES.SECONDARY } />
+                    )}
+                    {showMoreActionsButton && (
+                        <div className = { classes.footerMoreContainer }>
                             <Button
-                                accessibilityLabel = { t('participantsPane.actions.muteAll') }
-                                labelKey = { 'participantsPane.actions.muteAll' }
-                                onClick = { onMuteAll }
+                                accessibilityLabel = { t('participantsPane.actions.moreModerationActions') }
+                                icon = { IconDotsHorizontal }
+                                id = 'participants-pane-context-menu'
+                                onClick = { onToggleContext }
                                 type = { BUTTON_TYPES.SECONDARY } />
-                        )}
-                        {showMoreActionsButton && (
-                            <div className = { classes.footerMoreContainer }>
-                                <Button
-                                    accessibilityLabel = { t('participantsPane.actions.moreModerationActions') }
-                                    icon = { IconDotsHorizontal }
-                                    id = 'participants-pane-context-menu'
-                                    onClick = { onToggleContext }
-                                    type = { BUTTON_TYPES.SECONDARY } />
-                                <FooterContextMenu
-                                    isOpen = { contextOpen }
-                                    onDrawerClose = { onDrawerClose }
-                                    onMouseLeave = { onToggleContext } />
-                            </div>
-                        )}
-                    </div>
-                )}
-            </div>
+                            <FooterContextMenu
+                                isOpen = { contextOpen }
+                                onDrawerClose = { onDrawerClose }
+                                onMouseLeave = { onToggleContext } />
+                        </div>
+                    )}
+                </div>
+            )}
         </div>
     );
 };

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

@@ -36,10 +36,50 @@ interface IProps {
 
 const useStyles = makeStyles()(theme => {
     return {
+        drawerMenuContainer: {
+            height: '100vh',
+            display: 'flex',
+            alignItems: 'flex-end'
+        },
+
         drawer: {
             backgroundColor: theme.palette.ui01,
             maxHeight: `calc(${DRAWER_MAX_HEIGHT})`,
-            borderRadius: '24px 24px 0 0'
+            borderRadius: '24px 24px 0 0',
+            overflowY: 'auto',
+            marginBottom: 'env(safe-area-inset-bottom, 0)',
+            width: '100%',
+
+            '& .overflow-menu': {
+                margin: 'auto',
+                fontSize: '1.2em',
+                listStyleType: 'none',
+                padding: 0,
+                height: 'calc(80vh - 144px - 64px)',
+                overflowY: 'auto',
+
+                '& .overflow-menu-item': {
+                    boxSizing: 'border-box',
+                    height: '48px',
+                    padding: '12px 16px',
+                    alignItems: 'center',
+                    color: theme.palette.text01,
+                    cursor: 'pointer',
+                    display: 'flex',
+                    fontSize: '16px',
+
+                    '& div': {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center'
+                    },
+
+                    '&.disabled': {
+                        cursor: 'initial',
+                        color: '#3b475c'
+                    }
+                }
+            }
         }
     };
 });
@@ -56,7 +96,7 @@ function Drawer({
     isOpen,
     onClose
 }: IProps) {
-    const { classes: styles } = useStyles();
+    const { classes, cx } = useStyles();
 
     /**
      * Handles clicks within the menu, preventing the propagation of the click event.
@@ -96,11 +136,11 @@ function Drawer({
     return (
         isOpen ? (
             <div
-                className = 'drawer-menu-container'
+                className = { classes.drawerMenuContainer }
                 onClick = { handleOutsideClick }
                 onKeyDown = { handleEscKey }>
                 <div
-                    className = { `drawer-menu ${styles.drawer} ${className}` }
+                    className = { cx(classes.drawer, className) }
                     onClick = { handleInsideClick }>
                     <FocusOn
                         returnFocus = {

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

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import DialogPortal from './DialogPortal';
 
@@ -15,6 +16,29 @@ interface IProps {
     className?: string;
 }
 
+const useStyles = makeStyles()(theme => {
+    return {
+        portal: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 351,
+            borderRadius: '16px 16px 0 0',
+
+            '&.notification-portal': {
+                zIndex: 901
+            },
+
+            '&::after': {
+                content: '',
+                backgroundColor: theme.palette.ui01,
+                marginBottom: 'env(safe-area-inset-bottom, 0)'
+            }
+        }
+    };
+});
+
 /**
  * Component meant to render a drawer at the bottom of the screen,
  * by creating a portal containing the component's children.
@@ -22,8 +46,10 @@ interface IProps {
  * @returns {ReactElement}
  */
 function JitsiPortal({ children, className }: IProps) {
+    const { classes, cx } = useStyles();
+
     return (
-        <DialogPortal className = { `drawer-portal ${className ?? ''}` }>
+        <DialogPortal className = { cx(classes.portal, className) }>
             { children }
         </DialogPortal>
     );