pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 12:32:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

<Input> component horizontal padding adjustment (#11418)

Browse Source 
### What problem does this PR solve?

- Adjust <Input> component a suitable horizontal padding when have
prefix or suffix icon
- Slightly change visual effect of <ThemeSwitch> in admin UI

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
Jimmy Ben Klieve
2025-11-21 09:58:55 +08:00
committed by GitHub
parent 653b785958
commit cc00c3ec93
2 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/ui/input.tsx
View File

@ -45,9 +45,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
'disabled:cursor-not-allowed disabled:opacity-50 transition-colors', 'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
{ {
'pl-12': !!prefix, 'pl-[calc(1em+1.25rem)]': !!prefix,
'pr-12': !!suffix || isPasswordInput, 'pr-[calc(1em+1.25rem)]': !!suffix || isPasswordInput,
'pr-24': !!suffix && isPasswordInput, 'pr-[calc(2em+2rem)]': !!suffix && isPasswordInput,
}, },
type === 'number' && type === 'number' &&
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',

13
web/src/pages/admin/components/theme-switch.tsx
View File

@ -25,8 +25,8 @@ const ThemeSwitch = forwardRef<
setTheme(value ? ThemeEnum.Dark : ThemeEnum.Light) setTheme(value ? ThemeEnum.Dark : ThemeEnum.Light)
} }
> >
<div className="self-center p-3 py-2 rounded-full bg-bg-card transition-[background-color] duration-300"> <div className="self-center p-3 py-2 rounded-full bg-bg-card transition-[background-color]">
<div className="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color] duration-300 delay-75"> <div className="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color]">
<LucideSun <LucideSun
className={cn('size-[1em]', !isDark && 'text-text-primary')} className={cn('size-[1em]', !isDark && 'text-text-primary')}
/> />
@ -39,7 +39,7 @@ const ThemeSwitch = forwardRef<
<Thumb <Thumb
className={cn( className={cn(
'absolute top-0 left-0 w-[calc(50%+.25rem)] p-0.5 h-full rounded-full overflow-hidden', 'absolute top-0 left-0 w-[calc(50%+.25rem)] p-0.5 h-full rounded-full overflow-hidden',
'transition-all ease-out duration-300', 'transition-all ease-out',
'group-hover/theme-switch:w-[calc(50%+.66rem)] group-focus-visible/theme-switch:w-[calc(50%+.66rem)]', 'group-hover/theme-switch:w-[calc(50%+.66rem)] group-focus-visible/theme-switch:w-[calc(50%+.66rem)]',
{ {
'left-[calc(50%-.25rem)] group-hover/theme-switch:left-[calc(50%-.66rem)] group-focus-visible/theme-switch:left-[calc(50%-.66rem)]': 'left-[calc(50%-.25rem)] group-hover/theme-switch:left-[calc(50%-.66rem)] group-focus-visible/theme-switch:left-[calc(50%-.66rem)]':
@ -47,12 +47,7 @@ const ThemeSwitch = forwardRef<
}, },
)} )}
> >
<div <div className="size-full rounded-full bg-bg-base shadow-md transition-colors ease-out" />
className="
size-full rounded-full bg-bg-base shadow-md
transition-colors ease-out duration-300 delay-75
"
/>
</Thumb> </Thumb>
</Root> </Root>
); );