From 4f17c71b56bef4ceb0710d277823a0bec96d163b Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Mon, 3 Jan 2022 14:02:50 +0100
Subject: [PATCH] Make the UI flatter

---
 res/include/style/layout.css                  | 89 ++++++-------------
 res/static/ads.txt                            |  1 +
 res/template/404.html                         |  8 +-
 res/template/451.html                         |  8 +-
 res/template/500.html                         |  8 +-
 res/template/admin.html                       |  1 -
 res/template/appearance.html                  |  8 +-
 res/template/apps.html                        |  8 +-
 res/template/email_confirm.html               | 12 ++-
 res/template/file_not_found.html              | 30 ++++---
 res/template/file_viewer_compat.html          |  9 +-
 res/template/fragments/form.html              |  9 +-
 res/template/fragments/markdown_wrapper.html  |  8 +-
 res/template/fragments/page_wrap.html         |  4 +-
 res/template/history.html                     | 10 ++-
 res/template/home.html                        | 25 +++---
 res/template/server_status.html               | 25 ------
 res/template/user_buckets.html                |  5 +-
 res/template/user_home.html                   |  2 -
 res/template/user_logout.html                 | 47 +++++-----
 res/template/widgets.html                     | 11 +--
 svelte/src/admin_panel/Home.svelte            | 11 ++-
 svelte/src/admin_panel/Router.svelte          | 32 +++----
 svelte/src/home_page/HomePage.svelte          | 55 ++++++------
 .../user_file_manager/DirectoryElement.svelte |  4 +-
 .../src/user_file_manager/FileManager.svelte  | 19 +++-
 svelte/src/user_home/Router.svelte            | 32 +++----
 svelte/src/util/Modal.svelte                  |  2 +-
 webcontroller/user_style.go                   |  2 +-
 webcontroller/web_controller.go               |  1 -
 30 files changed, 239 insertions(+), 247 deletions(-)
 delete mode 100644 res/template/server_status.html

diff --git a/res/include/style/layout.css b/res/include/style/layout.css
index c75088f..14b8e48 100644
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -7,19 +7,6 @@
 	--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
 }
 
-/* Fonts */
-@font-face {
-	font-family: 'light';
-	font-display: fallback;
-	font-style: normal;
-	font-weight: normal;
-	src:
-		local('Cantarell Light'),
-		local('Cantarell, Light'),
-		local('Cantarell-Light'),
-		url(/res/misc/Cantarell-Light.otf) format("opentype");
-}
-
 @font-face {
 	font-family: 'Material Icons';
 	font-style: normal;
@@ -65,18 +52,24 @@ body{
 	font-family: system-ui, sans-serif;
 	font-size: 17px;
 	line-height: 1.8em;
-	color: #b2b2b2; /* Fallback */
 	color: var(--text_color);
+	background-color: var(--layer_2_color);
 	padding: 0;
 }
-body, .checkers {
+.checkers {
 	background-image: url("{{bgPattern}}");
 	background-color: #111111; /* Fallback */
 	background-color: var(--layer_1_color);
 	background-repeat: repeat;
-	background-attachment: fixed;
 	background-blend-mode: luminosity;
 }
+.inset {
+	padding-top: 70px;
+	box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
+	border-radius: 16px;
+	text-align: center;
+	overflow: hidden;
+}
 
 /* Page layout elements */
 .page_wrapper {
@@ -100,7 +93,7 @@ body, .checkers {
 	background: var(--input_color);
 	border-radius: 0;
 	border-bottom-right-radius: 90%;
-	box-shadow: 2px 2px 8px -3px var(--shadow_color);
+	box-shadow: 0 0 6px -2px var(--shadow_color);
 }
 .button_toggle_navigation:active {
 	padding: 15px 15px 10px 15px;
@@ -109,23 +102,19 @@ body, .checkers {
 .page_navigation {
 	position: fixed;
 	backface-visibility: hidden;
-	z-index: 99;
 	width: 18em;
 	height: 100%;
 	left: 0;
 	float: left;
-	background-color: #1c1c1c;
-	background-color: var(--layer_1_color);
-	padding: 20px 0 0.5em 0;
+	background-color: var(--layer_2_color);
+	padding: 20px 10px 10px 0;
 	overflow-y: auto;
 	overflow-x: hidden;
 	text-align: left;
-	box-shadow: inset -8px 0px 8px -8px var(--shadow_color);
 	transition: left 0.5s;
 }
 .page_body {
 	position: absolute;
-	z-index: 200;
 	right: 0;
 	height: auto;
 	left: 18em;
@@ -134,9 +123,8 @@ body, .checkers {
 	text-align: center; /* Center the header and body */
 	overflow-y: auto;
 	overflow-x: hidden;
-	z-index: 50;
+	background-color: var(--layer_2_color);
 	transition: left 0.5s;
-	padding: 70px 0 100px 0;
 }
 @media (max-width: 1000px) {
 	.page_navigation {
@@ -147,18 +135,6 @@ body, .checkers {
 		width: 100%;
 	}
 }
-
-.page_body > .page_content {
-	position: relative;
-	display: inline-block;
-	width: 100%;
-	height: auto;
-	padding: 0 0 20px 0;
-	background-color: #212121;
-	background-color: var(--layer_2_color);
-	box-shadow: 1px 1px 12px 0 var(--shadow_color);
-	clear: both;
-}
 .limit_width {
 	position: relative;
 	display: inline-block;
@@ -184,8 +160,9 @@ body, .checkers {
 	text-align: center;
 	padding: 4px;
 	margin: 0.3em 15px 0.3em 15px;
-	font-family: "light", sans-serif;
-	font-size: 1.6em;
+	font-family: sans-serif;
+	font-weight: lighter;
+	font-size: 1.5em;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	transition: background-color 0.5s;
@@ -200,11 +177,6 @@ body, .checkers {
 	text-decoration: none;
 }
 
-.inset {
-	box-shadow: inset 1px 1px 20px 0 #000000;
-	box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
-}
-
 .highlight_dark,
 .highlight_middle,
 .highlight_light,
@@ -223,22 +195,19 @@ body, .checkers {
 	overflow: hidden;
 	text-align: center;
 	padding: 4px;
+	border-radius: 8px;
 }
 .highlight_dark, .highlight_1 {
 	background-color: var(--layer_1_color);
-	box-shadow: 1px 1px 6px -2px var(--shadow_color);
 }
 .highlight_middle, .highlight_2 {
 	background-color: var(--layer_2_color);
-	box-shadow: 1px 1px 6px -2px var(--shadow_color);
 }
 .highlight_light, .highlight_3 {
 	background-color: var(--layer_3_color);
-	box-shadow: 1px 1px 6px -2px var(--shadow_color);
 }
 .highlight_lighter, .highlight_4 {
 	background-color: var(--layer_4_color);
-	box-shadow: 1px 1px 6px -2px var(--shadow_color);
 }
 .highlight_green {
 	background-color: rgba(0, 255, 0, 0.05);
@@ -273,43 +242,40 @@ h1, h2, h3, h4, h5, h6 {
 	line-height: 1em;
 	margin: 0.5em 10px;
 	font-weight: normal;
+	font-weight: lighter;
+	font-family: sans-serif;
 }
 
 h1 {
 	font-size: 2.5em;
-	font-family: "light", sans-serif;
 	text-align: center;
+	margin-bottom: 50px;
 }
 h2 {
 	font-size: 2em;
-	font-family: "light", sans-serif;
 	border-bottom: 1px var(--layer_4_color_border) solid;
 }
 h3 {
-	font-size: 1.6em;
-	font-family: "light", sans-serif;
+	font-size: 1.75em;
 	border-bottom: 1px var(--layer_3_color_border) solid;
 }
 h4 {
-	font-size: 1.25em;
-	font-family: "light", sans-serif;
+	font-size: 1.50em;
 	border-bottom: 1px var(--layer_2_color_border) solid;
 }
 h5 {
-	font-size: 1em;
-	font-family: sans-serif;
+	font-size: 1.25em;
 	border-bottom: 1px var(--layer_1_color_border) solid;
 }
-h6{
-	font-size: .75em;
-	font-family: sans-serif;
+h6 {
+	font-size: 1em;
 }
 
 p, .indent {
 	margin: 10px;
 }
 
-hr{
+hr {
 	height: 1px;
 	border: none;
 	background-color: var(--input_color);
@@ -513,13 +479,12 @@ select:disabled , select.disabled {
 .tab_bar {
 	display: block;
 	width: 100%;
-	margin: 0 0 16px 0;
 	overflow-x: auto;
 	overflow-y: hidden;
 	white-space: nowrap;
 	text-align: center;
 	background-color: var(--layer_1_color);
-	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
+	box-shadow: inset 0 -10px 8px -12px var(--shadow_color), 0 0 10px var(--shadow_color);
 }
 .tab_bar > button,
 .tab_bar > .button {
diff --git a/res/static/ads.txt b/res/static/ads.txt
index 4936902..2ca10c3 100644
--- a/res/static/ads.txt
+++ b/res/static/ads.txt
@@ -1407,3 +1407,4 @@ onetag.com, 5cd7fb62fac7ec9, DIRECT
 openx.com, 537133236, RESELLER, 6a698e2ec38604c6
 pubmatic.com, 158685, RESELLER, 5d62403b186f2ace
 rubiconproject.com, 13380, RESELLER, 0bfd66d529a55807
+triplelift.com, 10992, RESELLER, 6c33edb13117fd86
diff --git a/res/template/404.html b/res/template/404.html
index 00ca895..866cf93 100644
--- a/res/template/404.html
+++ b/res/template/404.html
@@ -7,8 +7,10 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>This page does not exist!</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>This page does not exist!</h1>
+		</div>
+		<div class="limit_width">
 			<p>
 				If you came here by a link from this very same website you can
 				tell me about it on
@@ -21,7 +23,7 @@
 			<p>
 				Bye!
 			</p>
-		</div></div>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
diff --git a/res/template/451.html b/res/template/451.html
index 761c00f..552cd3c 100644
--- a/res/template/451.html
+++ b/res/template/451.html
@@ -7,13 +7,15 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>451, Unavailable For Legal Reasons</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>451, Unavailable For Legal Reasons</h1>
+		</div>
+		<div class="limit_width">
 			<p>
 				Hello. This file has received an abuse report and has been taken
 				down. It cannot be shared anymore.
 			</p>
-		</div></div>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
diff --git a/res/template/500.html b/res/template/500.html
index 2a00fc9..865e717 100644
--- a/res/template/500.html
+++ b/res/template/500.html
@@ -7,8 +7,10 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>You broke pixeldrain</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>You broke pixeldrain</h1>
+		</div>
+		<div class="limit_width">
 			<p>
 				Great job.
 			</p>
@@ -22,7 +24,7 @@
 				try again in a few minutes (or hours), or go back to the <a
 				href='/'>home page</a> and start over.
 			</p>
-		</div></div>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
diff --git a/res/template/admin.html b/res/template/admin.html
index a6ef80c..cf8b7b4 100644
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -15,7 +15,6 @@
 		</head>
 		<body>
 			{{template "page_top" .}}
-			<h1>Admin Panel</h1>
 			<div id="page_content" class="page_content"></div>
 			{{template "page_bottom" .}}
 		</body>
diff --git a/res/template/appearance.html b/res/template/appearance.html
index a23b388..adb9df3 100644
--- a/res/template/appearance.html
+++ b/res/template/appearance.html
@@ -7,8 +7,10 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>Change website appearance</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>Change website appearance</h1>
+		</div>
+		<div class="limit_width">
 			<p>
 				You can change how pixeldrain looks! Your theme choice will
 				be saved in a cookie.
@@ -26,7 +28,7 @@
 				<input type="radio" id="style_deepsea"        name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
 				<!--<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>-->
 			</div>
-		</div></div>
+		</div>
 
 		<script>
 		// Style selector
diff --git a/res/template/apps.html b/res/template/apps.html
index f35a7f6..ba0ba2b 100644
--- a/res/template/apps.html
+++ b/res/template/apps.html
@@ -14,8 +14,10 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>Apps</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>Apps</h1>
+		</div>
+		<div class="limit_width">
 			<h2>ShareX</h2>
 			<div class="specs">
 				Platform: Windows 7, 8.1 and 10 |
@@ -108,7 +110,7 @@
 				please send them to
 				<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
 			</p>
-		</div></div>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
diff --git a/res/template/email_confirm.html b/res/template/email_confirm.html
index ebed176..e5d3aa1 100644
--- a/res/template/email_confirm.html
+++ b/res/template/email_confirm.html
@@ -7,28 +7,26 @@
 	<body>
 		{{template "page_top" .}}
 
-		<div class="page_content">
-			<div class="limit_width">
-				{{if eq .Other "success"}}
+		<div class="limit_width">
+			{{if eq .Other "success"}}
 				<h1>Success!</h1>
 				<p>
 					Your account's e-mail address has been updated.
 				</p>
-				{{else if eq .Other "not_found"}}
+			{{else if eq .Other "not_found"}}
 				<h1>E-mail change failed</h1>
 				<p>
 					This e-mail change request does not exist or has expired.
 					Please try again if you still want to change your e-mail
 					address.
 				</p>
-				{{else}}
+			{{else}}
 				<h1>Error</h1>
 				<p>
 					Something went wrong while processing this request. Please
 					try again later.
 				</p>
-				{{end}}
-			</div>
+			{{end}}
 		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
diff --git a/res/template/file_not_found.html b/res/template/file_not_found.html
index 9e546bc..0df779d 100644
--- a/res/template/file_not_found.html
+++ b/res/template/file_not_found.html
@@ -7,8 +7,10 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>404, File Not Found!</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>404, File Not Found!</h1>
+		</div>
+		<div class="limit_width">
 			<p>
 				This file does not exist, or it has been removed. Possible
 				reasons for this are:
@@ -18,7 +20,7 @@
 					The file has not been viewed for 30 days and has expired
 				</li>
 				<li>
-					The user who uploaded the file has deleted it
+					The person who uploaded the file has deleted it
 				</li>
 				<li>
 					Something went wrong on the pixeldrain servers causing the
@@ -32,8 +34,7 @@
 			<p>
 				I'm sorry for the inconvenience.
 			</p>
-
-		</div></div>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
@@ -48,21 +49,28 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>404, List Not Found!</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>404, List Not Found!</h1>
+		</div>
+		<div class="limit_width">
 			<p>
 				This list does not exist, or it has been removed. Possible
 				reasons for this are:
 			</p>
 			<ul>
-				<li>All files in this list have not been viewed for 30 days and have expired</li>
-				<li>Something went wrong on the pixeldrain servers causing the list to be temporarily unavailable</li>
+				<li>
+					All files in this list have not been viewed for 30 days and
+					have expired
+				</li>
+				<li>
+					Something went wrong on the pixeldrain servers causing the
+					list to be temporarily unavailable
+				</li>
 			</ul>
 			<p>
 				I'm sorry for the inconvenience.
 			</p>
-
-		</div></div>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
diff --git a/res/template/file_viewer_compat.html b/res/template/file_viewer_compat.html
index 9973d97..de93b2e 100644
--- a/res/template/file_viewer_compat.html
+++ b/res/template/file_viewer_compat.html
@@ -24,8 +24,11 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>{{.Title}}</h1>
-		<div class="page_content"><div class="limit_width">
+
+		<div class="checkers inset">
+			<h1>{{.Title}}</h1>
+		</div>
+		<div class="limit_width">
 			{{if eq .Other.Type "file"}}
 				Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
 			{{else}}
@@ -63,7 +66,7 @@
 				<li><a href="https://www.apple.com/safari/">Safari</a> (Mac OS)</li>
 				<li><a href="https://www.microsoft.com/en-us/edge">Edge</a> (Windows)</li>
 			</ul>
-		</div></div>
+		</div>
 		{{template "analytics"}}
 	</body>
 </html>
diff --git a/res/template/fragments/form.html b/res/template/fragments/form.html
index e308011..46fd3c9 100644
--- a/res/template/fragments/form.html
+++ b/res/template/fragments/form.html
@@ -1,5 +1,4 @@
 {{define "form"}}
-	<h1>{{.Title}}</h1>
 	{{.PreFormHTML}}
 	<form class="highlight_dark" method="POST">
 		{{if eq .Submitted true}}
@@ -111,10 +110,14 @@
 	<body>
 		<div id='body' class="body">
 			{{template "page_top" .}}
-			<div class="page_content"><div class="limit_width">
+			<div class="checkers inset">
+				<h1>{{.Form.Title}}</h1>
+			</div>
+			<br/>
+			<div class="limit_width">
 				{{template "form" .Form}}
 				<br/>
-			</div></div>
+			</div>
 			{{template "page_bottom" .}}
 		</div>
 
diff --git a/res/template/fragments/markdown_wrapper.html b/res/template/fragments/markdown_wrapper.html
index 3ede9ff..bee3b9b 100644
--- a/res/template/fragments/markdown_wrapper.html
+++ b/res/template/fragments/markdown_wrapper.html
@@ -7,10 +7,12 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>{{.Title}}</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>{{.Title}}</h1>
+		</div>
+		<div class="limit_width">
 			{{.Other}}
-		</div></div>
+		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
 	</body>
diff --git a/res/template/fragments/page_wrap.html b/res/template/fragments/page_wrap.html
index cebd835..65a5608 100644
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -54,7 +54,7 @@ function resetMenu() {
 {{end}}
 
 {{define "page_bottom"}}
-	<div class="highlight_dark">
+	<div class="inset checkers" style="padding-top: 150px">
 		<div style="display: inline-block; margin: 0 8px 0 8px;">
 			Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
 		</div>
@@ -71,6 +71,8 @@ function resetMenu() {
 		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
 			page rendered by {{.Hostname}}
 		</span>
+		<br/>
+		<br/>
 	</div>
 </div><!-- end page_body -->
 {{end}}
diff --git a/res/template/history.html b/res/template/history.html
index 2dddaee..af6b276 100644
--- a/res/template/history.html
+++ b/res/template/history.html
@@ -7,8 +7,12 @@
 	<body>
 		<div id='body' class="body">
 			{{template "page_top" .}}
-			<h1>Upload History</h1>
-			<div class="page_content"><div class="limit_width">
+
+			<div class="checkers inset">
+				<h1>Upload History</h1>
+			</div>
+
+			<div class="limit_width">
 				<p>
 				Here are all files you have previously uploaded to pixeldrain using this computer.
 				This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
@@ -16,7 +20,7 @@
 				<br/>
 
 				<div id="uploaded_files" class="highlight_dark"></div>
-			</div></div>
+			</div>
 			{{template "page_bottom" .}}
 		</div>
 		<script>
diff --git a/res/template/home.html b/res/template/home.html
index f464a0f..60bf45b 100644
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -8,7 +8,7 @@
 		.header_image{
 			width: 100%;
 			max-width: 800px;
-			margin: 0 auto 50px auto;
+			margin: auto;
 		}
 		.feat_table {
 			display: flex;
@@ -93,18 +93,21 @@
 	</head>
 	<body>
 		{{template "page_top" .}}
-
-		<picture>
-			<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
-			<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
-		</picture>
-		<br/>
+		<div class="checkers inset" style="padding-bottom: 60px;">
+			<picture>
+				<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
+				<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
+			</picture>
+		</div>
 
 		<!-- Svelte element -->
-		<div id="uploader" class="page_content" style="margin-bottom: 50px;"></div>
+		<div id="uploader" class="page_content"></div>
 
-		<h1>What is pixeldrain?</h1>
-		<div class="page_content"><div class="limit_width">
+		<div class="checkers inset">
+			<h1>What is pixeldrain?</h1>
+		</div>
+
+		<div class="limit_width">
 			<p>
 				Pixeldrain is a file sharing website built for speed and ease of
 				use. You can upload files you want to share online to our
@@ -472,7 +475,7 @@
 				logging in head to the <a href="/user/transactions">transactions
 				page</a> to deposit your coins.
 			</p>
-		</div></div>
+		</div>
 
 		<template id="tpl_file_expiry">
 			<p>
diff --git a/res/template/server_status.html b/res/template/server_status.html
deleted file mode 100644
index 7d45db6..0000000
--- a/res/template/server_status.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{{define "server_status"}}<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" "Server status"}}
-		{{template "user_style" .}}
-
-		<style>
-			.status_frame {
-				display: block;
-				width: 100%;
-				height: 100%;
-				border: none;
-			}
-		</style>
-	</head>
-
-	<body>
-		{{template "page_menu" .}}
-		<div id="page_body" class="page_body" style="padding: 0; top: 0; bottom: 0;">
-			<iframe src="https://stats.uptimerobot.com/p9v2ktzyjm" class="status_frame"></iframe>
-		</div>
-		{{template "analytics"}}
-	</body>
-</html>
-{{end}}
diff --git a/res/template/user_buckets.html b/res/template/user_buckets.html
index 659f68d..0e658c4 100644
--- a/res/template/user_buckets.html
+++ b/res/template/user_buckets.html
@@ -9,7 +9,10 @@
 	</head>
 	<body>
 		{{template "page_top" .}}
-		<h1>My Buckets</h1>
+
+		<div class="checkers inset">
+			<h1>My Buckets</h1>
+		</div>
 		<div id="page_content" class="page_content"></div>
 
 		{{template "page_bottom" .}}
diff --git a/res/template/user_home.html b/res/template/user_home.html
index 66ebb83..e232bde 100644
--- a/res/template/user_home.html
+++ b/res/template/user_home.html
@@ -16,8 +16,6 @@
 	<body>
 		{{template "page_top" .}}
 
-		<h1>Welcome home, {{.User.Username}}!</h1>
-
 		<div id="page_content" class="page_content"></div>
 
 		{{template "page_bottom" .}}
diff --git a/res/template/user_logout.html b/res/template/user_logout.html
index a3c3a62..57cbc86 100644
--- a/res/template/user_logout.html
+++ b/res/template/user_logout.html
@@ -6,30 +6,31 @@
 	</head>
 	<body>
 		{{template "page_top" .}}
-		<h1>Please confirm that you want to log out of your pixeldrain account</h1>
-
-		<div class="page_content">
+		<div class="checkers inset">
+			<h1>Please confirm that you want to log out of your pixeldrain account</h1>
+			<br/>
+		</div>
+		<br/>
+		<form method="POST" action="/logout">
+			<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
+		</form>
+		<div class="limit_width">
+			<br/>
+			<h2>Why do I need to confirm my logout?</h2>
+			<p>
+				We need you to confirm your action so we can be sure that you
+				really requested a logout. If we didn't do this, anyone (or any
+				website) would be able to send you to this page and you would
+				automatically get logged out of pixeldrain, which would be very
+				annoying.
+			</p>
+			<p>
+				To prevent this from happening we're verifying that you actually
+				want to log out by making you click this button. Because this
+				logout button triggers a different request type than normal
+				page visit we can confirm that you really want to log out.
+			</p>
 			<br/>
-			<form method="POST" action="/logout">
-				<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
-			</form>
-			<div class="limit_width">
-				<br/>
-				<h2>Why do I need to confirm my logout?</h2>
-				<p>
-					We need you to confirm your action so we can be sure that you
-					really requested a logout. If we didn't do this, anyone (or any
-					website) would be able to send you to this page and you would
-					automatically get logged out of pixeldrain, which would be very
-					annoying.
-				</p>
-				<p>
-					To prevent this from happening we're verifying that you actually
-					want to log out by making you click this button. Because this
-					logout button triggers a different request type than normal
-					page visit we can confirm that you really want to log out.
-				</p>
-			</div>
 		</div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}
diff --git a/res/template/widgets.html b/res/template/widgets.html
index ea54171..6c005d8 100644
--- a/res/template/widgets.html
+++ b/res/template/widgets.html
@@ -7,10 +7,11 @@
 	</head>
 	<body>
 		{{template "page_top" .}}
-		<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
-		<br/>
-		<div class="page_content"><div class="limit_width">
+
+		<div class="checkers inset">
 			<h1>Widget showcase</h1>
+		</div>
+		<div class="limit_width">
 			<h2>Size 2 header</h2>
 			<h3>Size 3 header</h3>
 			<h4>Size 4 header</h4>
@@ -62,8 +63,8 @@
 			Color <input type="color" name="favcolor" value="#ff0000">
 
 			<br/><br/>
-			<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 640px; max-width: 100%; height: 480px; border-radius: 6px;"></iframe>
-		</div></div>
+			<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>
+		</div>
 		{{template "page_bottom" .}}
 	</body>
 </html>
diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index 20dd202..3e77fb8 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -10,8 +10,9 @@ let graphTimeout = null
 let start_time = ""
 let end_time = ""
 let total_bandwidth = 0
-let total_views = 0
 let total_bandwidth_paid = 0
+let total_views = 0
+let total_downloads = 0
 const loadGraph = (minutes, interval, live) => {
 	if (graphTimeout !== null) { clearTimeout(graphTimeout) }
 	if (live) {
@@ -51,8 +52,9 @@ const loadGraph = (minutes, interval, live) => {
 		start_time = resp.views.timestamps[0]
 		end_time = resp.views.timestamps.slice(-1)[0];
 		total_bandwidth = resp.bandwidth.amounts.reduce((acc, val) => acc + val)
-		total_views = resp.views.amounts.reduce((acc, val) => acc + val)
 		total_bandwidth_paid = resp.bandwidth_paid.amounts.reduce((acc, val) => acc + val)
+		total_views = resp.views.amounts.reduce((acc, val) => acc + val)
+		total_downloads = resp.downloads.amounts.reduce((acc, val) => acc + val)
 	})
 }
 
@@ -176,8 +178,9 @@ onDestroy(() => {
 	<div class="highlight_dark">
 		Total usage from {start_time} to {end_time}<br/>
 		{formatDataVolume(total_bandwidth, 3)} bandwidth,
-		{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth and
-		{formatThousands(total_views, 3)} views
+		{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,
+		{formatThousands(total_views, 3)} views and
+		{formatThousands(total_downloads, 3)} downloads
 	</div>
 
 	<br/>
diff --git a/svelte/src/admin_panel/Router.svelte b/svelte/src/admin_panel/Router.svelte
index bb2fa39..647f368 100644
--- a/svelte/src/admin_panel/Router.svelte
+++ b/svelte/src/admin_panel/Router.svelte
@@ -26,7 +26,9 @@ onMount(() => {
 })
 </script>
 
-<div>
+<div class="checkers inset">
+	<h1>Admin Panel</h1>
+
 	<div class="tab_bar">
 		<a class="button"
 			href="/admin"
@@ -75,18 +77,18 @@ onMount(() => {
 			Update global settings
 		</a>
 	</div>
-
-	{#if page === "status"}
-		<Home></Home>
-	{:else if page === "block_files"}
-		<BlockFiles></BlockFiles>
-	{:else if page === "abuse_reports"}
-		<AbuseReports></AbuseReports>
-	{:else if page === "abuse_reporters"}
-		<AbuseReporters></AbuseReporters>
-	{:else if page === "ip_bans"}
-		<IpBans></IpBans>
-	{:else if page === "subscriptions"}
-		<Subscriptions></Subscriptions>
-	{/if}
 </div>
+
+{#if page === "status"}
+	<Home></Home>
+{:else if page === "block_files"}
+	<BlockFiles></BlockFiles>
+{:else if page === "abuse_reports"}
+	<AbuseReports></AbuseReports>
+{:else if page === "abuse_reporters"}
+	<AbuseReporters></AbuseReporters>
+{:else if page === "ip_bans"}
+	<IpBans></IpBans>
+{:else if page === "subscriptions"}
+	<Subscriptions></Subscriptions>
+{/if}
diff --git a/svelte/src/home_page/HomePage.svelte b/svelte/src/home_page/HomePage.svelte
index 39637f1..6578ce6 100644
--- a/svelte/src/home_page/HomePage.svelte
+++ b/svelte/src/home_page/HomePage.svelte
@@ -391,15 +391,14 @@ const keydown = (e) => {
 		</div>
 	{/if}
 
-	<div class="instruction" style="margin-top: 0;">
-		<div class="limit_width">
-			<span class="big_number">1</span>
-			<span class="instruction_text">Select files to upload</span>
-			<br/>
-			You can also drop files on this page from your file
-			manager or paste an image from your clipboard
-		</div>
+	<div class="instruction limit_width" style="margin-top: 0; border-top: none;">
+		<span class="big_number">1</span>
+		<span class="instruction_text">Select files to upload</span>
+		<br/>
+		You can also drop files on this page from your file manager or
+		paste an image from your clipboard
 	</div>
+	<br/>
 
 	<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
 	<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
@@ -417,22 +416,21 @@ const keydown = (e) => {
 		<a href="/about#content-policy">content policy</a>.
 	<p>
 
-	<div class="instruction" style="margin-bottom: 0;">
-		<div class="limit_width">
-			<span class="big_number">2</span>
-			<span class="instruction_text">Wait for the files to finish uploading</span>
-			<br/>
-			<div class="stats_box">
-				<div>Size {formatDataVolume(total_size, 3)}</div>
-				<div>Progress {(total_progress*100).toPrecision(3)}%</div>
-				<div>ETA {formatDuration(remaining_time, 0)}</div>
-				<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
-			</div>
+	<div class="instruction limit_width" style="margin-bottom: 0;">
+		<span class="big_number">2</span>
+		<span class="instruction_text">Wait for the files to finish uploading</span>
+		<br/>
+		<div class="stats_box">
+			<div>Size {formatDataVolume(total_size, 3)}</div>
+			<div>Progress {(total_progress*100).toPrecision(3)}%</div>
+			<div>ETA {formatDuration(remaining_time, 0)}</div>
+			<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
 		</div>
 	</div>
 	<div class="progress_bar_outer" style="margin-bottom: 1.5em;">
 		<div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
 	</div>
+	<br/>
 
 	<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
 		Gimme gimme gimme!<br/>
@@ -443,12 +441,11 @@ const keydown = (e) => {
 		<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
 	{/each}
 
-	<div class="instruction">
-		<div class="limit_width">
-			<span class="big_number">3</span>
-			<span class="instruction_text">Share the files</span>
-		</div>
+	<div class="instruction limit_width">
+		<span class="big_number">3</span>
+		<span class="instruction_text">Share the files</span>
 	</div>
+	<br/>
 
 	{#if upload_queue.length > 1}
 		You can create an album to group your files together into one link<br/>
@@ -507,8 +504,8 @@ const keydown = (e) => {
 	<br/>
 	{#if qr_visible}
 		<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
+		<br/>
 	{/if}
-	<br/>
 	<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
 		<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
 	</button>
@@ -521,11 +518,9 @@ const keydown = (e) => {
 	<br/>
 
 	{#if window.user.subscription.name === ""}
-		<div class="instruction">
-			<div class="limit_width">
-				<span class="big_number">4</span>
-				<span class="instruction_text">Support me on Patreon!</span>
-			</div>
+		<div class="instruction limit_width">
+			<span class="big_number">4</span>
+			<span class="instruction_text">Support me on Patreon!</span>
 		</div>
 		<div class="limit_width">
 			<p>
diff --git a/svelte/src/user_file_manager/DirectoryElement.svelte b/svelte/src/user_file_manager/DirectoryElement.svelte
index b2f7bda..64b1359 100644
--- a/svelte/src/user_file_manager/DirectoryElement.svelte
+++ b/svelte/src/user_file_manager/DirectoryElement.svelte
@@ -325,7 +325,7 @@ const node_click = (index) => {
 			{/each}
 		</div>
 	</div>
-	<div id="footer" class="status_bar highlight_1">
+	<div id="footer">
 		{statusBar}
 	</div>
 </div>
@@ -382,6 +382,8 @@ const node_click = (index) => {
 #footer {
 	flex-shrink: 0;
 	text-align: left;
+	background-color: var(--layer_1_color);
+	padding: 4px;
 }
 
 .node {
diff --git a/svelte/src/user_file_manager/FileManager.svelte b/svelte/src/user_file_manager/FileManager.svelte
index 56b3526..7e9ba0a 100644
--- a/svelte/src/user_file_manager/FileManager.svelte
+++ b/svelte/src/user_file_manager/FileManager.svelte
@@ -256,8 +256,16 @@ onMount(() => {
 
 <svelte:window on:keydown={keydown} on:hashchange={hashChange} />
 
+<svetle:head>
+	<style>
+		#footer {
+			border-top-left-radius: 16px;
+		}
+	</style>
+</svetle:head>
+
 <div id="file_manager" class="file_manager">
-	<div id="nav_bar" class="nav_bar highlight_1">
+	<div id="nav_bar" class="nav_bar" class:expanded={selecting}>
 		<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
 		<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
 			<i class="icon">select_all</i> Select
@@ -271,7 +279,7 @@ onMount(() => {
 		</button>
 	</div>
 	{#if selecting}
-		<div class="nav_bar highlight_3">
+		<div class="nav_bar">
 			<!-- Buttons to make a list and bulk delete files will show up here soon. Stay tuned ;-) -->
 			{#if contentType === "files"}
 				<button on:click={createList}><i class="icon">list</i> Make list</button>
@@ -337,7 +345,6 @@ is collapsed */
 #file_manager {
 	position:         absolute;
 	padding:          0;
-	background-color: var(--layer_2_color);
 	width:            100%;
 	height:           100%;
 	display:          flex;
@@ -347,6 +354,12 @@ is collapsed */
 	flex-shrink: 0;
 	display: flex;
 	flex-direction: row;
+	border-bottom-left-radius: 16px;
+	background-color: var(--layer_1_color);
+	padding: 4px;
+}
+.nav_bar.expanded {
+	border-bottom-left-radius: 0;
 }
 .nav_bar > button {
 	flex-shrink: 0;
diff --git a/svelte/src/user_home/Router.svelte b/svelte/src/user_home/Router.svelte
index 1baf1eb..fe2c709 100644
--- a/svelte/src/user_home/Router.svelte
+++ b/svelte/src/user_home/Router.svelte
@@ -33,7 +33,9 @@ onMount(() => {
 
 <svelte:window on:popstate={get_page} />
 
-<div>
+<div class="checkers inset">
+	<h1>Welcome home, {window.user.username}!</h1>
+
 	<div class="tab_bar">
 		<a class="button"
 			href="/user"
@@ -73,18 +75,18 @@ onMount(() => {
 			</a>
 		{/if}
 	</div>
-
-	{#if page === "home"}
-		<Home/>
-	{:else if page === "settings"}
-		<AccountSettings/>
-	{:else if page === "api_keys"}
-		<APIKeys/>
-	{:else if page === "connect_app"}
-		<ConnectApp/>
-	{:else if page === "transactions"}
-		<Transactions/>
-	{:else if page === "subscription"}
-		<Subscription/>
-	{/if}
 </div>
+
+{#if page === "home"}
+	<Home/>
+{:else if page === "settings"}
+	<AccountSettings/>
+{:else if page === "api_keys"}
+	<APIKeys/>
+{:else if page === "connect_app"}
+	<ConnectApp/>
+{:else if page === "transactions"}
+	<Transactions/>
+{:else if page === "subscription"}
+	<Subscription/>
+{/if}
diff --git a/svelte/src/util/Modal.svelte b/svelte/src/util/Modal.svelte
index 28a6ca5..d4ccc40 100644
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -86,7 +86,7 @@ const keydown = e => {
 	left: 50%;
 	transform: translate(-50%, -20%);
 	padding: 0;
-	border-radius: 20px 20px 8px 8px;
+	border-radius: 20px 20px 16px 16px;
 	overflow: hidden;
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go
index e223e00..01adaa9 100644
--- a/webcontroller/user_style.go
+++ b/webcontroller/user_style.go
@@ -241,7 +241,7 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
 	Layer3Color: hsl{0, 1, 1},
 	Layer4Color: hsl{0, 1, 1},
 
-	ShadowColor: hsl{0, 0, 0.5},
+	ShadowColor: hsl{0, 0, 0},
 }
 
 var solarizedDarkStyle = pixeldrainStyleSheet{
diff --git a/webcontroller/web_controller.go b/webcontroller/web_controller.go
index f757166..4c62fc1 100644
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -159,7 +159,6 @@ func New(
 		{GET, "brave" /*           */, wc.serveMarkdown("brave.md", handlerOpts{})},
 		{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", handlerOpts{})},
 		{GET, "business" /*        */, wc.serveMarkdown("business.md", handlerOpts{})},
-		{GET, "server_status" /*   */, wc.serveTemplate("server_status", handlerOpts{})},
 		{GET, "apps" /*            */, wc.serveTemplate("apps", handlerOpts{})},
 
 		// User account pages