Replace input fields for data view

3 files changed, 65 insertions, 17 deletions

diff --git a/assets/src/components/DataView.svelte b/assets/src/components/DataView.svelte
index df6db04..a467319 100644
--- a/assets/src/components/DataView.svelte
+++ b/assets/src/components/DataView.svelte
@@ -2,21 +2,39 @@
     import data from "../state/data";
     import EyeOpenedIcon from "./icons/EyeOpenedIcon.svelte";
     import EyeClosedIcon from "./icons/EyeClosedIcon.svelte";
+    import { isClientShare } from "../state/constant_state";
 
     let hidden = true;
 
+    const eyeColor = isClientShare() ? "white" : "black";
+
     function toggle() {
         hidden = !hidden;
     }
+
+    function hideText(text: string): string {
+        return text
+            .split("")
+            .map(c => {
+                if (c === "\n") {
+                    return "\n";
+                } else {
+                    return "●";
+                }
+            })
+            .join("");
+    }
 </script>
 
 <div class="data-view">
-    <input type={hidden ? "password" : "text"} value={$data.data} readonly />
+    <div class="textbox">
+        {hidden ? hideText($data.data) : $data.data}
+    </div>
     <button on:click={toggle} class="icon">
         {#if hidden}
-            <EyeOpenedIcon color="black" />
+            <EyeOpenedIcon color={eyeColor} />
         {:else}
-            <EyeClosedIcon color="black" />
+            <EyeClosedIcon color={eyeColor} />
         {/if}
     </button>
 </div>
@@ -26,22 +44,46 @@
         font-size: 14px;
         width: 100%;
         box-sizing: border-box;
-        padding: 10px 20px;
         display: flex;
-        align-items: center;
+        align-items: flex-start;
+
+        resize: both;
+        overflow: scroll;
+        min-height: 40px;
+        min-width: 300px;
+        max-width: 500px;
+
+        height: 100px;
+
+        padding: 10px 0 0 14px;
+
+        scrollbar-color: #626262 transparent;
     }
 
     .icon {
         border: none;
         background: none;
-        display: flex;
-        align-items: center;
+
+        position: sticky;
+        top: 0;
+        right: 0;
+        padding-right: 0;
     }
 
-    input {
+    .textbox {
+        font-size: 14px;
+        font-family: monospace;
         flex: 1;
         outline: none;
         border: none;
-        padding: 0;
+        resize: none;
+        overflow: hidden;
+
+        width: 100%;
+
+        background-color: transparent;
+        color: inherit;
+        white-space: pre-wrap;
+        word-wrap: break-word;
     }
 </style>
diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte
index c0c6f18..9fd0c59 100644
--- a/assets/src/components/SharePage.svelte
+++ b/assets/src/components/SharePage.svelte
@@ -30,8 +30,7 @@
         }
 
         .data-view {
-            background-color: white;
-            color: black;
+            border: solid 1px #626262;
         }
     </style>
 </svelte:head>
diff --git a/assets/src/components/share/selector/DataSelector.svelte b/assets/src/components/share/selector/DataSelector.svelte
index 33d971e..a1c69f9 100644
--- a/assets/src/components/share/selector/DataSelector.svelte
+++ b/assets/src/components/share/selector/DataSelector.svelte
@@ -25,7 +25,7 @@
 {#if type === DataType.TEXT}
     <form on:submit|preventDefault={submit}>
         <!-- TODO: Prettier input field -->
-        <input type="text" bind:value />
+        <textarea bind:value />
         <button class="start-sharing-button" type="submit">
             <ShareIcon color="black" />
             Start Sharing
@@ -36,13 +36,20 @@
 {/if}
 
 <style>
-    input {
-        border: none;
+    textarea {
         font-size: 14px;
-        color: black;
-        background-color: white;
-        padding: 10px 20px;
+        color: white;
+        background-color: black;
+        border: solid 1px #626262;
+        padding: 10px 14px;
         box-sizing: border-box;
+        width: 300px;
+        max-width: 600px;
+    }
+
+    textarea:focus {
+        outline: none;
+        border: solid 1px white;
     }
 
     .start-sharing-button {