Updated material-ui and fixed some layout.

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,