Improve layout

src/App.svelte

@@ -1,15 +1,23 @@
 <script>
   import Counter from './lib/Counter.svelte'
+  import logo from './assets/logo.webp'
 </script>
 
 <header>
-  <h1>Embroidery Viewer</h1>
+  <a href="/">
+  <img
+    src={logo}
+    alt="Embroidery viewer logo."
+    width=460
+    height=200
+  />
+  </a>
 </header>
 <main>
   <Counter />
 </main>
 <footer>
-  <p>Copyright © 2022 Leonardo Murça.</p>
+  <p>Copyright © 2022 <a href="https://leomurca.xyz" target="_blank" rel="noreferrer" >Leonardo Murça</a>.</p>
 </footer>
 
 <style>
@@ -18,5 +26,6 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
+    box-sizing: border-box;
   }
 </style>

src/app.css

@@ -5,12 +5,15 @@
   font-weight: 400;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
-  background-color: #f4f4f4;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   display: flex;
   justify-content: center;
@@ -23,7 +26,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 80%;
-  background-color: #e5e5e5;
+  width: 100%;
+  background-color: #F2F6F5;
   z-index: 10;
 }

src/lib/Counter.svelte

@@ -9,6 +9,7 @@ function onSubmitHandler(evt) {
   evt.stopPropagation();
   evt.preventDefault();
 
+
   for (var i = 0, file; (file = files[i]); i++) {
     const canvasContainer = document.getElementById("canvas-container")
     const canvasCard = document.createElement(`div`)
@@ -39,6 +40,7 @@ function onSubmitHandler(evt) {
       startFileRead(file, canvasEl);
     }
   }
+  document.getElementById("selected-files-container").remove();
 }
 
 function handleDragOver(evt) {
@@ -88,19 +90,34 @@ function handleOnKeydown(evt) {
 
   <div id="dropzone" on:keydown={handleOnKeydown} on:click={handleOnClick} on:dragover={handleDragOver} on:drop={onDropHandler}>
     <label id="file-label" for="file-input">Drag and drop files here or click to upload.</label>
-    <input id="file-input" type="file" name="files[]" accept={acceptedFiles.join(",")} multiple on:change={onChangeFileHandler} />
+    <input id="file-input" type="file" name="files[]" accept={acceptedFiles.join(",")} multiple on:change={onChangeFileHandler} bind:files />
   </div>
   <input type="submit" value="Render files">
 </form>
 
+<div id="selected-files-container">
+{#if files}
+	<h2>Selected files:</h2>
+	{#each Array.from(files) as file}
+    <div id="selected-file-card">
+		  <p>{file.name} ({file.size/1000} kb) </p>
+    </div>
+	{/each}
+{/if}
+</div>
+
 <div id="canvas-container" style="width: 100%; heigth: 100vh;"></div>
 
 <style>
 
   input[type="submit"] {
     width: 100%;
-    font-size: 30px;
+    font-size: 20px;
     margin-top: 20px;
+    background-color: #05345f;
+    font-weight: 700;
+    color: white;
+    padding: 10px;
   }
 
   input[type="submit"]:hover {
@@ -127,17 +144,25 @@ function handleOnKeydown(evt) {
     display: none;
   }
 
+  #selected-file-card {
+    border: 1px solid #000;
+    width: 500px;
+    padding-left: 15px;
+    margin-top: 10px;
+  }
+
   #canvas-container {
     display: flex;
     width: 100%; 
     justify-content: space-evenly;
     flex-wrap: wrap;
+    margin-top: 50px;
   }
 
   #dropzone:hover {
     cursor: pointer;
-    border: 5px dotted #7FB77E;
-    color: #7FB77E;
+    border: 5px dotted #05345f;
+    color: #05345f;
   }
 
 </style>