mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +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'>
|
||||
{/* Prefix Block */}
|
||||
{inputPrefix && (
|
||||
<div 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',
|
||||
<div
|
||||
className={cn(
|
||||
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
|
||||
{
|
||||
'text-gray-600': !disabled,
|
||||
'text-gray-400': disabled,
|
||||
'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,
|
||||
'text-gray-400': disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{inputPrefix}
|
||||
</span>
|
||||
</div>
|
||||
@@ -419,7 +423,7 @@ const NumberInput = ({
|
||||
{/* Input Wrapper */}
|
||||
<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',
|
||||
'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-success!': isValid,
|
||||
@@ -505,20 +509,24 @@ const NumberInput = ({
|
||||
|
||||
{/* Suffix Block */}
|
||||
{inputSuffix && (
|
||||
<div 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',
|
||||
<div
|
||||
className={cn(
|
||||
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
|
||||
{
|
||||
'text-gray-600': !disabled,
|
||||
'text-gray-400': disabled,
|
||||
'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,
|
||||
'text-gray-400': disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{inputSuffix}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -87,7 +87,7 @@ const TextArea = ({
|
||||
|
||||
<textarea
|
||||
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-success!': isValid,
|
||||
|
||||
@@ -91,7 +91,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',
|
||||
'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-success!': isValid,
|
||||
|
||||
Reference in New Issue
Block a user