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

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;
inputWrapper?: string;
input?: string;
inputPrefix?: string;
inputSuffix?: string;
inputPrefixSuffixWrapper?: string;
};
isError?: boolean;
isValid?: boolean;
@@ -62,7 +65,7 @@ const TextInput = ({
return (
<div
className={cn(
'w-full flex flex-col gap-2 text-start',
'w-full flex flex-col gap-0 text-start rounded-lg',
className?.wrapper
)}
>
@@ -70,7 +73,7 @@ const TextInput = ({
<label
htmlFor={name}
className={cn(
'w-full text-sm font-normal leading-5',
'w-full py-2 text-xs font-semibold leading-5',
{
'text-error': isError,
},
@@ -90,15 +93,23 @@ const TextInput = ({
)}
{inputPrefix || inputSuffix ? (
<div className='relative flex'>
<div
className={cn(
'relative flex text-sm',
className?.inputPrefixSuffixWrapper
)}
>
{inputPrefix && (
<div
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-50 border-gray-200': disabled,
}
'border-error': isError,
'border-success!': isValid,
},
className?.inputPrefix
)}
>
{inputPrefix}
@@ -107,7 +118,7 @@ const TextInput = ({
<div
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-success!': isValid,
@@ -154,11 +165,14 @@ const TextInput = ({
{inputSuffix && (
<div
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-50 border-gray-200': disabled,
}
'border-error': isError,
'border-success!': isValid,
},
className?.inputSuffix
)}
>
{inputSuffix}
@@ -168,7 +182,7 @@ const TextInput = ({
) : (
<div
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-success!': isValid,
@@ -202,10 +216,10 @@ const TextInput = ({
)}
{!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 text-sm text-error'>{errorMessage}</p>
<p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
)}
</div>
);