fix number input border colors

This commit is contained in:
Brent O'Neill 2025-10-06 14:36:21 -06:00
parent 8635b00b25
commit b3a11fed39
2 changed files with 32 additions and 10 deletions

View file

@ -37,28 +37,34 @@ export const NumberInput = ({
onChange={(e) => onChange(parseInt(e.target.value) || 0)} onChange={(e) => onChange(parseInt(e.target.value) || 0)}
className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/> />
<div className="absolute inset-y-0 right-0 flex items-center"> <div className="absolute inset-y-0 right-0 top-0 p-[1px] py-[1.5px] flex items-center ">
<span className="text-sm text-placeholder-foreground mr-4 pointer-events-none"> <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
{unit} {unit}
</span> </span>
<div className="flex flex-col"> <div className="flex flex-col mt-[2px] mb-[2px]">
<Button <Button
aria-label={`Increase ${label} value`} aria-label={`Increase ${label} value`}
className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative" className="h-5 rounded-l-none rounded-br-none border-input border-t-transparent border-r-transparent border-b-[0.5px] hover:border-t-[.5px] hover:border-foreground"
variant="outline" variant="outline"
size="iconSm" size="iconSm"
onClick={() => onChange(value + 1)} onClick={() => onChange(value + 1)}
> >
<Plus className="text-muted-foreground" size={8} /> <Plus
className="text-muted-foreground hover:text-foreground"
size={8}
/>
</Button> </Button>
<Button <Button
aria-label={`Decrease ${label} value`} aria-label={`Decrease ${label} value`}
className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative" className="h-5 rounded-l-none rounded-tr-none border-input border-b-transparent border-r-transparent hover:border-b-1 hover:border-b-[.5px] hover:border-foreground"
variant="outline" variant="outline"
size="iconSm" size="iconSm"
onClick={() => onChange(value - 1)} onClick={() => onChange(value - 1)}
> >
<Minus className="text-muted-foreground" size={8} /> <Minus
className="text-muted-foreground hover:text-foreground"
size={8}
/>
</Button> </Button>
</div> </div>
</div> </div>

View file

@ -110,8 +110,8 @@ export const IngestSettings = ({
</Select> </Select>
</LabelWrapper> </LabelWrapper>
</div> </div>
<div className="pt-5 space-y-5"> <div className="mt-6">
<div className="flex items-center gap-4 w-full"> <div className="flex items-center gap-4 w-full mb-6">
<div className="w-full"> <div className="w-full">
<NumberInput <NumberInput
id="chunk-size" id="chunk-size"
@ -134,7 +134,23 @@ export const IngestSettings = ({
</div> </div>
</div> </div>
<div className="flex gap-2 items-center justify-between"> {/* <div className="flex gap-2 items-center justify-between">
<div>
<div className="text-sm font-semibold pb-2">Table Structure</div>
<div className="text-sm text-muted-foreground">
Capture table structure during ingest.
</div>
</div>
<Switch
id="table-structure"
checked={currentSettings.tableStructure}
onCheckedChange={(checked) =>
handleSettingsChange({ tableStructure: checked })
}
/>
</div> */}
<div className="flex items-center justify-between border-b pb-3 mb-3">
<div> <div>
<div className="text-sm font-semibold pb-2">OCR</div> <div className="text-sm font-semibold pb-2">OCR</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
@ -149,7 +165,7 @@ export const IngestSettings = ({
/> />
</div> </div>
<div className="flex gap-2 items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<div className="text-sm pb-2 font-semibold"> <div className="text-sm pb-2 font-semibold">
Picture descriptions Picture descriptions