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 10:06:44 -05:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions

View File

@@ -45,7 +45,7 @@ export default function CameraImage({
{enabled ? (
<img
ref={imgRef}
className={`object-contain ${isPortraitImage ? "h-full w-auto" : "w-full h-auto"} rounded-lg md:rounded-2xl`}
className={`object-contain ${isPortraitImage ? "h-full w-auto" : "h-auto w-full"} rounded-lg md:rounded-2xl`}
onLoad={() => {
setHasLoaded(true);
@@ -62,12 +62,12 @@ export default function CameraImage({
}}
/>
) : (
<div className="text-center pt-6">
<div className="pt-6 text-center">
Camera is disabled in config, no stream or snapshot available!
</div>
)}
{!hasLoaded && enabled ? (
<div className="absolute left-0 right-0 top-0 bottom-0 flex justify-center items-center">
<div className="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center">
<ActivityIndicator />
</div>
) : null}

View File

@@ -56,7 +56,7 @@ export default function DebugCameraImage({
cameraClasses="relative w-full h-full flex justify-center"
/>
<Button onClick={handleToggleSettings} variant="link" size="sm">
<span className="w-5 h-5">
<span className="h-5 w-5">
<LuSettings />
</span>{" "}
<span>{showSettings ? "Hide" : "Show"} Options</span>
@@ -85,7 +85,7 @@ type DebugSettingsProps = {
function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
return (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
<div className="flex items-center space-x-2">
<Switch
id="bbox"

View File

@@ -96,7 +96,7 @@ export default function CameraImage({
return (
<div
className={cn("relative w-full h-full flex justify-center", className)}
className={cn("relative flex h-full w-full justify-center", className)}
ref={containerRef}
>
{enabled ? (
@@ -108,7 +108,7 @@ export default function CameraImage({
width={scaledWidth}
/>
) : (
<div className="text-center pt-6">
<div className="pt-6 text-center">
Camera is disabled in config, no stream or snapshot available!
</div>
)}