Use prettier-plugin-tailwindcss (#11373)

* 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 09:06:44 -06:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions
+19 -19
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() : "-"}