ref(settings-dialog) Refactor styles (#13017)

Remove unused styles
Move some styles to their tab
Convert CalendarTab to TS
Fix mobile styles

react/features/settings/components/web/CalendarTab.js → react/features/settings/components/web/CalendarTab.tsx

-// @flow
-
 import Spinner from '@atlaskit/spinner';
+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';
 
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
+import { IReduxState } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import {
     CALENDAR_TYPE,
     clearCalendarIntegration,
     isCalendarEnabled,
     signIn
+
+    // @ts-ignore
 } from '../../../calendar-sync';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { GoogleSignInButton } from '../../../google-api';
 import logger from '../../logger';
 
-declare var interfaceConfig: Object;
-
 /**
  * The type of the React {@code Component} props of {@link CalendarTab}.
  */
-type Props = {
+interface IProps extends WithTranslation {
 
     /**
      * The name given to this Jitsi Application.
      */
-    _appName: string,
+    _appName: string;
 
     /**
      * Whether or not to display a button to sign in to Google.
      */
-    _enableGoogleIntegration: boolean,
+    _enableGoogleIntegration: boolean;
 
     /**
      * Whether or not to display a button to sign in to Microsoft.
      */
-    _enableMicrosoftIntegration: boolean,
+    _enableMicrosoftIntegration: boolean;
 
     /**
      * The current calendar integration in use, if any.
      */
-    _isConnectedToCalendar: boolean,
+    _isConnectedToCalendar: boolean;
 
     /**
      * The email address associated with the calendar integration in use.
      */
-    _profileEmail: string,
+    _profileEmail?: string;
 
     /**
-     * Invoked to change the configured calendar integration.
+     * CSS classes object.
      */
-    dispatch: Function,
+    classes: any;
 
     /**
-     * Invoked to obtain translated strings.
+     * Invoked to change the configured calendar integration.
      */
-    t: Function
-};
+    dispatch: Function;
+}
 
 /**
  * The type of the React {@code Component} state of {@link CalendarTab}.
  */
-type State = {
+interface IState {
 
     /**
      * Whether or not any third party APIs are being loaded.
      */
-    loading: boolean
+    loading: boolean;
+}
+
+const styles = (theme: Theme) => {
+    return {
+        container: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column' as const,
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            minHeight: '100px',
+            color: theme.palette.text01,
+            ...withPixelLineHeight(theme.typography.bodyShortRegular)
+        },
+
+        button: {
+            marginTop: theme.spacing(4)
+        }
+    };
 };
 
 /**
  *
  * @augments Component
  */
-class CalendarTab extends Component<Props, State> {
+class CalendarTab extends Component<IProps, IState> {
     /**
      * Initializes a new {@code CalendarTab} instance.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
      */
     componentDidMount() {
         this.props.dispatch(bootstrapCalendarIntegration())
-            .catch(err => logger.error('CalendarTab bootstrap failed', err))
+            .catch((err: any) => logger.error('CalendarTab bootstrap failed', err))
             .then(() => this.setState({ loading: false }));
     }
 
      * @returns {ReactElement}
      */
     render() {
+        const { classes } = this.props;
         let view;
 
         if (this.state.loading) {
         }
 
         return (
-            <div className = 'calendar-tab'>
+            <div className = { classes.container }>
                 { view }
             </div>
         );
      * @private
      * @returns {void}
      */
-    _attemptSignIn(type) {
+    _attemptSignIn(type: string) {
         this.props.dispatch(signIn(type));
     }
 
-    _onClickDisconnect: (Object) => void;
-
     /**
      * Dispatches an action to sign out of the currently connected third party
      * used for calendar integration.
         this.props.dispatch(clearCalendarIntegration());
     }
 
-    _onClickGoogle: () => void;
-
     /**
      * Starts the sign in flow for Google calendar integration.
      *
         this._attemptSignIn(CALENDAR_TYPE.GOOGLE);
     }
 
-    _onClickMicrosoft: () => void;
-
     /**
      * Starts the sign in flow for Microsoft calendar integration.
      *
     _renderLoadingState() {
         return (
             <Spinner
+
+                // @ts-ignore
                 isCompleting = { false }
                 size = 'medium' />
         );
             _appName,
             _enableGoogleIntegration,
             _enableMicrosoftIntegration,
+            classes,
             t
         } = this.props;
 
         return (
-            <div>
+            <>
                 <p>
                     { t('settings.calendar.about',
                         { appName: _appName || '' }) }
                 </p>
                 { _enableGoogleIntegration
-                    && <div className = 'calendar-tab-sign-in'>
+                    && <div className = { classes.button }>
                         <GoogleSignInButton
                             onClick = { this._onClickGoogle }
                             text = { t('liveStreaming.signIn') } />
                     </div> }
                 { _enableMicrosoftIntegration
-                    && <div className = 'calendar-tab-sign-in'>
+                    && <div className = { classes.button }>
                         <MicrosoftSignInButton
                             onClick = { this._onClickMicrosoft }
                             text = { t('settings.calendar.microsoftSignIn') } />
                     </div> }
-            </div>
+            </>
         );
     }
 
      * @returns {ReactElement}
      */
     _renderSignOutState() {
-        const { _profileEmail, t } = this.props;
+        const { _profileEmail, classes, t } = this.props;
 
         return (
-            <div>
-                <div className = 'sign-out-cta'>
-                    { t('settings.calendar.signedIn',
+            <>
+                { t('settings.calendar.signedIn',
                         { email: _profileEmail }) }
-                </div>
-                <div className = 'sign-out-cta-button'>
-                    <Button
-                        id = 'calendar_logout'
-                        label = { t('settings.calendar.disconnect') }
-                        onClick = { this._onClickDisconnect } />
-                </div>
-            </div>
+                <Button
+                    className = { classes.button }
+                    id = 'calendar_logout'
+                    label = { t('settings.calendar.disconnect') }
+                    onClick = { this._onClickDisconnect } />
+            </>
         );
     }
 }
  *     _profileEmail: string
  * }}
  */
-function _mapStateToProps(state) {
+function _mapStateToProps(state: IReduxState) {
     const calendarState = state['features/calendar-sync'] || {};
     const {
         googleApiApplicationClientID,
     };
 }
 
-export default translate(connect(_mapStateToProps)(CalendarTab));
+export default withStyles(styles)(translate(connect(_mapStateToProps)(CalendarTab)));

react/features/settings/components/web/NotificationsTab.tsx

     return {
         container: {
             display: 'flex',
-            width: '100%'
+            width: '100%',
+
+            '@media (max-width: 607px)': {
+                flexDirection: 'column' as const
+            }
         },
 
         column: {
+            display: 'flex',
+            flexDirection: 'column' as const,
             flex: 1,
 
             '&:first-child:not(:last-child)': {
-                marginRight: theme.spacing(3)
+                marginRight: theme.spacing(3),
+
+                '@media (max-width: 607px)': {
+                    marginRight: 0,
+                    marginBottom: theme.spacing(3)
+                }
             }
         },
 

react/features/settings/components/web/ProfileTab.tsx

 import AbstractDialogTab, {
     IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
 import { translate } from '../../../base/i18n/functions';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 import Input from '../../../base/ui/components/web/Input';
 
         bottomMargin: {
             marginBottom: theme.spacing(4)
+        },
+
+        label: {
+            color: `${theme.palette.text01} !important`,
+            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            marginBottom: theme.spacing(2)
+        },
+
+        name: {
+            marginBottom: theme.spacing(1)
         }
     };
 };
     _renderAuth() {
         const {
             authLogin,
+            classes,
             t
         } = this.props;
 
         return (
             <div>
-                <h2 className = 'mock-atlaskit-label'>
+                <h2 className = { classes.label }>
                     { t('toolbar.authenticate') }
                 </h2>
                 { authLogin
-                    && <div className = 'auth-name'>
+                    && <div className = { classes.name }>
                         { t('settings.loggedIn', { name: authLogin }) }
                     </div> }
                 <Button

react/features/settings/components/web/SettingsDialog.tsx

-import { Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 
     IconVolumeUp
 } from '../../../base/icons/svg';
 import { connect } from '../../../base/redux/functions';
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import DialogWithTabs, { IDialogTab } from '../../../base/ui/components/web/DialogWithTabs';
 import { isCalendarEnabled } from '../../../calendar-sync/functions.web';
 import { submitAudioDeviceSelectionTab, submitVideoDeviceSelectionTab } from '../../../device-selection/actions.web';
     getVirtualBackgroundTabProps
 } from '../../functions';
 
-// @ts-ignore
 import CalendarTab from './CalendarTab';
 import ModeratorTab from './ModeratorTab';
 import MoreTab from './MoreTab';
  *
  * @returns {Object}
  */
-const styles = (theme: Theme) => {
+const styles = () => {
     return {
         settingsDialog: {
             display: 'flex',
-            width: '100%',
-
-            '& .auth-name': {
-                marginBottom: theme.spacing(1)
-            },
-
-            '& .mock-atlaskit-label': {
-                color: '#b8c7e0',
-                fontSize: '12px',
-                fontWeight: 600,
-                lineHeight: 1.33,
-                padding: `20px 0px ${theme.spacing(1)} 0px`
-            },
-
-            '& .checkbox-label': {
-                color: theme.palette.text01,
-                ...withPixelLineHeight(theme.typography.bodyShortRegular),
-                marginBottom: theme.spacing(2),
-                display: 'block',
-                marginTop: '20px'
-            },
-
-            '& input[type="checkbox"]:checked + svg': {
-                '--checkbox-background-color': '#6492e7',
-                '--checkbox-border-color': '#6492e7'
-            },
-
-            '& input[type="checkbox"] + svg + span': {
-                color: '#9FB0CC'
-            },
-
-            // @ts-ignore
-            [[ '& .calendar-tab',
-                '& .more-tab',
-                '& .box' ]]: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                width: '100%'
-            },
-
-            '& .settings-sub-pane': {
-                flex: 1
-            },
-
-            '& .settings-sub-pane .right': {
-                flex: 1
-            },
-            '& .settings-sub-pane .left': {
-                flex: 1
-            },
-
-            '& .settings-sub-pane-element': {
-                textAlign: 'left',
-                flex: 1
-            },
-
-            '& .dropdown-menu': {
-                marginTop: '20px'
-            },
-
-            '& .settings-checkbox': {
-                display: 'flex',
-                marginBottom: theme.spacing(3)
-            },
-
-            '& .calendar-tab': {
-                alignItems: 'center',
-                flexDirection: 'column',
-                fontSize: '14px',
-                minHeight: '100px',
-                textAlign: 'center',
-                marginTop: '20px'
-            },
-
-            '& .calendar-tab-sign-in': {
-                marginTop: '20px'
-            },
-
-            '& .sign-out-cta': {
-                marginBottom: '20px'
-            },
-
-            '& .sign-out-cta-button': {
-                display: 'flex',
-                justifyContent: 'center'
-            },
-
-            '@media only screen and (max-width: 700px)': {
-                '& .more-tab': {
-                    flexDirection: 'column'
-                }
-            }
+            width: '100%'
         }
     };
 };
                     selectedAudioOutputId: tabState.selectedAudioOutputId
                 };
             },
-            className: `settings-pane ${classes.settingsDialog} devices-pane`,
+            className: `settings-pane ${classes.settingsDialog}`,
             submit: (newState: any) => submitAudioDeviceSelectionTab(newState, isDisplayedOnWelcomePage),
             icon: IconVolumeUp
         });
                     selectedVideoInputId: tabState.selectedVideoInputId
                 };
             },
-            className: `settings-pane ${classes.settingsDialog} devices-pane`,
+            className: `settings-pane ${classes.settingsDialog}`,
             submit: (newState: any) => submitVideoDeviceSelectionTab(newState, isDisplayedOnWelcomePage),
             icon: IconVideo
         });
                     startReactionsMuted: tabState?.startReactionsMuted
                 };
             },
-            className: `settings-pane ${classes.settingsDialog} moderator-pane`,
+            className: `settings-pane ${classes.settingsDialog}`,
             submit: submitModeratorTab,
             icon: IconModerator
         });
             component: ProfileTab,
             labelKey: 'profile.title',
             props: getProfileTabProps(state),
-            className: `settings-pane ${classes.settingsDialog} profile-pane`,
+            className: `settings-pane ${classes.settingsDialog}`,
             submit: submitProfileTab,
             icon: IconUser
         });
             name: SETTINGS_TABS.CALENDAR,
             component: CalendarTab,
             labelKey: 'settings.calendar.title',
-            className: `settings-pane ${classes.settingsDialog} calendar-pane`,
+            className: `settings-pane ${classes.settingsDialog}`,
             icon: IconCalendar
         });
     }
                     maxStageParticipants: tabState?.maxStageParticipants
                 };
             },
-            className: `settings-pane ${classes.settingsDialog} more-pane`,
+            className: `settings-pane ${classes.settingsDialog}`,
             submit: submitMoreTab,
             icon: IconGear
         });