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): Refactor input components to use consistent color

Browse Source 
variables
This commit is contained in:
rstubryan
2026-02-11 14:19:52 +07:00
parent 1b4d373fea
commit 498602a2c9
3 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/SelectInput.tsx
+14 -12
View File
@@ -246,8 +246,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
className={cn(
'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': !isDisabled,
'bg-gray-50 border-base-content/10': isDisabled,
'bg-base-100 border-base-content/10': !isDisabled,
'bg-base-200 border-base-content/10': isDisabled,
'border-error': isError,
},
className?.inputPrefix
@@ -278,15 +278,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
className={cn('w-full flex-1', className?.select)}
classNames={{
control: ({ isFocused, isDisabled }) =>
cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
cn('w-full border transition-shadow', 'rounded-lg!', {
'bg-base-100!': !isDisabled && !readOnly,
'bg-base-200! text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200':
isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'rounded-l-none!': inputPrefix && !startAdornment,
'rounded-r-none!': inputSuffix && !startAdornment,
}),
@@ -370,8 +371,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
className={cn(
'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-base-content/10': !isDisabled,
'bg-gray-50 border-base-content/10': isDisabled,
'bg-base-100 border-base-content/10': !isDisabled,
'bg-base-200 border-base-content/10': isDisabled,
'border-error': isError,
},
className?.inputSuffix
@@ -404,18 +405,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
classNames={{
control: ({ isFocused, isDisabled }) =>
cn(
'w-full border bg-white transition-shadow',
'w-full border transition-shadow',
// Gunakan rounded-lg untuk semua kasus
'rounded-lg!',
{
'bg-base-100!': !isDisabled && !readOnly,
'bg-base-200! text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200':
isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
}
),
valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),