Change to Material-UI switch for settings

app/src/components/Settings/AdvancedSettings.js

@@ -4,13 +4,14 @@ import { withStyles } from '@material-ui/core/styles';
 import { withRoomContext } from '../../RoomContext';
 import * as settingsActions from '../../actions/settingsActions';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { useIntl, FormattedMessage } from 'react-intl';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Select from '@material-ui/core/Select';
-import Checkbox from '@material-ui/core/Checkbox';
+import Switch from '@material-ui/core/Switch';
 
 const styles = (theme) =>
 	({
@@ -21,6 +22,13 @@ const styles = (theme) =>
 		formControl :
 		{
 			display : 'flex'
+		},
+		switchLabel : {
+			justifyContent : 'space-between',
+			flex           : 'auto',
+			display        : 'flex',
+			padding        : theme.spacing(1),
+			marginRight    : 0
 		}
 	});
 
@@ -37,16 +45,18 @@ const AdvancedSettings = ({
 	return (
 		<React.Fragment>
 			<FormControlLabel
-				className={classes.setting}
+				className={classnames(classes.setting, classes.switchLabel)}
-				control={<Checkbox checked={settings.advancedMode} onChange={onToggleAdvancedMode} value='advancedMode' />}
+				control={<Switch checked={settings.advancedMode} onChange={onToggleAdvancedMode} value='advancedMode' />}
+				labelPlacement='start'
 				label={intl.formatMessage({
 					id             : 'settings.advancedMode',
 					defaultMessage : 'Advanced mode'
 				})}
 			/>
 			<FormControlLabel
-				className={classes.setting}
+				className={classnames(classes.setting, classes.switchLabel)}
-				control={<Checkbox checked={settings.notificationSounds} onChange={onToggleNotificationSounds} value='notificationSounds' />}
+				control={<Switch checked={settings.notificationSounds} onChange={onToggleNotificationSounds} value='notificationSounds' />}
+				labelPlacement='start'
 				label={intl.formatMessage({
 					id             : 'settings.notificationSounds',
 					defaultMessage : 'Notification sounds'

app/src/components/Settings/AppearenceSettings.js

@@ -4,6 +4,7 @@ import * as appPropTypes from '../appPropTypes';
 import { withStyles } from '@material-ui/core/styles';
 import * as roomActions from '../../actions/roomActions';
 import * as settingsActions from '../../actions/settingsActions';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useIntl, FormattedMessage } from 'react-intl';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -11,7 +12,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Select from '@material-ui/core/Select';
-import Checkbox from '@material-ui/core/Checkbox';
+import Switch from '@material-ui/core/Switch';
 
 const styles = (theme) =>
 	({
@@ -22,6 +23,13 @@ const styles = (theme) =>
 		formControl :
 		{
 			display : 'flex'
+		},
+		switchLabel : {
+			justifyContent : 'space-between',
+			flex           : 'auto',
+			display        : 'flex',
+			padding        : theme.spacing(1),
+			marginRight    : 0
 		}
 	});
 
@@ -90,24 +98,28 @@ const AppearenceSettings = ({
 				</FormControl>
 			</form>
 			<FormControlLabel
-				className={classes.setting}
+				className={classnames(classes.setting, classes.switchLabel)}
-				control={<Checkbox checked={settings.permanentTopBar} onChange={onTogglePermanentTopBar} value='permanentTopBar' />}
+				control={
+					<Switch checked={settings.permanentTopBar} onChange={onTogglePermanentTopBar} value='permanentTopBar' />}
+				labelPlacement='start'
 				label={intl.formatMessage({
 					id             : 'settings.permanentTopBar',
 					defaultMessage : 'Permanent top bar'
 				})}
 			/>
 			<FormControlLabel
-				className={classes.setting}
+				className={classnames(classes.setting, classes.switchLabel)}
-				control={<Checkbox checked={settings.hiddenControls} onChange={onToggleHiddenControls} value='hiddenControls' />}
+				control={<Switch checked={settings.hiddenControls} onChange={onToggleHiddenControls} value='hiddenControls' />}
+				labelPlacement='start'
 				label={intl.formatMessage({
 					id             : 'settings.hiddenControls',
 					defaultMessage : 'Hidden media controls'
 				})}
 			/>
 			<FormControlLabel
-				className={classes.setting}
+				className={classnames(classes.setting, classes.switchLabel)}
-				control={<Checkbox checked={settings.buttonControlBar} onChange={onToggleButtonControlBar} value='buttonControlBar' />}
+				control={<Switch checked={settings.buttonControlBar} onChange={onToggleButtonControlBar} value='buttonControlBar' />}
+				labelPlacement='start'
 				label={intl.formatMessage({
 					id             : 'settings.buttonControlBar',
 					defaultMessage : 'Separate media controls'
@@ -115,8 +127,9 @@ const AppearenceSettings = ({
 			/>
 			{ !isMobile &&
 				<FormControlLabel
-					className={classes.setting}
+					className={classnames(classes.setting, classes.switchLabel)}
-					control={<Checkbox checked={settings.drawerOverlayed} onChange={onToggleDrawerOverlayed} value='drawerOverlayed' />}
+					control={<Switch checked={settings.drawerOverlayed} onChange={onToggleDrawerOverlayed} value='drawerOverlayed' />}
+					labelPlacement='start'
 					label={intl.formatMessage({
 						id             : 'settings.drawerOverlayed',
 						defaultMessage : 'Side drawer over content'
@@ -124,8 +137,9 @@ const AppearenceSettings = ({
 				/>
 			}
 			<FormControlLabel
-				className={classes.setting}
+				className={classnames(classes.setting, classes.switchLabel)}
-				control={<Checkbox checked={settings.showNotifications} onChange={onToggleShowNotifications} value='showNotifications' />}
+				control={<Switch checked={settings.showNotifications} onChange={onToggleShowNotifications} value='showNotifications' />}
+				labelPlacement='start'
 				label={intl.formatMessage({
 					id             : 'settings.showNotifications',
 					defaultMessage : 'Show notifications'