mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 07:45:47 +00:00
refactor(FE-Storyless): update input components to ensure consistent background styling
This commit is contained in:
@@ -397,20 +397,24 @@ const NumberInput = ({
|
|||||||
<div className='relative flex'>
|
<div className='relative flex'>
|
||||||
{/* Prefix Block */}
|
{/* Prefix Block */}
|
||||||
{inputPrefix && (
|
{inputPrefix && (
|
||||||
<div className={cn(
|
<div
|
||||||
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
|
className={cn(
|
||||||
{
|
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
|
||||||
'bg-gray-100 border-gray-300': !disabled,
|
|
||||||
'bg-gray-50 border-gray-200': disabled,
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
<span className={cn(
|
|
||||||
'text-sm font-medium select-none whitespace-nowrap',
|
|
||||||
{
|
{
|
||||||
'text-gray-600': !disabled,
|
'bg-gray-100 border-gray-300': !disabled,
|
||||||
'text-gray-400': disabled,
|
'bg-gray-50 border-gray-200': disabled,
|
||||||
}
|
}
|
||||||
)}>
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'text-sm font-medium select-none whitespace-nowrap',
|
||||||
|
{
|
||||||
|
'text-gray-600': !disabled,
|
||||||
|
'text-gray-400': disabled,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
{inputPrefix}
|
{inputPrefix}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -419,7 +423,7 @@ const NumberInput = ({
|
|||||||
{/* Input Wrapper */}
|
{/* Input Wrapper */}
|
||||||
<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',
|
'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
|
||||||
{
|
{
|
||||||
'border-error': isError,
|
'border-error': isError,
|
||||||
'border-success!': isValid,
|
'border-success!': isValid,
|
||||||
@@ -505,20 +509,24 @@ const NumberInput = ({
|
|||||||
|
|
||||||
{/* Suffix Block */}
|
{/* Suffix Block */}
|
||||||
{inputSuffix && (
|
{inputSuffix && (
|
||||||
<div className={cn(
|
<div
|
||||||
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
|
className={cn(
|
||||||
{
|
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
|
||||||
'bg-gray-100 border-gray-300': !disabled,
|
|
||||||
'bg-gray-50 border-gray-200': disabled,
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
<span className={cn(
|
|
||||||
'text-sm font-medium select-none whitespace-nowrap',
|
|
||||||
{
|
{
|
||||||
'text-gray-600': !disabled,
|
'bg-gray-100 border-gray-300': !disabled,
|
||||||
'text-gray-400': disabled,
|
'bg-gray-50 border-gray-200': disabled,
|
||||||
}
|
}
|
||||||
)}>
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'text-sm font-medium select-none whitespace-nowrap',
|
||||||
|
{
|
||||||
|
'text-gray-600': !disabled,
|
||||||
|
'text-gray-400': disabled,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
{inputSuffix}
|
{inputSuffix}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ const TextArea = ({
|
|||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
className={cn(
|
className={cn(
|
||||||
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
|
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
|
||||||
{
|
{
|
||||||
'border-error': isError,
|
'border-error': isError,
|
||||||
'border-success!': isValid,
|
'border-success!': isValid,
|
||||||
|
|||||||
@@ -91,7 +91,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',
|
'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',
|
||||||
{
|
{
|
||||||
'border-error': isError,
|
'border-error': isError,
|
||||||
'border-success!': isValid,
|
'border-success!': isValid,
|
||||||
|
|||||||
Reference in New Issue
Block a user