idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-24 01:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): PasswordField eye icon alignment (#824)

Browse source 
* keep eye icon inside PasswordField during onboarding

* proper solution

* removed redundant relative class
This commit is contained in:
martylukyy 2023-04-10 14:30:29 +02:00 • committed by GitHub
parent 1cdbbe5bf3
commit 69f6acbc4d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web/src/components/inputs/input.tsx
View file

@ -280,25 +280,33 @@ export const PasswordField = ({
{label} {required && <span className="text-gray-500">*</span>} {label} {required && <span className="text-gray-500">*</span>}
</label> </label>
)} )}
<div>
<Field name={name} defaultValue={defaultValue}> <Field name={name} defaultValue={defaultValue}>
{({ {({
field, field,
meta meta
}: FieldProps) => ( }: FieldProps) => (
<>
<div className="sm:col-span-2 relative"> <div className="sm:col-span-2 relative">
<input <input
{...field} {...field}
id={name} id={name}
type={isVisible ? "text" : "password"} type={isVisible ? "text" : "password"}
autoComplete={autoComplete} autoComplete={autoComplete}
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md")} className={classNames(
meta.touched && meta.error
? "focus:ring-red-500 focus:border-red-500 border-red-500"
: "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
"mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md"
)}
placeholder={placeholder} placeholder={placeholder}
/> />
<div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}> <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
{!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />} {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />
: <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
</div>
</div> </div>
{help && ( {help && (
<p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p> <p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
)} )}
@ -306,10 +314,11 @@ export const PasswordField = ({
{meta.touched && meta.error && ( {meta.touched && meta.error && (
<p className="error text-sm text-red-600 mt-1">* {meta.error}</p> <p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
)} )}
</div> </>
)} )}
</Field> </Field>
</div> </div>
</div>
); );
}; };