Update styling

This commit is contained in:
Edward Shen 2022-07-27 19:53:32 -07:00
parent 7b7d119831
commit 170e23cba7
Signed by: edward
GPG key ID: 19182661E818369F
2 changed files with 48 additions and 20 deletions

View file

@ -29,7 +29,7 @@ body {
}
.unselectable {
user-select: none;
user-select: none;
}
hr {
@ -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;
}

View file

@ -34,9 +34,12 @@ const FileForm = () => {
fr.readAsArrayBuffer(file);
}
return (
<input type="file" onChange={handleChange} />
)
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" />
</form>
</pre>
<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" />
</form>
)
}
function createUploadUi() {
const html = <main className='hljs centered fullscreen'>
<FileForm />
<p>or paste your data below</p>
<PasteForm />
</main>;