web/src/main.scss

@@ -88,9 +88,7 @@ th {
   cursor: pointer;
 }
 
-img,
+img, audio, video {
-audio,
-video {
   border-radius: $padding;
   margin-bottom: $padding;
   max-height: 75vh;
@@ -98,9 +96,11 @@ video {
 }
 
 textarea {
-  @extend .paste;
+  width: 100%;
-  height: 75vh;
+  height: 100%;
-  border-color: white;
+  min-width: 75vw;
+  min-height: 75vh;
+  box-sizing: border-box;
 }
 
 .primary {
@@ -117,29 +117,3 @@ textarea {
     padding-left: $padding;
   }
 }
-
-.button {
-  @extend .hljs;
-
-  border: 1px solid white;
-  border-radius: $padding;
-  padding: $padding;
-  margin: $padding;
-  font-size: 16px;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.file-upload {
-  @extend .button;
-
-  input {
-    display: none;
-  }
-}
-
-.text-upload {
-  @extend .button;
-}

web/src/render.tsx

@@ -25,21 +25,20 @@ require('highlightjs-line-numbers.js');
 
 const FileForm = () => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let file = event.target.files![0];
     const fr = new FileReader();
-    fr.onload = (_e) => {
+    fr.onload = (e) => {
-      let data = new Uint8Array(fr.result as ArrayBuffer);
+      const { result } = e.target;
+      if (result instanceof ArrayBuffer) {
+        let data = new Uint8Array(result);
         encrypt_array_buffer(data);
       }
-    fr.readAsArrayBuffer(file);
+    }
+    fr.readAsArrayBuffer((event.target as HTMLInputElement).files[0]);
   }
 
-  return <>
+  return (
-    <label className="file-upload" >
-      Select a file
     <input type="file" onChange={handleChange} />
-    </label>
+  )
-  </>
 }
 
 const PasteForm = () => {
@@ -51,21 +50,22 @@ const PasteForm = () => {
   }
 
   return (
+    <pre className='paste'>
       <form className='hljs centered' onSubmit={handleSubmit}>
         <textarea
           placeholder="Sample text"
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-      <input className="text-upload" type="submit" value="submit" />
+        <input type="submit" value="submit" />
       </form>
+    </pre>
   )
 }
 
 function createUploadUi() {
   const html = <main className='hljs centered fullscreen'>
     <FileForm />
-    <p>or paste your data below</p>
     <PasteForm />
   </main>;