commit a2989941de41fd162a7d7a1ab8121b6417bf81c4
parent 867564bf4632620f23329d18b6ecee1c6c897df5
Author: MTRNord <mtrnord1@gmail.com>
Date: Wed, 26 Jan 2022 19:30:52 +0100
Improve form readability
Diffstat:
2 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/components/submit_page/main.tsx b/components/submit_page/main.tsx
@@ -169,28 +169,28 @@ class MainSubmissionForm extends PureComponent<Props, State> {
<form className="flex flex-col w-full">
<label className="inner-flex flex-col">
<span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Image Title</span>
- <input required name="title" value={this.state[`${this.state.currentFileIndex}_title`] || ""} type="text" placeholder="Set an image title" className="min-w-full placeholder:text-gray-900 text-gray-900" onChange={this.handleInputChange.bind(this)} />
+ <input required name="title" value={this.state[`${this.state.currentFileIndex}_title`] || ""} type="text" placeholder="Set an image title" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
</label>
<span className="h-4"></span>
<label className="inner-flex flex-col">
<span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Description</span>
- <textarea name="description" value={this.state[`${this.state.currentFileIndex}_description`] || ""} placeholder="Description Text of the current image" className="min-w-full placeholder:text-gray-900 text-gray-900" onChange={this.handleInputChange.bind(this)} />
+ <textarea name="description" value={this.state[`${this.state.currentFileIndex}_description`] || ""} placeholder="Description Text of the current image" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
</label>
<span className="h-4"></span>
<label className="inner-flex flex-col">
<span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Image Tags</span>
- <input name="tags" type="text" value={this.state[`${this.state.currentFileIndex}_tags`] || ""} placeholder="Enter tags (Separate with a comma)" className="min-w-full placeholder:text-gray-900 text-gray-900" onChange={this.handleInputChange.bind(this)} />
+ <input name="tags" type="text" value={this.state[`${this.state.currentFileIndex}_tags`] || ""} placeholder="Enter tags (Separate with a comma)" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
</label>
<span className="h-4"></span>
<label className="inner-flex flex-col">
<span className="text-xl text-gray-900 dark:text-gray-200 font-bold">License</span>
- <select required name="license" value={this.state[`${this.state.currentFileIndex}_license`] || ""} placeholder="Enter tags (Confirm by pressing enter)" className="min-w-full placeholder:text-gray-900 text-gray-900" onChange={this.handleInputChange.bind(this)}>
+ <select required name="license" value={this.state[`${this.state.currentFileIndex}_license`] || ""} placeholder="Enter tags (Confirm by pressing enter)" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
<option value="" disabled selected>Select an Creative Commons License</option>
<option value="cc-by-4.0">Attribution 4.0 International (CC BY 4.0)</option>
<option value="cc-by-sa-4.0">Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</option>
@@ -206,7 +206,7 @@ class MainSubmissionForm extends PureComponent<Props, State> {
<label className="inner-flex flex-col">
<span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Mature/NSFW Content?</span>
- <select required name="nsfw" value={this.state[`${this.state.currentFileIndex}_nsfw`] || ""} placeholder="Enter tags (Confirm by pressing enter)" className="min-w-full placeholder:text-gray-900 text-gray-900" onChange={this.handleInputChange.bind(this)}>
+ <select required name="nsfw" value={this.state[`${this.state.currentFileIndex}_nsfw`] || ""} placeholder="Enter tags (Confirm by pressing enter)" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
<option value="" disabled selected>Select Yes or No</option>
<option value="no">No</option>
<option value="yes">Yes</option>
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -157,21 +157,21 @@ class Login extends PureComponent<Props, State> {
display: showServerField ? 'block' : 'none'
}} id="homeserverField">
<span className="text-gray-900 dark:text-gray-200 visually-hidden">Homeserver:</span>
- <div className="bg-teal-600 mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input placeholder="Homeserver" className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
+ <div className="mt-1 w-full flex flex-row box-border items-center cursor-text">
+ <input placeholder="Homeserver" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
<span className="text-gray-900 dark:text-gray-200 visually-hidden">Username:</span>
- <div className="bg-teal-600 mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input placeholder="Username" autoComplete="username" className=" bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
+ <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
+ <input placeholder="Username" autoComplete="username" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
<span className="text-gray-900 dark:text-gray-200 visually-hidden">Password:</span>
- <div className="bg-teal-600 mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input placeholder="Password" autoComplete="current-password" className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="password" name="password" value={password} onChange={this.handleInputChange} />
+ <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
+ <input placeholder="Password" autoComplete="current-password" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="password" name="password" value={password} onChange={this.handleInputChange} />
</div>
</label>
