<Input> component horizontal padding adjustment (#11418)

### 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

View File

@ -25,8 +25,8 @@ const ThemeSwitch = forwardRef<
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="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color] duration-300 delay-75">
<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]">
<LucideSun
className={cn('size-[1em]', !isDark && 'text-text-primary')}
/>
@ -39,7 +39,7 @@ const ThemeSwitch = forwardRef<
<Thumb
className={cn(
'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)]',
{
'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
className="
size-full rounded-full bg-bg-base shadow-md
transition-colors ease-out duration-300 delay-75
"
/>
<div className="size-full rounded-full bg-bg-base shadow-md transition-colors ease-out" />
</Thumb>
</Root>
);