fix: format

This commit is contained in:
Jayash Tripathy
2026-03-06 14:19:25 +05:30
parent 6e5031196b
commit 5017534e5c
5 changed files with 29 additions and 29 deletions

View File

@@ -197,7 +197,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
<Popover.Panel className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-raised-200">
<div
ref={imagePickerRef}
className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 shadow-raised-200 md:h-[36rem] md:w-[36rem] p-2"
className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 p-2 shadow-raised-200 md:h-[36rem] md:w-[36rem]"
>
<Tabs>
<TabsList>
@@ -211,7 +211,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
<TabsContent value="unsplash">
{(unsplashImages || !unsplashError) && (
<>
<div className="flex gap-x-2 items-center">
<div className="flex items-center gap-x-2">
<Controller
control={control}
name="search"
@@ -230,7 +230,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
onChange={(e) => setFormData({ ...formData, search: e.target.value })}
ref={ref}
placeholder="Search for images"
className="w-full text-sm"
className="text-sm w-full"
/>
)}
/>
@@ -259,7 +259,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
))}
</div>
) : (
<p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
<p className="text-xs text-custom-text-300 pt-7 text-center">No images found.</p>
)
) : (
<Loader className="grid grid-cols-4 gap-4">
@@ -298,10 +298,11 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
<div className="flex w-full flex-1 items-center gap-3">
<div
{...getRootProps()}
className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${(image === null && isDragActive) || !value
className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
(image === null && isDragActive) || !value
? "border-2 border-dashed border-subtle hover:bg-surface-2"
: ""
}`}
}`}
>
<button
type="button"

View File

@@ -92,7 +92,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
);
return cycleId ? (
<div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1 border border-subtle rounded-lg">
<div className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden rounded-lg border border-subtle bg-surface-1 p-4 lg:col-span-2 xl:col-span-1">
<Tabs value={tab ?? "Priority-Issues"} onValueChange={setTab}>
<TabsList>
<TabsTrigger value="Priority-Issues">{t("project_cycles.active_cycle.priority_issue")}</TabsTrigger>
@@ -102,11 +102,11 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
<TabsContent
value="Priority-Issues"
className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
>
<div
ref={issuesContainerRef}
className="flex flex-col gap-1 h-full w-full overflow-y-auto vertical-scrollbar scrollbar-sm"
className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-1 overflow-y-auto"
>
{cycleIssueDetails && "issueIds" in cycleIssueDetails ? (
cycleIssueDetails.issueCount > 0 ? (
@@ -119,7 +119,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
return (
<div
key={issue.id}
className="group flex cursor-pointer items-center justify-between gap-2 rounded-md hover:bg-surface-2 p-1"
className="group flex cursor-pointer items-center justify-between gap-2 rounded-md p-1 hover:bg-surface-2"
onClick={() => {
if (issue.id) {
setPeekIssue({
@@ -132,14 +132,14 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
}
}}
>
<div className="flex items-center gap-1.5 flex-grow w-full min-w-24 truncate">
<div className="flex w-full min-w-24 flex-grow items-center gap-1.5 truncate">
<IssueIdentifier issueId={issue.id} projectId={projectId} size="xs" variant="secondary" />
<Tooltip position="top-start" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-13 text-primary truncate">{issue.name}</span>
<span className="truncate text-13 text-primary">{issue.name}</span>
</Tooltip>
</div>
<PriorityIcon priority={issue.priority} withContainer size={12} />
<div className="flex items-center gap-1.5 flex-shrink-0">
<div className="flex flex-shrink-0 items-center gap-1.5">
<StateDropdown
value={issue.state_id}
onChange={() => {}}
@@ -154,9 +154,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
tooltipHeading="Target Date"
tooltipContent={renderFormattedDate(issue.target_date)}
>
<div className="h-full flex truncate items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 bg-layer-1 group-hover:bg-surface-1 cursor-pointer">
<div className="flex h-full cursor-pointer items-center gap-1.5 truncate rounded-sm bg-layer-1 px-2 py-0.5 text-11 group-hover:bg-surface-1">
<CalendarCheck className="h-3 w-3 flex-shrink-0" />
<span className="text-11 truncate">
<span className="truncate text-11">
{renderFormattedDateWithoutYear(issue.target_date)}
</span>
</div>
@@ -170,13 +170,13 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
<div
ref={setIssueLoaderElement}
className={
"h-11 relative flex items-center gap-3 bg-layer-1 p-3 text-13 cursor-pointer animate-pulse"
"relative flex h-11 animate-pulse cursor-pointer items-center gap-3 bg-layer-1 p-3 text-13"
}
/>
)}
</>
) : (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<SimpleEmptyState
title={t("active_cycle.empty_state.priority_issue.title")}
assetPath={priorityResolvedPath}
@@ -191,7 +191,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
<TabsContent
value="Assignees"
className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
>
{cycle && !isEmpty(cycle.distribution) ? (
cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
@@ -239,7 +239,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
);
})
) : (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<SimpleEmptyState
title={t("active_cycle.empty_state.assignee.title")}
assetPath={assigneesResolvedPath}
@@ -253,7 +253,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
<TabsContent
value="Labels"
className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
>
{cycle && !isEmpty(cycle.distribution) ? (
cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
@@ -263,12 +263,12 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
title={
<div className="flex items-center gap-2 truncate">
<span
className="block h-3 w-3 rounded-full flex-shrink-0"
className="block h-3 w-3 flex-shrink-0 rounded-full"
style={{
backgroundColor: label.color ?? "#000000",
}}
/>
<span className="text-11 text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
<span className="truncate text-11 text-ellipsis">{label.label_name ?? "No labels"}</span>
</div>
}
completed={label.completed_issues}
@@ -285,7 +285,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
/>
))
) : (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<SimpleEmptyState title={t("active_cycle.empty_state.label.title")} assetPath={labelsResolvedPath} />
</div>
)
@@ -296,7 +296,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
</Tabs>
</div>
) : (
<Loader className="flex flex-col gap-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1">
<Loader className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden bg-surface-1 lg:col-span-2 xl:col-span-1">
<Loader.Item width="100%" height="17rem" />
</Loader>
);

View File

@@ -41,7 +41,7 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
const planeName = getSubscriptionName(planVariant);
return (
<div className="flex flex-col py-6 px-3 bg-layer-1 rounded-xl">
<div className="flex flex-col rounded-xl bg-layer-1 px-3 py-6">
<Tabs value={selectedPlan} onValueChange={(value) => setSelectedPlan(value as TBillingFrequency)}>
<div className="flex w-full justify-center">
<TabsList>

View File

@@ -4,7 +4,6 @@
* See the LICENSE file for details.
*/
// plane imports
import { TabsContent } from "@plane/propel/tabs";
// components
@@ -33,7 +32,7 @@ export function PageNavigationPaneTabPanelsRoot(props: Props) {
<TabsContent
key={tab.key}
value={tab.key}
className="size-full overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
className="vertical-scrollbar scrollbar-sm size-full overflow-y-auto outline-none"
>
{tab.key === "outline" && <PageNavigationPaneOutlineTabPanel page={page} />}
{tab.key === "info" && <PageNavigationPaneInfoTabPanel page={page} versionHistory={versionHistory} />}

View File

@@ -17,9 +17,9 @@ export const buttonVariants = cva(
"error-fill":
"bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
"error-outline":
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-secondary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
"border border-danger-strong bg-layer-2 text-danger-secondary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
secondary:
"bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
"border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
tertiary:
"bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
ghost: