Make everything look better again

Signed-off-by: Matt Strapp <matt@mattstrapp.net>

3 files changed, 45 insertions, 40 deletions

diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 519a11d..1a15251 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { useRegisterSW } from 'virtual:pwa-register/svelte';
-  import { pwaInfo } from 'virtual:pwa-info';
-  import { onMount } from 'svelte';
+  import Navigation from '$lib/svelte/Navigation.svelte';
+  import Icon from '@iconify/svelte';
   import {
-    AppShell,
-    AppBar,
-    getDrawerStore,
-    getToastStore,
-    initializeStores,
-    Toast,
-    Drawer
+      AppBar,
+      AppShell,
+      Drawer,
+      Toast,
+      getDrawerStore,
+      getToastStore,
+      initializeStores
   } from '@skeletonlabs/skeleton';
-
-  import Navigation from '$lib/svelte/Navigation.svelte';
-
+  import { onMount } from 'svelte';
+  import { pwaInfo } from 'virtual:pwa-info';
+  import { useRegisterSW } from 'virtual:pwa-register/svelte';
   import '../app.postcss';
+
   // Floating UI for Popups
   // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
   // import { storePopup } from '@skeletonlabs/skeleton';
@@ -75,13 +75,7 @@
       <svelte:fragment slot="lead">
         <div class="flex items-center">
           <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}>
-            <span>
-              <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
-                <rect width="100" height="20" />
-                <rect y="30" width="100" height="20" />
-                <rect y="60" width="100" height="20" />
-              </svg>
-            </span>
+            <Icon icon="carbon:menu" width=25 />
           </button>
           <strong class="text-xl uppercase">A!</strong>
         </div>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 1f0a15d..e34c31e 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -11,5 +11,5 @@
 </div>
 
 <style lang="postcss">
-	
+
 </style>
diff --git a/app/src/routes/truncate/+page.svelte b/app/src/routes/truncate/+page.svelte
index 1b37f56..6e0cfcd 100644
--- a/app/src/routes/truncate/+page.svelte
+++ b/app/src/routes/truncate/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import saveFile from '$lib/ts/download';
   import type { TruncateRequest, TruncateResponse } from '$lib/types/truncate-worker';
+  import Icon from '@iconify/svelte';
   import { FileDropzone, ProgressBar } from '@skeletonlabs/skeleton';
   import { onMount } from 'svelte';
 
@@ -18,15 +19,15 @@
       file: files[0],
       size: truncateTo
     } as TruncateRequest);
-    form.reset();
-    truncateTo = 1;
   }
 
   onMount(async () => {
     worker = new Worker(new URL('$lib/ts/truncate.worker.ts', import.meta.url), { type: 'module' });
-    worker.onmessage = (e: MessageEvent<TruncateResponse>) => {
+    worker.onmessage = async (e: MessageEvent<TruncateResponse>) => {
+      await saveFile(e.data.file, `trunc-${originalName}`).catch((e) => console.error(e));
       disableInput = false;
-      saveFile(e.data.file, `trunc-${originalName}`);
+      form.reset();
+      truncateTo = 1;
     };
   });
 </script>
@@ -38,19 +39,28 @@
 <div class="container h-full mx-auto flex justify-center items-center">
   <div class="space-y-10 text-center flex flex-col items-center">
     <form bind:this={form} on:submit|preventDefault={onUpload} method="POST" action="?/TODO">
+      <noscript>
+        <h3 class="h3">You need JavaScript to use this page, for now ;)</h3>
+        <br />
+      </noscript>
       <label class="label" for="truncateMe">
-        <FileDropzone
-          id="truncateMe"
-          name="truncateMe"
-          bind:files
-          on:change={() => form.requestSubmit()}
-          required
-          disabled={disableInput}
-        >
-          <svelte:fragment slot="lead">
-            <h2 class="h2">Drop a file here to truncate it.</h2>
-          </svelte:fragment>
-        </FileDropzone>
+        <div class="space-y-4 w-full">
+          <FileDropzone
+            id="truncateMe"
+            name="truncateMe"
+            bind:files
+            on:change={() => form.requestSubmit()}
+            required
+            disabled={disableInput}
+          >
+            <svelte:fragment slot="lead">
+              <div class="flex justify-center items-center">
+                <Icon icon="carbon:file-storage" width="50" />
+              </div>
+            </svelte:fragment>
+            <svelte:fragment slot="meta">Drop a file here to truncate it.</svelte:fragment>
+          </FileDropzone>
+        </div>
       </label>
       <br />
       <label class="label">
@@ -66,9 +76,10 @@
       </label>
       <br />
       <noscript>
-        <button type="submit" class="btn variant-filled"
-          >After adding a file, click to submit! (Not yet implemented)</button
-        >
+        <br />
+        <button type="submit" class="btn variant-filled" disabled>
+          After adding a file, click to submit! (Not yet implemented)
+        </button>
       </noscript>
       {#if disableInput}
         <h3 class="h3">Truncating the file, this may take time!</h3>