chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Use prettier-plugin-tailwindcss (#11373)

Browse Source 
* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss
This commit is contained in:
Josh Hawkins
2024-05-14 10:06:44 -05:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/settings/General.tsx
View File

@@ -53,18 +53,18 @@ export default function General() {
return (
<>
<div className="flex flex-col md:flex-row size-full">
<div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} />
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
<div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2">
General Settings
</Heading>
<div className="flex flex-col w-full space-y-6">
<div className="flex w-full flex-col space-y-6">
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<div className="text-md">Stored Layouts</div>
<div className="text-sm text-muted-foreground my-2">
<div className="my-2 text-sm text-muted-foreground">
<p>
The layout of cameras in a camera group can be
dragged/resized. The positions are stored in your browser's
@@ -72,11 +72,11 @@ export default function General() {
</p>
</div>
</div>
<div className="flex flex-row justify-start items-center gap-2">
<div className="flex flex-row items-center justify-start gap-2">
<Button onClick={clearStoredLayouts}>Clear All Layouts</Button>
</div>
</div>
<Separator className="flex my-2 bg-secondary" />
<Separator className="my-2 flex bg-secondary" />
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<div className="text-md">Default Playback Rate</div>
@@ -110,13 +110,13 @@ export default function General() {
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<div className="text-md">Low Data Mode</div>
<div className="text-sm text-muted-foreground my-2">
<div className="my-2 text-sm text-muted-foreground">
<p>
Not yet implemented. <em>Default: disabled</em>
</p>
</div>
</div>
<div className="flex flex-row justify-start items-center gap-2">
<div className="flex flex-row items-center justify-start gap-2">
<Switch
id="lowdata"
checked={false}

40
web/src/components/settings/MasksAndZones.tsx
View File

@@ -370,9 +370,9 @@ export default function MasksAndZones({
return (
<>
{cameraConfig && editingPolygons && (
<div className="flex flex-col md:flex-row size-full">
<div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} />
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
<div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
{editPane == "zone" && (
<ZoneEditPane
polygons={editingPolygons}
@@ -417,17 +417,17 @@ export default function MasksAndZones({
<Heading as="h3" className="my-2">
Masks / Zones
</Heading>
<div className="flex flex-col w-full">
<div className="flex w-full flex-col">
{(selectedZoneMask === undefined ||
selectedZoneMask.includes("zone" as PolygonType)) && (
<div className="mt-0 pt-0 last:pb-3 last:border-b-[1px] last:border-secondary">
<div className="flex flex-row justify-between items-center my-3">
<div className="mt-0 pt-0 last:border-b-[1px] last:border-secondary last:pb-3">
<div className="my-3 flex flex-row items-center justify-between">
<HoverCard>
<HoverCardTrigger asChild>
<div className="text-md cursor-default">Zones</div>
</HoverCardTrigger>
<HoverCardContent>
<div className="flex flex-col gap-2 text-sm text-primary-variant my-2">
<div className="my-2 flex flex-col gap-2 text-sm text-primary-variant">
<p>
Zones allow you to define a specific area of the
frame so you can determine whether or not an
@@ -441,7 +441,7 @@ export default function MasksAndZones({
className="inline"
>
Documentation{" "}
<LuExternalLink className="size-3 ml-2 inline-flex" />
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</div>
@@ -451,7 +451,7 @@ export default function MasksAndZones({
<TooltipTrigger asChild>
<Button
variant="secondary"
className="size-6 p-1 rounded-md text-background bg-secondary-foreground"
className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
onClick={() => {
setEditPane("zone");
handleNewPolygon("zone");
@@ -485,8 +485,8 @@ export default function MasksAndZones({
selectedZoneMask.includes(
"motion_mask" as PolygonType,
)) && (
<div className="first:mt-0 mt-3 first:pt-0 pt-3 last:pb-3 border-t-[1px] last:border-b-[1px] first:border-transparent border-secondary">
<div className="flex flex-row justify-between items-center my-3">
<div className="mt-3 border-t-[1px] border-secondary pt-3 first:mt-0 first:border-transparent first:pt-0 last:border-b-[1px] last:pb-3">
<div className="my-3 flex flex-row items-center justify-between">
<HoverCard>
<HoverCardTrigger asChild>
<div className="text-md cursor-default">
@@ -494,7 +494,7 @@ export default function MasksAndZones({
</div>
</HoverCardTrigger>
<HoverCardContent>
<div className="flex flex-col gap-2 text-sm text-primary-variant my-2">
<div className="my-2 flex flex-col gap-2 text-sm text-primary-variant">
<p>
Motion masks are used to prevent unwanted types
of motion from triggering detection. Over
@@ -509,7 +509,7 @@ export default function MasksAndZones({
className="inline"
>
Documentation{" "}
<LuExternalLink className="size-3 ml-2 inline-flex" />
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</div>
@@ -519,7 +519,7 @@ export default function MasksAndZones({
<TooltipTrigger asChild>
<Button
variant="secondary"
className="size-6 p-1 rounded-md text-background bg-secondary-foreground"
className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
onClick={() => {
setEditPane("motion_mask");
handleNewPolygon("motion_mask");
@@ -555,8 +555,8 @@ export default function MasksAndZones({
selectedZoneMask.includes(
"object_mask" as PolygonType,
)) && (
<div className="first:mt-0 mt-3 first:pt-0 pt-3 last:pb-3 border-t-[1px] last:border-b-[1px] first:border-transparent border-secondary">
<div className="flex flex-row justify-between items-center my-3">
<div className="mt-3 border-t-[1px] border-secondary pt-3 first:mt-0 first:border-transparent first:pt-0 last:border-b-[1px] last:pb-3">
<div className="my-3 flex flex-row items-center justify-between">
<HoverCard>
<HoverCardTrigger asChild>
<div className="text-md cursor-default">
@@ -564,7 +564,7 @@ export default function MasksAndZones({
</div>
</HoverCardTrigger>
<HoverCardContent>
<div className="flex flex-col gap-2 text-sm text-primary-variant my-2">
<div className="my-2 flex flex-col gap-2 text-sm text-primary-variant">
<p>
Object filter masks are used to filter out false
positives for a given object type based on
@@ -578,7 +578,7 @@ export default function MasksAndZones({
className="inline"
>
Documentation{" "}
<LuExternalLink className="size-3 ml-2 inline-flex" />
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</div>
@@ -588,7 +588,7 @@ export default function MasksAndZones({
<TooltipTrigger asChild>
<Button
variant="secondary"
className="size-6 p-1 rounded-md text-background bg-secondary-foreground"
className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
onClick={() => {
setEditPane("object_mask");
handleNewPolygon("object_mask");
@@ -626,9 +626,9 @@ export default function MasksAndZones({
</div>
<div
ref={containerRef}
className="flex md:w-7/12 md:grow md:h-dvh max-h-[50%] md:max-h-full"
className="flex max-h-[50%] md:h-dvh md:max-h-full md:w-7/12 md:grow"
>
<div className="flex flex-row justify-center mx-auto size-full">
<div className="mx-auto flex size-full flex-row justify-center">
{cameraConfig &&
scaledWidth &&
scaledHeight &&

8
web/src/components/settings/MotionMaskEditPane.tsx
View File

@@ -187,7 +187,7 @@ export default function MotionMaskEditPane({
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Motion Mask
</Heading>
<div className="text-sm text-muted-foreground my-2">
<div className="my-2 text-sm text-muted-foreground">
<p>
Motion masks are used to prevent unwanted types of motion from
triggering detection. Over masking will make it more difficult for
@@ -196,7 +196,7 @@ export default function MotionMaskEditPane({
</div>
<Separator className="my-3 bg-secondary" />
{polygons && activePolygonIndex !== undefined && (
<div className="flex flex-row my-2 text-sm w-full justify-between">
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
@@ -223,7 +223,7 @@ export default function MotionMaskEditPane({
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-6 flex flex-col flex-1"
className="flex flex-1 flex-col space-y-6"
>
<FormField
control={form.control}
@@ -243,7 +243,7 @@ export default function MotionMaskEditPane({
</FormItem>
)}
/>
<div className="flex flex-col flex-1 justify-end">
<div className="flex flex-1 flex-col justify-end">
<div className="flex flex-row gap-2 pt-5">
<Button className="flex flex-1" onClick={onCancel}>
Cancel

26
web/src/components/settings/MotionTuner.tsx
View File

@@ -173,13 +173,13 @@ export default function MotionTuner({
}
return (
<div className="flex flex-col md:flex-row size-full">
<div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} />
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
<div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
<Heading as="h3" className="my-2">
Motion Detection Tuner
</Heading>
<div className="text-sm text-muted-foreground my-3 space-y-3">
<div className="my-3 space-y-3 text-sm text-muted-foreground">
<p>
Frigate uses motion detection as a first line check to see if there
is anything happening in the frame worth checking with object
@@ -194,18 +194,18 @@ export default function MotionTuner({
className="inline"
>
Read the Motion Tuning Guide{" "}
<LuExternalLink className="size-3 ml-2 inline-flex" />
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</div>
<Separator className="flex my-2 bg-secondary" />
<div className="flex flex-col w-full space-y-6">
<Separator className="my-2 flex bg-secondary" />
<div className="flex w-full flex-col space-y-6">
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<Label htmlFor="motion-threshold" className="text-md">
Threshold
</Label>
<div className="text-sm text-muted-foreground my-2">
<div className="my-2 text-sm text-muted-foreground">
<p>
The threshold value dictates how much of a change in a pixel's
luminance is required to be considered motion.{" "}
@@ -226,7 +226,7 @@ export default function MotionTuner({
handleMotionConfigChange({ threshold: value[0] });
}}
/>
<div className="text-lg ml-6 mr-2 flex align-center">
<div className="align-center ml-6 mr-2 flex text-lg">
{motionSettings.threshold}
</div>
</div>
@@ -236,7 +236,7 @@ export default function MotionTuner({
<Label htmlFor="motion-threshold" className="text-md">
Contour Area
</Label>
<div className="text-sm text-muted-foreground my-2">
<div className="my-2 text-sm text-muted-foreground">
<p>
The contour area value is used to decide which groups of
changed pixels qualify as motion. <em>Default: 10</em>
@@ -256,12 +256,12 @@ export default function MotionTuner({
handleMotionConfigChange({ contour_area: value[0] });
}}
/>
<div className="text-lg ml-6 mr-2 flex align-center">
<div className="align-center ml-6 mr-2 flex text-lg">
{motionSettings.contour_area}
</div>
</div>
</div>
<Separator className="flex my-2 bg-secondary" />
<Separator className="my-2 flex bg-secondary" />
<div className="flex flex-row items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="improve-contrast">Improve Contrast</Label>
@@ -280,7 +280,7 @@ export default function MotionTuner({
/>
</div>
</div>
<div className="flex flex-col flex-1 justify-end">
<div className="flex flex-1 flex-col justify-end">
<div className="flex flex-row gap-2 pt-5">
<Button className="flex flex-1" onClick={onCancel}>
Reset
@@ -305,7 +305,7 @@ export default function MotionTuner({
</div>
{cameraConfig ? (
<div className="flex md:w-7/12 md:grow md:h-dvh md:max-h-full">
<div className="flex md:h-dvh md:max-h-full md:w-7/12 md:grow">
<div className="size-full min-h-10">
<AutoUpdatingCameraImage
camera={cameraConfig.name}

8
web/src/components/settings/ObjectMaskEditPane.tsx
View File

@@ -249,7 +249,7 @@ export default function ObjectMaskEditPane({
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Object Mask
</Heading>
<div className="text-sm text-muted-foreground my-2">
<div className="my-2 text-sm text-muted-foreground">
<p>
Object filter masks are used to filter out false positives for a given
object type based on location.
@@ -257,7 +257,7 @@ export default function ObjectMaskEditPane({
</div>
<Separator className="my-3 bg-secondary" />
{polygons && activePolygonIndex !== undefined && (
<div className="flex flex-row my-2 text-sm w-full justify-between">
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
@@ -284,7 +284,7 @@ export default function ObjectMaskEditPane({
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-6 flex flex-col flex-1"
className="flex flex-1 flex-col space-y-6"
>
<div>
<FormField
@@ -332,7 +332,7 @@ export default function ObjectMaskEditPane({
)}
/>
</div>
<div className="flex flex-col flex-1 justify-end">
<div className="flex flex-1 flex-col justify-end">
<div className="flex flex-row gap-2 pt-5">
<Button className="flex flex-1" onClick={onCancel}>
Cancel

38
web/src/components/settings/ObjectSettings.tsx
View File

@@ -111,13 +111,13 @@ export default function ObjectSettings({
}
return (
<div className="flex flex-col md:flex-row size-full">
<div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} />
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
<div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
<Heading as="h3" className="my-2">
Debug
</Heading>
<div className="text-sm text-muted-foreground mb-5 space-y-3">
<div className="mb-5 space-y-3 text-sm text-muted-foreground">
<p>
Frigate uses your detectors{" "}
{config
@@ -142,17 +142,17 @@ export default function ObjectSettings({
<TabsTrigger value="objectlist">Object List</TabsTrigger>
</TabsList>
<TabsContent value="debug">
<div className="flex flex-col w-full space-y-6">
<div className="flex w-full flex-col space-y-6">
<div className="mt-2 space-y-6">
<div className="my-2.5 flex flex-col gap-2.5">
{DEBUG_OPTIONS.map(({ param, title, description }) => (
<div
key={param}
className="flex flex-row w-full justify-between items-center"
className="flex w-full flex-row items-center justify-between"
>
<div className="flex flex-col mb-2">
<div className="mb-2 flex flex-col">
<Label
className="w-full text-primary capitalize cursor-pointer mb-2"
className="mb-2 w-full cursor-pointer capitalize text-primary"
htmlFor={param}
>
{title}
@@ -183,7 +183,7 @@ export default function ObjectSettings({
</div>
{cameraConfig ? (
<div className="flex md:w-7/12 md:grow md:h-dvh md:max-h-full">
<div className="flex md:h-dvh md:max-h-full md:w-7/12 md:grow">
<div className="size-full min-h-10">
<AutoUpdatingCameraImage
camera={cameraConfig.name}
@@ -222,15 +222,15 @@ function ObjectList(objects?: ObjectType[]) {
);
return (
<div className="flex flex-col w-full overflow-y-auto">
<div className="flex w-full flex-col overflow-y-auto">
{objects && objects.length > 0 ? (
objects.map((obj) => {
return (
<Card className="text-sm p-2 mb-1" key={obj.id}>
<Card className="mb-1 p-2 text-sm" key={obj.id}>
<div className="flex flex-row items-center gap-3 pb-1">
<div className="flex flex-row flex-1 items-center justify-start p-3 pl-1">
<div className="flex flex-1 flex-row items-center justify-start p-3 pl-1">
<div
className="p-2 rounded-lg"
className="rounded-lg p-2"
style={{
backgroundColor: obj.stationary
? "rgb(110,110,110)"
@@ -243,10 +243,10 @@ function ObjectList(objects?: ObjectType[]) {
{capitalizeFirstLetter(obj.label)}
</div>
</div>
<div className="flex flex-row w-8/12 items-end justify-end">
<div className="mr-2 text-md w-1/3">
<div className="flex w-8/12 flex-row items-end justify-end">
<div className="text-md mr-2 w-1/3">
<div className="flex flex-col items-end justify-end">
<p className="text-sm mb-1.5 text-primary-variant">
<p className="mb-1.5 text-sm text-primary-variant">
Score
</p>
{obj.score
@@ -255,17 +255,17 @@ function ObjectList(objects?: ObjectType[]) {
%
</div>
</div>
<div className="mr-2 text-md w-1/3">
<div className="text-md mr-2 w-1/3">
<div className="flex flex-col items-end justify-end">
<p className="text-sm mb-1.5 text-primary-variant">
<p className="mb-1.5 text-sm text-primary-variant">
Ratio
</p>
{obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
</div>
</div>
<div className="mr-2 text-md w-1/3">
<div className="text-md mr-2 w-1/3">
<div className="flex flex-col items-end justify-end">
<p className="text-sm mb-1.5 text-primary-variant">
<p className="mb-1.5 text-sm text-primary-variant">
Area
</p>
{obj.area ? obj.area.toString() : "-"}

4
web/src/components/settings/PolygonEditControls.tsx
View File

@@ -73,7 +73,7 @@ export default function PolygonEditControls({
<TooltipTrigger asChild>
<Button
variant="default"
className="size-6 p-1 rounded-md"
className="size-6 rounded-md p-1"
disabled={!polygons[activePolygonIndex].points.length}
onClick={undo}
>
@@ -86,7 +86,7 @@ export default function PolygonEditControls({
<TooltipTrigger asChild>
<Button
variant="default"
className="size-6 p-1 rounded-md"
className="size-6 rounded-md p-1"
disabled={!polygons[activePolygonIndex].points.length}
onClick={reset}
>

8
web/src/components/settings/PolygonItem.tsx
View File

@@ -206,7 +206,7 @@ export default function PolygonItem({
<div
key={index}
className="flex p-1 rounded-lg flex-row items-center justify-between my-1.5 transition-background duration-100"
className="transition-background my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
data-index={index}
onMouseEnter={() => setHoveredPolygonIndex(index)}
onMouseLeave={() => setHoveredPolygonIndex(null)}
@@ -226,7 +226,7 @@ export default function PolygonItem({
>
{PolygonItemIcon && (
<PolygonItemIcon
className="size-5 mr-2"
className="mr-2 size-5"
style={{
fill: toRGBColorString(polygon.color, true),
color: toRGBColorString(polygon.color, true),
@@ -285,7 +285,7 @@ export default function PolygonItem({
</>
)}
{!isMobile && hoveredPolygonIndex === index && (
<div className="flex flex-row gap-2 items-center">
<div className="flex flex-row items-center gap-2">
<Tooltip>
<TooltipTrigger asChild>
<IconWrapper
@@ -319,7 +319,7 @@ export default function PolygonItem({
icon={HiTrash}
className={`size-[15px] cursor-pointer ${
hoveredPolygonIndex === index &&
"text-primary-variant fill-primary-variant"
"fill-primary-variant text-primary-variant"
}`}
onClick={() => !isLoading && setDeleteDialogOpen(true)}
/>

26
web/src/components/settings/ZoneEditPane.tsx
View File

@@ -322,7 +322,7 @@ export default function ZoneEditPane({
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Zone
</Heading>
<div className="text-sm text-muted-foreground my-2">
<div className="my-2 text-sm text-muted-foreground">
<p>
Zones allow you to define a specific area of the frame so you can
determine whether or not an object is within a particular area.
@@ -330,7 +330,7 @@ export default function ZoneEditPane({
</div>
<Separator className="my-3 bg-secondary" />
{polygons && activePolygonIndex !== undefined && (
<div className="flex flex-row my-2 text-sm w-full justify-between">
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
@@ -364,7 +364,7 @@ export default function ZoneEditPane({
<FormLabel>Name</FormLabel>
<FormControl>
<Input
className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
placeholder="Enter a name..."
{...field}
/>
@@ -377,7 +377,7 @@ export default function ZoneEditPane({
</FormItem>
)}
/>
<Separator className="flex my-2 bg-secondary" />
<Separator className="my-2 flex bg-secondary" />
<FormField
control={form.control}
name="inertia"
@@ -386,7 +386,7 @@ export default function ZoneEditPane({
<FormLabel>Inertia</FormLabel>
<FormControl>
<Input
className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
placeholder="3"
{...field}
/>
@@ -399,7 +399,7 @@ export default function ZoneEditPane({
</FormItem>
)}
/>
<Separator className="flex my-2 bg-secondary" />
<Separator className="my-2 flex bg-secondary" />
<FormField
control={form.control}
name="loitering_time"
@@ -408,7 +408,7 @@ export default function ZoneEditPane({
<FormLabel>Loitering Time</FormLabel>
<FormControl>
<Input
className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
placeholder="0"
{...field}
/>
@@ -421,7 +421,7 @@ export default function ZoneEditPane({
</FormItem>
)}
/>
<Separator className="flex my-2 bg-secondary" />
<Separator className="my-2 flex bg-secondary" />
<FormItem>
<FormLabel>Objects</FormLabel>
<FormDescription>
@@ -446,7 +446,7 @@ export default function ZoneEditPane({
/>
</FormItem>
<Separator className="flex my-2 bg-secondary" />
<Separator className="my-2 flex bg-secondary" />
<FormField
control={form.control}
@@ -585,8 +585,8 @@ export function ZoneObjectSelector({
return (
<>
<div className="h-auto overflow-y-auto overflow-x-hidden">
<div className="flex justify-between items-center my-2.5">
<Label className="text-primary cursor-pointer" htmlFor="allLabels">
<div className="my-2.5 flex items-center justify-between">
<Label className="cursor-pointer text-primary" htmlFor="allLabels">
All Objects
</Label>
<Switch
@@ -603,9 +603,9 @@ export function ZoneObjectSelector({
<Separator />
<div className="my-2.5 flex flex-col gap-2.5">
{allLabels.map((item) => (
<div key={item} className="flex justify-between items-center">
<div key={item} className="flex items-center justify-between">
<Label
className="w-full text-primary capitalize cursor-pointer"
className="w-full cursor-pointer capitalize text-primary"
htmlFor={item}
>
{item.replaceAll("_", " ")}