Cleanup of CSS.

app/src/components/Containers/Me.js

@@ -67,7 +67,7 @@ const styles = (theme) =>
 			flexDirection   : 'column',
 			justifyContent  : 'center',
 			alignItems      : 'flex-end',
-			padding         : '0.4vmin',
+			padding         : theme.spacing(1),
 			zIndex          : 21,
 			opacity         : 0,
 			transition      : 'opacity 0.3s',
@@ -83,7 +83,7 @@ const styles = (theme) =>
 				top       : '50%',
 				left      : '50%',
 				transform : 'translate(-50%, -50%)',
-				color     : 'rgba(255, 255, 255, 1)',
+				color     : 'rgba(255, 255, 255, 0.5)',
 				fontSize  : '7em',
 				margin    : 0
 			}

app/src/components/Containers/Peer.js

@@ -66,7 +66,7 @@ const styles = (theme) =>
 			flexDirection   : 'column',
 			justifyContent  : 'center',
 			alignItems      : 'flex-end',
-			padding         : '0.4vmin',
+			padding         : theme.spacing(1),
 			zIndex          : 21,
 			opacity         : 0,
 			transition      : 'opacity 0.3s',
@@ -85,7 +85,7 @@ const styles = (theme) =>
 			display         : 'flex',
 			justifyContent  : 'center',
 			alignItems      : 'center',
-			padding         : '0.4vmin',
+			padding         : theme.spacing(1),
 			zIndex          : 20,
 			'& p'           :
 			{

app/src/components/Containers/SpeakerPeer.js

@@ -8,7 +8,7 @@ import { withStyles } from '@material-ui/core/styles';
 import VideoView from '../VideoContainers/VideoView';
 import Volume from './Volume';
 
-const styles = () =>
+const styles = (theme) =>
 	({
 		root :
 		{
@@ -51,7 +51,7 @@ const styles = () =>
 			display         : 'flex',
 			justifyContent  : 'center',
 			alignItems      : 'center',
-			padding         : '0.4vmin',
+			padding         : theme.spacing(1),
 			zIndex          : 21,
 			'& p'           :
 			{

app/src/components/MeetingDrawer/ParticipantList/ListMe.js

@@ -7,11 +7,11 @@ import * as appPropTypes from '../../appPropTypes';
 import EmptyAvatar from '../../../images/avatar-empty.jpeg';
 import HandIcon from '../../../images/icon-hand-white.svg';
 
-const styles = () =>
+const styles = (theme) =>
 	({
 		root :
 		{
-			padding  : '0.5rem',
+			padding  : theme.spacing(1),
 			width    : '100%',
 			overflow : 'hidden',
 			cursor   : 'auto',
@@ -31,7 +31,7 @@ const styles = () =>
 			fontSize    : '1rem',
 			border      : 'none',
 			display     : 'flex',
-			paddingLeft : '0.5rem',
+			paddingLeft : theme.spacing(1),
 			flexGrow    : 1,
 			alignItems  : 'center'
 		},

app/src/components/MeetingDrawer/ParticipantList/ListPeer.js

@@ -13,11 +13,11 @@ import ScreenOffIcon from '@material-ui/icons/StopScreenShare';
 import EmptyAvatar from '../../../images/avatar-empty.jpeg';
 import HandIcon from '../../../images/icon-hand-white.svg';
 
-const styles = () =>
+const styles = (theme) =>
 	({
 		root :
 		{
-			padding  : '0.5rem',
+			padding  : theme.spacing(1),
 			width    : '100%',
 			overflow : 'hidden',
 			cursor   : 'auto',
@@ -37,7 +37,7 @@ const styles = () =>
 			fontSize    : '1rem',
 			border      : 'none',
 			display     : 'flex',
-			paddingLeft : '0.5rem',
+			paddingLeft : theme.spacing(1),
 			flexGrow    : 1,
 			alignItems  : 'center'
 		},

app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js

@@ -18,7 +18,7 @@ const styles = (theme) =>
 		{
 			width     : '100%',
 			overflowY : 'auto',
-			padding   : 6
+			padding   : theme.spacing(1)
 		},
 		list :
 		{
@@ -29,12 +29,12 @@ const styles = (theme) =>
 		},
 		listheader :
 		{
-			padding    : '0.5rem',
+			padding    : theme.spacing(1),
 			fontWeight : 'bolder'
 		},
 		listItem :
 		{
-			padding      : '0.5rem',
+			padding      : theme.spacing(1),
 			width        : '100%',
 			overflow     : 'hidden',
 			cursor       : 'pointer',

app/src/components/VideoContainers/FullScreenView.js

@@ -8,7 +8,7 @@ import * as stateActions from '../../actions/stateActions';
 import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 import VideoView from './VideoView';
 
-const styles = () =>
+const styles = (theme) =>
 	({
 		root :
 		{
@@ -29,7 +29,7 @@ const styles = () =>
 			flexDirection  : 'row',
 			justifyContent : 'flex-start',
 			alignItems     : 'center',
-			padding        : '0.4vmin'
+			padding        : theme.spacing(1)
 		},
 		button :
 		{

app/src/components/VideoContainers/VideoView.js

@@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 import * as appPropTypes from '../appPropTypes';
 import EditableInput from '../Controls/EditableInput';
 
-const styles = () =>
+const styles = (theme) =>
 	({
 		root :
 		{
@@ -48,54 +48,42 @@ const styles = () =>
 		},
 		info :
 		{
+			width          : '100%',
+			height         : '100%',
+			padding        : theme.spacing(1),
 			position       : 'absolute',
 			zIndex         : 10,
-			top            : '0.6vmin',
-			left           : '0.6vmin',
-			bottom         : 0,
-			right          : 0,
 			display        : 'flex',
 			flexDirection  : 'column',
 			justifyContent : 'space-between'
 		},
 		media :
 		{
-			flex          : '0 0 auto',
 			display            : 'flex',
-			flexDirection : 'row'
+			transitionProperty : 'opacity',
+			transitionDuration : '.15s',
+			'&.hidden'         :
+			{
+				opacity            : 0,
+				transitionDuration : '0s'
+			}
 		},
 		box :
 		{
-			padding         : '0.4vmin',
+			padding         : theme.spacing(0.5),
 			borderRadius    : 2,
 			backgroundColor : 'rgba(0, 0, 0, 0.25)',
 			'& p'           :
 			{
 				userSelect : 'none',
-				pointerEvents : 'none',
 				margin     : 0,
 				color      : 'rgba(255, 255, 255, 0.7)',
-				fontSize      : 10,
+				fontSize   : '0.8em'
-
-				'&:last-child' :
-				{
-					marginBottom : 0
-				}
 			}
 		},
 		peer :
 		{
-			flex            : '0 0 auto',
+			display : 'flex'
-			display         : 'flex',
-			flexDirection   : 'column',
-			justifyContent  : 'flex-end',
-			position        : 'absolute',
-			bottom          : '0.6vmin',
-			left            : 0,
-			borderRadius    : 2,
-			backgroundColor : 'rgba(0, 0, 0, 0.25)',
-			padding         : '0.5vmin',
-			alignItems      : 'flex-start'
 		},
 		displayNameEdit :
 		{
@@ -120,11 +108,6 @@ const styles = () =>
 		},
 		deviceInfo :
 		{
-			marginTop      : '0.4vmin',
-			display        : 'flex',
-			flexDirection  : 'row',
-			justifyContent : 'flex-start',
-			alignItems     : 'flex-end',
 			'& span' :
 			{
 				userSelect    : 'none',
@@ -181,8 +164,11 @@ class VideoView extends React.PureComponent
 		return (
 			<div className={classes.root}>
 				<div className={classes.info}>
-					{ advancedMode ?
+					<div className={classnames(classes.media, 
-						<div className={classes.media}>
+						{
+							hidden : !advancedMode
+						})}
+					>
 						<div className={classes.box}>
 							{ audioCodec ?
 								<p>{audioCodec}</p>
@@ -200,16 +186,15 @@ class VideoView extends React.PureComponent
 							}
 						</div>
 					</div>
-						:null
-					}
 
 					{ showPeerInfo ?
 						<div className={classes.peer}>
+							<div className={classes.box}>
 								{ isMe ?
 									<EditableInput
 										value={displayName}
 										propName='newDisplayName'
-									className={classnames(classes.displayNameEdit, 'display-name')}
+										className={classes.displayNameEdit}
 										classLoading='loading'
 										classInvalid='invalid'
 										shouldBlockWhileLoading
@@ -235,6 +220,7 @@ class VideoView extends React.PureComponent
 									:null
 								}
 							</div>
+						</div>
 						:null
 					}
 				</div>

app/src/components/VideoWindow/NewWindow.js

@@ -6,7 +6,7 @@ import FullScreen from '../FullScreen';
 import FullScreenIcon from '@material-ui/icons/Fullscreen';
 import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 
-const styles = () =>
+const styles = (theme) =>
 	({
 		root :
 		{
@@ -27,7 +27,7 @@ const styles = () =>
 			flexDirection  : 'row',
 			justifyContent : 'flex-start',
 			alignItems     : 'center',
-			padding        : '0.4vmin'
+			padding        : theme.spacing(1)
 		},
 		button :
 		{