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

14
web/src/components/icons/IconPicker.tsx
View File

@@ -66,12 +66,12 @@ export default function IconPicker({
>
<PopoverTrigger asChild>
{!selectedIcon?.name || !selectedIcon?.Icon ? (
<Button className="text-muted-foreground w-full mt-2">
<Button className="mt-2 w-full text-muted-foreground">
Select an icon
</Button>
) : (
<div className="hover:cursor-pointer">
<div className="flex flex-row w-full justify-between items-center gap-2 my-3">
<div className="my-3 flex w-full flex-row items-center justify-between gap-2">
<div className="flex flex-row items-center gap-2">
<selectedIcon.Icon size={15} />
<div className="text-sm">
@@ -95,9 +95,9 @@ export default function IconPicker({
align="start"
side="top"
container={containerRef.current}
className="flex flex-col max-h-[50dvh] md:max-h-[30dvh] overflow-y-hidden"
className="flex max-h-[50dvh] flex-col overflow-y-hidden md:max-h-[30dvh]"
>
<div className="flex flex-row justify-between items-center mb-3">
<div className="mb-3 flex flex-row items-center justify-between">
<Heading as="h4">Select an icon</Heading>
<span tabIndex={0} className="sr-only" />
<IoClose
@@ -111,17 +111,17 @@ export default function IconPicker({
<Input
type="text"
placeholder="Search for an icon..."
className="mb-3 text-md md:text-sm"
className="text-md mb-3 md:text-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<div className="flex flex-col h-full overflow-y-auto">
<div className="flex h-full flex-col overflow-y-auto">
<div className="grid grid-cols-6 gap-2 pr-1">
{icons.map(([name, Icon]) => (
<div
key={name}
className={cn(
"flex flex-row justify-center items-center hover:cursor-pointer p-1 rounded-lg",
"flex flex-row items-center justify-center rounded-lg p-1 hover:cursor-pointer",
selectedIcon?.name === name
? "bg-selected text-white"
: "hover:bg-secondary-foreground",

8
web/src/components/icons/LiveIcons.tsx
View File

@@ -4,11 +4,11 @@ type LiveIconProps = {
export function LiveGridIcon({ layout }: LiveIconProps) {
return (
<div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
<div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md">
<div
className={`h-1 w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
<div className="h-1 w-full flex gap-0.5">
<div className="flex h-1 w-full gap-0.5">
<div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
@@ -16,7 +16,7 @@ export function LiveGridIcon({ layout }: LiveIconProps) {
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
</div>
<div className="h-1 w-full flex gap-0.5">
<div className="flex h-1 w-full gap-0.5">
<div
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
/>
@@ -30,7 +30,7 @@ export function LiveGridIcon({ layout }: LiveIconProps) {
export function LiveListIcon({ layout }: LiveIconProps) {
return (
<div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
<div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md">
<div
className={`size-full ${layout == "list" ? "bg-selected" : "bg-secondary-foreground"}`}
/>