From 78262b71e19ed76ef2d436ff2f28f46498cafbce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Fri, 20 Mar 2020 18:22:29 +0100
Subject: [PATCH] Space out buttons on top bar, make sure users don't
 accidentally leave room. Fixes #138

---
 app/src/components/Controls/TopBar.js | 123 ++++++++++++++------------
 1 file changed, 64 insertions(+), 59 deletions(-)

diff --git a/app/src/components/Controls/TopBar.js b/app/src/components/Controls/TopBar.js
index 790771a..938e1c2 100644
--- a/app/src/components/Controls/TopBar.js
+++ b/app/src/components/Controls/TopBar.js
@@ -45,6 +45,10 @@ const styles = (theme) =>
 				display : 'block'
 			}
 		},
+		divider :
+		{
+			marginLeft : theme.spacing(3),
+		},
 		show :
 		{
 			opacity    : 1,
@@ -200,6 +204,65 @@ const TopBar = (props) =>
 				</Typography>
 				<div className={classes.grow} />
 				<div className={classes.actionButtons}>
+					{ fullscreenEnabled &&
+						<Tooltip title={fullscreenTooltip}>
+							<IconButton
+								aria-label={intl.formatMessage({
+									id             : 'tooltip.enterFullscreen',
+									defaultMessage : 'Enter fullscreen'
+								})}
+								className={classes.actionButton}
+								color='inherit'
+								onClick={onFullscreen}
+							>
+								{ fullscreen ?
+									<FullScreenExitIcon />
+									:
+									<FullScreenIcon />
+								}
+							</IconButton>
+						</Tooltip>
+					}
+					<Tooltip 
+						title={intl.formatMessage({
+							id             : 'tooltip.participants',
+							defaultMessage : 'Show participants'
+						})}
+					>
+						<IconButton
+							aria-label={intl.formatMessage({
+								id             : 'tooltip.participants',
+								defaultMessage : 'Show participants'
+							})}
+							color='inherit'
+							onClick={() => openUsersTab()}
+						>
+							<Badge
+								color='primary'
+								badgeContent={peersLength + 1}
+							>
+								<PeopleIcon />
+							</Badge>
+						</IconButton>
+					</Tooltip>
+					<Tooltip
+						title={intl.formatMessage({
+							id             : 'tooltip.settings',
+							defaultMessage : 'Show settings'
+						})}
+					>
+						<IconButton
+							aria-label={intl.formatMessage({
+								id             : 'tooltip.settings',
+								defaultMessage : 'Show settings'
+							})}
+							className={classes.actionButton}
+							color='inherit'
+							onClick={() => setSettingsOpen(!room.settingsOpen)}
+						>
+							<SettingsIcon />
+						</IconButton>
+					</Tooltip>
 					<Tooltip title={lockTooltip}>
 						<IconButton
 							aria-label={intl.formatMessage({
@@ -251,65 +314,6 @@ const TopBar = (props) =>
 							</IconButton>
 						</Tooltip>
 					}
-					<Tooltip 
-						title={intl.formatMessage({
-							id             : 'tooltip.participants',
-							defaultMessage : 'Show participants'
-						})}
-					>
-						<IconButton
-							aria-label={intl.formatMessage({
-								id             : 'tooltip.participants',
-								defaultMessage : 'Show participants'
-							})}
-							color='inherit'
-							onClick={() => openUsersTab()}
-						>
-							<Badge
-								color='primary'
-								badgeContent={peersLength + 1}
-							>
-								<PeopleIcon />
-							</Badge>
-						</IconButton>
-					</Tooltip>
-					{ fullscreenEnabled &&
-						<Tooltip title={fullscreenTooltip}>
-							<IconButton
-								aria-label={intl.formatMessage({
-									id             : 'tooltip.enterFullscreen',
-									defaultMessage : 'Enter fullscreen'
-								})}
-								className={classes.actionButton}
-								color='inherit'
-								onClick={onFullscreen}
-							>
-								{ fullscreen ?
-									<FullScreenExitIcon />
-									:
-									<FullScreenIcon />
-								}
-							</IconButton>
-						</Tooltip>
-					}
-					<Tooltip
-						title={intl.formatMessage({
-							id             : 'tooltip.settings',
-							defaultMessage : 'Show settings'
-						})}
-					>
-						<IconButton
-							aria-label={intl.formatMessage({
-								id             : 'tooltip.settings',
-								defaultMessage : 'Show settings'
-							})}
-							className={classes.actionButton}
-							color='inherit'
-							onClick={() => setSettingsOpen(!room.settingsOpen)}
-						>
-							<SettingsIcon />
-						</IconButton>
-					</Tooltip>
 					{ loginEnabled &&
 						<Tooltip title={loginTooltip}>
 							<IconButton
@@ -332,6 +336,7 @@ const TopBar = (props) =>
 							</IconButton>
 						</Tooltip>
 					}
+					<div className={classes.divider} />
 					<Button
 						aria-label={intl.formatMessage({
 							id             : 'label.leave',