Updated material-ui and fixed some layout.

app/package.json

@@ -6,8 +6,8 @@
 	"author": "Håvar Aambø Fosstveit <h@fosstveit.net>",
 	"license": "MIT",
 	"dependencies": {
-		"@material-ui/core": "^3.9.2",
-		"@material-ui/icons": "^3.0.2",
+		"@material-ui/core": "^4.1.2",
+		"@material-ui/icons": "^4.2.1",
 		"bowser": "^2.4.0",
 		"create-torrent": "^3.33.0",
 		"domready": "^1.0.8",

app/src/components/Containers/Me.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { meProducersSelector } from '../Selectors';
 import { withRoomContext } from '../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
-import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
@@ -109,6 +109,7 @@ const Me = (props) =>
 		activeSpeaker,
 		spacing,
 		style,
+		smallButtons,
 		advancedMode,
 		micProducer,
 		webcamProducer,
@@ -264,6 +265,7 @@ const Me = (props) =>
 									className={classes.fab}
 									disabled={!me.canSendMic || me.audioInProgress}
 									color={micState === 'on' ? 'default' : 'secondary'}
+									size={smallButtons ? 'small' : 'large'}
 									onClick={() =>
 									{
 										if (micState === 'off')
@@ -289,6 +291,7 @@ const Me = (props) =>
 									className={classes.fab}
 									disabled={!me.canSendWebcam || me.webcamInProgress}
 									color={webcamState === 'on' ? 'default' : 'secondary'}
+									size={smallButtons ? 'small' : 'large'}
 									onClick={() =>
 									{
 										webcamState === 'on' ?
@@ -311,6 +314,7 @@ const Me = (props) =>
 									className={classes.fab}
 									disabled={!me.canShareScreen || me.screenShareInProgress}
 									color={screenState === 'on' ? 'primary' : 'default'}
+									size={smallButtons ? 'small' : 'large'}
 									onClick={() =>
 									{
 										switch (screenState)
@@ -443,6 +447,7 @@ Me.propTypes =
 	screenProducer : appPropTypes.Producer,
 	spacing        : PropTypes.number,
 	style          : PropTypes.object,
+	smallButtons   : PropTypes.bool,
 	classes        : PropTypes.object.isRequired,
 	theme          : PropTypes.object.isRequired
 };

app/src/components/Containers/Peer.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
 import { withRoomContext } from '../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
-import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import * as stateActions from '../../actions/stateActions';
 import VideoView from '../VideoContainers/VideoView';
 import Fab from '@material-ui/core/Fab';
@@ -123,6 +123,7 @@ const Peer = (props) =>
 		toggleConsumerWindow,
 		spacing,
 		style,
+		smallButtons,
 		windowConsumer,
 		classes,
 		theme
@@ -231,6 +232,7 @@ const Peer = (props) =>
 							className={classes.fab}
 							disabled={!micConsumer}
 							color={micEnabled ? 'default' : 'secondary'}
+							size={smallButtons ? 'small' : 'large'}
 							onClick={() =>
 							{
 								micEnabled ?
@@ -253,6 +255,7 @@ const Peer = (props) =>
 									!videoVisible ||
 									(windowConsumer === webcamConsumer.id)
 								}
+								size={smallButtons ? 'small' : 'large'}
 								onClick={() =>
 								{
 									toggleConsumerWindow(webcamConsumer);
@@ -267,6 +270,7 @@ const Peer = (props) =>
 							aria-label='Fullscreen'
 							className={classes.fab}
 							disabled={!videoVisible}
+							size={smallButtons ? 'small' : 'large'}
 							onClick={() =>
 							{
 								toggleConsumerFullscreen(webcamConsumer);
@@ -356,6 +360,7 @@ const Peer = (props) =>
 											!screenVisible ||
 											(windowConsumer === screenConsumer.id)
 										}
+										size={smallButtons ? 'small' : 'large'}
 										onClick={() =>
 										{
 											toggleConsumerWindow(screenConsumer);
@@ -370,6 +375,7 @@ const Peer = (props) =>
 									aria-label='Fullscreen'
 									className={classes.fab}
 									disabled={!screenVisible}
+									size={smallButtons ? 'small' : 'large'}
 									onClick={() =>
 									{
 										toggleConsumerFullscreen(screenConsumer);
@@ -408,6 +414,7 @@ Peer.propTypes =
 	activeSpeaker            : PropTypes.bool,
 	spacing                  : PropTypes.number,
 	style                    : PropTypes.object,
+	smallButtons             : PropTypes.bool,
 	toggleConsumerFullscreen : PropTypes.func.isRequired,
 	toggleConsumerWindow     : PropTypes.func.isRequired,
 	classes                  : PropTypes.object.isRequired,

app/src/components/MeetingViews/Filmstrip.js

@@ -249,6 +249,7 @@ class Filmstrip extends React.PureComponent
 								<Me
 									advancedMode={advancedMode}
 									style={peerStyle}
+									smallButtons
 								/>
 							</div>
 						</Grid>
@@ -271,6 +272,7 @@ class Filmstrip extends React.PureComponent
 												advancedMode={advancedMode}
 												id={peerId}
 												style={peerStyle}
+												smallButtons
 											/>
 										</div>
 									</Grid>

app/src/components/Room.js

@@ -32,7 +32,7 @@ import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 import SettingsIcon from '@material-ui/icons/Settings';
 import LockIcon from '@material-ui/icons/Lock';
 import LockOpenIcon from '@material-ui/icons/LockOpen';
-import LeaveIcon from '@material-ui/icons/Cancel';
+import Button from '@material-ui/core/Button';
 import Settings from './Settings/Settings';
 import JoinDialog from './JoinDialog';
 
@@ -127,6 +127,11 @@ const styles = (theme) =>
 		{
 			display : 'flex'
 		},
+		actionButton :
+		{
+			margin  : theme.spacing.unit,
+			padding : 0
+		},
 		meContainer :
 		{
 			position           : 'fixed',
@@ -308,15 +313,9 @@ class Room extends React.PureComponent
 							</Typography>
 							<div className={classes.grow} />
 							<div className={classes.actionButtons}>
-								<IconButton
-									aria-label='Leave meeting'
-									color='secondary'
-									onClick={() => roomClient.close()}
-								>
-									<LeaveIcon />
-								</IconButton>
 								<IconButton
 									aria-label='Lock room'
+									className={classes.actionButton}
 									color='inherit'
 									onClick={() =>
 									{
@@ -339,6 +338,7 @@ class Room extends React.PureComponent
 								{ this.fullscreen.fullscreenEnabled ?
 									<IconButton
 										aria-label='Fullscreen'
+										className={classes.actionButton}
 										color='inherit'
 										onClick={this.handleToggleFullscreen}
 									>
@@ -352,6 +352,7 @@ class Room extends React.PureComponent
 								}
 								<IconButton
 									aria-label='Settings'
+									className={classes.actionButton}
 									color='inherit'
 									onClick={() => setSettingsOpen(!room.settingsOpen)}
 								>
@@ -360,6 +361,7 @@ class Room extends React.PureComponent
 								{ loginEnabled ?
 									<IconButton
 										aria-label='Account'
+										className={classes.actionButton}
 										color='inherit'
 										onClick={() => 
 										{
@@ -374,6 +376,15 @@ class Room extends React.PureComponent
 									</IconButton>
 									:null
 								}
+								<Button
+									aria-label='Leave meeting'
+									className={classes.actionButton}
+									variant='contained'
+									color='secondary'
+									onClick={() => roomClient.close()}
+								>
+									Leave
+								</Button>
 							</div>
 						</Toolbar>
 					</AppBar>