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)}
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">
{unit}
</span>
<div className="flex flex-col">
<div className="flex flex-col mt-[2px] mb-[2px]">
<Button
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"
size="iconSm"
onClick={() => onChange(value + 1)}
>
<Plus className="text-muted-foreground" size={8} />
<Plus
className="text-muted-foreground hover:text-foreground"
size={8}
/>
</Button>
<Button
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"
size="iconSm"
onClick={() => onChange(value - 1)}
>
<Minus className="text-muted-foreground" size={8} />
<Minus
className="text-muted-foreground hover:text-foreground"
size={8}
/>
</Button>
</div>
</div>

View file

@ -110,8 +110,8 @@ export const IngestSettings = ({
</Select>
</LabelWrapper>
</div>
<div className="pt-5 space-y-5">
<div className="flex items-center gap-4 w-full">
<div className="mt-6">
<div className="flex items-center gap-4 w-full mb-6">
<div className="w-full">
<NumberInput
id="chunk-size"
@ -134,7 +134,23 @@ export const IngestSettings = ({
</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 className="text-sm font-semibold pb-2">OCR</div>
<div className="text-sm text-muted-foreground">
@ -149,7 +165,7 @@ export const IngestSettings = ({
/>
</div>
<div className="flex gap-2 items-center justify-between">
<div className="flex items-center justify-between">
<div>
<div className="text-sm pb-2 font-semibold">
Picture descriptions