From 2db20d4885e80e417147753cbafdba5e71e3fe90 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Wed, 5 Jan 2022 19:53:49 +0100
Subject: [PATCH] Fix font and padding issues

---
 res/include/style/layout.css                  | 12 +----
 svelte/src/file_viewer/IntroPopup.svelte      |  8 +++-
 .../src/user_file_manager/FileManager.svelte  | 48 ++++++++++---------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/res/include/style/layout.css b/res/include/style/layout.css
index c1667b0..acaed7b 100644
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -72,13 +72,6 @@ body{
 }
 
 /* Page layout elements */
-.page_wrapper {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
 
 .button_toggle_navigation {
 	position: fixed;
@@ -241,12 +234,11 @@ body{
 
 /* Common elements */
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, .title {
 	line-height: 1em;
 	margin: 0.5em 0;
-	font-weight: normal;
 	font-weight: lighter;
-	font-family: sans-serif;
+	font-family: 'Open Sans Light', sans-serif;
 }
 
 h1 {
diff --git a/svelte/src/file_viewer/IntroPopup.svelte b/svelte/src/file_viewer/IntroPopup.svelte
index 0e131d2..04faf88 100644
--- a/svelte/src/file_viewer/IntroPopup.svelte
+++ b/svelte/src/file_viewer/IntroPopup.svelte
@@ -36,7 +36,7 @@ onMount(() => {
 
 {#if visible}
 	<div bind:this={popup} in:fade out:fade class="intro_popup">
-		<h3>Upload your own files here</h3>
+		<span class="title">Upload your own files here</span>
 		<p>
 			With pixeldrain you can share your files anywhere on the web. The
 			sky is the limit!
@@ -55,6 +55,7 @@ onMount(() => {
 	width: 360px;
 	max-width: 80%;
 	height: auto;
+	padding: 8px;
 	background-color: var(--layer_4_color);
 	box-shadow: 1px 1px 10px var(--shadow_color);
 	border-radius: 20px;
@@ -71,8 +72,11 @@ onMount(() => {
 	border-left: 15px solid transparent;
 	border-right: 15px solid transparent;
 }
+.title {
+	font-size: 1.6em;
+}
 .close {
 	float: right;
-	margin: 0 10px 10px 0;
+	margin: 0;
 }
 </style>
diff --git a/svelte/src/user_file_manager/FileManager.svelte b/svelte/src/user_file_manager/FileManager.svelte
index fede13c..9ac9ee3 100644
--- a/svelte/src/user_file_manager/FileManager.svelte
+++ b/svelte/src/user_file_manager/FileManager.svelte
@@ -294,28 +294,32 @@ onMount(() => {
 		width="600px"
 		on:is_visible={e => {help_modal_visible = e.detail}}
 	>
-		<p>
-			In the file manager you can see the files you have uploaded and the
-			lists you have created.
-		</p>
-		<h3>Searching</h3>
-		<p>
-			By clicking the search bar or pressing the / button you can search
-			through your files or lists. Only the entries matching your search
-			term will be shown. Pressing Enter will open the first search result
-			in a new tab. Pressing Escape will cancel the search and all files
-			will be shown again.
-		</p>
-		<h3>Bulk actions</h3>
-		<p>
-			With the Select button you can click files to select them. Once you
-			have made a selection you can use the buttons on the toolbar to
-			either create a list containing the selected files or delete them.
-		</p>
-		<p>
-			Holding Shift while selecting a file will select all the files
-			between the file you last selected and the file you just clicked.
-		</p>
+		<div class="indent">
+			<p>
+				In the file manager you can see the files you have uploaded and
+				the lists you have created.
+			</p>
+			<h3>Searching</h3>
+			<p>
+				By clicking the search bar or pressing the / button you can
+				search through your files or lists. Only the entries matching
+				your search term will be shown. Pressing Enter will open the
+				first search result in a new tab. Pressing Escape will cancel
+				the search and all files will be shown again.
+			</p>
+			<h3>Bulk actions</h3>
+			<p>
+				With the Select button you can click files to select them. Once
+				you have made a selection you can use the buttons on the toolbar
+				to either create a list containing the selected files or delete
+				them.
+			</p>
+			<p>
+				Holding Shift while selecting a file will select all the files
+				between the file you last selected and the file you just
+				clicked.
+			</p>
+		</div>
 	</Modal>
 
 	<!-- This frame will load the download URL when a download button is pressed -->