gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refine input component styles and error UI

Browse Source
This commit is contained in:
rstubryan
2026-01-28 13:43:46 +07:00
parent 558f219e8b
commit 406befc21b
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/FileInput.tsx
+11 -7
View File
@@ -41,7 +41,7 @@ const FileInput = ({
return ( return (
<div <div
className={cn( className={cn(
'w-full flex flex-col gap-2 text-start', 'w-full flex flex-col gap-0 text-start rounded-lg',
className?.wrapper className?.wrapper
)} )}
> >
@@ -49,7 +49,7 @@ const FileInput = ({
<label <label
htmlFor={name} htmlFor={name}
className={cn( className={cn(
'w-full text-sm font-normal leading-5', 'w-full py-2 text-xs font-semibold leading-5',
{ {
'text-error': isError, 'text-error': isError,
}, },
@@ -77,15 +77,19 @@ const FileInput = ({
onChange={onChange} onChange={onChange}
onBlur={onBlur} onBlur={onBlur}
disabled={disabled} disabled={disabled}
className={cn('grow file-input w-full h-12 rounded', className?.input)} className={cn(
'grow file-input w-full h-fit px-3 py-1.5 text-sm font-normal leading-6 rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
className?.input
)}
readOnly={readOnly} readOnly={readOnly}
/> />
{bottomLabel && ( {!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p> <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
)}
{isError && errorMessage && (
<p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
)} )}
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
</div> </div>
); );
}; };
src/components/input/TextInput.tsx
+4 -4
View File
@@ -102,7 +102,7 @@ const TextInput = ({
{inputPrefix && ( {inputPrefix && (
<div <div
className={cn( className={cn(
'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200', 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
{ {
'bg-gray-100 border-base-content/10': !disabled, 'bg-gray-100 border-base-content/10': !disabled,
'bg-gray-50 border-base-content/10': disabled, 'bg-gray-50 border-base-content/10': disabled,
@@ -165,10 +165,10 @@ const TextInput = ({
{inputSuffix && ( {inputSuffix && (
<div <div
className={cn( className={cn(
'inline-flex items-center px-3 py-2.5 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200', 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
{ {
'bg-gray-100 border-gray-300': !disabled, 'bg-gray-100 border-base-content/10': !disabled,
'bg-gray-50 border-gray-200': disabled, 'bg-gray-50 border-base-content/10': disabled,
'border-error': isError, 'border-error': isError,
'border-success!': isValid, 'border-success!': isValid,
}, },