Fix: Optimize styling and add a search settings loading state #3221 (#9830)

### What problem does this PR solve?

Fix: Optimize styling and add a search settings loading state #3221

- Updated the calendar component's background color to use a variable
- Modified the Spin component's styling to use the primary text color
instead of black
- Added a form submission loading state to the search settings component
- Optimized the search settings form, unifying the styles of the model
selection and input fields

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>
This commit is contained in:
chanx
2025-09-01 11:45:49 +08:00
committed by GitHub
parent 7eb25e0de6
commit 3398dac906
3 changed files with 22 additions and 8 deletions

View File

@ -1,8 +1,8 @@
.rdp-selected {
background-color: #f5f5f529;
background-color: var(--background-highlight);
}
.range-start {
background-color: #f5f5f5;
background-color: var(--text-secondary);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
button {
@ -10,7 +10,7 @@
}
}
.range-end {
background-color: #f5f5f5;
background-color: var(--text-secondary);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
button {

View File

@ -25,14 +25,14 @@ export const Spin: React.FC<SpinProps> = ({
className={cn(
'relative',
{
'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-black/40 after:transition-all after:duration-300':
'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-text-primary/40 after:transition-all after:duration-300 h-full w-full':
spinning,
},
className,
)}
>
{spinning && (
<div className="absolute inset-0 z-10 flex items-center justify-center bg-black/30 ">
<div className="absolute inset-0 z-10 flex items-center justify-center bg-text-primary/30 ">
<div
className={cn(
'rounded-full border-muted-foreground border-2 border-t-transparent animate-spin',