From 9f0a3ffcadb14a83b0fa019dd378d0c6a23beec7 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 2 Aug 2018 14:32:18 +0200
Subject: [PATCH 1/3] Do not make sidebar push content

---
 app/lib/components/Room.jsx                    | 12 ++----------
 app/lib/components/ToolArea/ToolAreaButton.jsx |  2 +-
 app/stylus/components/Room.styl                |  7 +++++--
 app/stylus/components/ToolArea.styl            |  9 +++++++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx
index 741d88f..8232103 100644
--- a/app/lib/components/Room.jsx
+++ b/app/lib/components/Room.jsx
@@ -82,12 +82,7 @@ class Room extends React.Component
 				<Appear duration={300}>
 					<div data-component='Room'>
 						<FullScreenView advancedMode={room.advancedMode} />
-						<div
-							className='room-wrapper'
-							style={{
-								width : toolAreaOpen ? '75%' : '100%'
-							}}
-						>
+						<div className='room-wrapper'>
 							<Notifications />
 
 							<ToolAreaButton />
@@ -161,10 +156,7 @@ class Room extends React.Component
 							/>
 						</div>
 						<div
-							className='toolarea-wrapper'
-							style={{
-								width : toolAreaOpen ? '25%' : '0%'
-							}}
+							className={classnames('toolarea-wrapper', { open: toolAreaOpen })}
 						>
 							{toolAreaOpen ?
 								<ToolArea
diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx
index 6c67c15..6659dcd 100644
--- a/app/lib/components/ToolArea/ToolAreaButton.jsx
+++ b/app/lib/components/ToolArea/ToolAreaButton.jsx
@@ -15,7 +15,7 @@ class ToolAreaButton extends React.Component
 		} = this.props;
 
 		return (
-			<div data-component='ToolAreaButton'>
+			<div data-component='ToolAreaButton' className={classnames({ on: toolAreaOpen })}>
 				<div
 					className={classnames('button toolarea-button room-controls', {
 						on      : toolAreaOpen,
diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl
index 142394e..b20060a 100644
--- a/app/stylus/components/Room.styl
+++ b/app/stylus/components/Room.styl
@@ -7,7 +7,6 @@
 		left: 0;
 		height: 100%;
 		width: 100%;
-		transition: width 0.3s;
 
 		> .state {
 			position: fixed;
@@ -168,12 +167,16 @@
 
 	> .toolarea-wrapper {
 		position: fixed;
+		width: 0;
 		top: 0;
 		right: 0;
-		width: 20%;
 		height: 100%;
 		background-color: rgba(0,0,0,0.1);
 		transition: width 0.3s;
+
+		&.open {
+			width: 25%;
+		}
 	}
 }
 
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index 2ff7a13..4d46b71 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -1,14 +1,19 @@
 [data-component='ToolAreaButton'] {
 	position: absolute;
 	z-index: 101;
-	top: 20px;
-	right: 20px;
+	right: 0;
 	height: 36px;
 	width: 36px;
+	padding: 2rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	transition: right 0.3s;
+
+	&.on {
+		right: 25%;
+	}
 
 	> .button {
 		flex: 0 0 auto;

From 6b67e515419fea3c7b08915b397a71c7e576e06d Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 2 Aug 2018 15:02:43 +0200
Subject: [PATCH 2/3] Sidebar styling improvements

---
 app/stylus/components/FullScreenView.styl |  4 ++--
 app/stylus/components/FullView.styl       |  2 +-
 app/stylus/components/Notifications.styl  |  2 +-
 app/stylus/components/Peer.styl           |  2 +-
 app/stylus/components/PeerView.styl       |  2 +-
 app/stylus/components/Room.styl           | 11 ++++++-----
 app/stylus/components/ScreenView.styl     |  2 +-
 app/stylus/components/Sidebar.styl        |  2 +-
 app/stylus/components/ToolArea.styl       |  2 +-
 9 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/stylus/components/FullScreenView.styl b/app/stylus/components/FullScreenView.styl
index 1338c5d..83b6e2d 100644
--- a/app/stylus/components/FullScreenView.styl
+++ b/app/stylus/components/FullScreenView.styl
@@ -8,7 +8,7 @@
 
 	> .controls {
 		position: absolute;
-		z-index: 201;
+		z-index: 210;
 		right: 0;
 		top: 0;
 		display: flex;
@@ -53,7 +53,7 @@
 
 	.incompatible-video {
 		position: absolute;
-		z-index: 2
+		z-index: 10;
 		top: 0;
 		bottom: 0;
 		left: 0;
diff --git a/app/stylus/components/FullView.styl b/app/stylus/components/FullView.styl
index 103a491..251a04a 100644
--- a/app/stylus/components/FullView.styl
+++ b/app/stylus/components/FullView.styl
@@ -16,7 +16,7 @@
 		$backgroundTint = #000;
 
 		position: absolute;
-		z-index: 5
+		z-index: 10;
 		top: 0.6vmin;
 		left: 0.6vmin;
 		bottom: 0;
diff --git a/app/stylus/components/Notifications.styl b/app/stylus/components/Notifications.styl
index 329fa64..ed2f48a 100644
--- a/app/stylus/components/Notifications.styl
+++ b/app/stylus/components/Notifications.styl
@@ -1,6 +1,6 @@
 [data-component='Notifications'] {
 	position: absolute;
-	z-index: 9999;
+	z-index: 1010;
 	pointer-events: none;
 	top: 0;
 	right: 65px;
diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl
index 8afedd3..641f96c 100644
--- a/app/stylus/components/Peer.styl
+++ b/app/stylus/components/Peer.styl
@@ -195,7 +195,7 @@
 
 	.incompatible-video {
 		position: absolute;
-		z-index: 2
+		z-index: 10;
 		top: 0;
 		bottom: 0;
 		left: 0;
diff --git a/app/stylus/components/PeerView.styl b/app/stylus/components/PeerView.styl
index 7bfa57f..907c7e2 100644
--- a/app/stylus/components/PeerView.styl
+++ b/app/stylus/components/PeerView.styl
@@ -16,7 +16,7 @@
 		$backgroundTint = #000;
 
 		position: absolute;
-		z-index: 5
+		z-index: 10;
 		top: 0.6vmin;
 		left: 0.6vmin;
 		bottom: 0;
diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl
index b20060a..a21ca60 100644
--- a/app/stylus/components/Room.styl
+++ b/app/stylus/components/Room.styl
@@ -94,7 +94,7 @@
 		> .room-link-wrapper {
 			pointer-events: none;
 			position: absolute;
-			z-index: 1;
+			z-index: 10;
 			top: 0;
 			left: 0;
 			right: 0;
@@ -141,7 +141,7 @@
 
 		> .me-container {
 			position: fixed;
-			z-index: 100;
+			z-index: 110;
 			overflow: hidden;
 			box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
 			transition-property: border-color;
@@ -171,9 +171,10 @@
 		top: 0;
 		right: 0;
 		height: 100%;
-		background-color: rgba(0,0,0,0.1);
+		background-color: rgba(50, 50, 50, 0.9);
 		transition: width 0.3s;
-
+		z-index: 1000;
+	
 		&.open {
 			width: 25%;
 		}
@@ -245,7 +246,7 @@
 	position: absolute;
 	top: 100%;
 	width: 100%;
-	z-index: 1000;
+	z-index: 120;
 	-webkit-overflow-scrolling: touch;
 }
 
diff --git a/app/stylus/components/ScreenView.styl b/app/stylus/components/ScreenView.styl
index bee884f..4c4dc66 100644
--- a/app/stylus/components/ScreenView.styl
+++ b/app/stylus/components/ScreenView.styl
@@ -16,7 +16,7 @@
 		$backgroundTint = #000;
 
 		position: absolute;
-		z-index: 5
+		z-index: 10;
 		top: 0.6vmin;
 		left: 0.6vmin;
 		bottom: 0;
diff --git a/app/stylus/components/Sidebar.styl b/app/stylus/components/Sidebar.styl
index e7a7394..b54e788 100644
--- a/app/stylus/components/Sidebar.styl
+++ b/app/stylus/components/Sidebar.styl
@@ -1,6 +1,6 @@
 [data-component='Sidebar'] {
 	position: fixed;
-	z-index: 101;
+	z-index: 1000;
 	top: calc(50% - 60px);
 	height: 120px;
 	display: flex;
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index 4d46b71..d1aa415 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -1,6 +1,6 @@
 [data-component='ToolAreaButton'] {
 	position: absolute;
-	z-index: 101;
+	z-index: 1000;
 	right: 0;
 	height: 36px;
 	width: 36px;

From add65db8fdefc9aeb75274d8ac9c72db120b3921 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 2 Aug 2018 15:18:26 +0200
Subject: [PATCH 3/3] Fine tune z-index

---
 app/stylus/components/FileSharing.styl    | 2 +-
 app/stylus/components/FullScreenView.styl | 6 +++---
 app/stylus/components/Me.styl             | 2 +-
 app/stylus/components/Peer.styl           | 4 ++--
 app/stylus/components/Sidebar.styl        | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl
index 0091133..f2c5c31 100644
--- a/app/stylus/components/FileSharing.styl
+++ b/app/stylus/components/FileSharing.styl
@@ -91,5 +91,5 @@
 	align-items: center;
 	justify-content: center;
 	font-size: 2rem;
-	z-index: 2000;
+	z-index: 3000;
 }
\ No newline at end of file
diff --git a/app/stylus/components/FullScreenView.styl b/app/stylus/components/FullScreenView.styl
index 83b6e2d..fe6458d 100644
--- a/app/stylus/components/FullScreenView.styl
+++ b/app/stylus/components/FullScreenView.styl
@@ -4,11 +4,11 @@
 	left: 0;
 	height: 100%;
 	width: 100%;
-	z-index: 200;
+	z-index: 2000;
 
 	> .controls {
 		position: absolute;
-		z-index: 210;
+		z-index: 2020;
 		right: 0;
 		top: 0;
 		display: flex;
@@ -53,7 +53,7 @@
 
 	.incompatible-video {
 		position: absolute;
-		z-index: 10;
+		z-index: 2010;
 		top: 0;
 		bottom: 0;
 		left: 0;
diff --git a/app/stylus/components/Me.styl b/app/stylus/components/Me.styl
index 7df0c0d..31fe5a6 100644
--- a/app/stylus/components/Me.styl
+++ b/app/stylus/components/Me.styl
@@ -19,7 +19,7 @@
 
 		> .controls {
 			position: absolute;
-			z-index: 10;
+			z-index: 20;
 			right: 0;
 			top: 0;
 			display: flex;
diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl
index 641f96c..7221917 100644
--- a/app/stylus/components/Peer.styl
+++ b/app/stylus/components/Peer.styl
@@ -42,7 +42,7 @@
 			align-items: center;
 			padding: 0.4vmin;
 			transition: opacity 0.3s;
-			z-index: 10;
+			z-index: 20;
 
 			> .icon {
 				flex: 0 0 auto;
@@ -85,7 +85,7 @@
 		}
 		> .controls {
 			position: absolute;
-			z-index: 10;
+			z-index: 20;
 			right: 0;
 			top: 0;
 			display: flex;
diff --git a/app/stylus/components/Sidebar.styl b/app/stylus/components/Sidebar.styl
index b54e788..be324c0 100644
--- a/app/stylus/components/Sidebar.styl
+++ b/app/stylus/components/Sidebar.styl
@@ -1,6 +1,6 @@
 [data-component='Sidebar'] {
 	position: fixed;
-	z-index: 1000;
+	z-index: 500;
 	top: calc(50% - 60px);
 	height: 120px;
 	display: flex;