From 2fba13770b3ddf73035248eebaf1b0fae1e15e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Tue, 30 Oct 2018 13:02:47 +0100
Subject: [PATCH] Some last CSS fixes

---
 .../FileSharing/SharedFilesList.jsx           | 19 +++++++++++++------
 app/stylus/components/FileSharing.styl        | 19 ++++++++++++++++++-
 app/stylus/components/ParticipantList.styl    |  7 ++++---
 app/stylus/components/ToolArea.styl           |  1 +
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/app/lib/components/FileSharing/SharedFilesList.jsx b/app/lib/components/FileSharing/SharedFilesList.jsx
index 9b2b6ce..28fc6b1 100644
--- a/app/lib/components/FileSharing/SharedFilesList.jsx
+++ b/app/lib/components/FileSharing/SharedFilesList.jsx
@@ -13,14 +13,21 @@ class SharedFilesList extends Component
 {
 	render()
 	{
+		const { sharing } = this.props;
+
 		return (
 			<div className='shared-files'>
-				{this.props.sharing.map((entry, i) => (
-					<FileEntry
-						data={entry}
-						key={i}
-					/>
-				))}
+				{ sharing.length > 0 ?
+					sharing.map((entry, i) => (
+						<FileEntry
+							data={entry}
+							key={i}
+						/>
+					))
+					:<div className='empty'>
+						<p>No one has shared files yet...</p>
+					</div>
+				}
 			</div>
 		);
 	}
diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl
index 9687c00..1bf88fa 100644
--- a/app/stylus/components/FileSharing.styl
+++ b/app/stylus/components/FileSharing.styl
@@ -20,7 +20,7 @@
 
 	> .shared-files {
 		flex-grow: 1;
-		overflow-y: scroll;
+		overflow-y: auto;
 		margin-top: 0.5rem;
 
 		> .file-entry {
@@ -75,6 +75,23 @@
 				}
 			}
 		}
+
+		> .empty {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			padding-top: 20vmin;
+
+			> p {
+				padding: 6px 12px;
+				border-radius: 6px;
+				user-select: none;
+				pointer-events: none;
+				font-size: 20px;
+				color: #000;
+			}
+		}
 	}
 }
 
diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl
index 2782533..06ea717 100644
--- a/app/stylus/components/ParticipantList.styl
+++ b/app/stylus/components/ParticipantList.styl
@@ -1,9 +1,10 @@
 [data-component='ParticipantList'] {
 	width: 100%;
+	overflow-y: auto;
+	padding: 6px;
 
 	> .list {
-		box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), \
-					0 4px 20px 0 rgba(0,0,0,0.19);
+		box-shadow: 0 2px 5px 2px rgba(0,0,0,0.2);
 		background-color: #fff;
 
 		> .list-header {
@@ -22,7 +23,7 @@
 			}
 
 			&.selected {
-				border-bottom-color: #377EFF;
+				background-color: #377eff;
 			}
 		}
 	}
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index ac78300..a2a8fd8 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -202,5 +202,6 @@
 		padding: 0.5rem;
 		display: flex;
 		flex-direction: column;
+		min-height: 0;
 	}
 }