From eb9c4e6d14b10dcb51f9c4d97b2d2a075022374f Mon Sep 17 00:00:00 2001
From: dawoodkhan82 <dawoodkhan82@gmail.com>
Date: Thu, 20 Jan 2022 18:25:24 -0500
Subject: [PATCH] Ui feedback changes

---
 frontend-svelte/src/components/input/File.svelte           | 7 +++++--
 frontend-svelte/src/components/output/File.svelte          | 7 +++++--
 .../src/components/output/HighlightedText.svelte           | 4 ++--
 frontend-svelte/src/components/output/Label.svelte         | 4 ++--
 frontend-svelte/src/components/utils/Upload.svelte         | 6 +++++-
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend-svelte/src/components/input/File.svelte b/frontend-svelte/src/components/input/File.svelte
index ae7d38bd08..2773a7d84f 100644
--- a/frontend-svelte/src/components/input/File.svelte
+++ b/frontend-svelte/src/components/input/File.svelte
@@ -14,9 +14,12 @@
       Click to Upload
     </Upload>
   {:else}
-    <div class="file-preview w-full flex flex-col justify-center items-center relative">
+    <div class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative">
       <ModifyUpload clear={() => setValue(null)} {theme} />
-      <div class="file-name text-4xl p-6 break-all">{value.name}</div>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-1/5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+      <div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
       <div class="file-size text-2xl p-2">
         {prettyBytes(value.size)}
       </div>
diff --git a/frontend-svelte/src/components/output/File.svelte b/frontend-svelte/src/components/output/File.svelte
index 77a326717f..12e5f01ba2 100644
--- a/frontend-svelte/src/components/output/File.svelte
+++ b/frontend-svelte/src/components/output/File.svelte
@@ -5,12 +5,15 @@
 </script>
 
 <a
-  class="output-file w-full h-full flex flex-col justify-center items-center relative"
+  class="output-file w-full h-full flex flex-row flex-wrap justify-center items-center relative"
   href={value.data}
   download={value.name}
   {theme}
 >
-  <div class="file-name text-4xl p-6 break-all">{value.name}</div>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-1/5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+  </svg>
+  <div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
   <div class="text-2xl p-2">
     {isNaN(value.size) ? "" : prettyBytes(value.size)}
   </div>
diff --git a/frontend-svelte/src/components/output/HighlightedText.svelte b/frontend-svelte/src/components/output/HighlightedText.svelte
index 628811a339..f87570a46b 100644
--- a/frontend-svelte/src/components/output/HighlightedText.svelte
+++ b/frontend-svelte/src/components/output/HighlightedText.svelte
@@ -40,7 +40,7 @@
       </div>
     {/if}
     <div
-      class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-all"
+      class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-word"
     >
       {#each value as [text, category], i}
         <span
@@ -79,7 +79,7 @@
       </div>
     {/if}
     <div
-      class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-all"
+      class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-word"
     >
       {#each value as [text, score], i}
         <span
diff --git a/frontend-svelte/src/components/output/Label.svelte b/frontend-svelte/src/components/output/Label.svelte
index 1d98462bf3..d84b10308b 100644
--- a/frontend-svelte/src/components/output/Label.svelte
+++ b/frontend-svelte/src/components/output/Label.svelte
@@ -42,10 +42,10 @@
 <style lang="postcss">
   .output-label[theme="default"] {
     .label {
-      @apply text-sm h-5;
+      @apply text-base h-7;
     }
     .confidence {
-      @apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-5 font-semibold rounded;
+      @apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-7 font-semibold rounded;
     }
     .confidence:first-child {
       @apply border-yellow-600 bg-yellow-500 dark:bg-red-600 border-red-700 text-white;
diff --git a/frontend-svelte/src/components/utils/Upload.svelte b/frontend-svelte/src/components/utils/Upload.svelte
index fd93e7a366..27b0f7ca3e 100644
--- a/frontend-svelte/src/components/utils/Upload.svelte
+++ b/frontend-svelte/src/components/utils/Upload.svelte
@@ -3,7 +3,9 @@
   export let single_file = true;
   export let include_file_metadata = true;
   let hidden_upload;
+  let dragging = false;
 
+  const updateDragging = () => {dragging = !dragging}
   const openFileUpload = () => {
     hidden_upload.click();
   };
@@ -42,7 +44,7 @@
 </script>
 
 <div
-  class="upload h-60 border-gray-300 text-gray-400 dark:text-gray-500 dark:border-gray-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10"
+  class={dragging ? "upload h-60 border-green-300 text-green-400 dark:text-green-500 dark:border-green-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10" : "upload h-60 border-gray-300 text-gray-400 dark:text-gray-500 dark:border-gray-500 border-8 border-dashed w-full flex justify-center items-center text-3xl text-center cursor-pointer leading-10"}
   {theme}
   on:drag|preventDefault|stopPropagation
   on:dragstart|preventDefault|stopPropagation
@@ -53,6 +55,8 @@
   on:drop|preventDefault|stopPropagation
   on:click={openFileUpload}
   on:drop={loadFilesFromDrop}
+  on:dragenter={updateDragging}
+  on:dragleave={updateDragging}
 >
   <slot />
   <input