Use TextBlock elements in file previews

svelte/src/file_viewer/FileViewer.svelte

@@ -714,7 +714,7 @@ const keyboard_event = evt => {
 	vertical-align: middle;
 	transition: left 0.5s, right 0.5s;
 	overflow: auto;
-	box-shadow: inset 2px 2px 10px 2px var(--shadow_color);
+	box-shadow: inset 2px 2px 10px var(--shadow_color);
 	border-radius: 16px;
 }
 .file_preview_container.toolbar_visible { left: 8em; }

svelte/src/file_viewer/viewers/Abuse.svelte

@@ -1,4 +1,6 @@
 <script>
+import TextBlock from "./TextBlock.svelte"
+
 export const set_file = f => file = f
 let file = {
 	id: "",
@@ -9,7 +11,7 @@ let file = {
 </script>
 
 <br/>
-<div class="container">
+<TextBlock>
 	<h1>Unavailable for legal reasons</h1>
 	<p>
 		This file has received an abuse report and was taken down.
@@ -17,14 +19,4 @@ let file = {
 	<p>
 		Type of abuse: {file.abuse_type}. Reporter: {file.abuse_reporter_name}.
 	</p>
-</div>
-
-<style>
-.container {
-	display: inline-block;
-	max-width: 100%;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
-</style>
+</TextBlock>

svelte/src/file_viewer/viewers/File.svelte

@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import LargeFileMessage from "./LargeFileMessage.svelte";
+import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -16,7 +17,7 @@ let file = {
 
 <h1>You are viewing a file on pixeldrain</h1>
 <img src={file.icon_href} alt="File icon" class="icon">
-<div class="description">
+<TextBlock>
 	Name: {file.name}<br/>
 	Type: {file.mime_type}<br/>
 	No preview is available for this file type. Download to view it locally.
@@ -25,7 +26,7 @@ let file = {
 		<i class="icon">save</i>
 		<span>Download</span>
 	</button>
-</div>
+</TextBlock>
 <br/><br/>
 <LargeFileMessage file={file}></LargeFileMessage>
 
@@ -34,14 +35,4 @@ let file = {
 	display: inline-block;
 	vertical-align: middle;
 }
-.description {
-	display: inline-block;
-	text-align: left;
-	padding-left: 8px;
-	vertical-align: middle;
-	max-width: 600px;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
 </style>

svelte/src/file_viewer/viewers/LargeFileMessage.svelte

@@ -1,5 +1,6 @@
 <script>
 import { formatDuration } from "../../util/Formatting.svelte";
+import TextBlock from "./TextBlock.svelte";
 
 export let file = {
 	id: "",
@@ -11,7 +12,7 @@ export let file = {
 
 {#if file.show_ads && file.size > 1e8}
 	<!-- If the file is larger than 100 MB we show a warning about the transfer speed -->
-	<div class="description">
+	<TextBlock width="650px">
 		Your download speed is currently limited to 4 MiB/s. Downloading this
 		file for free will take at least
 		{formatDuration((file.size/4194304)*1000)} (under ideal conditions).
@@ -20,17 +21,5 @@ export let file = {
 			upgrade to Pro
 		</a>
 		to download at the fastest speed available.
-	</div>
+	</TextBlock>
 {/if}
-
-<style>
-.description {
-	display: inline-block;
-	text-align: center;
-	vertical-align: middle;
-	max-width: 700px;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
-</style>

svelte/src/file_viewer/viewers/RateLimit.svelte

@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import LargeFileMessage from "./LargeFileMessage.svelte";
+import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
 export const set_file = f => file = f
@@ -10,7 +11,7 @@ let file = {
 }
 </script>
 
-<div class="container">
+<TextBlock width="800px">
 	<h1>
 		<i class="icon">file_download_off</i>
 		Hotlink protection enabled
@@ -54,24 +55,11 @@ let file = {
 			<i class="icon">upgrade</i> Support Pixeldrain on Patreon
 		</a>
 	</div>
-</div>
+</TextBlock>
 <br/><br/>
 <LargeFileMessage file={file}></LargeFileMessage>
 
 <style>
-.container {
-	position: relative;
-	display: inline-block;
-	width: 800px;
-	max-width: 100%;
-	text-align: center;
-	background-color: rgba(0, 0, 0, 0.2);
-	border-radius: 16px;
-	text-align: left;
-	padding: 10px;
-	border-radius: 16px;
-}
-
 .file_thumbnail {
 	display: inline-block;
 	vertical-align: top;

svelte/src/file_viewer/viewers/TextBlock.svelte

@@ -0,0 +1,20 @@
+<script>
+export let width = "800px"
+</script>
+
+<div class="block" style="max-width: {width};">
+	<slot></slot>
+</div>
+
+<style>
+.block {
+	display: inline-block;
+	text-align: left;
+	padding-left: 8px;
+	vertical-align: middle;
+
+	background-color: rgba(0, 0, 0, 0.5);
+	border-radius: 16px;
+	padding: 8px;
+}
+</style>

svelte/src/file_viewer/viewers/Torrent.svelte

@@ -3,6 +3,7 @@ import { createEventDispatcher } from "svelte";
 import Magnet from "../../icons/Magnet.svelte";
 import { formatDate } from "../../util/Formatting.svelte"
 import { copy_text } from "../../util/Util.svelte";
+import TextBlock from "./TextBlock.svelte";
 import TorrentItem from "./TorrentItem.svelte"
 
 let dispatch = createEventDispatcher()
@@ -79,7 +80,7 @@ const copy_magnet = () => {
 
 <h1>{file.name}</h1>
 <img src={file.icon_href} alt="File icon" class="icon">
-<div class="description" style="max-width: 650px">
+<TextBlock width="650px">
 	{#if status === "finished"}
 		Created by: {torrent.created_by}<br/>
 		Comment: {torrent.comment}<br/>
@@ -119,14 +120,15 @@ const copy_magnet = () => {
 		<i class="icon">download</i>
 		<span>Download torrent file</span>
 	</button>
-</div>
+</TextBlock>
+
 {#if status === "finished"}
 	<br/>
 	<br/>
-	<div class="description">
+	<TextBlock width="1000px">
 		<h2>Files in this torrent</h2>
 		<TorrentItem item={torrent.files} />
-	</div>
+	</TextBlock>
 {/if}
 
 <style>
@@ -134,14 +136,4 @@ const copy_magnet = () => {
 	display: inline-block;
 	vertical-align: middle;
 }
-.description {
-	display: inline-block;
-	text-align: left;
-	padding-left: 8px;
-	vertical-align: middle;
-
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 16px;
-	padding: 8px;
-}
 </style>

svelte/src/file_viewer/viewers/Video.svelte

@@ -1,6 +1,7 @@
 <script>
 import { onMount,  createEventDispatcher, tick } from "svelte";
 import LargeFileMessage from "./LargeFileMessage.svelte";
+import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
 let file = {
@@ -74,9 +75,9 @@ let download = () => { dispatch("download", {}) }
 			</video>
 		{/if}
 	{:else}
-		<h1>This is a video file on pixeldrain</h1>
+		<h1>{file.name}</h1>
 		<img src={file.icon_href} alt="Video icon" style="display: inline-block; vertical-align: top;">
-		<div class="description">
+		<TextBlock width="600px">
 			The online video player on pixeldrain is only available when the
 			uploader of the file or the viewer pays for the bandwidth usage. You
 			can still download the video and watch it locally on your computer.
@@ -87,7 +88,7 @@ let download = () => { dispatch("download", {}) }
 			<button on:click={download}>
 				<i class="icon">save</i> Download
 			</button>
-		</div>
+		</TextBlock>
 		<br/><br/>
 		<LargeFileMessage file={file}></LargeFileMessage>
 	{/if}
@@ -110,11 +111,4 @@ let download = () => { dispatch("download", {}) }
 	top: 50%;
 	transform: translateY(-50%);
 }
-.description {
-	display: inline-block;
-	text-align: justify;
-	padding-left: 8px;
-	vertical-align: middle;
-	max-width: 550px;
-}
 </style>

svelte/src/user_home/AccountSettings.svelte

@@ -246,7 +246,7 @@ onMount(() => {
 		theme preference of the person viewing the file. Set to 'None' to let
 		the viewer choose their own theme.
 	</p>
-	<ThemePicker on:theme_change={e => theme = e.detail}></ThemePicker>
+	<ThemePicker theme={theme} on:theme_change={e => theme = e.detail}></ThemePicker>
 
 	<h3>Header image</h3>
 	<p>