ref: Styles refactor (#13196)

Move some styles from SCSS to JSS
Remove unnecessary styles
Remove feedback stars animation option

css/_recording.scss

@@ -197,14 +197,6 @@
         padding-bottom: 10px;
     }
 
-    .helper-link {
-        cursor: pointer;
-        font-weight: bold;
-        display: inline-block;
-        flex-shrink: 0;
-        margin-left: auto;
-    }
-
     .warning-text {
         color:#FFD740;
         font-size: 12px;

css/components/_button-control.scss

@@ -1,101 +0,0 @@
-.button-control {
-    box-sizing: border-box;
-    display: inline-block;
-    border: 1px solid $buttonBorder;
-    vertical-align: baseline;
-    height: 30px;
-    min-width: 60px;
-    padding: 4px 10px;
-    margin: 0;
-    line-height: 1.5em;
-    outline: none;
-    background-color: transparent;
-    float: right;
-    font-size: 14px;
-    margin-left: 10px;
-    color: $buttonColor;
-    font-weight: $buttonFontWeight;
-    @include transition(background-color .1s ease-out);
-
-    &[disabled] {
-        color: #666;
-        cursor: default;
-    }
-
-    &_full-width {
-        margin: 0;
-        width: 100%;
-    }
-
-    &:hover {
-        border: 1px solid $buttonHoverBorder;
-        background-color: $buttonHoverBackground;
-        @include transition(background-color .1s ease-in);
-    }
-
-    &:active {
-        @include box-shadow(0, 0, 1px, $buttonShadowColor, true);
-    }
-
-    &_light {
-        color: $defaultDarkColor;
-        background-color: $buttonLightBackground;
-        border: 1px solid $buttonLightBorder;
-
-        &:hover {
-            border: 1px solid $buttonLightHoverBorder;
-            background-color: $buttonLightHoverBackground;
-        }
-    }
-
-    &_link {
-        color: $buttonLinkColor;
-        background-color: $buttonLinkBackground;
-
-        &:hover {
-            background-color: $buttonLinkBackground;
-        }
-    }
-
-    &_overlay {
-        color: $primaryButtonColor;
-        background-color: $overlayButtonBg;
-        border-radius: 2px;
-        border: none;
-
-        &:hover {
-            background-color: $primaryButtonBackground;
-            border: none;
-        }
-    }
-
-    &_primary {
-        background-color: $primaryButtonBackground;
-        border: 1px solid $primaryButtonBackground;
-        color: $primaryButtonColor !important;
-        font-weight: $primaryButtonFontWeight;
-
-        &:hover {
-            border: 1px solid $primaryButtonHoverBackground;
-            background-color: $primaryButtonHoverBackground;
-        }
-
-        &[disabled] {
-            color: $primaryButtonColor;
-        }
-    }
-
-    &_close {
-        color: $defaultFontColor;
-    }
-    &_submit {
-        color: $linkFontColor;
-        &:hover {
-            color: $linkHoverFontColor;
-        }
-    }
-
-    &_center {
-        float: none !important;
-    }
-}

css/components/_form-control.scss

@@ -1,49 +0,0 @@
-.form-control {
-    padding: $formPadding 0;
-
-    &:first-child {
-        padding-top: 0;
-    }
-
-    &:last-child {
-        padding-bottom: 0;
-    }
-
-    &__text {
-        margin: 8px 0;
-        font-size: 1em
-    }
-
-    &__label {
-        font-size: 1em;
-        font-weight: $labelFontWeight;
-    }
-
-    &__em {
-        color: $inputControlEmColor;
-    }
-
-    &__container {
-        position: relative;
-        width: 100%;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        @include flex();
-
-        .button-control {
-            margin: 1px 0 1px 10px;
-        }
-    }
-
-    &__right {
-        position: absolute;
-        right: 0;
-    }
-}
-
-/**
- * Set a specific color for read only style.
- */
-input:read-only {
-    color: $readOnlyInputColor;
-}

css/components/_input-control.scss

@@ -1,29 +0,0 @@
-.input-control {
-    @include transition(all .2s ease-in);
-    display: inline-block;
-    width: 100%;
-    padding: 5px 7px;
-    border-radius: $borderRadius;
-    line-height: 32px;
-    height: 32px;
-    text-align: left;
-    margin-bottom: 8px;
-
-    &:last-child {
-        margin-bottom: inherit;
-    }
-
-    &::selection {
-        background-color: $defaultDarkSelectionColor;
-    }
-
-
-    &.error {
-        color: $errorColor;
-        border-color: $errorColor;
-    }
-}
-
-@include placeholder {
-    color: $placeHolderColor;
-}

css/components/_link.scss

@@ -1,20 +0,0 @@
-.link {
-    cursor: pointer;
-    color: $linkFontColor;
-    @include transition(color .1s ease-out);
-
-    &:hover {
-        color: $linkHoverFontColor;
-        text-decoration: underline;
-        @include transition(color .1s ease-in);
-    }
-}
-
-/**
- * Helper links are links that are meant to open a documentation page or more
- * detailed info.
- */
-.helper-link {
-    @extend .link;
-    font-size: 12px;
-}

css/main.scss

@@ -33,8 +33,6 @@ $flagsImagePath: "../images/";
 @import 'mini_toolbox';
 @import 'modals/desktop-picker/desktop-picker';
 @import 'modals/dialog';
-@import 'modals/embed-meeting/embed-meeting';
-@import 'modals/feedback/feedback';
 @import 'modals/invite/info';
 @import 'modals/screen-share/share-audio';
 @import 'modals/screen-share/share-screen-warning';
@@ -51,10 +49,6 @@ $flagsImagePath: "../images/";
 @import 'welcome_page_settings_toolbar';
 @import 'toolbars';
 @import 'redirect_page';
-@import 'components/form-control';
-@import 'components/link';
-@import 'components/button-control';
-@import 'components/input-control';
 @import 'components/input-slider';
 @import '404';
 @import 'policy';

css/modals/embed-meeting/_embed-meeting.scss

@@ -1,42 +0,0 @@
-.embed-meeting {
-    &-dialog {
-        display: flex;
-        flex-direction: column;
-    }
-
-    &-copy {
-        color: white;
-        font-size: 15px;
-        margin-left: auto;
-        margin-top: 16px;
-    }
-
-    &-code {
-        background: transparent;
-        border: 1px solid #A4B8D1;
-        color: white;
-        font-size: 15px;
-        height: 165px;
-        line-height: 24px;
-        padding: 8px;
-        width: 100%;
-        resize: vertical;
-    }
-
-    &-trigger {
-        display: flex;
-        align-items: center;
-        padding: 8px 8px 8px 16px;
-        margin-top: 24px;
-        width: calc(100% - 24px);
-        height: 24px;
-        background: #2A3A4B;
-        border: 1px solid #5E6D7A;
-        border-radius: 4px;
-        cursor: pointer;
-
-        .jitsi-icon {
-            margin-right: 20px;
-        }
-    }
-}

css/modals/feedback/_feedback.scss

@@ -1,46 +0,0 @@
-@-webkit-keyframes shake-rotate {
-    0% {
-        -webkit-transform:scale(1) rotate(0deg);
-        transform:scale(1) rotate(0deg)
-    }
-
-    50% {
-        -webkit-transform:scale(.8) rotate(-5deg);
-        transform:scale(.8) rotate(-5deg)
-    }
-
-    to {
-        -webkit-transform:scale(1) rotate(3deg);
-        transform:scale(1) rotate(3deg)
-    }
-}
-
-@keyframes shake-rotate {
-    0% {
-        -webkit-transform:scale(1) rotate(0deg);
-        transform:scale(1) rotate(0deg)
-    }
-
-    50% {
-        -webkit-transform:scale(.8) rotate(-5deg);
-        transform:scale(.8) rotate(-5deg)
-    }
-
-    to {
-        -webkit-transform:scale(1) rotate(3deg);
-        transform:scale(1) rotate(3deg)
-    }
-}
-
-.shake-rotate {
-    display: inline-block;
-
-    -webkit-animation-duration: .4s;
-    animation-duration: .4s;
-    -webkit-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
-    -webkit-animation-name: shake-rotate;
-    animation-name: shake-rotate;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out
-}

interface_config.js

@@ -70,7 +70,8 @@ var interfaceConfig = {
 
     ENABLE_DIAL_OUT: true,
 
-    ENABLE_FEEDBACK_ANIMATION: false, // Enables feedback star animation.
+    // DEPRECATED. Animation no longer supported.
+    // ENABLE_FEEDBACK_ANIMATION: false,
 
     FILM_STRIP_MAX_HEIGHT: 120,
 

react/features/app/components/App.web.tsx

@@ -1,5 +1,5 @@
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import GlobalStyles from '../../base/ui/components/GlobalStyles.web';
 import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider.web';
@@ -31,9 +31,9 @@ export class App extends AbstractApp {
      */
     _createExtraElement() {
         return (
-            <Fragment>
+            <JitsiThemeProvider>
                 <OverlayContainer />
-            </Fragment>
+            </JitsiThemeProvider>
         );
     }
 

react/features/connection-stats/components/ConnectionStatsTable.tsx

@@ -234,7 +234,21 @@ const useStyles = makeStyles()(theme => {
         status: {
             fontWeight: 'bold'
         },
-        upload: {}
+        upload: {},
+        link: {
+            cursor: 'pointer',
+            color: theme.palette.link01,
+            transition: 'color .2s ease',
+
+            '&:hover': {
+                color: theme.palette.link01Hover,
+                textDecoration: 'underline'
+            },
+
+            '&:active': {
+                color: theme.palette.link01Active
+            }
+        }
     };
 });
 
@@ -670,7 +684,7 @@ const ConnectionStatsTable = ({
     const _renderSaveLogs = () => (
         <span>
             <a
-                className = 'savelogs link'
+                className = { cx(classes.link, 'savelogs') }
                 onClick = { onSaveLogs }
                 role = 'button'
                 tabIndex = { 0 }>
@@ -688,7 +702,7 @@ const ConnectionStatsTable = ({
 
         return (
             <a
-                className = 'showmore link'
+                className = { cx(classes.link, 'showmore') }
                 onClick = { onShowMore }
                 role = 'button'
                 tabIndex = { 0 }>

react/features/embed-meeting/components/EmbedMeetingDialog.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../app/types';
 import CopyButton from '../../base/buttons/CopyButton.web';
@@ -17,12 +18,26 @@ interface IProps extends WithTranslation {
     url: string;
 }
 
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            paddingTop: theme.spacing(1)
+        },
+
+        button: {
+            marginTop: theme.spacing(3)
+        }
+    };
+});
+
 /**
  * Allow users to embed a jitsi meeting in an iframe.
  *
  * @returns {React$Element<any>}
  */
 function EmbedMeeting({ t, url }: IProps) {
+    const { classes } = useStyles();
+
     /**
      * Get the embed code for a jitsi meeting.
      *
@@ -37,7 +52,7 @@ function EmbedMeeting({ t, url }: IProps) {
             cancel = {{ hidden: true }}
             ok = {{ hidden: true }}
             titleKey = { 'embedMeeting.title' }>
-            <div className = 'embed-meeting-dialog'>
+            <div className = { classes.container }>
                 <Input
                     accessibilityLabel = { t('dialog.embedMeeting') }
                     readOnly = { true }
@@ -45,7 +60,7 @@ function EmbedMeeting({ t, url }: IProps) {
                     value = { getEmbedCode() } />
                 <CopyButton
                     aria-label = { t('addPeople.copyLink') }
-                    className = 'embed-meeting-copy'
+                    className = { classes.button }
                     displayedText = { t('dialog.copy') }
                     textOnCopySuccess = { t('dialog.copied') }
                     textOnHover = { t('dialog.copy') }

react/features/embed-meeting/components/EmbedMeetingTrigger.js

@@ -1,70 +0,0 @@
-// @flow
-
-/* eslint-disable react/jsx-no-bind */
-
-import React from 'react';
-import { connect } from 'react-redux';
-
-import { openDialog } from '../../base/dialog';
-import { translate } from '../../base/i18n/functions';
-
-import EmbedMeetingDialog from './EmbedMeetingDialog';
-
-type Props = {
-
-    /**
-     * Open the embed meeting dialog.
-     */
-    openEmbedDialog: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function,
-};
-
-/**
- * Component meant to trigger showing the EmbedMeetingDialog.
- *
- * @returns {React$Element<any>}
- */
-function EmbedMeetingTrigger({ t, openEmbedDialog }: Props) {
-    /**
-     * Handles opening the embed dialog.
-     *
-     * @returns {void}
-     */
-    function onClick() {
-        openEmbedDialog(EmbedMeetingDialog);
-    }
-
-    /**
-     * KeyPress handler for accessibility.
-     *
-     * @param {React.KeyboardEventHandler<HTMLDivElement>} e - The key event to handle.
-     *
-     * @returns {void}
-     */
-    function onKeyPress(e) {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            onClick();
-        }
-    }
-
-    return (
-        <div
-            aria-label = { t('embedMeeting.title') }
-            className = 'embed-meeting-trigger'
-            onClick = { onClick }
-            onKeyPress = { onKeyPress }
-            role = 'button'
-            tabIndex = { 0 }>
-            {t('embedMeeting.title')}
-        </div>
-    );
-}
-
-const mapDispatchToProps = { openEmbedDialog: openDialog };
-
-export default translate(connect(null, mapDispatchToProps)(EmbedMeetingTrigger));

react/features/feedback/components/FeedbackDialog.web.tsx

@@ -70,9 +70,6 @@ const styles = (theme: Theme) => {
     };
 };
 
-const scoreAnimationClass
-    = interfaceConfig.ENABLE_FEEDBACK_ANIMATION ? 'shake-rotate' : '';
-
 /**
  * The scores to display for selecting. The score is the index in the array and
  * the value of the index is a translation key used for display in the dialog.
@@ -282,7 +279,7 @@ class FeedbackDialog extends Component<IProps, IState> {
                 const isFilled = index <= scoreToDisplayAsSelected;
                 const activeClass = isFilled ? 'active' : '';
                 const className
-                    = `${classes.starBtn} ${scoreAnimationClass} ${activeClass}`;
+                    = `${classes.starBtn} ${activeClass}`;
 
                 return (
                     <span

react/features/overlay/components/web/ReloadButton.tsx

@@ -1,20 +1,14 @@
-import React, { Component } from 'react';
-import { WithTranslation } from 'react-i18next';
-import { connect } from 'react-redux';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { reloadNow } from '../../../app/actions.web';
-import { IStore } from '../../../app/types';
-import { translate } from '../../../base/i18n/functions';
+import Button from '../../../base/ui/components/web/Button';
 
 /**
  * The type of the React {@code Component} props of {@link ReloadButton}.
  */
-interface IProps extends WithTranslation {
-
-    /**
-     * Reloads the page.
-     */
-    _reloadNow: () => void;
+interface IProps {
 
     /**
      * The translation key for the text in the button.
@@ -22,54 +16,28 @@ interface IProps extends WithTranslation {
     textKey: string;
 }
 
-/**
- * Implements a React Component for button for the overlays that will reload
- * the page.
- */
-class ReloadButton extends Component<IProps> {
-    /**
-     * Renders the button for relaod the page if necessary.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    render() {
-        const className
-            = 'button-control button-control_overlay button-control_center';
-
-        /* eslint-disable react/jsx-handler-names */
-
-        return (
-            <button
-                className = { className }
-                onClick = { this.props._reloadNow }>
-                { this.props.t(this.props.textKey) }
-            </button>
-        );
-
-        /* eslint-enable react/jsx-handler-names */
-    }
-}
-
-/**
- * Maps part of redux actions to component's props.
- *
- * @param {Function} dispatch - Redux's {@code dispatch} function.
- * @private
- * @returns {Object}
- */
-function _mapDispatchToProps(dispatch: IStore['dispatch']) {
+const useStyles = makeStyles()(theme => {
     return {
-        /**
-         * Dispatches the redux action to reload the page.
-         *
-         * @protected
-         * @returns {Object} Dispatched action.
-         */
-        _reloadNow() {
-            dispatch(reloadNow());
+        button: {
+            margin: `${theme.spacing(2)} auto 0`
         }
     };
-}
+});
 
-export default translate(connect(undefined, _mapDispatchToProps)(ReloadButton));
+const ReloadButton = ({ textKey }: IProps) => {
+    const dispatch = useDispatch();
+    const { classes } = useStyles();
+
+    const onClick = useCallback(() => {
+        dispatch(reloadNow());
+    }, []);
+
+    return (
+        <Button
+            className = { classes.button }
+            labelKey = { textKey }
+            onClick = { onClick } />
+    );
+};
+
+export default ReloadButton;

react/features/recording/components/LiveStream/AbstractStreamKeyForm.ts

@@ -38,6 +38,8 @@ export interface IProps extends WithTranslation {
      */
     _liveStreaming: LiveStreamingProps;
 
+    classes: any;
+
     /**
      * Callback invoked when the entered stream key has changed.
      */

react/features/recording/components/LiveStream/web/StreamKeyForm.tsx

@@ -1,12 +1,37 @@
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../../base/i18n/functions';
+import { withPixelLineHeight } from '../../../../base/styles/functions.web';
 import Input from '../../../../base/ui/components/web/Input';
 import AbstractStreamKeyForm, {
     IProps, _mapStateToProps
 } from '../AbstractStreamKeyForm';
 
+const styles = (theme: Theme) => {
+    return {
+        helperLink: {
+            cursor: 'pointer',
+            color: theme.palette.link01,
+            transition: 'color .2s ease',
+            ...withPixelLineHeight(theme.typography.labelBold),
+            marginLeft: 'auto',
+            marginTop: theme.spacing(1),
+
+            '&:hover': {
+                textDecoration: 'underline',
+                color: theme.palette.link01Hover
+            },
+
+            '&:active': {
+                color: theme.palette.link01Active
+            }
+        }
+    };
+};
+
 /**
  * A React Component for entering a key for starting a YouTube live stream.
  *
@@ -35,7 +60,7 @@ class StreamKeyForm extends AbstractStreamKeyForm<IProps> {
      * @returns {ReactElement}
      */
     render() {
-        const { t, value } = this.props;
+        const { classes, t, value } = this.props;
 
         return (
             <div className = 'stream-key-form'>
@@ -59,7 +84,7 @@ class StreamKeyForm extends AbstractStreamKeyForm<IProps> {
                         { this.props._liveStreaming.helpURL
                             ? <a
                                 aria-label = { t('liveStreaming.streamIdHelp') }
-                                className = 'helper-link'
+                                className = { classes.helperLink }
                                 onClick = { this._onOpenHelp }
                                 onKeyPress = { this._onOpenHelpKeyPress }
                                 role = 'link'
@@ -70,14 +95,14 @@ class StreamKeyForm extends AbstractStreamKeyForm<IProps> {
                         }
                     </div>
                     <a
-                        className = 'helper-link'
+                        className = { classes.helperLink }
                         href = { this.props._liveStreaming.termsURL }
                         rel = 'noopener noreferrer'
                         target = '_blank'>
                         { t('liveStreaming.youtubeTerms') }
                     </a>
                     <a
-                        className = 'helper-link'
+                        className = { classes.helperLink }
                         href = { this.props._liveStreaming.dataPrivacyURL }
                         rel = 'noopener noreferrer'
                         target = '_blank'>
@@ -116,4 +141,4 @@ class StreamKeyForm extends AbstractStreamKeyForm<IProps> {
     }
 }
 
-export default translate(connect(_mapStateToProps)(StreamKeyForm));
+export default translate(connect(_mapStateToProps)(withStyles(styles)(StreamKeyForm)));