Update styling

web/src/main.scss

@@ -88,7 +88,9 @@ th {
   cursor: pointer;
 }
 
-img, audio, video {
+img,
+audio,
+video {
   border-radius: $padding;
   margin-bottom: $padding;
   max-height: 75vh;
@@ -96,11 +98,9 @@ img, audio, video {
 }
 
 textarea {
-  width: 100%;
-  height: 100%;
-  min-width: 75vw;
-  min-height: 75vh;
-  box-sizing: border-box;
+  @extend .paste;
+  height: 75vh;
+  border-color: white;
 }
 
 .primary {
@@ -117,3 +117,29 @@ 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

@@ -34,9 +34,12 @@ const FileForm = () => {
     fr.readAsArrayBuffer(file);
   }
 
-  return (
+  return <>
+    <label className="file-upload" >
+      Select a file
       <input type="file" onChange={handleChange} />
-  )
+    </label>
+  </>
 }
 
 const PasteForm = () => {
@@ -48,22 +51,21 @@ 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 type="submit" value="submit" />
+      <input className="text-upload" 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>;