binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: replace prettier with oxfmt (#8676)

Browse source
This commit is contained in:
sriram veeraghanta 2026-03-02 20:40:50 +05:30 • committed by GitHub
parent 9ee73d57ef
commit 41abaffc6e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1008 changed files with 4046 additions and 4027 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
View file

@ -24,7 +24,7 @@ export const WorkspaceActiveCycleHeader = observer(function WorkspaceActiveCycle
component={
<BreadcrumbLink
label={t("active_cycles")}
icon={<CycleIcon className="h-4 w-4 text-tertiary rotate-180" />}
icon={<CycleIcon className="h-4 w-4 rotate-180 text-tertiary" />}
/>
}
/>

12
apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
View file

@ -72,22 +72,22 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
{workspaceProjectIds && (
<>
{workspaceProjectIds.length > 0 || loader === "init-loader" ? (
<div className="flex h-full overflow-hidden ">
<Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
<div className={"flex flex-col w-full h-full"}>
<div className="flex h-full overflow-hidden">
<Tabs value={selectedTab} onValueChange={handleTabChange} className="h-full w-full">
<div className={"flex h-full w-full flex-col"}>
<div
className={cn(
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
"flex w-full items-center justify-between gap-4 overflow-hidden border-b border-subtle bg-surface-1 px-6 py-2"
)}
>
<Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
<Tabs.List className={"flex h-7 w-fit overflow-x-auto"}>
{ANALYTICS_TABS.map((tab) => (
<Tabs.Trigger
key={tab.key}
value={tab.key}
disabled={tab.isDisabled}
size="md"
className="px-3 h-6"
className="h-6 px-3"
onClick={() => {
if (!tab.isDisabled) {
handleTabChange(tab.key);

6
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
View file

@ -38,9 +38,9 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
<>
{projectPreferences.navigationMode === "TABBED" && (
<div className="z-20">
<Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
<div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
<div className="flex items-center gap-2 size-full flex-1">
<Row className="flex h-header w-full items-center gap-2 border-b border-subtle bg-surface-1">
<div className="flex h-full w-full items-center gap-2 divide-x divide-subtle">
<div className="flex size-full flex-1 items-center gap-2">
{sidebarCollapsed && (
<div className="shrink-0">
<AppSidebarToggleButton />

12
apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
View file

@ -110,15 +110,15 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
excludedElementId="extended-project-sidebar-toggle"
className="px-0"
>
<div className="flex flex-col gap-1 w-full sticky top-4 px-4">
<div className="sticky top-4 flex w-full flex-col gap-1 px-4">
<div className="flex items-center justify-between">
<span className="text-13 font-semibold text-tertiary py-1.5">Projects</span>
<span className="py-1.5 text-13 font-semibold text-tertiary">Projects</span>
{isAuthorizedUser && (
<Tooltip tooltipHeading={t("create_project")} tooltipContent="">
<button
type="button"
data-ph-element={PROJECT_TRACKER_ELEMENTS.EXTENDED_SIDEBAR_ADD_BUTTON}
className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0 text-tertiary hover:text-secondary transition-colors"
className="flex-shrink-0 rounded-sm p-0.5 text-tertiary transition-colors hover:bg-layer-1 hover:text-secondary"
onClick={() => {
setIsProjectModalOpen(true);
}}
@ -128,7 +128,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
</Tooltip>
)}
</div>
<div className="ml-auto flex items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1 w-full">
<div className="ml-auto flex w-full items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1">
<SearchIcon className="h-3.5 w-3.5 text-placeholder" />
<input
className="w-full max-w-[234px] border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
@ -140,7 +140,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
</div>
</div>
{filteredProjects.length === 0 ? (
<div className="flex flex-col items-center mt-4 p-10">
<div className="mt-4 flex flex-col items-center p-10">
<EmptyStateCompact
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
@ -150,7 +150,7 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
/>
</div>
) : (
<div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 pl-9 pr-2">
<div className="vertical-scrollbar mt-4 flex scrollbar-sm flex-grow flex-col gap-0.5 overflow-x-hidden overflow-y-auto pr-2 pl-9">
{filteredProjects.map((projectId, index) => (
<SidebarProjectsListItem
key={projectId}

4
apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
View file

@ -44,10 +44,10 @@ export const ExtendedSidebarWrapper = observer(function ExtendedSidebarWrapper(p
id={excludedElementId}
ref={extendedSidebarRef}
className={cn(
"absolute h-full z-[21] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-surface-1 border-r border-subtle p-4 shadow-sm",
"shadow-sm absolute z-[21] flex h-full transform flex-col border-r border-subtle bg-surface-1 p-4 py-2 transition-all duration-300 ease-in-out",
{
"opacity-100": isExtendedSidebarOpened,
"opacity-0 hidden": !isExtendedSidebarOpened,
"hidden opacity-0": !isExtendedSidebarOpened,
},
className
)}

4
apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
View file

@ -15,8 +15,8 @@ function WorkspaceLayout() {
return (
<>
<ProjectsAppPowerKProvider />
<div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-subtle">
<div id="full-screen-portal" className="inset-0 absolute w-full" />
<div className="relative flex h-full w-full flex-col overflow-hidden rounded-lg border border-subtle">
<div id="full-screen-portal" className="absolute inset-0 w-full" />
<div className="relative flex size-full overflow-hidden">
<ProjectAppSidebar />
<ExtendedProjectSidebar />

4
apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
View file

@ -10,9 +10,9 @@ import { NotificationsSidebarRoot } from "@/components/workspace-notifications/s
export default function ProjectInboxIssuesLayout() {
return (
<div className="relative w-full h-full overflow-hidden flex items-center">
<div className="relative flex h-full w-full items-center overflow-hidden">
<NotificationsSidebarRoot />
<div className="w-full h-full overflow-hidden overflow-y-auto">
<div className="h-full w-full overflow-hidden overflow-y-auto">
<Outlet />
</div>
</div>

2
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
View file

@ -60,7 +60,7 @@ function ProfileActivityPage() {
<h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
{canDownloadActivity && <DownloadActivityButton />}
</div>
<div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
<div className="vertical-scrollbar flex scrollbar-md h-full flex-col overflow-y-auto px-5 md:px-9">
{activityPages}
{pageCount < totalPages && resultsCount !== 0 && (
<div className="flex w-full items-center justify-center text-11">

8
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
View file

@ -59,8 +59,8 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
<>
{/* Passing the type prop from the current route value as we need the header as top most component.
TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
<div className="h-full w-full flex flex-col md:flex-row overflow-hidden">
<div className="h-full w-full flex flex-col overflow-hidden">
<div className="flex h-full w-full flex-col overflow-hidden md:flex-row">
<div className="flex h-full w-full flex-col overflow-hidden">
<AppHeader
header={
<UserProfileHeader
@ -72,11 +72,11 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
/>
<ContentWrapper>
<div className="h-full w-full flex flex-row md:flex-col md:overflow-hidden">
<div className="flex h-full w-full flex-row md:flex-col md:overflow-hidden">
<div className="flex w-full flex-col md:h-full md:overflow-hidden">
<ProfileNavbar isAuthorized={!!isAuthorized} />
{isAuthorized || !isAuthorizedPath ? (
<div className={`w-full overflow-hidden h-full`}>
<div className={`h-full w-full overflow-hidden`}>
<Outlet />
</div>
) : (

6
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
View file

@ -90,9 +90,9 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
className="flex flex-grow justify-center text-13 text-secondary"
placement="bottom-start"
customButton={
<div className="flex flex-center text-13 text-secondary">
<div className="flex-center flex text-13 text-secondary">
{t("common.layout")}
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary my-auto" strokeWidth={2} />
<ChevronDownIcon className="my-auto ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
</div>
}
customButtonClassName="flex flex-center text-secondary text-13"
@ -119,7 +119,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
title={t("common.display")}
placement="bottom-end"
menuButton={
<div className="flex flex-center text-13 text-secondary">
<div className="flex-center flex text-13 text-secondary">
{t("common.display")}
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
</div>

2
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
View file

@ -31,7 +31,7 @@ export function ProfileNavbar(props: Props) {
<Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
<span
className={cn(
`flex whitespace-nowrap border-b-2 p-4 text-13 font-medium outline-none text-tertiary hover:text-primary ${
`flex border-b-2 p-4 text-13 font-medium whitespace-nowrap text-tertiary outline-none hover:text-primary ${
pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
? "border-accent-strong text-accent-primary hover:text-accent-primary"
: "border-transparent"

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
View file

@ -99,7 +99,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
position="bottom"
>
<span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl">
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2.5 py-0.5 text-center text-11 font-semibold text-accent-primary">
{issueCount}
</span>
</Tooltip>

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
View file

@ -72,7 +72,7 @@ function CycleDetailPage({ params }: Route.ComponentProps) {
{!isSidebarCollapsed && (
<div
className={cn(
"flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
"vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 shadow-raised-200 duration-300"
)}
>
<CycleDetailsSidebar

4
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
View file

@ -184,7 +184,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
</div>
</Header.LeftItem>
<Header.RightItem className="items-center">
<div className="hidden items-center gap-2 md:flex ">
<div className="hidden items-center gap-2 md:flex">
<div className="hidden @4xl:flex">
<LayoutSelection
layouts={[
@ -259,7 +259,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
icon={PanelRight}
onClick={toggleSidebar}
className={cn({
"text-accent-primary bg-accent-subtle": !isSidebarCollapsed,
"bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
})}
/>
<CycleQuickActions

16
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
View file

@ -96,13 +96,13 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
onClose={() => setAnalyticsModal(false)}
cycleDetails={cycleDetails ?? undefined}
/>
<div className="flex justify-evenly py-2 border-b border-subtle md:hidden bg-surface-1">
<div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
<CustomMenu
maxHeight={"md"}
className="flex flex-grow justify-center text-secondary text-13"
className="flex flex-grow justify-center text-13 text-secondary"
placement="bottom-start"
customButton={
<span className="flex flex-grow justify-center text-secondary text-13">{t("common.layout")}</span>
<span className="flex flex-grow justify-center text-13 text-secondary">{t("common.layout")}</span>
}
customButtonClassName="flex flex-grow justify-center text-secondary text-13"
closeOnSelect
@ -115,19 +115,19 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
}}
className="flex items-center gap-2"
>
<IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="w-3 h-3" />
<IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
<div className="text-tertiary">{t(layout.titleTranslationKey)}</div>
</CustomMenu.MenuItem>
))}
</CustomMenu>
<div className="flex flex-grow justify-center border-l border-subtle items-center text-secondary text-13">
<div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
<FiltersDropdown
title={t("common.display")}
placement="bottom-end"
menuButton={
<span className="flex items-center text-secondary text-13">
<span className="flex items-center text-13 text-secondary">
{t("common.display")}
<ChevronDownIcon className="text-secondary h-4 w-4 ml-2" />
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
</span>
}
>
@ -148,7 +148,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
<span
onClick={() => setAnalyticsModal(true)}
className="flex flex-grow justify-center text-secondary text-13 border-l border-subtle"
className="flex flex-grow justify-center border-l border-subtle text-13 text-secondary"
>
{t("common.analytics")}
</span>

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
View file

@ -68,7 +68,7 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
toggleCreateCycleModal(true);
}}
>
<div className="sm:hidden block">{t("add")}</div>
<div className="block sm:hidden">{t("add")}</div>
<div className="hidden sm:block">{t("project_cycles.add_cycle")}</div>
</Button>
</Header.RightItem>

6
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
View file

@ -46,12 +46,12 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
<div className="flex justify-center sm:hidden">
<CustomMenu
maxHeight={"md"}
className="flex flex-grow justify-center text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
className="flex flex-grow justify-center border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
// placement="bottom-start"
customButton={
<span className="flex items-center gap-2">
<ListLayoutIcon className="h-4 w-4" />
<span className="flex flex-grow justify-center text-secondary text-13">Layout</span>
<span className="flex flex-grow justify-center text-13 text-secondary">Layout</span>
</span>
}
customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
@ -69,7 +69,7 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
}}
className="flex items-center gap-2"
>
<layout.icon className="w-3 h-3" />
<layout.icon className="h-3 w-3" />
<div className="text-tertiary">{layout.title}</div>
</CustomMenu.MenuItem>
);

4
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
View file

@ -73,7 +73,7 @@ function ProjectCyclesPage({ params }: Route.ComponentProps) {
// No access to cycle
if (currentProjectDetails?.cycle_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<DetailedEmptyState
title={t("disabled_project.empty_state.cycle.title")}
description={t("disabled_project.empty_state.cycle.description")}
@ -94,7 +94,7 @@ function ProjectCyclesPage({ params }: Route.ComponentProps) {
return (
<>
<PageHead title={pageTitle} />
<div className="w-full h-full">
<div className="h-full w-full">
<CycleCreateUpdateModal
workspaceSlug={workspaceSlug}
projectId={projectId}

4
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
View file

@ -45,7 +45,7 @@ function ProjectInboxPage({ params }: Route.ComponentProps) {
// No access to inbox
if (currentProjectDetails?.inbox_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<DetailedEmptyState
title={t("disabled_project.empty_state.inbox.title")}
description={t("disabled_project.empty_state.inbox.description")}
@ -79,7 +79,7 @@ function ProjectInboxPage({ params }: Route.ComponentProps) {
return (
<div className="flex h-full flex-col">
<PageHead title={pageTitle} />
<div className="w-full h-full overflow-hidden">
<div className="h-full w-full overflow-hidden">
<InboxIssueRoot
workspaceSlug={workspaceSlug}
projectId={projectId}

4
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
View file

@ -50,7 +50,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {
if (loaderData.error) {
return (
<div className="flex items-center justify-center size-full">
<div className="flex size-full items-center justify-center">
<EmptyState
image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
title={t("issue.empty_state.issue_detail.title")}
@ -65,7 +65,7 @@ export default function IssueDetailsPage({ loaderData }: Route.ComponentProps) {
}
return (
<div className="flex items-center justify-center size-full">
<div className="flex size-full items-center justify-center">
<LogoSpinner />
</div>
);

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
View file

@ -68,7 +68,7 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
onClose={() => setAnalyticsModal(false)}
projectDetails={currentProjectDetails ?? undefined}
/>
<div className="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
<div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
<MobileLayoutSelection
layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
onChange={handleLayoutChange}

8
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
View file

@ -32,16 +32,16 @@ function ProjectLayout({ params }: Route.ComponentProps) {
<>
{projectPreferences.navigationMode === "TABBED" && (
<div className="z-20">
<Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
<div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
<div className="flex items-center gap-2 size-full flex-1">
<Row className="flex h-header w-full items-center gap-2 border-b border-subtle bg-surface-1">
<div className="flex h-full w-full items-center gap-2 divide-x divide-subtle">
<div className="flex size-full flex-1 items-center gap-2">
{sidebarCollapsed && (
<div className="shrink-0">
<AppSidebarToggleButton />
</div>
)}
<Header className={cn("h-full", { "pl-1.5": !sidebarCollapsed })}>
<Header.LeftItem className="h-full max-w-full flex items-center gap-2">
<Header.LeftItem className="flex h-full max-w-full items-center gap-2">
<TabNavigationRoot workspaceSlug={workspaceSlug} projectId={projectId} />
</Header.LeftItem>
</Header>

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
View file

@ -68,7 +68,7 @@ function ModuleIssuesPage({ params }: Route.ComponentProps) {
{!isSidebarCollapsed && (
<div
className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
"vertical-scrollbar absolute right-0 z-13 flex scrollbar-sm h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 shadow-raised-200 duration-300"
)}
>
<ModuleAnalyticsSidebar moduleId={moduleId} handleClose={toggleSidebar} />

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
View file

@ -255,7 +255,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
icon={PanelRight}
onClick={toggleSidebar}
className={cn({
"text-accent-primary bg-accent-subtle": !isSidebarCollapsed,
"bg-accent-subtle text-accent-primary": !isSidebarCollapsed,
})}
/>
{moduleId && (

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
View file

@ -73,7 +73,7 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
}}
size="lg"
>
<div className="sm:hidden block">{t("add")}</div>
<div className="block sm:hidden">{t("add")}</div>
<div className="hidden sm:block">{t("project_module.add_module")}</div>
</Button>
) : (

6
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
View file

@ -22,11 +22,11 @@ export const ModulesListMobileHeader = observer(function ModulesListMobileHeader
<div className="flex justify-start md:hidden">
<CustomMenu
maxHeight={"md"}
className="flex flex-grow justify-start text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
className="flex flex-grow justify-start border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
// placement="bottom-start"
customButton={
<Row className="flex flex-grow justify-center text-secondary text-13 gap-2">
<span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-secondary my-auto" strokeWidth={1} />
<Row className="flex flex-grow justify-center gap-2 text-13 text-secondary">
<span>Layout</span> <ChevronDownIcon className="my-auto h-4 w-4 text-secondary" strokeWidth={1} />
</Row>
}
customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"

4
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
View file

@ -66,7 +66,7 @@ function ProjectModulesPage({ params }: Route.ComponentProps) {
// No access to
if (currentProjectDetails?.module_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<DetailedEmptyState
title={t("disabled_project.empty_state.module.title")}
description={t("disabled_project.empty_state.module.description")}
@ -85,7 +85,7 @@ function ProjectModulesPage({ params }: Route.ComponentProps) {
return (
<>
<PageHead title={pageTitle} />
<div className="h-full w-full flex flex-col">
<div className="flex h-full w-full flex-col">
{(calculateTotalFilters(currentProjectFilters) !== 0 || currentProjectDisplayFilters?.favorites) && (
<ModuleAppliedFiltersList
appliedFilters={currentProjectFilters}

10
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
View file

@ -153,16 +153,16 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
if ((!page || !id) && !pageDetailsError)
return (
<div className="size-full grid place-items-center">
<div className="grid size-full place-items-center">
<LogoSpinner />
</div>
);
if (pageDetailsError || !canCurrentUserAccessPage)
return (
<div className="h-full w-full flex flex-col items-center justify-center">
<h3 className="text-16 font-semibold text-center">Page not found</h3>
<p className="text-13 text-secondary text-center mt-3">
<div className="flex h-full w-full flex-col items-center justify-center">
<h3 className="text-center text-16 font-semibold">Page not found</h3>
<p className="mt-3 text-center text-13 text-secondary">
The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
</p>
<Link
@ -180,7 +180,7 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
<>
<PageHead title={name} />
<div className="flex h-full flex-col justify-between">
<div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
<div className="relative flex h-full w-full flex-shrink-0 flex-col overflow-hidden">
<PageRoot
config={pageRootConfig}
handlers={pageRootHandlers}

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
View file

@ -53,7 +53,7 @@ export const PageDetailsHeader = observer(function PageDetailsHeader() {
value: _page.id,
query: _page.name,
content: (
<div className="flex gap-2 items-center justify-between">
<div className="flex items-center justify-between gap-2">
<SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={PageIcon} />
<PageAccessIcon {..._page} />
</div>

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
View file

@ -57,7 +57,7 @@ function ProjectPagesPage({ params }: Route.ComponentProps) {
// No access to cycle
if (currentProjectDetails?.page_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<DetailedEmptyState
title={t("disabled_project.empty_state.page.title")}
description={t("disabled_project.empty_state.page.description")}

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
View file

@ -26,7 +26,7 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
return (
<>
<div className="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
<div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
<Row className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
<ViewOrderByDropdown
sortBy={filters.sortBy}

2
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
View file

@ -69,7 +69,7 @@ function ProjectViewsPage({ params }: Route.ComponentProps) {
// No access to
if (currentProjectDetails?.issue_views_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<DetailedEmptyState
title={t("disabled_project.empty_state.view.title")}
description={t("disabled_project.empty_state.view.description")}

6
apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
View file

@ -29,8 +29,8 @@ function WorkspaceViewsPage() {
return (
<>
<PageHead title={pageTitle} />
<div className="flex flex-col h-full w-full overflow-hidden">
<div className="flex h-11 w-full items-center gap-2.5 px-5 py-3 overflow-hidden border-b border-subtle">
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="flex h-11 w-full items-center gap-2.5 overflow-hidden border-b border-subtle px-5 py-3">
<SearchIcon className="text-secondary" width={14} height={14} strokeWidth={2} />
<Input
className="w-full bg-transparent !p-0 text-11 leading-5 text-secondary placeholder:text-placeholder focus:outline-none"
@ -40,7 +40,7 @@ function WorkspaceViewsPage() {
mode="true-transparent"
/>
</div>
<div className="flex flex-col h-full w-full vertical-scrollbar scrollbar-lg">
<div className="vertical-scrollbar flex scrollbar-lg h-full w-full flex-col">
{DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => t(v.i18n_label).toLowerCase().includes(query.toLowerCase())).map(
(option) => (
<GlobalDefaultViewListItem key={option.key} view={option} />

2
apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
View file

@ -16,7 +16,7 @@ export default function SettingsLayout() {
<div className="relative flex size-full overflow-hidden rounded-lg border border-subtle">
<main className="relative flex size-full flex-col overflow-hidden">
{/* Content */}
<ContentWrapper className="md:flex w-full bg-surface-1">
<ContentWrapper className="w-full bg-surface-1 md:flex">
<div className="size-full overflow-hidden">
<Outlet />
</div>

2
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
View file

@ -44,7 +44,7 @@ function ExportsPage() {
<SettingsContentWrapper header={<ExportsWorkspaceSettingsHeader />} hugging>
<PageHead title={pageTitle} />
<div
className={cn("w-full flex flex-col gap-y-6", {
className={cn("flex w-full flex-col gap-y-6", {
"opacity-60": !canPerformWorkspaceMemberActions,
})}
>

4
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
View file

@ -43,12 +43,12 @@ const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout({ params
hamburgerContent={WorkspaceSettingsSidebarRoot}
activePath={getWorkspaceActivePath(pathname) || ""}
/>
<div className="inset-y-0 flex flex-row w-full h-full">
<div className="inset-y-0 flex h-full w-full flex-row">
{workspaceUserInfo && !isAuthorized ? (
<NotAuthorizedView section="settings" className="h-auto" />
) : (
<div className="relative flex size-full">
<div className="h-full hidden md:block">
<div className="hidden h-full md:block">
<WorkspaceSettingsSidebarRoot />
</div>
<Outlet />

4
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
View file

@ -113,11 +113,11 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
"opacity-60": !canPerformWorkspaceMemberActions,
})}
>
<div className="flex justify-between gap-4 pb-3.5 items-center">
<div className="flex items-center justify-between gap-4 pb-3.5">
<h4 className="flex items-center gap-2.5 text-h3-medium">
{t("workspace_settings.settings.members.title")}
{workspaceMemberIds && workspaceMemberIds.length > 0 && (
<CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
<CountChip count={workspaceMemberIds.length} className="m-auto h-5" />
)}
</h4>
<div className="flex items-center gap-2">

2
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
View file

@ -89,7 +89,7 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
</div>
) : (
<div className="flex h-full w-full flex-col">
<div className="h-full w-full flex items-center justify-center">
<div className="flex h-full w-full items-center justify-center">
<EmptyStateCompact
assetKey="webhook"
title={t("settings_empty_state.webhooks.title")}

4
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
View file

@ -27,9 +27,9 @@ function ProjectDetailSettingsLayout({ params }: Route.ComponentProps) {
hamburgerContent={(props) => <ProjectSettingsSidebarRoot {...props} projectId={projectId} />}
activePath={getProjectActivePath(pathname) || ""}
/>
<div className="inset-y-0 flex flex-row w-full h-full">
<div className="inset-y-0 flex h-full w-full flex-row">
<div className="relative flex size-full">
<div className="shrink-0 h-full hidden md:block">
<div className="hidden h-full shrink-0 md:block">
<ProjectSettingsSidebarRoot projectId={projectId} />
</div>
<ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>

4
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
View file

@ -24,10 +24,10 @@ function ProjectSettingsPage() {
// derived values
const resolvedPath = resolvedTheme === "dark" ? ProjectDarkEmptyState : ProjectLightEmptyState;
return (
<div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
<div className="mx-auto flex h-full max-w-[480px] flex-col items-center justify-center gap-4">
<img src={resolvedPath} alt="No projects yet" />
<div className="text-16 font-semibold text-tertiary">No projects yet</div>
<div className="text-13 text-tertiary text-center">
<div className="text-center text-13 text-tertiary">
Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you
need to get things done.
</div>

2
apps/web/app/(all)/accounts/forgot-password/page.tsx
View file

@ -18,7 +18,7 @@ function ForgotPasswordPage() {
return (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
<AuthHeader type={EAuthModes.SIGN_IN} />
<ForgotPasswordForm />
</div>

2
apps/web/app/(all)/accounts/reset-password/page.tsx
View file

@ -19,7 +19,7 @@ function ResetPasswordPage() {
return (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
<AuthHeader type={EAuthModes.SIGN_IN} />
<ResetPasswordForm />
</div>

2
apps/web/app/(all)/accounts/set-password/page.tsx
View file

@ -19,7 +19,7 @@ function SetPasswordPage() {
return (
<DefaultLayout>
<AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
<div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
<AuthHeader type={EAuthModes.SIGN_IN} />
<ResetPasswordForm />
</div>

18
apps/web/app/(all)/create-workspace/page.tsx
View file

@ -58,34 +58,34 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
return (
<AuthenticationWrapper>
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0 bg-surface-1">
<div className="flex h-full flex-col gap-y-2 overflow-hidden bg-surface-1 sm:flex-row sm:gap-y-0">
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<div className="absolute top-1/2 left-0 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:top-0 sm:left-1/2 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<Link
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
className="absolute top-1/2 left-5 grid -translate-y-1/2 place-items-center px-3 sm:top-12 sm:left-1/2 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
href="/"
>
<PlaneLogo className="h-9 w-auto text-primary" />
</Link>
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
<div className="absolute top-1/4 right-4 -translate-y-1/2 text-13 text-primary sm:fixed sm:top-12 sm:right-16 sm:translate-y-0 sm:py-5">
{currentUser?.email}
</div>
</div>
<div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
{isWorkspaceCreationDisabled ? (
<div className="w-4/5 h-full flex flex-col items-center justify-center text-16 font-medium gap-1">
<div className="flex h-full w-4/5 flex-col items-center justify-center gap-1 text-16 font-medium">
<img
src={WorkspaceCreationDisabled}
className="w-full h-full object-contain mb-4"
className="mb-4 h-full w-full object-contain"
alt="Workspace creation disabled"
/>
<div className="text-16 font-medium text-center">
<div className="text-center text-16 font-medium">
{t("workspace_creation.errors.creation_disabled.title")}
</div>
<p className="text-13 text-tertiary break-words text-center">
<p className="text-center text-13 break-words text-tertiary">
{t("workspace_creation.errors.creation_disabled.description")}
</p>
<div className="flex gap-4 mt-6">
<div className="mt-6 flex gap-4">
<Button variant="primary" onClick={() => router.back()}>
{t("common.go_back")}
</Button>

8
apps/web/app/(all)/invitations/page.tsx
View file

@ -113,14 +113,14 @@ function UserInvitationsPage() {
<AuthenticationWrapper>
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<div className="absolute top-1/2 left-0 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:top-0 sm:left-1/2 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<Link
href="/"
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
className="absolute top-1/2 left-5 z-10 grid -translate-y-1/2 place-items-center px-3 sm:top-12 sm:left-1/2 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
>
<PlaneLogo className="h-9 w-auto text-primary" />
</Link>
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
<div className="absolute top-1/4 right-4 -translate-y-1/2 text-13 text-primary sm:fixed sm:top-12 sm:right-16 sm:translate-y-0 sm:py-5">
{currentUser?.email}
</div>
</div>
@ -182,7 +182,7 @@ function UserInvitationsPage() {
</div>
</div>
) : (
<div className="fixed left-0 top-0 grid h-full w-full place-items-center">
<div className="fixed top-0 left-0 grid h-full w-full place-items-center">
<EmptyState
title={t("no_pending_invites")}
description={t("you_can_see_here_if_someone_invites_you_to_a_workspace")}

6
apps/web/app/(all)/onboarding/page.tsx
View file

@ -46,9 +46,9 @@ function OnboardingPage() {
return (
<AuthenticationWrapper pageType={EPageTypes.ONBOARDING}>
<div className="flex relative size-full overflow-hidden bg-canvas rounded-lg transition-all ease-in-out duration-300">
<div className="size-full p-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden">
<div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-surface-1 shadow-md border border-subtle">
<div className="relative flex size-full overflow-hidden rounded-lg bg-canvas transition-all duration-300 ease-in-out">
<div className="size-full flex-grow overflow-hidden p-2 transition-all duration-300 ease-in-out">
<div className="shadow-md relative flex h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
{user && !invitationsLoader ? (
<OnboardingRoot invitations={invitations ?? []} />
) : (

6
apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx
View file

@ -33,7 +33,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
if (!currentUser || !isAValidTab)
return (
<div className="size-full grid place-items-center px-4">
<div className="grid size-full place-items-center px-4">
<LogoSpinner />
</div>
);
@ -42,7 +42,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
<>
<PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
<div className="relative size-full">
<div className="size-full flex">
<div className="flex size-full">
<ProfileSettingsSidebarRoot
activeTab={profileTabId as TProfileSettingsTabs}
className="w-[250px]"
@ -50,7 +50,7 @@ function ProfileSettingsPage(props: Route.ComponentProps) {
/>
<ProfileSettingsContent
activeTab={profileTabId as TProfileSettingsTabs}
className="grow py-20 px-page-x mx-auto w-fit max-w-225"
className="mx-auto w-fit max-w-225 grow px-page-x py-20"
/>
</div>
</div>

2
apps/web/app/(all)/settings/profile/layout.tsx
View file

@ -16,7 +16,7 @@ export default function ProfileSettingsLayout() {
<ProjectsAppPowerKProvider />
<AuthenticationWrapper>
<div className="relative flex size-full overflow-hidden bg-canvas p-2">
<main className="relative flex flex-col size-full overflow-hidden bg-surface-1 rounded-lg border border-subtle">
<main className="relative flex size-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
<div className="size-full overflow-hidden">
<Outlet />
</div>

2
apps/web/app/(all)/workspace-invitations/page.tsx
View file

@ -80,7 +80,7 @@ function WorkspaceInvitationPage() {
<div className="flex h-full w-full flex-col items-center justify-center px-3">
{invitationDetail && !invitationDetail.responded_at ? (
error ? (
<div className="flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center shadow-2xl md:w-1/3">
<div className="shadow-2xl flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center md:w-1/3">
<h2 className="text-18 uppercase">INVITATION NOT FOUND</h2>
</div>
) : (

48
apps/web/app/error/dev.tsx
View file

@ -40,8 +40,8 @@ interface DevErrorComponentProps {
export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorComponentProps) {
if (isRouteErrorResponse(error)) {
return (
<div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
<div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
<div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
<div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
<Banner
variant="error"
icon={<InfoFillIcon className="size-5" />}
@ -52,16 +52,16 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
<div className="space-y-4">
<div>
<h2 className="text-20 font-semibold text-danger-primary mb-2">
<h2 className="mb-2 text-20 font-semibold text-danger-primary">
{error.status} {error.statusText}
</h2>
<div className="h-px w-full bg-subtle-1" />
<div className="bg-subtle-1 h-px w-full" />
</div>
<div className="space-y-2">
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Error Data</h3>
<div className="bg-layer-1 rounded-md p-4">
<p className="text-13 text-secondary font-code">{error.data}</p>
<h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Error Data</h3>
<div className="rounded-md bg-layer-1 p-4">
<p className="font-code text-13 text-secondary">{error.data}</p>
</div>
</div>
@ -75,8 +75,8 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
if (error instanceof Error) {
return (
<div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
<div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
<div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
<div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
<Banner
variant="error"
icon={<InfoFillIcon className="size-5" />}
@ -86,22 +86,22 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
<div className="space-y-4">
<div>
<h2 className="text-20 font-semibold text-danger-primary mb-2">Error</h2>
<div className="h-px w-full bg-subtle-1" />
<h2 className="mb-2 text-20 font-semibold text-danger-primary">Error</h2>
<div className="bg-subtle-1 h-px w-full" />
</div>
<div className="space-y-2">
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Message</h3>
<div className="bg-layer-1 rounded-md p-4">
<p className="text-13 text-primary font-medium">{error.message}</p>
<h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Message</h3>
<div className="rounded-md bg-layer-1 p-4">
<p className="text-13 font-medium text-primary">{error.message}</p>
</div>
</div>
{error.stack && (
<div className="space-y-2">
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Stack Trace</h3>
<div className="bg-layer-1 rounded-md border border-subtle max-h-96 overflow-auto">
<pre className="p-4 text-11 text-secondary font-code whitespace-pre-wrap break-words">
<h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Stack Trace</h3>
<div className="max-h-96 overflow-auto rounded-md border border-subtle bg-layer-1">
<pre className="p-4 font-code text-11 break-words whitespace-pre-wrap text-secondary">
{error.stack}
</pre>
</div>
@ -112,9 +112,9 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
</div>
</Card>
<Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-layer-1 transition-none">
<Card variant={ECardVariant.WITHOUT_SHADOW} className="bg-layer-1 !p-4 transition-none">
<div className="flex items-start gap-3">
<InfoFillIcon className="size-5 text-tertiary flex-shrink-0 mt-0.5" />
<InfoFillIcon className="mt-0.5 size-5 flex-shrink-0 text-tertiary" />
<div className="space-y-1">
<p className="text-13 font-medium text-secondary">Development Mode</p>
<p className="text-11 text-tertiary">
@ -130,8 +130,8 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
}
return (
<div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
<div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
<div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
<div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
<Banner
variant="error"
icon={<InfoFillIcon className="size-5" />}
@ -142,11 +142,11 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6">
<div className="space-y-4">
<div>
<h2 className="text-20 font-semibold text-primary mb-2">Unknown Error</h2>
<div className="h-px w-full bg-subtle-1" />
<h2 className="mb-2 text-20 font-semibold text-primary">Unknown Error</h2>
<div className="bg-subtle-1 h-px w-full" />
</div>
<div className="bg-layer-1 rounded-md p-4">
<div className="rounded-md bg-layer-1 p-4">
<p className="text-13 text-secondary">
An unknown error occurred. Please try refreshing the page or contact support if the problem persists.
</p>

14
apps/web/app/error/prod.tsx
View file

@ -45,33 +45,33 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
return (
<DefaultLayout>
<div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-surface-1 text-center px-6">
<div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 px-6 text-center">
<div className="relative w-full">
<img
src={maintenanceModeImage}
height="176"
width="288"
alt="ProjectSettingImg"
className="w-full h-full object-fill object-center"
className="h-full w-full object-fill object-center"
/>
</div>
<div className="w-full relative flex flex-col gap-4 mt-4">
<div className="relative mt-4 flex w-full flex-col gap-4">
<div className="flex flex-col gap-2.5">
<h1 className="text-18 font-semibold text-primary text-left">&#x1F6A7; Looks like something went wrong!</h1>
<span className="text-14 font-medium text-secondary text-left">
<h1 className="text-left text-18 font-semibold text-primary">&#x1F6A7; Looks like something went wrong!</h1>
<span className="text-left text-14 font-medium text-secondary">
We track these errors automatically and working on getting things back up and running. If the problem
persists feel free to contact us. In the meantime, try refreshing.
</span>
</div>
<div className="flex items-center justify-start gap-6 mt-1">
<div className="mt-1 flex items-center justify-start gap-6">
{linkMap.map((link) => (
<div key={link.key}>
<a
href={link.value}
target="_blank"
rel="noopener noreferrer"
className="text-accent-primary hover:underline text-13"
className="text-13 text-accent-primary hover:underline"
>
{link.label}
</a>

4
apps/web/app/layout.tsx
View file

@ -82,8 +82,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<div id="context-menu-portal" />
<div id="editor-portal" />
<AppProvider>
<div className={cn("h-screen w-full overflow-hidden relative flex flex-col", "app-container")}>
<main className="w-full h-full overflow-hidden relative">{children}</main>
<div className={cn("relative flex h-screen w-full flex-col overflow-hidden", "app-container")}>
<main className="relative h-full w-full overflow-hidden">{children}</main>
</div>
</AppProvider>
</body>

6
apps/web/app/root.tsx
View file

@ -124,8 +124,8 @@ export const meta: Route.MetaFunction = () => [
export default function Root() {
return (
<AppProvider>
<div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "desktop-app-container")}>
<main className="w-full h-full overflow-hidden relative">
<div className={cn("relative flex h-screen w-full flex-col overflow-hidden bg-canvas", "desktop-app-container")}>
<main className="relative h-full w-full overflow-hidden">
<Outlet />
</main>
</div>
@ -140,7 +140,7 @@ export function HydrateFallback() {
if (typeof window === "undefined" || resolvedTheme === undefined) return <div />;
return (
<div className="relative flex bg-canvas h-screen w-full items-center justify-center">
<div className="relative flex h-screen w-full items-center justify-center bg-canvas">
<LogoSpinner />
</div>
);

18
apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
View file

@ -81,7 +81,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
<ContentWrapper className="gap-10">
<div
className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
"bg-gradient-to-l from-[#CFCFCF] to-[#212121]": userProfile?.theme.theme === "dark",
"bg-gradient-to-l from-[#CFCFCF] to-[#212121]": userProfile?.theme.theme === "dark",
"bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
})}
>
@ -101,29 +101,29 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
{t("upgrade")}
</a>
</div>
<span className="absolute left-0 top-0">
<span className="absolute top-0 left-0">
<img
src={isDarkMode ? ctaL1Dark : ctaL1Light}
className="w-[125px] h-[125px] object-contain rounded-xl"
className="h-[125px] w-[125px] rounded-xl object-contain"
alt="l-1"
/>
</span>
</div>
<div className="relative hidden w-1/2 lg:block">
<span className="absolute bottom-0 right-0">
<img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="r-1" />
<span className="absolute right-0 bottom-0">
<img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="h-full w-full object-contain" alt="r-1" />
</span>
<span className="absolute -bottom-16 right-1/2 rounded-xl">
<img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="r-2" />
<span className="absolute right-1/2 -bottom-16 rounded-xl">
<img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="h-full w-full object-contain" alt="r-2" />
</span>
</div>
</div>
<div className="grid h-full grid-cols-1 gap-5 pb-8 lg:grid-cols-2 xl:grid-cols-3">
{WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
<div key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-layer-1 p-4">
<div className="flex gap-2 justify-between">
<div className="flex justify-between gap-2">
<h3 className="font-medium">{t(item.key)}</h3>
<item.icon className="mt-1 h-4 w-4 text-blue-500" />
<item.icon className="text-blue-500 mt-1 h-4 w-4" />
</div>
<span className="text-13 text-tertiary">{t(`${item.key}_description`)}</span>
</div>

2
apps/web/ce/components/breadcrumbs/project.tsx
View file

@ -55,7 +55,7 @@ export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TPro
// helpers
const renderIcon = (projectDetails: TProject) => (
<span className="grid place-items-center flex-shrink-0 size-4">
<span className="grid size-4 flex-shrink-0 place-items-center">
<Logo logo={projectDetails.logo_props} size={14} />
</span>
);

2
apps/web/ce/components/command-palette/power-k/pages/context-based/work-item/state-menu-item.tsx
View file

@ -29,7 +29,7 @@ export const PowerKProjectStatesMenuItems = observer(function PowerKProjectState
{states.map((state) => (
<PowerKModalCommandItem
key={state.id}
iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="shrink-0 size-3.5" />}
iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="size-3.5 shrink-0" />}
label={state.name}
isSelected={state.id === selectedStateId}
onSelect={() => handleSelect(state.id)}

8
apps/web/ce/components/comments/comment-block.tsx
View file

@ -31,18 +31,18 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock)
ref={commentBlockRef}
>
<div
className="absolute left-[13px] top-0 bottom-0 w-px transition-border duration-1000 bg-layer-3"
className="transition-border absolute top-0 bottom-0 left-[13px] w-px bg-layer-3 duration-1000"
aria-hidden
/>
<div
className={cn(
"flex-shrink-0 relative w-7 h-7 rounded-lg transition-border duration-1000 flex justify-center items-center z-[3] uppercase shadow-raised-100 bg-layer-2 border border-subtle"
"transition-border relative z-[3] flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg border border-subtle bg-layer-2 uppercase shadow-raised-100 duration-1000"
)}
>
<CommentReplyIcon width={14} height={14} className="text-secondary" aria-hidden="true" />
</div>
<div className="flex flex-col gap-3 truncate flex-grow">
<div className="text-body-sm-regular mb-2 bg-layer-2 border border-subtle shadow-raised-100 rounded-lg p-3">
<div className="flex flex-grow flex-col gap-3 truncate">
<div className="mb-2 rounded-lg border border-subtle bg-layer-2 p-3 text-body-sm-regular shadow-raised-100">
{children}
</div>
</div>

4
apps/web/ce/components/cycles/active-cycle/root.tsx
View file

@ -75,7 +75,7 @@ const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
className="!border-b-transparent"
/>
<Row className="bg-surface-1 pt-3 pb-6">
<div className="grid grid-cols-1 bg-surface-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
<div className="grid grid-cols-1 gap-3 bg-surface-1 lg:grid-cols-2 xl:grid-cols-3">
<ActiveCycleProgress
handleFiltersUpdate={handleFiltersUpdate}
projectId={projectId}
@ -121,7 +121,7 @@ export const ActiveCycleRoot = observer(function ActiveCycleRoot(props: IActiveC
<Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
{({ open }) => (
<>
<Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-layer-1 cursor-pointer">
<Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
<CycleListGroupHeader title={t("project_cycles.active_cycle.label")} type="current" isExpanded={open} />
</Disclosure.Button>
<Disclosure.Panel>

2
apps/web/ce/components/cycles/analytics-sidebar/base.tsx
View file

@ -79,7 +79,7 @@ export const SidebarChart = observer(function SidebarChart(props: ProgressChartP
/>
</Fragment>
) : (
<Loader className="w-full h-[160px] mt-4">
<Loader className="mt-4 h-[160px] w-full">
<Loader.Item width="100%" height="100%" />
</Loader>
)}

2
apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
View file

@ -24,7 +24,7 @@ export const EstimateListItemButtons = observer(function EstimateListItemButtons
return (
<div className="relative flex items-center gap-1">
<button
className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded-sm cursor-pointer transition-colors overflow-hidden hover:bg-layer-1"
className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors hover:bg-layer-1"
onClick={() => onDeleteClick && onDeleteClick(estimateId)}
data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
>

4
apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx
View file

@ -35,7 +35,7 @@ export function GanttChartRowList(props: GanttChartBlocksProps) {
} = props;
return (
<div className="absolute top-0 left-0 min-w-full w-max">
<div className="absolute top-0 left-0 w-max min-w-full">
{blockIds?.map((blockId) => (
<>
<RenderIfVisible
@ -43,7 +43,7 @@ export function GanttChartRowList(props: GanttChartBlocksProps) {
horizontalOffset={100}
verticalOffset={200}
classNames="relative min-w-full w-max"
placeholderChildren={<div className="w-full pointer-events-none" style={{ height: `${BLOCK_HEIGHT}px` }} />}
placeholderChildren={<div className="pointer-events-none w-full" style={{ height: `${BLOCK_HEIGHT}px` }} />}
shouldRecordHeights={false}
>
<BlockRow

6
apps/web/ce/components/global/product-updates/changelog.tsx
View file

@ -72,15 +72,15 @@ export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog
}
return (
<div className="flex flex-col h-[550px] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5 relative">
<div className="vertical-scrollbar relative mx-0.5 flex scrollbar-xs h-[550px] flex-col overflow-hidden overflow-y-scroll px-6">
{isLoading && (
<Loader className="flex flex-col gap-3 absolute inset-0 w-full h-full items-center justify-center">
<Loader className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
<Loader.Item height="95%" width="95%" />
</Loader>
)}
<iframe
src={changeLogUrl}
className={`w-full h-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
className={`h-full w-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
onLoad={handleIframeLoad}
onError={handleIframeError}
/>

4
apps/web/ce/components/global/product-updates/header.tsx
View file

@ -13,12 +13,12 @@ import { cn } from "@plane/utils";
export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
const { t } = useTranslation();
return (
<div className="flex gap-2 mx-6 my-4 items-center justify-between flex-shrink-0">
<div className="mx-6 my-4 flex flex-shrink-0 items-center justify-between gap-2">
<div className="flex w-full items-center">
<div className="flex gap-2 text-18 font-medium">{t("whats_new")}</div>
<div
className={cn(
"px-2 mx-2 py-0.5 text-center text-11 font-medium rounded-full bg-accent-primary/20 text-accent-primary"
"mx-2 rounded-full bg-accent-primary/20 px-2 py-0.5 text-center text-11 font-medium text-accent-primary"
)}
>
{t("version")}: v{packageJson.version}

8
apps/web/ce/components/instance/maintenance-message.tsx
View file

@ -16,22 +16,22 @@ export function MaintenanceMessage() {
return (
<>
<div className="flex flex-col gap-2.5">
<h1 className="text-18 font-semibold text-primary text-left">
<h1 className="text-left text-18 font-semibold text-primary">
&#x1F6A7; Looks like Plane didn&apos;t start up correctly!
</h1>
<span className="text-14 font-medium text-secondary text-left">
<span className="text-left text-14 font-medium text-secondary">
Some services might have failed to start. Please check your container logs to identify and resolve the issue.
If you&apos;re stuck, reach out to our support team for more help.
</span>
</div>
<div className="flex items-center justify-start gap-6 mt-1">
<div className="mt-1 flex items-center justify-start gap-6">
{linkMap.map((link) => (
<div key={link.key}>
<a
href={link.value}
target="_blank"
rel="noopener noreferrer"
className="text-accent-primary hover:underline text-13"
className="text-13 text-accent-primary hover:underline"
>
{link.label}
</a>

4
apps/web/ce/components/issues/issue-details/issue-creator.tsx
View file

@ -28,11 +28,11 @@ export function IssueCreatorDisplay(props: TIssueUser) {
return (
<>
{customUserName ? (
<span className="text-primary font-medium">{customUserName || "Plane"}</span>
<span className="font-medium text-primary">{customUserName || "Plane"}</span>
) : (
<Link
href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
className="hover:underline text-primary font-medium"
className="font-medium text-primary hover:underline"
>
{activity.actor_detail?.display_name}
</Link>

2
apps/web/ce/components/issues/issue-details/issue-identifier.tsx
View file

@ -30,7 +30,7 @@ export const IssueIdentifier = observer(function IssueIdentifier(props: TIssueId
if (!shouldRenderIssueID) return null;
return (
<div className="shrink-0 flex items-center space-x-2">
<div className="flex shrink-0 items-center space-x-2">
<IdentifierText
identifier={`${projectIdentifier}-${issueSequenceId}`}
enableClickToCopyIdentifier={enableClickToCopyIdentifier}

8
apps/web/ce/components/license/modal/upgrade-modal.tsx
View file

@ -49,13 +49,13 @@ export const PaidPlanUpgradeModal = observer(function PaidPlanUpgradeModal(props
return (
<ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VIIXL} className="rounded-2xl">
<div className="p-10 max-h-[90vh] overflow-auto">
<div className="grid grid-cols-12 gap-6 h-full">
<div className="max-h-[90vh] overflow-auto p-10">
<div className="grid h-full grid-cols-12 gap-6">
{/* Free Plan Section */}
<div className={cn(COMMON_CARD_CLASSNAME)}>
<div className="text-24 font-bold leading-8 flex">Upgrade to a paid plan and unlock missing features.</div>
<div className="flex text-24 leading-8 font-bold">Upgrade to a paid plan and unlock missing features.</div>
<div className="mt-4 mb-2">
<p className="text-13 mb-4 pr-8 text-primary">
<p className="mb-4 pr-8 text-13 text-primary">
Dashboards, Workflows, Approvals, Time Management, and other superpowers are just a click away. Upgrade
today to unlock features your teams need yesterday.
</p>

8
apps/web/ce/components/navigations/top-navigation-root.tsx
View file

@ -46,12 +46,12 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
return (
<div
className={cn("flex items-center min-h-10 w-full px-3.5 bg-canvas z-[27] transition-all duration-300", {
className={cn("z-[27] flex min-h-10 w-full items-center bg-canvas px-3.5 transition-all duration-300", {
"px-2": !showLabel,
})}
>
{/* Workspace Menu */}
<div className="shrink-0 flex-1">
<div className="flex-1 shrink-0">
<WorkspaceMenuRoot variant="top-navigation" />
</div>
{/* Power K Search */}
@ -59,7 +59,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
<TopNavPowerK />
</div>
{/* Additional Actions */}
<div className="shrink-0 flex-1 flex gap-1 items-center justify-end">
<div className="flex flex-1 shrink-0 items-center justify-end gap-1">
<Tooltip tooltipContent="Inbox" position="bottom">
<AppSidebarItem
variant="link"
@ -79,7 +79,7 @@ export const TopNavigationRoot = observer(function TopNavigationRoot() {
</Tooltip>
<HelpMenuRoot />
<StarUsOnGitHubLink />
<div className="flex items-center justify-center size-8 hover:bg-layer-1-hover rounded-md">
<div className="flex size-8 items-center justify-center rounded-md hover:bg-layer-1-hover">
<UserMenuRoot />
</div>
</div>

6
apps/web/ce/components/onboarding/tour/root.tsx
View file

@ -134,10 +134,10 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
<div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-surface-1 sm:h-3/4 md:w-1/2 lg:w-3/5">
<button
type="button"
className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-strong p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
className="fixed top-[19%] right-[9%] z-10 translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border border-strong p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
onClick={onComplete}
>
<CloseIcon className="h-3 w-3 text-primary border-strong-" />
<CloseIcon className="border-strong- h-3 w-3 text-primary" />
</button>
<TourSidebar step={step} setStep={setStep} />
<div className="col-span-10 h-full overflow-hidden lg:col-span-7">
@ -146,7 +146,7 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
}`}
>
<img src={currentStep?.image} className="w-full h-full object-cover" alt={currentStep?.title} />
<img src={currentStep?.image} className="h-full w-full object-cover" alt={currentStep?.title} />
</div>
<div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
<h3 className="font-semibold sm:text-18">{currentStep?.title}</h3>

2
apps/web/ce/components/onboarding/tour/sidebar.tsx
View file

@ -59,7 +59,7 @@ export function TourSidebar({ step, setStep }: Props) {
{sidebarOptions.map((option) => (
<h5
key={option.key}
className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-13 font-medium capitalize ${
className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pr-2 pl-3 text-13 font-medium capitalize ${
step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
}`}
onClick={() => setStep(option.key)}

22
apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
View file

@ -39,7 +39,7 @@ export function AskPiMenu(props: Props) {
"items-start": response,
})}
>
<span className="flex-shrink-0 size-7 grid place-items-center text-secondary rounded-full border border-subtle">
<span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
<Sparkles className="size-3" />
</span>
{response ? (
@ -59,7 +59,7 @@ export function AskPiMenu(props: Props) {
<div className="mt-3 flex items-center gap-4">
<button
type="button"
className="p-1 text-tertiary text-13 font-medium rounded-sm hover:bg-layer-1 outline-none"
className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
onClick={() => handleInsertText(false)}
>
Replace selection
@ -67,16 +67,16 @@ export function AskPiMenu(props: Props) {
<Tooltip tooltipContent="Add to next line">
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
onClick={() => handleInsertText(true)}
>
<CornerDownRight className="text-tertiary size-4" />
<CornerDownRight className="size-4 text-tertiary" />
</button>
</Tooltip>
<Tooltip tooltipContent="Re-generate response">
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -85,7 +85,7 @@ export function AskPiMenu(props: Props) {
disabled={isRegenerating}
>
<RefreshCcw
className={cn("text-tertiary size-4", {
className={cn("size-4 text-tertiary", {
"animate-spin": isRegenerating,
})}
/>
@ -97,19 +97,19 @@ export function AskPiMenu(props: Props) {
<p className="text-13 text-secondary">AI is answering...</p>
)}
</div>
<div className="py-3 px-4">
<div className="flex items-center gap-2 border border-subtle rounded-md p-2">
<span className="flex-shrink-0 size-3 grid place-items-center">
<div className="px-4 py-3">
<div className="flex items-center gap-2 rounded-md border border-subtle p-2">
<span className="grid size-3 flex-shrink-0 place-items-center">
<Sparkles className="size-3 text-secondary" />
</span>
<input
type="text"
className="w-full bg-transparent border-none outline-none placeholder:text-placeholder text-13"
className="w-full border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Tell AI what to do..."
/>
<span className="flex-shrink-0 size-4 grid place-items-center">
<span className="grid size-4 flex-shrink-0 place-items-center">
<CircleArrowUp className="size-4 text-secondary" />
</span>
</div>

38
apps/web/ce/components/pages/editor/ai/menu.tsx
View file

@ -144,7 +144,7 @@ export function EditorAIMenu(props: Props) {
return (
<div
className={cn(
"w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
"flex w-[210px] flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
{
"w-[700px]": activeTask,
}
@ -155,7 +155,7 @@ export function EditorAIMenu(props: Props) {
"divide-x divide-subtle-1": activeTask,
})}
>
<div className="flex-shrink-0 w-[210px] overflow-y-auto px-2 py-2.5 transition-all">
<div className="w-[210px] flex-shrink-0 overflow-y-auto px-2 py-2.5 transition-all">
{MENU_ITEMS.map((item) => {
const isActiveTask = activeTask === item.key;
@ -164,7 +164,7 @@ export function EditorAIMenu(props: Props) {
key={item.key}
type="button"
className={cn(
"w-full flex items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary hover:bg-layer-1 transition-colors",
"flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary transition-colors hover:bg-layer-1",
{
"bg-layer-1": isActiveTask,
}
@ -175,13 +175,13 @@ export function EditorAIMenu(props: Props) {
handleClick(item.key);
}}
>
<span className="flex-shrink-0 flex items-center gap-2 truncate">
<item.icon className="flex-shrink-0 size-3" />
<span className="flex flex-shrink-0 items-center gap-2 truncate">
<item.icon className="size-3 flex-shrink-0" />
{item.label}
</span>
<ChevronRightIcon
className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
"opacity-100 pointer-events-auto": isActiveTask,
className={cn("pointer-events-none size-3 flex-shrink-0 opacity-0 transition-opacity", {
"pointer-events-auto opacity-100": isActiveTask,
})}
/>
</button>
@ -190,8 +190,8 @@ export function EditorAIMenu(props: Props) {
</div>
<div
ref={responseContainerRef}
className={cn("flex-shrink-0 w-0 overflow-hidden transition-all", {
"w-[490px] overflow-auto vertical-scrollbar scrollbar-sm": activeTask,
className={cn("w-0 flex-shrink-0 overflow-hidden transition-all", {
"vertical-scrollbar scrollbar-sm w-[490px] overflow-auto": activeTask,
})}
>
{activeTask === AI_EDITOR_TASKS.ASK_ANYTHING ? (
@ -209,7 +209,7 @@ export function EditorAIMenu(props: Props) {
"items-start": response,
})}
>
<span className="flex-shrink-0 size-7 grid place-items-center text-secondary rounded-full border border-subtle">
<span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
<Sparkles className="size-3" />
</span>
{response ? (
@ -229,7 +229,7 @@ export function EditorAIMenu(props: Props) {
<div className="mt-3 flex items-center gap-4">
<button
type="button"
className="p-1 text-tertiary text-13 font-medium rounded-sm hover:bg-layer-1 outline-none"
className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
onClick={() => handleInsertText(false)}
>
Replace selection
@ -237,16 +237,16 @@ export function EditorAIMenu(props: Props) {
<Tooltip tooltipContent="Add to next line">
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
onClick={() => handleInsertText(true)}
>
<CornerDownRight className="text-tertiary size-4" />
<CornerDownRight className="size-4 text-tertiary" />
</button>
</Tooltip>
<Tooltip tooltipContent="Re-generate response">
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -255,7 +255,7 @@ export function EditorAIMenu(props: Props) {
disabled={isRegenerating}
>
<RefreshCcw
className={cn("text-tertiary size-4", {
className={cn("size-4 text-tertiary", {
"animate-spin": isRegenerating,
})}
/>
@ -269,13 +269,13 @@ export function EditorAIMenu(props: Props) {
</p>
)}
</div>
<div className="sticky bottom-0 w-full bg-surface-1 pl-[54.8px] py-2 flex items-center gap-2">
<div className="sticky bottom-0 flex w-full items-center gap-2 bg-surface-1 py-2 pl-[54.8px]">
{TONES_LIST.map((tone) => (
<button
key={tone.key}
type="button"
className={cn(
"p-1 text-11 text-secondary font-medium bg-layer-1 rounded-sm transition-colors outline-none",
"rounded-sm bg-layer-1 p-1 text-11 font-medium text-secondary transition-colors outline-none",
{
"bg-accent-primary/20 text-accent-primary": tone.key === "default",
}
@ -295,8 +295,8 @@ export function EditorAIMenu(props: Props) {
</div>
</div>
{activeTask && (
<div className="bg-surface-2 rounded-b-md py-2 px-4 text-tertiary flex items-center gap-2 border-t border-subtle">
<span className="flex-shrink-0 size-4 grid place-items-center">
<div className="flex items-center gap-2 rounded-b-md border-t border-subtle bg-surface-2 px-4 py-2 text-tertiary">
<span className="grid size-4 flex-shrink-0 place-items-center">
<TriangleAlert className="size-3" />
</span>
<p className="flex-shrink-0 text-11 font-medium">

6
apps/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
View file

@ -14,15 +14,15 @@ export function IssueEmbedUpgradeCard(props: any) {
return (
<div
className={cn(
"w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-raised-100 flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
"flex w-full items-center justify-between gap-5 rounded-md border-[0.5px] border-subtle bg-layer-1 px-5 py-2 shadow-raised-100 max-md:flex-wrap",
{
"border-2": props.selected,
}
)}
>
<div className="flex items-center gap-4">
<ProIcon className="flex-shrink-0 size-4" />
<p className="text-secondary !text-14">
<ProIcon className="size-4 flex-shrink-0" />
<p className="!text-14 text-secondary">
Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
</p>
</div>

14
apps/web/ce/components/pages/header/lock-control.tsx
View file

@ -82,7 +82,7 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
<button
type="button"
onClick={toggleLock}
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-secondary hover:text-primary hover:bg-layer-1 transition-colors"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
aria-label="Lock"
>
<LockKeyhole className="size-3.5" />
@ -94,11 +94,11 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
<button
type="button"
onClick={toggleLock}
className="h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20 hover:bg-accent-primary/30 transition-colors"
className="flex h-6 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary transition-colors hover:bg-accent-primary/30"
aria-label="Locked"
>
<LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />
<span className="text-11 font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in">
<LockKeyhole className="animate-lock-icon size-3.5 flex-shrink-0" />
<span className="animate-text-slide-in overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
Locked
</span>
</button>
@ -106,11 +106,11 @@ export const PageLockControl = observer(function PageLockControl({ page }: Props
{displayState === "unlocked" && (
<div
className="h-6 flex items-center gap-1 px-2 rounded-sm text-secondary animate-fade-out"
className="flex h-6 animate-fade-out items-center gap-1 rounded-sm px-2 text-secondary"
aria-label="Unlocked"
>
<LockKeyholeOpen className="flex-shrink-0 size-3.5 animate-unlock-icon" />
<span className="text-11 font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in animate-text-fade-out">
<LockKeyholeOpen className="animate-unlock-icon size-3.5 flex-shrink-0" />
<span className="animate-text-slide-in animate-text-fade-out overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
Unlocked
</span>
</div>

4
apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
View file

@ -20,12 +20,12 @@ export function PageNavigationPaneAssetsTabEmptyState() {
const { t } = useTranslation();
return (
<div className="size-full grid place-items-center">
<div className="grid size-full place-items-center">
<div className="flex flex-col items-center gap-y-6 text-center">
<img src={resolvedPath} className="size-40 object-contain" alt="depicts the assets of a page" />
<div className="space-y-2.5">
<h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
<p className="text-13 text-secondary font-medium">
<p className="text-13 font-medium text-secondary">
{t("page_navigation_pane.tabs.assets.empty_state.description")}
</p>
</div>

4
apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
View file

@ -20,12 +20,12 @@ export function PageNavigationPaneOutlineTabEmptyState() {
const { t } = useTranslation();
return (
<div className="size-full grid place-items-center">
<div className="grid size-full place-items-center">
<div className="flex flex-col items-center gap-y-6 text-center">
<img src={resolvedPath} className="size-40 object-contain" alt="depicts the outline of a page" />
<div className="space-y-2.5">
<h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
<p className="text-13 text-secondary font-medium">
<p className="text-13 font-medium text-secondary">
{t("page_navigation_pane.tabs.outline.empty_state.description")}
</p>
</div>

6
apps/web/ce/components/projects/create/attributes.tsx
View file

@ -33,12 +33,12 @@ function ProjectAttributes(props: Props) {
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
return (
<div className="flex-shrink-0 h-7" tabIndex={getIndex("network")}>
<div className="h-7 flex-shrink-0" tabIndex={getIndex("network")}>
<CustomSelect
value={value}
onChange={onChange}
label={
<div className="flex items-center gap-1 h-full">
<div className="flex h-full items-center gap-1">
{currentNetwork ? (
<>
<ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
@ -77,7 +77,7 @@ function ProjectAttributes(props: Props) {
render={({ field: { value, onChange } }) => {
if (value === undefined || value === null || typeof value === "string")
return (
<div className="flex-shrink-0 h-7" tabIndex={getIndex("lead")}>
<div className="h-7 flex-shrink-0" tabIndex={getIndex("lead")}>
<MemberDropdown
value={value ?? null}
onChange={(lead) => onChange(lead === value ? null : lead)}

6
apps/web/ce/components/projects/mobile-header.tsx
View file

@ -58,7 +58,7 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
return (
<div className="flex py-2 border-b border-subtle md:hidden bg-surface-1 w-full">
<div className="flex w-full border-b border-subtle bg-surface-1 py-2 md:hidden">
<ProjectOrderByDropdown
value={displayFilters?.order_by}
onChange={(val) => {
@ -69,13 +69,13 @@ export const ProjectsListMobileHeader = observer(function ProjectsListMobileHead
}}
isMobile
/>
<div className="border-l border-subtle flex justify-around w-full">
<div className="flex w-full justify-around border-l border-subtle">
<FiltersDropdown
icon={<ListFilter className="h-3 w-3" />}
title={t("common.filters")}
placement="bottom-end"
menuButton={
<div className="flex text-13 items-center gap-2 text-secondary">
<div className="flex items-center gap-2 text-13 text-secondary">
<ListFilter className="h-3 w-3" />
{t("common.filters")}
<ChevronDownIcon className="h-3 w-3" strokeWidth={2} />

2
apps/web/ce/components/projects/settings/intake/header.tsx
View file

@ -45,7 +45,7 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
return (
<Header>
<Header.LeftItem>
<div className="flex items-center gap-4 flex-grow">
<div className="flex flex-grow items-center gap-4">
<Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
<CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
<Breadcrumbs.Item

2
apps/web/ce/components/rich-filters/filter-value-input/root.tsx
View file

@ -17,7 +17,7 @@ export const AdditionalFilterValueInput = observer(function AdditionalFilterValu
>(_props: TFilterValueInputProps<P, V>) {
return (
// Fallback
<div className="h-full flex items-center px-4 text-11 text-placeholder transition-opacity duration-200 cursor-not-allowed">
<div className="flex h-full cursor-not-allowed items-center px-4 text-11 text-placeholder transition-opacity duration-200">
Filter type not supported
</div>
);

6
apps/web/ce/components/workspace-notifications/notification-card/root.tsx
View file

@ -45,12 +45,12 @@ export const NotificationCardListRoot = observer(function NotificationCardListRo
{paginationInfo && paginationInfo?.next_page_results && (
<>
{loader === ENotificationLoader.PAGINATION_LOADER ? (
<div className="py-4 flex justify-center items-center text-13 font-medium">
<div className="flex items-center justify-center py-4 text-13 font-medium">
<div className="text-accent-secondary">{t("loading")}...</div>
</div>
) : (
<div className="py-4 flex justify-center items-center text-13 font-medium" onClick={getNextNotifications}>
<div className="text-accent-secondary hover:text-accent-primary transition-all cursor-pointer">
<div className="flex items-center justify-center py-4 text-13 font-medium" onClick={getNextNotifications}>
<div className="cursor-pointer text-accent-secondary transition-all hover:text-accent-primary">
{t("load_more")}
</div>
</div>

14
apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx
View file

@ -23,15 +23,15 @@ export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props:
const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
return (
<div className="flex w-full items-center cursor-pointer py-1">
<div className="flex space-x-1 rounded-md bg-layer-3 p-0.5 w-full">
<div className="flex w-full cursor-pointer items-center py-1">
<div className="flex w-full space-x-1 rounded-md bg-layer-3 p-0.5">
<button
type="button"
onClick={() => setSelectedFrequency("month")}
className={cn(
"w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
"w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
selectedFrequency === "month"
? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
: "text-tertiary hover:text-secondary"
)}
>
@ -41,15 +41,15 @@ export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props:
type="button"
onClick={() => setSelectedFrequency("year")}
className={cn(
"w-full rounded-sm px-1 py-0.5 text-caption-sm-medium leading-5 text-center",
"w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
selectedFrequency === "year"
? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
: "text-tertiary hover:text-secondary"
)}
>
Yearly
{yearlyDiscount > 0 && (
<span className="bg-accent-primary text-on-color rounded-full px-1 py-0.5 ml-1.5 text-caption-xs-regular">
<span className="ml-1.5 rounded-full bg-accent-primary px-1 py-0.5 text-caption-xs-regular text-on-color">
-{yearlyDiscount}%
</span>
)}

10
apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
View file

@ -53,18 +53,18 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
};
return (
<div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
<div className="col-span-1 flex flex-col justify-between space-y-0.5 p-3">
{/* Plan name and pricing section */}
<div className="flex flex-col items-start">
<div className="flex w-full gap-2 items-center text-h4-semibold">
<div className="flex w-full items-center gap-2 text-h4-semibold">
<span>{subscriptionName}</span>
{subscriptionType === EProductSubscriptionEnum.PRO && (
<span className="px-2 py-0.5 rounded-sm text-on-color bg-accent-primary text-caption-sm-medium">
<span className="rounded-sm bg-accent-primary px-2 py-0.5 text-caption-sm-medium text-on-color">
Popular
</span>
)}
</div>
<div className="flex gap-x-2 items-start text-tertiary pb-1">
<div className="flex items-start gap-x-2 pb-1 text-tertiary">
{isSubscriptionActive && displayPrice !== undefined && (
<div className="flex items-center gap-1 text-h3-semibold text-primary">
<DiscountInfo
@ -99,7 +99,7 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
)}
{/* Subscription button */}
<div className="flex flex-col gap-1 py-3 items-start">
<div className="flex flex-col items-start gap-1 py-3">
<Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
{isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
</Button>

2
apps/web/ce/components/workspace/billing/root.tsx
View file

@ -44,7 +44,7 @@ export const BillingRoot = observer(function BillingRoot() {
setProductBillingFrequency({ ...productBillingFrequency, [subscriptionType]: frequency });
return (
<section className="relative size-full overflow-y-auto scrollbar-hide">
<section className="relative scrollbar-hide size-full overflow-y-auto">
<div>
<SettingsHeading
title={t("workspace_settings.settings.billing_and_plans.heading")}

4
apps/web/ce/components/workspace/content-wrapper.tsx
View file

@ -22,14 +22,14 @@ export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper
const { shouldRenderAppRail } = useAppRailVisibility();
return (
<div className="flex flex-col relative size-full overflow-hidden bg-canvas transition-all ease-in-out duration-300">
<div className="relative flex size-full flex-col overflow-hidden bg-canvas transition-all duration-300 ease-in-out">
<TopNavigationRoot />
<div className="relative flex size-full overflow-hidden">
{/* Conditionally render AppRailRoot based on context */}
{shouldRenderAppRail && <AppRailRoot />}
<div
className={cn(
"relative size-full pl-2 pb-2 pr-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden",
"relative size-full flex-grow overflow-hidden pr-2 pb-2 pl-2 transition-all duration-300 ease-in-out",
{
"pl-0!": shouldRenderAppRail,
}

8
apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
View file

@ -165,7 +165,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
<DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
<div
className={cn(
"group/project-item relative w-full flex items-center rounded-md text-primary hover:bg-surface-2"
"group/project-item relative flex w-full items-center rounded-md text-primary hover:bg-surface-2"
)}
id={`${item.key}`}
>
@ -179,7 +179,7 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
<button
type="button"
className={cn(
"flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-placeholder cursor-grab group-hover/project-item:opacity-100 opacity-0",
"absolute top-1/2 -left-3 flex -translate-y-1/2 cursor-grab items-center justify-center rounded text-placeholder opacity-0 group-hover/project-item:opacity-100",
{
"cursor-grabbing": isDragging,
"opacity-100": isDragging,
@ -207,14 +207,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
{isPinned ? (
<Tooltip tooltipContent="Unpin">
<PinOff
className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
onClick={() => unPinNavigationItem(item.key)}
/>
</Tooltip>
) : (
<Tooltip tooltipContent="Pin">
<Pin
className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
onClick={() => pinNavigationItem(item.key)}
/>
</Tooltip>

6
apps/web/ce/components/workspace/upgrade-badge.tsx
View file

@ -22,10 +22,10 @@ export function UpgradeBadge(props: TUpgradeBadge) {
return (
<div
className={cn(
"w-fit cursor-pointer rounded-2xl text-accent-secondary bg-accent-primary/20 text-center font-medium outline-none",
"w-fit cursor-pointer rounded-2xl bg-accent-primary/20 text-center font-medium text-accent-secondary outline-none",
{
"text-13 px-3": size === "md",
"text-11 px-2": size === "sm",
"px-3 text-13": size === "md",
"px-2 text-11": size === "sm",
},
className
)}

2
apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
View file

@ -180,7 +180,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
filterIcon: LabelPropertyIcon,
labels: workItemLabels ?? [],
getOptionIcon: (color) => (
<span className="flex flex-shrink-0 size-2.5 rounded-full" style={{ backgroundColor: color }} />
<span className="flex size-2.5 flex-shrink-0 rounded-full" style={{ backgroundColor: color }} />
),
...operatorConfigs,
}),

6
apps/web/core/components/account/auth-forms/auth-banner.tsx
View file

@ -25,15 +25,15 @@ export function AuthBanner(props: TAuthBanner) {
return (
<div
role="alert"
className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10"
className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2"
>
<div className="size-4 flex-shrink-0 grid place-items-center">
<div className="grid size-4 flex-shrink-0 place-items-center">
<Info size={16} className="text-accent-primary" />
</div>
<p className="w-full text-13 font-medium text-accent-primary">{message}</p>
<button
type="button"
className="relative ml-auto size-6 rounded-xs grid place-items-center transition-all hover:bg-accent-primary/20 text-accent-primary/80"
className="relative ml-auto grid size-6 place-items-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
onClick={() => handleBannerData?.(undefined)}
aria-label={t("aria_labels.auth_forms.close_alert")}
>

4
apps/web/core/components/account/auth-forms/auth-root.tsx
View file

@ -151,8 +151,8 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
function AuthContainer({ children }: { children: React.ReactNode }) {
return (
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">{children}</div>
<div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
<div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">{children}</div>
</div>
);
}

4
apps/web/core/components/account/auth-forms/common/container.tsx
View file

@ -6,8 +6,8 @@
export function FormContainer({ children }: { children: React.ReactNode }) {
return (
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">{children}</div>
<div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
<div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">{children}</div>
</div>
);
}

10
apps/web/core/components/account/auth-forms/email.tsx
View file

@ -51,12 +51,12 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
return (
<form onSubmit={handleFormSubmit} className="space-y-4">
<div className="space-y-1">
<label htmlFor="email" className="text-13 text-tertiary font-medium">
<label htmlFor="email" className="text-13 font-medium text-tertiary">
{t("auth.common.email.label")}
</label>
<div
className={cn(
`relative flex items-center rounded-md bg-surface-1 border`,
`relative flex items-center rounded-md border bg-surface-1`,
!isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-strong`
)}
onFocus={() => {
@ -73,7 +73,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder autofill:bg-danger-primary focus:bg-none active:bg-transparent`}
autoComplete="off"
autoFocus
ref={inputRef}
@ -85,7 +85,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
setEmail("");
inputRef.current?.focus();
}}
className="absolute right-3 size-5 grid place-items-center"
className="absolute right-3 grid size-5 place-items-center"
aria-label={t("aria_labels.auth_forms.clear_email")}
tabIndex={-1}
>
@ -94,7 +94,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
)}
</div>
{emailError?.email && !isFocused && (
<p className="flex items-center gap-1 text-11 text-danger-primary px-0.5">
<p className="flex items-center gap-1 px-0.5 text-11 text-danger-primary">
<CircleAlert height={12} width={12} />
{t(emailError.email)}
</p>

4
apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
View file

@ -44,7 +44,7 @@ export function ForgotPasswordPopover() {
<Popover.Panel className="fixed z-10">
{({ close }) => (
<div
className="border border-strong bg-surface-1 rounded-sm z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
className="z-10 ml-3 flex w-64 items-start gap-3 rounded-sm border border-strong bg-surface-1 px-2 py-1 text-left break-words"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
@ -53,7 +53,7 @@ export function ForgotPasswordPopover() {
<p className="text-11">{t("auth.forgot_password.errors.smtp_not_enabled")}</p>
<button
type="button"
className="flex-shrink-0 size-3 grid place-items-center"
className="grid size-3 flex-shrink-0 place-items-center"
onClick={() => close()}
aria-label={t("aria_labels.auth_forms.close_popover")}
>

2
apps/web/core/components/account/auth-forms/forgot-password.tsx
View file

@ -110,7 +110,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
)}
/>
{resendTimerCode > 0 && (
<p className="flex items-start w-full gap-1 px-1 text-11 font-medium text-success-primary">
<p className="flex w-full items-start gap-1 px-1 text-11 font-medium text-success-primary">
<CircleCheck height={12} width={12} className="mt-0.5" />
{t("auth.forgot_password.email_sent")}
</p>

24
apps/web/core/components/account/auth-forms/password.tsx
View file

@ -128,8 +128,8 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
return (
<>
{isBannerMessage && mode === EAuthModes.SIGN_UP && (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-subtle">
<div className="w-4 h-4 shrink-0 relative flex justify-center items-center">
<div className="relative flex items-center gap-2 rounded-md border border-danger-strong/50 bg-danger-subtle p-2">
<div className="relative flex h-4 w-4 shrink-0 items-center justify-center">
<Info size={16} className="text-danger-primary" />
</div>
<div className="w-full text-13 font-medium text-danger-primary">
@ -137,10 +137,10 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
</div>
<button
type="button"
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-subtle-hover text-accent-primary/80"
className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-danger-subtle-hover"
onClick={() => setBannerMessage(false)}
>
<CloseIcon className="w-4 h-4 shrink-0 text-danger-primary" />
<CloseIcon className="h-4 w-4 shrink-0 text-danger-primary" />
</button>
</div>
)}
@ -174,7 +174,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
<label htmlFor="email" className="text-13 font-medium text-tertiary">
{t("auth.common.email.label")}
</label>
<div className={`relative flex items-center rounded-md bg-surface-1 border border-strong`}>
<div className={`relative flex items-center rounded-md border border-strong bg-surface-1`}>
<Input
id="email"
name="email"
@ -182,7 +182,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
value={passwordFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
disabled
/>
{passwordFormData.email.length > 0 && (
@ -199,7 +199,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
</div>
<div className="space-y-1">
<label htmlFor="password" className="text-13 text-tertiary font-medium">
<label htmlFor="password" className="text-13 font-medium text-tertiary">
{mode === EAuthModes.SIGN_IN ? t("auth.common.password.label") : t("auth.common.password.set_password")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -210,7 +210,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
value={passwordFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
placeholder={t("auth.common.password.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="off"
@ -219,7 +219,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
<button
type="button"
onClick={() => handleShowPassword("password")}
className="absolute right-3 size-5 grid place-items-center"
className="absolute right-3 grid size-5 place-items-center"
aria-label={t(
showPassword?.password ? "aria_labels.auth_forms.hide_password" : "aria_labels.auth_forms.show_password"
)}
@ -236,7 +236,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
{mode === EAuthModes.SIGN_UP && (
<div className="space-y-1">
<label htmlFor="confirm-password" className="text-13 text-tertiary font-medium">
<label htmlFor="confirm-password" className="text-13 font-medium text-tertiary">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -247,14 +247,14 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="off"
/>
<button
type="button"
className="absolute right-3 size-5 grid place-items-center"
className="absolute right-3 grid size-5 place-items-center"
aria-label={t(
showPassword?.retypePassword
? "aria_labels.auth_forms.hide_password"

8
apps/web/core/components/account/auth-forms/reset-password.tsx
View file

@ -111,7 +111,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="email">
<label className="text-13 font-medium text-tertiary" htmlFor="email">
{t("auth.common.email.label")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -122,14 +122,14 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
value={resetFormData.email}
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
className="h-10 w-full cursor-not-allowed border border-strong !bg-surface-1 pr-12 text-placeholder"
autoComplete="off"
disabled
/>
</div>
</div>
<div className="space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="password">
<label className="text-13 font-medium text-tertiary" htmlFor="password">
{t("auth.common.password.label")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -162,7 +162,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
<PasswordStrengthIndicator password={resetFormData.password} isFocused={isPasswordInputFocused} />
</div>
<div className="space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
<label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">

8
apps/web/core/components/account/auth-forms/set-password.tsx
View file

@ -114,7 +114,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
<AuthFormHeader title="Set password" description="Create a new password." />
<form className="space-y-4" onSubmit={(e) => handleSubmit(e)}>
<div className="space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="email">
<label className="text-13 font-medium text-tertiary" htmlFor="email">
{t("auth.common.email.label")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -125,14 +125,14 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
value={user?.email}
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
className="h-10 w-full cursor-not-allowed border border-strong !bg-surface-1 pr-12 text-placeholder"
autoComplete="off"
disabled
/>
</div>
</div>
<div className="space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="password">
<label className="text-13 font-medium text-tertiary" htmlFor="password">
{t("auth.common.password.label")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -165,7 +165,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
<PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
</div>
<div className="space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
<label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
{t("auth.common.password.confirm_password.label")}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">

10
apps/web/core/components/account/auth-forms/unique-code.tsx
View file

@ -98,7 +98,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
<label htmlFor="email" className="text-13 font-medium text-tertiary">
{t("auth.common.email.label")}
</label>
<div className={`relative flex items-center rounded-md bg-surface-1 border border-strong`}>
<div className={`relative flex items-center rounded-md border border-strong bg-surface-1`}>
<Input
id="email"
name="email"
@ -106,14 +106,14 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
value={uniqueCodeFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className="disable-autofill-style h-10 w-full placeholder:text-placeholder border-0"
className="h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder"
autoComplete="off"
disabled
/>
{uniqueCodeFormData.email.length > 0 && (
<button
type="button"
className="absolute right-3 size-5 grid place-items-center"
className="absolute right-3 grid size-5 place-items-center"
aria-label={t("aria_labels.auth_forms.clear_email")}
onClick={handleEmailClear}
>
@ -133,11 +133,11 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
value={uniqueCodeFormData.code}
onChange={(e) => handleFormChange("code", e.target.value)}
placeholder={t("auth.common.unique_code.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
className="h-10 w-full border border-strong !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
autoComplete="off"
autoFocus
/>
<div className="flex w-full items-center justify-between px-1 text-11 pt-1">
<div className="flex w-full items-center justify-between px-1 pt-1 text-11">
<p className="flex items-center gap-1 font-medium text-success-primary">
<CircleCheck height={12} width={12} />
{t("auth.common.unique_code.paste_code")}

6
apps/web/core/components/account/deactivate-account-modal.tsx
View file

@ -62,17 +62,17 @@ export function DeactivateAccountModal(props: Props) {
return (
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="">
<div className="flex items-start gap-x-4">
<div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
<div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4">
<TrashIcon
className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
aria-hidden="true"
/>
</div>
<div>
<h3 className="my-4 text-20 font-medium leading-6 text-primary">{t("deactivate_your_account")}</h3>
<h3 className="my-4 text-20 leading-6 font-medium text-primary">{t("deactivate_your_account")}</h3>
<p className="mt-6 list-disc pr-4 text-14 font-regular text-secondary">
{t("deactivate_your_account_description")}
</p>

2
apps/web/core/components/account/terms-and-conditions.tsx
View file

@ -35,7 +35,7 @@ function LegalLink({ href, children }: { href: string; children: React.ReactNode
export function TermsAndConditions({ authType = EAuthModes.SIGN_IN }: TermsAndConditionsProps) {
return (
<div className="flex items-center justify-center">
<p className="text-center text-13 text-tertiary whitespace-pre-line">
<p className="text-center text-13 whitespace-pre-line text-tertiary">
{`${MESSAGES[authType]}, you understand and agree to \n our `}
<LegalLink href={LEGAL_LINKS.termsOfService}>Terms of Service</LegalLink> and{" "}
<LegalLink href={LEGAL_LINKS.privacyPolicy}>Privacy Policy</LegalLink>.

Some files were not shown because too many files have changed in this diff Show more