Improve file viewer style consistnecy

svelte/src/file_viewer/viewers/Zip.svelte

@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
 import { formatDataVolume, formatDate } from "../../util/Formatting.svelte"
+import IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import ZipItem from "./ZipItem.svelte";
 
@@ -20,6 +21,7 @@ let zip = {
 	children: null,
 }
 let uncomp_size = 0
+let comp_ratio = 0
 
 export const set_file = async f => {
 	file = f
@@ -37,6 +39,7 @@ export const set_file = async f => {
 		zip = await resp.json()
 
 		uncomp_size = recursive_size(zip)
+		comp_ratio = (uncomp_size / file.size)
 	} catch (err) {
 		console.error(err)
 	} finally {
@@ -64,34 +67,30 @@ const recursive_size = (file) => {
 
 <h1>{file.name}</h1>
 
-<img src={file.icon_href} alt="File icon" class="icon">
-<TextBlock width="600px">
+<IconBlock icon_href={file.icon_href}>
 	Compressed size: {formatDataVolume(file.size, 3)}<br/>
-	Uncompressed size: {formatDataVolume(uncomp_size, 3)}<br/>
+	Uncompressed size: {formatDataVolume(uncomp_size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
 	Uploaded on: {formatDate(file.date_upload, true, true, true)}
 	<br/>
 	<button class="button_highlight" on:click={() => {dispatch("download")}}>
 		<i class="icon">download</i>
 		<span>Download</span>
 	</button>
-</TextBlock>
-<br/><br/>
-
-{#if status === "parse_failed"}
-	<TextBlock width="650px">
+</IconBlock>
+<br/>
+{#if status === "finished"}
+	<TextBlock>
+		<h2>Files in this zip archive</h2>
+		<ZipItem item={zip} />
+	</TextBlock>
+{:else if status === "parse_failed"}
+	<TextBlock>
 		<p>
 			Zip archive could not be parsed. It may be corrupted.
 		</p>
 	</TextBlock>
 {/if}
 
-{#if status === "finished"}
-	<TextBlock width="1000px">
-		<h2>Files in this zip archive</h2>
-		<ZipItem item={zip} />
-	</TextBlock>
-{/if}
-
 <style>
 h1 {
 	text-shadow: 1px 1px 3px var(--shadow_color);