Lifted some logic up a level to clean up code.

app/src/components/JoinDialog.js

@@ -14,6 +14,15 @@ const styles = (theme) =>
 	({
 		root :
 		{
+			display              : 'flex',
+			width                : '100%',
+			height               : '100%',
+			backgroundColor      : 'var(--background-color)',
+			backgroundImage      : `url(${window.config.background})`,
+			backgroundAttachment : 'fixed',
+			backgroundPosition   : 'center',
+			backgroundSize       : 'cover',
+			backgroundRepeat     : 'no-repeat'
 		},
 		dialogPaper :
 		{
@@ -50,52 +59,53 @@ const JoinDialog = ({
 }) =>
 {
 	return (
-		<Dialog
-			className={classes.root}
-			open
-			classes={{
-				paper : classes.dialogPaper
-			}}
-		>
-			{ window.config.logo ?
-				<img alt='Logo' className={classes.logo} src={window.config.logo} />
-				:null
-			}
-			<Typography variant='subtitle1'>You are about to join a meeting, how would you like to join?</Typography>
-			<DialogActions>
-				<Button
-					onClick={() =>
-					{
-						roomClient.join({ joinVideo: false });
-					}}
-					variant='contained'
-				>
-					Audio only
-				</Button>
-				<Button
-					onClick={() =>
-					{
-						roomClient.join({ joinVideo: true });
-					}}
-					variant='contained'
-				>
-					Audio and Video
-				</Button>
-				<TextField
-					id='displayname'
-					label='Name'
-					className={classes.textField}
-					value={displayName}
-					onChange={(event) =>
-					{
-						const { value } = event.target;
+		<div className={classes.root}>
+			<Dialog
+				open
+				classes={{
+					paper : classes.dialogPaper
+				}}
+			>
+				{ window.config.logo ?
+					<img alt='Logo' className={classes.logo} src={window.config.logo} />
+					:null
+				}
+				<Typography variant='subtitle1'>You are about to join a meeting, how would you like to join?</Typography>
+				<DialogActions>
+					<Button
+						onClick={() =>
+						{
+							roomClient.join({ joinVideo: false });
+						}}
+						variant='contained'
+					>
+						Audio only
+					</Button>
+					<Button
+						onClick={() =>
+						{
+							roomClient.join({ joinVideo: true });
+						}}
+						variant='contained'
+					>
+						Audio and Video
+					</Button>
+					<TextField
+						id='displayname'
+						label='Name'
+						className={classes.textField}
+						value={displayName}
+						onChange={(event) =>
+						{
+							const { value } = event.target;
 
-						changeDisplayName(value);
-					}}
-					margin='normal'
-				/>
-			</DialogActions>
-		</Dialog>
+							changeDisplayName(value);
+						}}
+						margin='normal'
+					/>
+				</DialogActions>
+			</Dialog>
+		</div>
 	);
 };