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

chore: adjust TextInput styling

Browse Source
This commit is contained in:
ValdiANS
2026-01-24 11:20:11 +07:00
parent bb74b90790
commit db1e224c3b
1 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/TextInput.tsx
+25 -11
View File
@@ -21,6 +21,9 @@ export interface TextInputProps {
label?: string; label?: string;
inputWrapper?: string; inputWrapper?: string;
input?: string; input?: string;
inputPrefix?: string;
inputSuffix?: string;
inputPrefixSuffixWrapper?: string;
}; };
isError?: boolean; isError?: boolean;
isValid?: boolean; isValid?: boolean;
@@ -62,7 +65,7 @@ const TextInput = ({
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
)} )}
> >
@@ -70,7 +73,7 @@ const TextInput = ({
<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,
}, },
@@ -90,15 +93,23 @@ const TextInput = ({
)} )}
{inputPrefix || inputSuffix ? ( {inputPrefix || inputSuffix ? (
<div className='relative flex'> <div
className={cn(
'relative flex text-sm',
className?.inputPrefixSuffixWrapper
)}
>
{inputPrefix && ( {inputPrefix && (
<div <div
className={cn( className={cn(
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200', 'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
{ {
'bg-gray-100 border-gray-300': !disabled, 'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled, 'bg-gray-50 border-gray-200': disabled,
} 'border-error': isError,
'border-success!': isValid,
},
className?.inputPrefix
)} )}
> >
{inputPrefix} {inputPrefix}
@@ -107,7 +118,7 @@ const TextInput = ({
<div <div
className={cn( className={cn(
'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white', 'input h-12 px-3 py-2.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
{ {
'border-error': isError, 'border-error': isError,
'border-success!': isValid, 'border-success!': isValid,
@@ -154,11 +165,14 @@ const TextInput = ({
{inputSuffix && ( {inputSuffix && (
<div <div
className={cn( className={cn(
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200', 'inline-flex items-center px-3 py-2.5 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-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled, 'bg-gray-50 border-gray-200': disabled,
} 'border-error': isError,
'border-success!': isValid,
},
className?.inputSuffix
)} )}
> >
{inputSuffix} {inputSuffix}
@@ -168,7 +182,7 @@ const TextInput = ({
) : ( ) : (
<div <div
className={cn( className={cn(
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white', 'input h-12 px-3 py-2.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
{ {
'border-error': isError, 'border-error': isError,
'border-success!': isValid, 'border-success!': isValid,
@@ -202,10 +216,10 @@ const TextInput = ({
)} )}
{!isError && 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 && ( {isError && errorMessage && (
<p className='w-full text-sm text-error'>{errorMessage}</p> <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
)} )}
</div> </div>
); );