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

6
apps/admin/app/(all)/(dashboard)/ai/form.tsx
View file

@ -120,16 +120,16 @@ export function InstanceAIForm(props: IInstanceAIForm) {
</div>
</div>
<div className="flex flex-col gap-4 items-start">
<div className="flex flex-col items-start gap-4">
<Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
{isSubmitting ? "Saving" : "Save changes"}
</Button>
<div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary ">
<div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary">
<Lightbulb className="size-4" />
<div>
If you have a preferred AI models vendor, please get in{" "}
<a className="underline font-medium" href="https://plane.so/contact">
<a className="font-medium underline" href="https://plane.so/contact">
touch with us.
</a>
</div>

2
apps/admin/app/(all)/(dashboard)/ai/page.tsx
View file

@ -34,7 +34,7 @@ const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentP
) : (
<Loader className="space-y-8">
<Loader.Item height="50px" width="40%" />
<div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
<div className="grid w-2/3 grid-cols-2 gap-x-8 gap-y-4">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
</div>

6
apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
View file

@ -176,8 +176,8 @@ export function InstanceGiteaConfigForm(props: Props) {
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
<div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
<div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
{GITEA_FORM_FIELDS.map((field) => (
<ControllerInput
@ -211,7 +211,7 @@ export function InstanceGiteaConfigForm(props: Props) {
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-1 rounded-lg">
<div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 pt-1.5 pb-4">
<div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
{GITEA_SERVICE_FIELD.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />

16
apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
View file

@ -197,8 +197,8 @@ export function InstanceGithubConfigForm(props: Props) {
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
<div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
<div className="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
{GITHUB_FORM_FIELDS.map((field) => (
<ControllerInput
@ -231,24 +231,24 @@ export function InstanceGithubConfigForm(props: Props) {
</div>
</div>
</div>
<div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
<div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
<div className="pt-2 text-18 font-medium">Plane-provided details for GitHub</div>
<div className="flex flex-col gap-y-4">
{/* common service details */}
<div className="flex flex-col gap-y-4 px-6 py-4 bg-layer-1 rounded-lg">
<div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
{GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}
</div>
{/* web service details */}
<div className="flex flex-col rounded-lg overflow-hidden">
<div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
<Monitor className="w-3 h-3" />
<div className="flex flex-col overflow-hidden rounded-lg">
<div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
<Monitor className="h-3 w-3" />
Web
</div>
<div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
<div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
{GITHUB_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}

6
apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
View file

@ -180,8 +180,8 @@ export function InstanceGitlabConfigForm(props: Props) {
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
<div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
<div className="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</div>
{GITLAB_FORM_FIELDS.map((field) => (
<ControllerInput
@ -215,7 +215,7 @@ export function InstanceGitlabConfigForm(props: Props) {
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-3 rounded-lg">
<div className="flex flex-col gap-y-4 rounded-lg bg-layer-3 px-6 pt-1.5 pb-4">
<div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
{GITLAB_SERVICE_FIELD.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />

16
apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
View file

@ -185,8 +185,8 @@ export function InstanceGoogleConfigForm(props: Props) {
handleClose={() => setIsDiscardChangesModalOpen(false)}
/>
<div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
<div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
<div className="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
{GOOGLE_FORM_FIELDS.map((field) => (
<ControllerInput
@ -219,24 +219,24 @@ export function InstanceGoogleConfigForm(props: Props) {
</div>
</div>
</div>
<div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
<div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
<div className="pt-2 text-18 font-medium">Plane-provided details for Google</div>
<div className="flex flex-col gap-y-4">
{/* common service details */}
<div className="flex flex-col gap-y-4 px-6 py-4 bg-layer-1 rounded-lg">
<div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
{GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}
</div>
{/* web service details */}
<div className="flex flex-col rounded-lg overflow-hidden">
<div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
<Monitor className="w-3 h-3" />
<div className="flex flex-col overflow-hidden rounded-lg">
<div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
<Monitor className="h-3 w-3" />
Web
</div>
<div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
<div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
{GOOGLE_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))}

8
apps/admin/app/(all)/(dashboard)/authentication/page.tsx
View file

@ -117,11 +117,11 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
>
{formattedConfig ? (
<div className="space-y-3">
<div className={cn("w-full flex items-center gap-14 rounded-sm")}>
<div className={cn("flex w-full items-center gap-14 rounded-sm")}>
<div className="flex grow items-center gap-4">
<div className="grow">
<div className="text-16 font-medium pb-1">Allow anyone to sign up even without an invite</div>
<div className={cn("font-regular leading-5 text-tertiary text-11")}>
<div className="pb-1 text-16 font-medium">Allow anyone to sign up even without an invite</div>
<div className={cn("text-11 leading-5 font-regular text-tertiary")}>
Toggling this off will only let users sign up when they are invited.
</div>
</div>
@ -143,7 +143,7 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
</div>
</div>
</div>
<div className="text-lg font-medium pt-6">Available authentication modes</div>
<div className="text-lg pt-6 font-medium">Available authentication modes</div>
{authenticationModes.map((method) => (
<AuthenticationMethodCard
key={method.key}

4
apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
View file

@ -179,7 +179,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
</CustomSelect>
</div>
</div>
<div className="flex flex-col gap-6 my-6 pt-4 border-t border-subtle">
<div className="my-6 flex flex-col gap-6 border-t border-subtle pt-4">
<div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
<div className="mr-8 flex items-center gap-10 pt-4">
<div className="grow">
@ -207,7 +207,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
</div>
</div>
</div>
<div className="flex max-w-4xl items-center py-1 gap-4">
<div className="flex max-w-4xl items-center gap-4 py-1">
<Button
variant="primary"
size="lg"

6
apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
View file

@ -91,8 +91,8 @@ export function SendTestEmailModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all w-full sm:max-w-xl">
<h3 className="text-16 font-medium leading-6 text-primary">
<Dialog.Panel className="relative w-full transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all sm:max-w-xl">
<h3 className="text-16 leading-6 font-medium text-primary">
{sendEmailStep === ESendEmailSteps.SEND_EMAIL
? "Send test email"
: sendEmailStep === ESendEmailSteps.SUCCESS
@ -121,7 +121,7 @@ export function SendTestEmailModal(props: Props) {
</div>
)}
{sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
<div className="flex items-center gap-2 justify-end mt-5">
<div className="mt-5 flex items-center justify-end gap-2">
<Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
{sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
</Button>

10
apps/admin/app/(all)/(dashboard)/general/form.tsx
View file

@ -112,18 +112,18 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
</div>
<div className="space-y-6">
<div className="text-16 font-medium text-primary pb-1.5 border-b border-subtle">Chat + telemetry</div>
<div className="border-b border-subtle pb-1.5 text-16 font-medium text-primary">Chat + telemetry</div>
<IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
<div className="flex items-center gap-14">
<div className="grow flex items-center gap-4">
<div className="flex grow items-center gap-4">
<div className="shrink-0">
<div className="flex items-center justify-center size-11 bg-layer-1 rounded-lg">
<div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
<Telescope className="size-5 text-tertiary" />
</div>
</div>
<div className="grow">
<div className="text-13 font-medium text-primary leading-5">Let Plane collect anonymous usage data</div>
<div className="text-11 font-regular text-tertiary leading-5">
<div className="text-13 leading-5 font-medium text-primary">Let Plane collect anonymous usage data</div>
<div className="text-11 leading-5 font-regular text-tertiary">
No PII is collected.This anonymized data is used to understand how you use Plane and build new features
in line with{" "}
<a

10
apps/admin/app/(all)/(dashboard)/general/intercom.tsx
View file

@ -56,16 +56,16 @@ export const IntercomConfig = observer(function IntercomConfig(props: TIntercomC
return (
<>
<div className="flex items-center gap-14">
<div className="grow flex items-center gap-4">
<div className="flex grow items-center gap-4">
<div className="shrink-0">
<div className="flex items-center justify-center size-11 bg-layer-1 rounded-lg">
<MessageSquare className="size-5 text-tertiary p-0.5" />
<div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
<MessageSquare className="size-5 p-0.5 text-tertiary" />
</div>
</div>
<div className="grow">
<div className="text-13 font-medium text-primary leading-5">Chat with us</div>
<div className="text-11 font-regular text-tertiary leading-5">
<div className="text-13 leading-5 font-medium text-primary">Chat with us</div>
<div className="text-11 leading-5 font-regular text-tertiary">
Let your users chat with us via Intercom or another service. Toggling Telemetry off turns this off
automatically.
</div>

2
apps/admin/app/(all)/(dashboard)/layout.tsx
View file

@ -42,7 +42,7 @@ function AdminLayout(_props: Route.ComponentProps) {
<AdminSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
<AdminHeader />
<div className="h-full w-full overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
<div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-scroll">
<Outlet />
</div>
</main>

4
apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
View file

@ -39,14 +39,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
const getSidebarMenuItems = () => (
<Menu.Items
className={cn(
"absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 shadow-lg outline-none",
"shadow-lg absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 outline-none",
{
"left-4": isSidebarCollapsed,
}
)}
>
<div className="flex flex-col gap-2.5 pb-2">
<span className="px-2 text-secondary truncate">{currentUser?.email}</span>
<span className="truncate px-2 text-secondary">{currentUser?.email}</span>
</div>
<div className="py-2">
<Menu.Item

12
apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
View file

@ -50,9 +50,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
return (
<div
className={cn(
"flex w-full items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4 h-14 flex-shrink-0",
"flex h-14 w-full flex-shrink-0 items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4",
{
"flex-col h-auto py-1.5": isSidebarCollapsed,
"h-auto flex-col py-1.5": isSidebarCollapsed,
}
)}
>
@ -60,7 +60,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
<Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
<a
href={redirectionLink}
className={`relative px-2 py-1 flex items-center gap-1 rounded-sm bg-layer-1 text-body-xs-medium text-secondary whitespace-nowrap`}
className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`}
>
<NewTabIcon width={14} height={14} />
{!isSidebarCollapsed && "Redirect to Plane"}
@ -101,9 +101,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
leaveTo="transform opacity-0 scale-95"
>
<div
className={`absolute bottom-2 min-w-[10rem] z-[15] ${
className={`absolute bottom-2 z-[15] min-w-[10rem] ${
isSidebarCollapsed ? "left-full" : "-left-[75px]"
} divide-y divide-subtle-1 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-raised-100`}
} divide-y divide-subtle-1 rounded-sm bg-surface-1 p-1 whitespace-nowrap shadow-raised-100`}
ref={helpOptionsRef}
>
<div className="space-y-1 pb-2">
@ -134,7 +134,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
);
})}
</div>
<div className="px-2 pb-1 pt-2 text-10">Version: v{instance?.current_version}</div>
<div className="px-2 pt-2 pb-1 text-10">Version: v{instance?.current_version}</div>
</div>
</Transition>
</div>

8
apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
View file

@ -29,7 +29,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
};
return (
<div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
<div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
{sidebarMenu.map((item, index) => {
const isActive = item.href === pathName || pathName?.includes(item.href);
return (
@ -38,9 +38,9 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
<Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
<div
className={cn(
"group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors",
"group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
{
"text-primary !bg-layer-transparent-active": isActive,
"!bg-layer-transparent-active text-primary": isActive,
"text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
},
isSidebarCollapsed ? "justify-center" : "w-[260px]"
@ -48,7 +48,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
>
{<item.Icon className="h-4 w-4 flex-shrink-0" />}
{!isSidebarCollapsed && (
<div className="w-full ">
<div className="w-full">
<div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
<div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
</div>

8
apps/admin/app/(all)/(dashboard)/sidebar.tsx
View file

@ -44,13 +44,7 @@ export const AdminSidebar = observer(function AdminSidebar() {
return (
<div
className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300
fixed md:relative
${isSidebarCollapsed ? "-ml-[290px]" : ""}
sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
`}
className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300 md:relative ${isSidebarCollapsed ? "-ml-[290px]" : ""} sm:${isSidebarCollapsed ? "-ml-[290px]" : ""} md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} `}
>
<div ref={ref} className="flex h-full w-full flex-1 flex-col">
<AdminSidebarDropdown />

6
apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
View file

@ -123,8 +123,8 @@ export function WorkspaceCreateForm() {
</div>
<div className="flex flex-col gap-1">
<h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4>
<div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-subtle px-3">
<span className="whitespace-nowrap text-13 text-secondary">{workspaceBaseURL}</span>
<div className="flex w-full items-center gap-0.5 rounded-md border-[0.5px] border-subtle px-3">
<span className="text-13 whitespace-nowrap text-secondary">{workspaceBaseURL}</span>
<Controller
control={control}
name="slug"
@ -188,7 +188,7 @@ export function WorkspaceCreateForm() {
</div>
</div>
</div>
<div className="flex max-w-4xl items-center py-1 gap-4">
<div className="flex max-w-4xl items-center gap-4 py-1">
<Button
variant="primary"
size="lg"

14
apps/admin/app/(all)/(dashboard)/workspace/page.tsx
View file

@ -83,11 +83,11 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
>
<div className="space-y-3">
{formattedConfig ? (
<div className={cn("w-full flex items-center gap-14 rounded-sm")}>
<div className={cn("flex w-full items-center gap-14 rounded-sm")}>
<div className="flex grow items-center gap-4">
<div className="grow">
<div className="text-16 font-medium pb-1">Prevent anyone else from creating a workspace.</div>
<div className={cn("font-regular leading-5 text-tertiary text-11")}>
<div className="pb-1 text-16 font-medium">Prevent anyone else from creating a workspace.</div>
<div className={cn("text-11 leading-5 font-regular text-tertiary")}>
Toggling this on will let only you create workspaces. You will have to invite users to new workspaces.
</div>
</div>
@ -116,15 +116,15 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
)}
{workspaceLoader !== "init-loader" ? (
<>
<div className="pt-6 flex items-center justify-between gap-2">
<div className="flex items-center justify-between gap-2 pt-6">
<div className="flex flex-col items-start gap-x-2">
<div className="flex items-center gap-2 text-16 font-medium">
All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
{workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
<LoaderIcon className="w-4 h-4 animate-spin" />
<LoaderIcon className="h-4 w-4 animate-spin" />
)}
</div>
<div className={cn("font-regular leading-5 text-tertiary text-11")}>
<div className={cn("text-11 leading-5 font-regular text-tertiary")}>
You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
Member.
</div>
@ -149,7 +149,7 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
disabled={workspaceLoader === "pagination"}
>
Load more
{workspaceLoader === "pagination" && <LoaderIcon className="w-3 h-3 animate-spin" />}
{workspaceLoader === "pagination" && <LoaderIcon className="h-3 w-3 animate-spin" />}
</Button>
</div>
)}

8
apps/admin/app/(all)/(home)/auth-banner.tsx
View file

@ -20,16 +20,16 @@ export function AuthBanner(props: TAuthBanner) {
if (!bannerData) return <></>;
return (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
<div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
<div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
<Info size={16} className="text-accent-primary" />
</div>
<div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
<div
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary"
className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary transition-all hover:bg-accent-primary/20"
onClick={() => handleBannerData && handleBannerData(undefined)}
>
<CloseIcon className="w-4 h-4 flex-shrink-0" />
<CloseIcon className="h-4 w-4 flex-shrink-0" />
</div>
</div>
);

2
apps/admin/app/(all)/(home)/auth-header.tsx
View file

@ -9,7 +9,7 @@ import { PlaneLockup } from "@plane/propel/icons";
export function AuthHeader() {
return (
<div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
<div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
<Link href="/">
<PlaneLockup height={20} width={95} className="text-primary" />
</Link>

4
apps/admin/app/(all)/(home)/auth-helpers.tsx
View file

@ -50,7 +50,7 @@ const errorCodeMessages: {
message: () => (
<div>
Admin user already exists.&nbsp;
<Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
<Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
Sign In
</Link>
&nbsp;now.
@ -62,7 +62,7 @@ const errorCodeMessages: {
message: () => (
<div>
Admin user does not exist.&nbsp;
<Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
<Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
Sign In
</Link>
&nbsp;now.

2
apps/admin/app/(all)/(home)/layout.tsx
View file

@ -22,7 +22,7 @@ function RootLayout() {
}, [replace, isUserLoggedIn]);
return (
<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 bg-surface-1">
<div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-surface-1 px-8 pt-6 pb-10">
<Outlet />
</div>
);

2
apps/admin/app/(all)/(home)/page.tsx
View file

@ -22,7 +22,7 @@ function HomePage() {
// if instance is not fetched, show loading
if (!instance && !error) {
return (
<div className="flex items-center justify-center h-screen w-full">
<div className="flex h-screen w-full items-center justify-center">
<LogoSpinner />
</div>
);

12
apps/admin/app/(all)/(home)/sign-in-form.tsx
View file

@ -111,8 +111,8 @@ export function InstanceSignInForm() {
return (
<>
<AuthHeader />
<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">
<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">
<FormHeader
heading="Manage your Plane instance"
subHeading="Configure instance-wide settings to secure your instance"
@ -134,7 +134,7 @@ export function InstanceSignInForm() {
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="email">
<label className="text-13 font-medium text-tertiary" htmlFor="email">
Email <span className="text-danger-primary">*</span>
</label>
<Input
@ -152,7 +152,7 @@ export function InstanceSignInForm() {
</div>
<div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="password">
<label className="text-13 font-medium text-tertiary" htmlFor="password">
Password <span className="text-danger-primary">*</span>
</label>
<div className="relative">
@ -170,7 +170,7 @@ export function InstanceSignInForm() {
{showPassword ? (
<button
type="button"
className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => setShowPassword(false)}
>
<EyeOff className="h-4 w-4" />
@ -178,7 +178,7 @@ export function InstanceSignInForm() {
) : (
<button
type="button"
className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => setShowPassword(true)}
>
<Eye className="h-4 w-4" />

2
apps/admin/app/root.tsx
View file

@ -75,7 +75,7 @@ export const meta: Route.MetaFunction = () => [
export default function Root() {
return (
<div className="bg-canvas min-h-screen">
<div className="min-h-screen bg-canvas">
<Outlet />
</div>
);

8
apps/admin/components/authentication/authentication-method-card.tsx
View file

@ -22,8 +22,8 @@ export function AuthenticationMethodCard(props: Props) {
return (
<div
className={cn("w-full flex items-center gap-14 rounded-lg bg-layer-2", {
"px-4 py-3 border border-subtle": withBorder,
className={cn("flex w-full items-center gap-14 rounded-lg bg-layer-2", {
"border border-subtle px-4 py-3": withBorder,
})}
>
<div
@ -36,7 +36,7 @@ export function AuthenticationMethodCard(props: Props) {
</div>
<div className="grow">
<div
className={cn("font-medium leading-5 text-primary", {
className={cn("leading-5 font-medium text-primary", {
"text-13": withBorder,
"text-18": !withBorder,
})}
@ -44,7 +44,7 @@ export function AuthenticationMethodCard(props: Props) {
{name}
</div>
<div
className={cn("font-regular leading-5 text-tertiary", {
className={cn("leading-5 font-regular text-tertiary", {
"text-11": withBorder,
"text-13": !withBorder,
})}

4
apps/admin/components/common/banner.tsx
View file

@ -16,12 +16,12 @@ export function Banner(props: TBanner) {
return (
<div
className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-subtle border-danger-strong" : "bg-success-subtle border-success-strong"}`}
className={`w-full rounded-md border p-2 ${type === "error" ? "border-danger-strong bg-danger-subtle" : "border-success-strong bg-success-subtle"}`}
>
<div className="flex items-center justify-center">
<div className="flex-shrink-0">
{type === "error" ? (
<span className="flex items-center justify-center h-6 w-6 rounded-full">
<span className="flex h-6 w-6 items-center justify-center rounded-full">
<AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
</span>
) : (

4
apps/admin/components/common/breadcrumb-link.tsx
View file

@ -22,12 +22,12 @@ export function BreadcrumbLink(props: Props) {
{href ? (
<Link className="flex items-center gap-1 text-13 font-medium text-tertiary hover:text-primary" href={href}>
{icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-16">{icon}</div>}
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
<div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
</Link>
) : (
<div className="flex cursor-default items-center gap-1 text-13 font-medium text-primary">
{icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
<div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
</div>
)}
</div>

4
apps/admin/components/common/code-block.tsx
View file

@ -16,9 +16,9 @@ export function CodeBlock({ children, className, darkerShade }: TProps) {
return (
<span
className={cn(
"px-0.5 text-11 text-tertiary bg-surface-2 font-semibold rounded-md border border-subtle",
"rounded-md border border-subtle bg-surface-2 px-0.5 text-11 font-semibold text-tertiary",
{
"text-secondary bg-layer-1 border-subtle": darkerShade,
"border-subtle bg-layer-1 text-secondary": darkerShade,
},
className
)}

6
apps/admin/components/common/confirm-discard-modal.tsx
View file

@ -46,10 +46,10 @@ export function ConfirmDiscardModal(props: Props) {
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
<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="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-tertiary">
<Dialog.Title as="h3" className="text-16 leading-6 font-medium text-tertiary">
You have unsaved changes
</Dialog.Title>
<div className="mt-2">
@ -60,7 +60,7 @@ export function ConfirmDiscardModal(props: Props) {
</div>
</div>
</div>
<div className="flex justify-end items-center p-4 sm:px-6 gap-2">
<div className="flex items-center justify-end gap-2 p-4 sm:px-6">
<Button variant="secondary" size="lg" onClick={handleClose}>
Keep editing
</Button>

4
apps/admin/components/common/controller-input.tsx
View file

@ -67,7 +67,7 @@ export function ControllerInput(props: Props) {
(showPassword ? (
<button
tabIndex={-1}
className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => setShowPassword(false)}
>
<EyeOff className="h-4 w-4" />
@ -75,7 +75,7 @@ export function ControllerInput(props: Props) {
) : (
<button
tabIndex={-1}
className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => setShowPassword(true)}
>
<Eye className="h-4 w-4" />

2
apps/admin/components/common/empty-state.tsx
View file

@ -25,7 +25,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
<div className={`flex h-full w-full items-center justify-center`}>
<div className="flex w-full flex-col items-center text-center">
{image && <img src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
<h6 className="mb-3 mt-6 text-18 font-semibold sm:mt-8">{title}</h6>
<h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">{title}</h6>
{description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
<div className="flex items-center gap-4">
{primaryButton && (

4
apps/admin/components/common/header/index.tsx
View file

@ -21,10 +21,10 @@ export const HamburgerToggle = observer(function HamburgerToggle() {
const { isSidebarCollapsed, toggleSidebar } = useTheme();
return (
<button
className="size-7 rounded-sm flex justify-center items-center bg-layer-1 transition-all hover:bg-layer-1-hover cursor-pointer group md:hidden"
className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
onClick={() => toggleSidebar(!isSidebarCollapsed)}
>
<Menu size={14} className="text-secondary group-hover:text-primary transition-all" />
<Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
</button>
);
});

4
apps/admin/components/common/new-user-popup.tsx
View file

@ -24,7 +24,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
if (!isNewUserPopup) return <></>;
return (
<div className="absolute bottom-8 right-8 p-6 w-96 border border-subtle shadow-md rounded-lg bg-surface-1">
<div className="shadow-md absolute right-8 bottom-8 w-96 rounded-lg border border-subtle bg-surface-1 p-6">
<div className="flex gap-4">
<div className="grow">
<div className="text-14 font-semibold">Create workspace</div>
@ -41,7 +41,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
</Button>
</div>
</div>
<div className="shrink-0 flex items-center justify-center">
<div className="flex shrink-0 items-center justify-center">
<img
src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
height={80}

14
apps/admin/components/common/page-wrapper.tsx
View file

@ -24,25 +24,25 @@ export const PageWrapper = (props: TPageWrapperProps) => {
return (
<div
className={cn("mx-auto w-full h-full space-y-6 py-4", {
"md:px-4 max-w-[1000px] 2xl:max-w-[1200px]": size === "md",
className={cn("mx-auto h-full w-full space-y-6 py-4", {
"max-w-[1000px] md:px-4 2xl:max-w-[1200px]": size === "md",
"px-4 lg:px-12": size === "lg",
})}
>
{customHeader ? (
<div className="border-b border-subtle mx-4 py-4 space-y-1 shrink-0">{customHeader}</div>
<div className="mx-4 shrink-0 space-y-1 border-b border-subtle py-4">{customHeader}</div>
) : (
header && (
<div className="flex items-center justify-between gap-4 border-b border-subtle mx-4 py-4 space-y-1 shrink-0">
<div className="mx-4 flex shrink-0 items-center justify-between gap-4 space-y-1 border-b border-subtle py-4">
<div className={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
<div className="text-primary text-h5-semibold">{header.title}</div>
<div className="text-secondary text-body-sm-regular">{header.description}</div>
<div className="text-h5-semibold text-primary">{header.title}</div>
<div className="text-body-sm-regular text-secondary">{header.description}</div>
</div>
{header.actions && <div className="shrink-0">{header.actions}</div>}
</div>
)
)}
<div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 pb-4">
<div className="vertical-scrollbar scrollbar-sm flex-grow overflow-hidden overflow-y-scroll px-4 pb-4">
{children}
</div>
</div>

10
apps/admin/components/instance/failure.tsx
View file

@ -24,12 +24,12 @@ export const InstanceFailureView = observer(function InstanceFailureView() {
return (
<>
<AuthHeader />
<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">
<div className="relative flex flex-col justify-center items-center space-y-4">
<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">
<div className="relative flex flex-col items-center justify-center space-y-4">
<img src={instanceImage} alt="Instance failure illustration" />
<h3 className="font-medium text-20 text-on-color text-center">Unable to fetch instance details.</h3>
<p className="font-medium text-14 text-center">
<h3 className="text-center text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
<p className="text-center text-14 font-medium">
We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
</p>
</div>

4
apps/admin/components/instance/form-header.tsx
View file

@ -7,8 +7,8 @@
export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
return (
<div className="flex flex-col gap-1">
<span className="text-20 font-semibold text-primary leading-7">{heading}</span>
<span className="text-16 font-semibold text-placeholder leading-7">{subHeading}</span>
<span className="text-20 leading-7 font-semibold text-primary">{heading}</span>
<span className="text-16 leading-7 font-semibold text-placeholder">{subHeading}</span>
</div>
);
}

10
apps/admin/components/instance/instance-not-ready.tsx
View file

@ -11,12 +11,12 @@ import PlaneTakeOffImage from "@/app/assets/images/plane-takeoff.png?url";
export function InstanceNotReady() {
return (
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
<div className="w-auto max-w-2xl relative space-y-8 py-10">
<div className="relative flex flex-col justify-center items-center space-y-4">
<h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1>
<div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
<div className="relative w-auto max-w-2xl space-y-8 py-10">
<div className="relative flex flex-col items-center justify-center space-y-4">
<h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
<img src={PlaneTakeOffImage} alt="Plane Logo" />
<p className="font-medium text-14 text-placeholder">Get started by setting up your instance and workspace</p>
<p className="text-14 font-medium text-placeholder">Get started by setting up your instance and workspace</p>
</div>
<div>

32
apps/admin/components/instance/setup-form.tsx
View file

@ -139,8 +139,8 @@ export function InstanceSetupForm() {
return (
<>
<AuthHeader />
<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">
<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">
<FormHeader
heading="Setup your Plane Instance"
subHeading="Post setup you will be able to manage this Plane instance."
@ -160,9 +160,9 @@ export function InstanceSetupForm() {
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
<div className="flex flex-col sm:flex-row items-center gap-4">
<div className="flex flex-col items-center gap-4 sm:flex-row">
<div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="first_name">
<label className="text-13 font-medium text-tertiary" htmlFor="first_name">
First name <span className="text-danger-primary">*</span>
</label>
<Input
@ -185,7 +185,7 @@ export function InstanceSetupForm() {
/>
</div>
<div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="last_name">
<label className="text-13 font-medium text-tertiary" htmlFor="last_name">
Last name <span className="text-danger-primary">*</span>
</label>
<Input
@ -209,7 +209,7 @@ export function InstanceSetupForm() {
</div>
<div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="email">
<label className="text-13 font-medium text-tertiary" htmlFor="email">
Email <span className="text-danger-primary">*</span>
</label>
<Input
@ -230,7 +230,7 @@ export function InstanceSetupForm() {
</div>
<div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="company_name">
<label className="text-13 font-medium text-tertiary" htmlFor="company_name">
Company name <span className="text-danger-primary">*</span>
</label>
<Input
@ -252,7 +252,7 @@ export function InstanceSetupForm() {
</div>
<div className="w-full space-y-1">
<label className="text-13 text-tertiary font-medium" htmlFor="password">
<label className="text-13 font-medium text-tertiary" htmlFor="password">
Set a password <span className="text-danger-primary">*</span>
</label>
<div className="relative">
@ -274,7 +274,7 @@ export function InstanceSetupForm() {
<button
type="button"
tabIndex={-1}
className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => handleShowPassword("password")}
>
<EyeOff className="h-4 w-4" />
@ -283,7 +283,7 @@ export function InstanceSetupForm() {
<button
type="button"
tabIndex={-1}
className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => handleShowPassword("password")}
>
<Eye className="h-4 w-4" />
@ -297,7 +297,7 @@ export function InstanceSetupForm() {
</div>
<div className="w-full 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">
Confirm password <span className="text-danger-primary">*</span>
</label>
<div className="relative">
@ -318,7 +318,7 @@ export function InstanceSetupForm() {
<button
type="button"
tabIndex={-1}
className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => handleShowPassword("retypePassword")}
>
<EyeOff className="h-4 w-4" />
@ -327,7 +327,7 @@ export function InstanceSetupForm() {
<button
type="button"
tabIndex={-1}
className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
onClick={() => handleShowPassword("retypePassword")}
>
<Eye className="h-4 w-4" />
@ -344,21 +344,21 @@ export function InstanceSetupForm() {
<div className="relative flex gap-2">
<div>
<Checkbox
className="w-4 h-4"
className="h-4 w-4"
iconClassName="w-3 h-3"
id="is_telemetry_enabled"
onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
checked={formData.is_telemetry_enabled}
/>
</div>
<label className="text-13 text-tertiary font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
<label className="cursor-pointer text-13 font-medium text-tertiary" htmlFor="is_telemetry_enabled">
Allow Plane to anonymously collect usage events.{" "}
<a
tabIndex={-1}
href="https://developers.plane.so/self-hosting/telemetry"
target="_blank"
rel="noopener noreferrer"
className="text-13 font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
className="text-blue-500 hover:text-blue-600 flex-shrink-0 text-13 font-medium"
>
See More
</a>

14
apps/admin/components/workspace/list-item.tsx
View file

@ -30,19 +30,19 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
key={workspaceId}
href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
target="_blank"
className="group flex items-center justify-between p-3 gap-2.5 truncate border border-subtle hover:border-subtle-1 bg-layer-1 hover:bg-layer-1-hover hover:shadow-raised-100 rounded-lg"
className="group flex items-center justify-between gap-2.5 truncate rounded-lg border border-subtle bg-layer-1 p-3 hover:border-subtle-1 hover:bg-layer-1-hover hover:shadow-raised-100"
rel="noreferrer"
>
<div className="flex items-start gap-4">
<span
className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 text-11 uppercase ${
className={`relative mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 text-11 uppercase ${
!workspace?.logo_url && "rounded-lg bg-accent-primary text-on-color"
}`}
>
{workspace?.logo_url && workspace.logo_url !== "" ? (
<img
src={getFileURL(workspace.logo_url)}
className="absolute left-0 top-0 h-full w-full rounded-sm object-cover"
className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
alt="Workspace Logo"
/>
) : (
@ -50,7 +50,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
)}
</span>
<div className="flex flex-col items-start gap-1">
<div className="flex flex-wrap w-full items-center gap-2.5">
<div className="flex w-full flex-wrap items-center gap-2.5">
<h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
<Tooltip tooltipContent="The unique URL of your workspace">
<h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
@ -58,14 +58,14 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
</div>
{workspace.owner.email && (
<div className="flex items-center gap-1 text-11">
<h3 className="text-secondary font-medium">Owned by:</h3>
<h3 className="font-medium text-secondary">Owned by:</h3>
<h4 className="text-tertiary">{workspace.owner.email}</h4>
</div>
)}
<div className="flex items-center gap-2.5 text-11">
{workspace.total_projects !== null && (
<span className="flex items-center gap-1">
<h3 className="text-secondary font-medium">Total projects:</h3>
<h3 className="font-medium text-secondary">Total projects:</h3>
<h4 className="text-tertiary">{workspace.total_projects}</h4>
</span>
)}
@ -73,7 +73,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
<>
•
<span className="flex items-center gap-1">
<h3 className="text-secondary font-medium">Total members:</h3>
<h3 className="font-medium text-secondary">Total members:</h3>
<h4 className="text-tertiary">{workspace.total_members}</h4>
</span>
</>

8
apps/admin/package.json
View file

@ -1,9 +1,9 @@
{
"name": "admin",
"description": "Admin UI for Plane",
"version": "1.2.0",
"license": "AGPL-3.0",
"private": true,
"description": "Admin UI for Plane",
"license": "AGPL-3.0",
"type": "module",
"scripts": {
"dev": "react-router dev --port 3001",
@ -13,9 +13,9 @@
"clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist && rm -rf build",
"check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=485",
"check:types": "react-router typegen && tsc --noEmit",
"check:format": "prettier . --cache --check",
"check:format": "oxfmt --check .",
"fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=485",
"fix:format": "prettier . --cache --write"
"fix:format": "oxfmt ."
},
"dependencies": {
"@bprogress/core": "catalog:",

12
apps/live/package.json
View file

@ -1,16 +1,17 @@
{
"name": "live",
"version": "1.2.0",
"license": "AGPL-3.0",
"private": true,
"description": "A realtime collaborative server powers Plane's rich text editor",
"license": "AGPL-3.0",
"author": "Plane Software Inc.",
"type": "module",
"main": "./dist/start.mjs",
"module": "./dist/start.mjs",
"exports": {
".": "./dist/start.mjs",
"./package.json": "./package.json"
},
"private": true,
"type": "module",
"scripts": {
"build": "tsc --noEmit && tsdown",
"dev": "tsdown --watch --onSuccess \"node --env-file=.env .\"",
@ -20,12 +21,11 @@
"test:coverage": "vitest run --coverage",
"check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=160",
"check:types": "tsc --noEmit",
"check:format": "prettier . --cache --check",
"check:format": "oxfmt --check .",
"fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=160",
"fix:format": "prettier . --cache --write",
"fix:format": "oxfmt .",
"clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
},
"author": "Plane Software Inc.",
"dependencies": {
"@dotenvx/dotenvx": "catalog:",
"@effect/platform": "^0.94.0",

2
apps/space/app/[workspaceSlug]/[projectId]/page.tsx
View file

@ -50,7 +50,7 @@ export const clientLoader = async ({ params, request }: Route.ClientLoaderArgs)
export default function IssuesPage() {
return (
<div className="flex h-screen min-h-[500px] w-full justify-center items-center">
<div className="flex h-screen min-h-[500px] w-full items-center justify-center">
<LogoSpinner />
</div>
);

4
apps/space/app/error.tsx
View file

@ -13,11 +13,11 @@ function ErrorPage() {
};
return (
<div className="bg-surface-1 grid h-screen place-items-center p-4">
<div className="grid h-screen place-items-center bg-surface-1 p-4">
<div className="space-y-8 text-center">
<div className="space-y-2">
<h3 className="text-16 font-semibold">Yikes! That doesn{"'"}t look good.</h3>
<p className="mx-auto md:w-1/2 text-13 text-secondary">
<p className="mx-auto text-13 text-secondary md:w-1/2">
That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
details, please write to{" "}
<a href="mailto:support@plane.so" className="text-accent-primary">

6
apps/space/app/issues/[anchor]/layout.tsx
View file

@ -120,7 +120,7 @@ function IssuesLayout(props: Route.ComponentProps) {
if (!publishSettings && !error) {
return (
<div className="bg-surface-1 flex items-center justify-center h-screen w-full">
<div className="flex h-screen w-full items-center justify-center bg-surface-1">
<LogoSpinner />
</div>
);
@ -133,10 +133,10 @@ function IssuesLayout(props: Route.ComponentProps) {
return (
<>
<div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
<div className="relative flex h-[60px] shrink-0 select-none items-center border-b border-subtle-1 bg-surface-1">
<div className="relative flex h-[60px] shrink-0 items-center border-b border-subtle-1 bg-surface-1 select-none">
<IssuesNavbarRoot publishSettings={publishSettings} />
</div>
<div className="relative size-full bg-surface-2 overflow-hidden">
<div className="relative size-full overflow-hidden bg-surface-2">
<Outlet />
</div>
</div>

10
apps/space/app/not-found.tsx
View file

@ -9,15 +9,15 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
function NotFound() {
return (
<div className="h-screen w-screen grid place-items-center bg-surface-1">
<div className="grid h-screen w-screen place-items-center bg-surface-1">
<div className="text-center">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full">
<div className="size-16 md:size-32 grid place-items-center">
<div className="mx-auto grid size-32 place-items-center rounded-full md:size-52">
<div className="grid size-16 place-items-center md:size-32">
<img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
</div>
</div>
<h1 className="mt-8 md:mt-12 text-18 md:text-24 font-semibold">That didn{"'"}t work</h1>
<p className="mt-2 md:mt-4 text-13 md:text-14">
<h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">That didn{"'"}t work</h1>
<p className="mt-2 text-13 md:mt-4 md:text-14">
Check the URL you are entering in the browser{"'"}s address bar and try again.
</p>
</div>

4
apps/space/app/page.tsx
View file

@ -35,7 +35,7 @@ const HomePage = observer(function HomePage() {
if (isInitializing)
return (
<div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
<div className="flex h-screen min-h-[500px] w-full items-center justify-center bg-surface-1">
<LogoSpinner />
</div>
);
@ -43,7 +43,7 @@ const HomePage = observer(function HomePage() {
if (currentUser && isAuthenticated) {
if (nextPath && isValidNextPath(nextPath)) {
return (
<div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
<div className="flex h-screen min-h-[500px] w-full items-center justify-center bg-surface-1">
<LogoSpinner />
</div>
);

2
apps/space/app/root.tsx
View file

@ -90,7 +90,7 @@ export default function Root() {
export function HydrateFallback() {
return (
<div className="bg-surface-1 relative flex h-screen w-full items-center justify-center">
<div className="relative flex h-screen w-full items-center justify-center bg-surface-1">
<LogoSpinner />
</div>
);

8
apps/space/core/components/account/auth-forms/auth-banner.tsx
View file

@ -19,16 +19,16 @@ export function AuthBanner(props: TAuthBanner) {
if (!bannerData) return <></>;
return (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
<div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
<div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
<Info size={16} className="text-accent-primary" />
</div>
<div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
<div
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 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-accent-primary/20"
onClick={() => handleBannerData && handleBannerData(undefined)}
>
<CloseIcon className="w-4 h-4 flex-shrink-0" />
<CloseIcon className="h-4 w-4 flex-shrink-0" />
</div>
</div>
);

4
apps/space/core/components/account/auth-forms/auth-header.tsx
View file

@ -50,8 +50,8 @@ export function AuthHeader(props: TAuthHeader) {
return (
<>
<div className="flex flex-col gap-1">
<span className="text-20 font-semibold text-primary leading-7">{header}</span>
<span className="text-20 font-semibold text-placeholder leading-7">{subHeader}</span>
<span className="text-20 leading-7 font-semibold text-primary">{header}</span>
<span className="text-20 leading-7 font-semibold text-placeholder">{subHeader}</span>
</div>
</>
);

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

@ -147,8 +147,8 @@ export const AuthRoot = observer(function AuthRoot() {
};
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">
<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">
{errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
<AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
)}

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

@ -52,12 +52,12 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
return (
<form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
<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">
Email
</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-subtle`
)}
onFocus={() => {
@ -74,7 +74,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="name@company.com"
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-subtle border-0 focus:bg-none active:bg-transparent`}
className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder autofill:bg-danger-subtle focus:bg-none active:bg-transparent`}
autoComplete="off"
autoFocus
ref={inputRef}
@ -89,12 +89,12 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
}}
tabIndex={-1}
>
<XCircle className="h-10 w-11 px-3 stroke-placeholder hover:cursor-pointer text-11" />
<XCircle className="h-10 w-11 stroke-placeholder px-3 text-11 hover:cursor-pointer" />
</button>
)}
</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} />
{emailError.email}
</p>

12
apps/space/core/components/account/auth-forms/password.tsx
View file

@ -125,7 +125,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
<label className="text-13 font-medium text-tertiary" htmlFor="email">
Email
</label>
<div className={`relative flex items-center rounded-md bg-surface-1 border border-subtle`}>
<div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
<Input
id="email"
name="email"
@ -133,7 +133,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
value={passwordFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder="name@company.com"
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 && (
@ -146,7 +146,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
</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">
{mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -156,7 +156,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
value={passwordFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
placeholder="Enter password"
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="off"
@ -179,7 +179,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
{mode === EAuthModes.SIGN_UP && (
<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">
Confirm password
</label>
<div className="relative flex items-center rounded-md bg-surface-1">
@ -189,7 +189,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder="Confirm password"
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="off"

8
apps/space/core/components/account/auth-forms/unique-code.tsx
View file

@ -89,7 +89,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
<label className="text-13 font-medium text-tertiary" htmlFor="email">
Email
</label>
<div className={`relative flex items-center rounded-md bg-surface-1 border border-subtle`}>
<div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
<Input
id="email"
name="email"
@ -97,7 +97,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
value={uniqueCodeFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder="name@company.com"
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
/>
@ -119,11 +119,11 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
value={uniqueCodeFormData.code}
onChange={(e) => handleFormChange("code", e.target.value)}
placeholder="123456"
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
className="h-10 w-full border border-subtle !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} />
Paste the code sent to your email

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

@ -14,7 +14,7 @@ export function TermsAndConditions(props: Props) {
const { isSignUp = false } = props;
return (
<span className="flex items-center justify-center py-6">
<p className="text-center text-13 text-secondary whitespace-pre-line">
<p className="text-center text-13 whitespace-pre-line text-secondary">
{isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
<Link href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="text-13 font-medium underline hover:cursor-pointer">Terms of Service</span>

14
apps/space/core/components/account/user-logged-in.tsx
View file

@ -21,21 +21,21 @@ export const UserLoggedIn = observer(function UserLoggedIn() {
if (!user) return null;
return (
<div className="flex flex-col h-screen w-screen">
<div className="flex h-screen w-screen flex-col">
<div className="relative flex w-full items-center justify-between gap-4 border-b border-subtle px-6 py-5">
<PlaneLockup className="h-6 w-auto text-primary" />
<UserAvatar />
</div>
<div className="size-full grid place-items-center p-6">
<div className="grid size-full place-items-center p-6">
<div className="text-center">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-layer-1">
<div className="size-16 md:size-32 grid place-items-center">
<img src={UserLoggedInImage} alt="User already logged in" className="w-full h-full object-cover" />
<div className="mx-auto grid size-32 place-items-center rounded-full bg-layer-1 md:size-52">
<div className="grid size-16 place-items-center md:size-32">
<img src={UserLoggedInImage} alt="User already logged in" className="h-full w-full object-cover" />
</div>
</div>
<h1 className="mt-8 md:mt-12 text-18 md:text-24 font-semibold">Nice! Just one more step.</h1>
<p className="mt-2 md:mt-4 text-13 md:text-14">
<h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">Nice! Just one more step.</h1>
<p className="mt-2 text-13 md:mt-4 md:text-14">
Enter the public-share URL or link of the view or Page you are trying to see in the browser{"'"}s address
bar.
</p>

2
apps/space/core/components/common/powered-by.tsx
View file

@ -21,7 +21,7 @@ export function PoweredBy(props: TPoweredBy) {
return (
<a
href={WEBSITE_URL}
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
className="fixed right-5 bottom-2.5 !z-[999999] flex items-center gap-1 rounded-sm border border-subtle bg-layer-3 px-2 py-1 shadow-raised-100"
target="_blank"
rel="noreferrer noopener"
>

4
apps/space/core/components/editor/embeds/mentions/user.tsx
View file

@ -25,7 +25,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
if (!userDetails) {
return (
<div className="not-prose inline px-1 py-0.5 rounded-sm bg-layer-1 text-tertiary no-underline">
<div className="not-prose inline rounded-sm bg-layer-1 px-1 py-0.5 text-tertiary no-underline">
@deactivated user
</div>
);
@ -33,7 +33,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
return (
<div
className={cn("not-prose inline px-1 py-0.5 rounded-sm bg-accent-primary/20 text-accent-primary no-underline", {
className={cn("not-prose inline rounded-sm bg-accent-primary/20 px-1 py-0.5 text-accent-primary no-underline", {
"bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
})}
>

2
apps/space/core/components/editor/lite-text-editor.tsx
View file

@ -65,7 +65,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
});
return (
<div className="border border-subtle rounded-sm p-3 space-y-3">
<div className="space-y-3 rounded-sm border border-subtle p-3">
<LiteTextEditorWithRef
ref={ref}
disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}

2
apps/space/core/components/editor/toolbar.tsx
View file

@ -81,7 +81,7 @@ export function IssueCommentToolbar(props: Props) {
type="button"
onClick={() => executeCommand(item)}
className={cn(
"grid place-items-center aspect-square rounded-xs p-0.5 text-placeholder hover:bg-layer-transparent-hover",
"grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder hover:bg-layer-transparent-hover",
{
"bg-layer-transparent-hover text-primary": isItemActive,
}

10
apps/space/core/components/instance/instance-failure-view.tsx
View file

@ -20,12 +20,12 @@ export function InstanceFailureView() {
};
return (
<div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
<div className="w-auto max-w-2xl relative space-y-8 py-10">
<div className="relative flex flex-col justify-center items-center space-y-4">
<div className="relative container mx-auto flex h-screen items-center justify-center overflow-x-hidden overflow-y-auto px-5">
<div className="relative w-auto max-w-2xl space-y-8 py-10">
<div className="relative flex flex-col items-center justify-center space-y-4">
<img src={instanceImage} alt="Plane instance failure image" />
<h3 className="font-medium text-20 text-on-color ">Unable to fetch instance details.</h3>
<p className="font-medium text-14 text-center">
<h3 className="text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
<p className="text-center text-14 font-medium">
We were unable to fetch the details of the instance. <br />
Fret not, it might just be a connectivity work items.
</p>

2
apps/space/core/components/issues/filters/labels.tsx
View file

@ -73,7 +73,7 @@ export function FilterLabels(props: Props) {
)}
</>
) : (
<p className="text-11 italic text-placeholder">No matches found</p>
<p className="text-11 text-placeholder italic">No matches found</p>
)
) : (
<Loader className="space-y-2">

2
apps/space/core/components/issues/filters/priority.tsx
View file

@ -52,7 +52,7 @@ export const FilterPriority = observer(function FilterPriority(props: Props) {
/>
))
) : (
<p className="text-11 italic text-placeholder">{t("common.search.no_matches_found")}</p>
<p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
)}
</div>
)}

2
apps/space/core/components/issues/filters/state.tsx
View file

@ -73,7 +73,7 @@ export const FilterState = observer(function FilterState(props: Props) {
)}
</>
) : (
<p className="text-11 italic text-placeholder">No matches found</p>
<p className="text-11 text-placeholder italic">No matches found</p>
)
) : (
<Loader className="space-y-2">

4
apps/space/core/components/issues/issue-layouts/error.tsx
View file

@ -9,14 +9,14 @@ import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
export function SomethingWentWrongError() {
return (
<div className="bg-surface-1 grid min-h-screen w-full place-items-center p-6">
<div className="grid min-h-screen w-full place-items-center bg-surface-1 p-6">
<div className="text-center">
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full">
<div className="grid h-32 w-32 place-items-center">
<img
src={SomethingWentWrongImage}
alt="Oops! Something went wrong"
className="w-full h-full object-contain"
className="h-full w-full object-contain"
/>
</div>
</div>

4
apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
View file

@ -27,14 +27,14 @@ export const IssueLayoutHOC = observer(function IssueLayoutHOC(props: Props) {
if (getIssueLoader() === "init-loader" || issueCount === undefined) {
return (
<div className="relative size-full grid place-items-center">
<div className="relative grid size-full place-items-center">
<LogoSpinner />
</div>
);
}
if (getGroupIssueCount(undefined, undefined, false) === 0) {
return <div className="size-full grid place-items-center text-secondary">No work items found</div>;
return <div className="grid size-full place-items-center text-secondary">No work items found</div>;
}
return <>{props.children}</>;

2
apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file

@ -55,7 +55,7 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro
return (
<IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
<div
className="horizontal-scrollbar scrollbar-lg relative flex size-full overflow-x-auto overflow-y-hidden"
className="horizontal-scrollbar relative flex scrollbar-lg size-full overflow-x-auto overflow-y-hidden"
ref={scrollableContainerRef}
>
<div className="relative h-full w-max min-w-full">

6
apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
View file

@ -26,12 +26,12 @@ export const BlockReactions = observer(function BlockReactions(props: Props) {
if (!canVote && !canReact) return <></>;
return (
<div className="flex flex-wrap border-t-[1px] outline-transparent w-full border-t-subtle-1 bg-surface-2 rounded-b-lg">
<div className="py-2 px-3 flex flex-wrap items-center gap-2">
<div className="flex w-full flex-wrap rounded-b-lg border-t-[1px] border-t-subtle-1 bg-surface-2 outline-transparent">
<div className="flex flex-wrap items-center gap-2 px-3 py-2">
{canVote && (
<div
className={cn(`flex items-center gap-2 pr-1`, {
"after:h-6 after:ml-1 after:w-[1px] after:bg-layer-3": canReact,
"after:ml-1 after:h-6 after:w-[1px] after:bg-layer-3": canReact,
})}
>
<IssueVotes anchor={anchor.toString()} issueIdFromProps={issueId} size="sm" />

6
apps/space/core/components/issues/issue-layouts/kanban/block.tsx
View file

@ -56,14 +56,14 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
</div>
</WithDisplayPropertiesHOC>
<div className="w-full line-clamp-1 text-13 text-primary mb-1.5">
<div className="mb-1.5 line-clamp-1 w-full text-13 text-primary">
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
</div>
<IssueProperties
className="flex flex-wrap items-center gap-2 whitespace-nowrap text-tertiary pt-1.5"
className="flex flex-wrap items-center gap-2 pt-1.5 whitespace-nowrap text-tertiary"
issue={issue}
displayProperties={displayProperties}
/>
@ -93,7 +93,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
<div className={cn("group/kanban-block relative p-1.5")}>
<div
className={cn(
"relative block w-full border border-subtle border-strong bg-layer-2 text-13 transition-all rounded-lg bg-layer-2 hover:bg-layer-2-hover",
"relative block w-full rounded-lg border border-strong border-subtle bg-layer-2 text-13 transition-all hover:bg-layer-2-hover",
{
"border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
}

2
apps/space/core/components/issues/issue-layouts/kanban/default.tsx
View file

@ -86,7 +86,7 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
};
return (
<div className="relative size-full flex gap-2 px-2">
<div className="relative flex size-full gap-2 px-2">
{groupList?.map((subList) => {
const groupByVisibilityToggle = visibilityGroupBy(subList);

8
apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View file

@ -21,13 +21,13 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
return (
<>
<div className="relative flex shrink-0 gap-2 p-1.5 w-full flex-row items-center">
<div className="relative flex w-full shrink-0 flex-row items-center gap-2 p-1.5">
<div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-xs">
{icon ? icon : <Circle width={14} strokeWidth={2} />}
</div>
<div className="relative flex items-center gap-1 w-full flex-row overflow-hidden">
<div className="line-clamp-1 inline-block overflow-hidden truncate font-medium text-primary">{title}</div>
<div className="shrink-0 text-13 font-medium text-tertiary pl-2">{count || 0}</div>
<div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
<div className="line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary">{title}</div>
<div className="shrink-0 pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
</div>
</div>
</>

2
apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
View file

@ -21,7 +21,7 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
const { icon, title, count, isExpanded, toggleExpanded } = props;
return (
<div
className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-xs p-1.5 cursor-pointer`}
className={`relative flex w-full flex-shrink-0 cursor-pointer flex-row items-center gap-2 rounded-xs p-1.5`}
onClick={() => toggleExpanded()}
>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">

6
apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
View file

@ -45,7 +45,7 @@ const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
ref: React.ForwardedRef<HTMLSpanElement>
) {
return (
<span ref={ref} className="block h-28 m-1.5 animate-pulse bg-[var(--illustration-fill-quaternary)] rounded-sm" />
<span ref={ref} className="m-1.5 block h-28 animate-pulse rounded-sm bg-[var(--illustration-fill-quaternary)]" />
);
});
KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
@ -96,7 +96,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
<KanbanIssueBlockLoader />
) : (
<div
className="w-full p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
className="w-full cursor-pointer p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
onClick={loadMoreIssuesInThisGroup}
role="button"
>
@ -110,7 +110,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
return (
<div
id={`${groupId}__${subGroupId}`}
className={cn("relative h-full transition-all min-h-[120px]", { "vertical-scrollbar scrollbar-md": !subGroupBy })}
className={cn("relative h-full min-h-[120px] transition-all", { "vertical-scrollbar scrollbar-md": !subGroupBy })}
ref={columnRef}
>
<KanbanIssueBlocksList

2
apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
View file

@ -275,7 +275,7 @@ const SubGroup = observer(function SubGroup(props: ISubGroup) {
return (
<>
<div className="flex flex-shrink-0 flex-col">
<div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-layer-1 border-y-[0.5px] border-subtle">
<div className="sticky top-[50px] z-[3] flex w-full items-center border-y-[0.5px] border-subtle bg-layer-1 py-1">
<div className="sticky left-0 flex-shrink-0">
<HeaderSubGroupByCard
icon={group.icon as any}

8
apps/space/core/components/issues/issue-layouts/list/block.tsx
View file

@ -56,7 +56,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
<div
ref={issueRef}
className={cn(
"group/list-block min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 hover:bg-layer-transparent-hover p-3 pl-1.5 text-13 transition-colors border border-transparent border-b-subtle",
"group/list-block relative flex min-h-11 flex-col gap-3 border border-transparent border-b-subtle p-3 pl-1.5 text-13 transition-colors hover:bg-layer-transparent-hover md:flex-row md:items-center",
{
"border-accent-strong!": getIsIssuePeeked(issue.id),
"last:border-b-transparent": !getIsIssuePeeked(issue.id),
@ -67,7 +67,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
<div className="flex grow items-center gap-0.5 truncate">
<div className="flex items-center gap-1">
{displayProperties && displayProperties?.key && (
<div className="shrink-0 text-11 font-medium text-tertiary px-4">
<div className="shrink-0 px-4 text-11 font-medium text-tertiary">
{projectIdentifier}-{issue.sequence_id}
</div>
)}
@ -77,7 +77,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
id={`issue-${issue.id}`}
href={`?${queryParam}`}
onClick={handleIssuePeekOverview}
className="w-full truncate cursor-pointer text-13 text-primary"
className="w-full cursor-pointer truncate text-13 text-primary"
>
<Tooltip tooltipContent={issue.name} position="top-start">
<p className="truncate">{issue.name}</p>
@ -87,7 +87,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
</div>
<div className="flex shrink-0 items-center gap-2">
<IssueProperties
className="relative flex flex-wrap md:grow md:shrink-0 items-center gap-2 whitespace-nowrap"
className="relative flex flex-wrap items-center gap-2 whitespace-nowrap md:shrink-0 md:grow"
issue={issue}
displayProperties={displayProperties}
/>

4
apps/space/core/components/issues/issue-layouts/list/default.tsx
View file

@ -65,12 +65,12 @@ export const List = observer(function List(props: IList) {
if (!groupList) return null;
return (
<div className="relative size-full flex flex-col">
<div className="relative flex size-full flex-col">
{groupList && (
<>
<div
ref={containerRef}
className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
className="vertical-scrollbar vertical-scrollbar-margin-top-md relative scrollbar-lg size-full overflow-auto"
>
{groupList.map((group) => (
<ListGroup

8
apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
View file

@ -21,16 +21,16 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
return (
<>
<div
className="group/list-header relative w-full shrink-0 flex items-center gap-2 py-1.5 hover:bg-layer-transparent-hover px-2 py-1"
className="group/list-header relative flex w-full shrink-0 items-center gap-2 px-2 py-1 py-1.5 hover:bg-layer-transparent-hover"
onClick={() => toggleListGroup(groupID)}
role="button"
>
<div className="shrink-0 size-3.5 grid place-items-center overflow-hidden">
<div className="grid size-3.5 shrink-0 place-items-center overflow-hidden">
{icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
</div>
<div className="relative flex w-full items-center gap-1 overflow-hidden cursor-pointer">
<div className="inline-block line-clamp-1 truncate font-medium text-primary">{title}</div>
<div className="relative flex w-full cursor-pointer items-center gap-1 overflow-hidden">
<div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
<div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
</div>
</div>

10
apps/space/core/components/issues/issue-layouts/list/list-group.tsx
View file

@ -47,15 +47,15 @@ const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
ref: React.ForwardedRef<HTMLDivElement>
) {
return (
<div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-subtle">
<div ref={ref} className="flex h-11 items-center justify-between border-b border-subtle p-3">
<div className="flex items-center gap-3">
<span className="h-5 w-10 bg-layer-1 rounded-sm animate-pulse" />
<span className={`h-5 w-52 bg-layer-1 rounded-sm animate-pulse`} />
<span className="h-5 w-10 animate-pulse rounded-sm bg-layer-1" />
<span className={`h-5 w-52 animate-pulse rounded-sm bg-layer-1`} />
</div>
<div className="flex items-center gap-2">
{[...Array(6)].map((_, index) => (
<Fragment key={index}>
<span key={index} className="h-5 w-5 bg-layer-1 rounded-sm animate-pulse" />
<span key={index} className="h-5 w-5 animate-pulse rounded-sm bg-layer-1" />
</Fragment>
))}
</div>
@ -100,7 +100,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
) : (
<div
className={
"h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
"relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-6 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
}
onClick={() => loadMoreIssues(group.id)}
role="button"

2
apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -143,7 +143,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
className={cn(
"flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
{
"hover:bg-layer-1 cursor-pointer": issue.sub_issues_count,
"cursor-pointer hover:bg-layer-1": issue.sub_issues_count,
}
)}
>

6
apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
View file

@ -27,13 +27,13 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
<Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? "No Cycle"}>
<div
className={cn(
"flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11 duration-300 focus:outline-none",
"flex h-full w-full items-center justify-between gap-1 rounded-sm px-2.5 py-1 text-11 duration-300 focus:outline-none",
{ "border-[0.5px] border-strong": shouldShowBorder }
)}
>
<div className="flex w-full items-center text-11 gap-1.5">
<div className="flex w-full items-center gap-1.5 text-11">
<CycleIcon className="h-3 w-3 flex-shrink-0" />
<div className="max-w-40 truncate ">{cycle?.name ?? "No Cycle"}</div>
<div className="max-w-40 truncate">{cycle?.name ?? "No Cycle"}</div>
</div>
</div>
</Tooltip>

7
apps/space/core/components/issues/issue-layouts/properties/labels.tsx
View file

@ -27,7 +27,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
return (
<Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
<div
className={`flex h-full items-center justify-center gap-2 rounded-sm px-2.5 py-1 text-11 border-[0.5px] border-strong`}
className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
>
<LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
{shouldShowLabel && <span>No Labels</span>}
@ -43,7 +43,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
<Tooltip key={label.id} position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
<div
key={label?.id}
className={`flex overflow-hidden h-full max-w-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
className={`flex h-full max-w-full flex-shrink-0 items-center overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
>
<div className="flex max-w-full items-center gap-1.5 overflow-hidden text-secondary">
<span
@ -60,8 +60,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
</>
) : (
<div
className={`flex h-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11 cursor-not-allowed"
`}
className={`cursor-not-allowed" flex h-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
>
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelsString}>
<div className="flex h-full items-center gap-1.5 text-secondary">

4
apps/space/core/components/issues/issue-layouts/properties/member.tsx
View file

@ -56,7 +56,7 @@ export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps)
return Icon ? (
<Icon className="h-3 w-3 flex-shrink-0" />
) : (
<MembersPropertyIcon className="h-3 w-3 mx-[4px] flex-shrink-0" />
<MembersPropertyIcon className="mx-[4px] h-3 w-3 flex-shrink-0" />
);
});
@ -66,7 +66,7 @@ export const IssueBlockMembers = observer(function IssueBlockMembers({ memberIds
const members = getMembersByIds(memberIds);
return (
<div className="relative h-full flex flex-wrap items-center gap-1">
<div className="relative flex h-full flex-wrap items-center gap-1">
<div
className={cn("flex flex-shrink-0 cursor-default items-center rounded-md text-11", {
"border-[0.5px] border-strong px-2.5 py-1": shouldShowBorder && !members?.length,

2
apps/space/core/components/issues/issue-layouts/properties/priority.tsx
View file

@ -38,7 +38,7 @@ export function IssueBlockPriority({
<Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
<div
className={cn(
"h-full flex items-center gap-1.5 border-[0.5px] rounded-sm text-11 px-2 py-0.5",
"flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5 text-11",
priorityClasses[priority ?? "none"],
{
// compact the icons if text is hidden

2
apps/space/core/components/issues/navbar/layout-selection.tsx
View file

@ -56,7 +56,7 @@ export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(pro
<Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
<button
type="button"
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all bg-layer-transparent hover:bg-layer-transparent-hover ${
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover ${
activeLayout == layout.key ? "bg-layer-transparent-active hover:bg-layer-transparent-selected" : ""
}`}
onClick={() => handleCurrentBoardView(layout.key)}

4
apps/space/core/components/issues/navbar/root.tsx
View file

@ -23,11 +23,11 @@ export const IssuesNavbarRoot = observer(function IssuesNavbarRoot(props: Props)
const { project_details } = publishSettings;
return (
<div className="relative flex justify-between w-full gap-4 px-5">
<div className="relative flex w-full justify-between gap-4 px-5">
{/* project detail */}
<div className="flex shrink-0 items-center gap-2">
{project_details ? (
<span className="size-7 shrink-0 grid place-items-center">
<span className="grid size-7 shrink-0 place-items-center">
<ProjectLogo logo={project_details.logo_props} className="text-16" />
</span>
) : (

4
apps/space/core/components/issues/navbar/theme.tsx
View file

@ -28,9 +28,9 @@ export const NavbarTheme = observer(function NavbarTheme() {
<button
type="button"
onClick={handleTheme}
className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover text-primary"
className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent text-primary hover:bg-layer-transparent-hover"
>
{appTheme === "light" ? <Moon className="shrink-0 size-3.5" /> : <Sun className="shrink-0 size-3.5" />}
{appTheme === "light" ? <Moon className="size-3.5 shrink-0" /> : <Sun className="size-3.5 shrink-0" />}
</button>
);
});

4
apps/space/core/components/issues/navbar/user-avatar.tsx
View file

@ -93,7 +93,7 @@ export const UserAvatar = observer(function UserAvatar() {
>
<Popover.Panel>
<div
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200 p-1"
className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
@ -104,7 +104,7 @@ export const UserAvatar = observer(function UserAvatar() {
<input type="hidden" name="next_path" value={`${pathName}?${queryParam}`} />
<button
type="submit"
className="flex items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-transparent-hover text-13 min-w-36 cursor-pointer"
className="flex min-w-36 cursor-pointer items-center gap-2 rounded-sm p-2 text-13 whitespace-nowrap hover:bg-layer-transparent-hover"
>
<LogOut size={12} className="shrink-0 text-danger-primary" />
<div>Sign out</div>

14
apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
View file

@ -80,7 +80,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
/>
) : (
<div
className={`grid size-7 place-items-center rounded-full border-2 border-strong-1 bg-gray-500 text-on-color`}
className={`bg-gray-500 grid size-7 place-items-center rounded-full border-2 border-strong-1 text-on-color`}
>
{comment.actor_detail.is_bot
? comment?.actor_detail?.first_name?.charAt(0)
@ -88,7 +88,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
</div>
)}
<span className="absolute -bottom-0.5 -right-1 rounded-tl-sm bg-layer-1 px-0.5 py-px">
<span className="absolute -right-1 -bottom-0.5 rounded-tl-sm bg-layer-1 px-0.5 py-px">
<MessageSquare className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
</span>
</div>
@ -138,13 +138,13 @@ export const CommentCard = observer(function CommentCard(props: Props) {
<button
type="submit"
disabled={isSubmitting}
className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-success-primary"
className="group shadow-md rounded-sm border border-success-strong bg-success-primary p-2 duration-300 hover:bg-success-primary"
>
<CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
</button>
<button
type="button"
className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover"
className="group shadow-md rounded-sm border border-danger-strong bg-danger-primary p-2 duration-300 hover:bg-danger-primary-hover"
onClick={() => setIsEditing(false)}
>
<CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
@ -186,7 +186,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-strong bg-surface-1 p-1 text-11 shadow-lg focus:outline-none">
<Menu.Items className="shadow-lg absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll rounded-md border border-strong bg-surface-1 p-1 text-11 whitespace-nowrap focus:outline-none">
<Menu.Item>
{({ active }) => (
<div className="py-1">
@ -195,7 +195,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
onClick={() => {
setIsEditing(true);
}}
className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-transparent-hover ${
className={`w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none hover:bg-layer-transparent-hover ${
active ? "bg-layer-transparent-hover" : ""
}`}
>
@ -210,7 +210,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
<button
type="button"
onClick={handleDelete}
className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-transparent-hover ${
className={`w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none hover:bg-layer-transparent-hover ${
active ? "bg-layer-transparent-hover" : ""
}`}
>

6
apps/space/core/components/issues/peek-overview/header.tsx
View file

@ -92,14 +92,14 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-strong bg-surface-2 text-11 shadow-lg focus:outline-none">
<Listbox.Options className="shadow-lg absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border border-strong bg-surface-2 text-11 whitespace-nowrap focus:outline-none">
<div className="space-y-1 p-2">
{PEEK_MODES.map((mode) => (
<Listbox.Option
key={mode.key}
value={mode.key}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded-sm px-1 py-1.5 ${
`cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
active ? "bg-layer-transparent-hover" : ""
} ${selected ? "text-primary" : "text-secondary"}`
}
@ -119,7 +119,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
<button
type="button"
onClick={handleCopyLink}
className="shrink-0 focus:outline-none text-tertiary hover:text-secondary"
className="shrink-0 text-tertiary hover:text-secondary focus:outline-none"
tabIndex={1}
>
<LinkIcon className="h-4 w-4 -rotate-45" />

4
apps/space/core/components/issues/peek-overview/issue-activity.tsx
View file

@ -58,8 +58,8 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
</>
) : (
<div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
<p className="flex items-center gap-2 overflow-hidden break-words text-13 text-secondary">
<Lock className="shrink-0 size-3" />
<p className="flex items-center gap-2 overflow-hidden text-13 break-words text-secondary">
<Lock className="size-3 shrink-0" />
Sign in to add your comment
</p>
<Link href={`/?next_path=${pathname}`}>

2
apps/space/core/components/issues/peek-overview/issue-details.tsx
View file

@ -30,7 +30,7 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
<h6 className="text-14 font-medium text-placeholder">
{project_details?.identifier}-{issueDetails?.sequence_id}
</h6>
<h4 className="break-words text-20 font-medium">{issueDetails.name}</h4>
<h4 className="text-20 font-medium break-words">{issueDetails.name}</h4>
{description && description !== "" && description !== "<p></p>" && (
<RichTextEditor
editable={false}

20
apps/space/core/components/issues/peek-overview/issue-properties.tsx
View file

@ -69,31 +69,31 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
</h6>
<div className="flex items-center gap-2">
<button type="button" onClick={handleCopyLink} className="-rotate-45">
<LinkIcon className="shrink-0 size-3.5" />
<LinkIcon className="size-3.5 shrink-0" />
</button>
</div>
</div>
)}
<div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
<div className="flex items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
<div className="flex h-8 items-center gap-3">
<div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
<StatePropertyIcon className="size-4 flex-shrink-0" />
<span>State</span>
</div>
<div className="w-3/4 flex items-center gap-1.5 py-0.5 text-13">
<div className="flex w-3/4 items-center gap-1.5 py-0.5 text-13">
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
{addSpaceIfCamelCase(state?.name ?? "")}
</div>
</div>
<div className="flex items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
<div className="flex h-8 items-center gap-3">
<div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
<PriorityPropertyIcon className="size-4 flex-shrink-0" />
<span>Priority</span>
</div>
<div className="w-3/4">
<div
className={`inline-flex items-center gap-1.5 rounded-sm px-2.5 py-0.5 text-left text-13 capitalize bg-layer-2 ${
className={`inline-flex items-center gap-1.5 rounded-sm bg-layer-2 px-2.5 py-0.5 text-left text-13 capitalize ${
priority?.key === "urgent"
? "border-priority-urgent text-priority-urgent"
: priority?.key === "high"
@ -111,8 +111,8 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
</div>
</div>
<div className="flex items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary">
<div className="flex h-8 items-center gap-3">
<div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
<DueDatePropertyIcon className="size-4 flex-shrink-0" />
<span>Due date</span>
</div>
@ -127,7 +127,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
{renderFormattedDate(issueDetails.target_date)}
</div>
) : (
<span className="text-secondary text-13">Empty</span>
<span className="text-13 text-secondary">Empty</span>
)}
</div>
</div>

4
apps/space/core/components/issues/peek-overview/layout.tsx
View file

@ -74,7 +74,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-surface-1 shadow-raised-200 border-l border-subtle-1">
<Dialog.Panel className="fixed top-0 right-0 z-20 h-full w-1/2 border-l border-subtle-1 bg-surface-1 shadow-raised-200">
<SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
</Dialog.Panel>
</Transition.Child>
@ -104,7 +104,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
>
<Dialog.Panel>
<div
className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-1 transition-all duration-300 ${
className={`fixed top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-1 transition-all duration-300 ${
peekMode === "modal" ? "h-[70%] w-3/5" : "size-[95%]"
}`}
>

8
apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
View file

@ -106,7 +106,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
else router.push(`/?next_path=${pathName}?${queryParam}`);
}}
className={cn(
"flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border focus:outline-none hover:bg-layer-transparent-hover",
"flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border hover:bg-layer-transparent-hover focus:outline-none",
votingDimensions,
{
"border-accent-strong-200 text-accent-secondary": isUpVotedByUser,
@ -115,7 +115,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
}
)}
>
<ArrowUp className="shrink-0 size-3.5" />
<ArrowUp className="size-3.5 shrink-0" />
<span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
</button>
</Tooltip>
@ -147,7 +147,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
else router.push(`/?next_path=${pathName}?${queryParam}`);
}}
className={cn(
"flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border focus:outline-none hover:bg-layer-transparent-hover",
"flex items-center justify-center gap-x-1 overflow-hidden rounded-sm border hover:bg-layer-transparent-hover focus:outline-none",
votingDimensions,
{
"border-danger-strong text-danger-primary": isDownVotedByUser,
@ -156,7 +156,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
}
)}
>
<ArrowDown className="shrink-0 size-3.5" />
<ArrowDown className="size-3.5 shrink-0" />
<span className="text-13 font-regular transition-opacity ease-in-out">{allDownVotes.length}</span>
</button>
</Tooltip>

2
apps/space/core/components/ui/not-found.tsx
View file

@ -13,7 +13,7 @@ export function PageNotFound() {
<div className="grid h-full place-items-center p-4">
<div className="space-y-8 text-center">
<div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
<img src={Image404} alt="404- Page not found" className="w-full h-full object-contain" />
<img src={Image404} alt="404- Page not found" className="h-full w-full object-contain" />
</div>
<div className="space-y-2">
<h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>

2
apps/space/core/components/views/auth.tsx
View file

@ -12,7 +12,7 @@ import { AuthHeader } from "./header";
export function AuthView() {
return (
<div className="bg-surface-1 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 bg-surface-1 px-8 pt-6 pb-10">
<AuthHeader />
<AuthRoot />
<PoweredBy />

2
apps/space/core/components/views/header.tsx
View file

@ -10,7 +10,7 @@ import { PlaneLockup } from "@plane/propel/icons";
export function AuthHeader() {
return (
<div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
<div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
<Link href="/">
<PlaneLockup height={20} width={95} className="text-primary" />
</Link>

10
apps/space/core/lib/instance-provider.tsx
View file

@ -41,7 +41,7 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
if (!instance && !error)
return (
<div className="flex items-center justify-center h-screen w-full">
<div className="flex h-screen w-full items-center justify-center">
<LogoSpinner />
</div>
);
@ -49,8 +49,8 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
if (error) {
return (
<div className="relative">
<div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
<div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
<div className="flex h-screen w-full flex-col overflow-hidden overflow-y-auto">
<div className="z-50 container mx-auto flex h-[110px] flex-shrink-0 items-center justify-between gap-5 px-5 lg:px-0">
<div className="flex items-center gap-x-2 py-10">
<Link href={`${SPACE_BASE_PATH}/`}>
<PlaneLockup className="h-7 w-auto text-primary" />
@ -58,10 +58,10 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
</div>
</div>
<div className="absolute inset-0 z-0">
<img src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
<img src={patternBackground} className="h-full w-screen object-cover" alt="Plane background pattern" />
</div>
<div className="relative z-10 flex-grow">
<div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
<div className="relative mx-auto flex h-full w-full items-center justify-center overflow-y-auto px-6 py-10">
<InstanceFailureView />
</div>
</div>

8
apps/space/helpers/authentication.helper.tsx
View file

@ -129,7 +129,7 @@ const errorCodeMessages: {
<div>
Your account is already registered.&nbsp;
<Link
className="underline underline-offset-4 font-medium hover:font-bold transition-all"
className="font-medium underline underline-offset-4 transition-all hover:font-bold"
href={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
>
Sign In
@ -171,7 +171,7 @@ const errorCodeMessages: {
<div>
No account found.&nbsp;
<Link
className="underline underline-offset-4 font-medium hover:font-bold transition-all"
className="font-medium underline underline-offset-4 transition-all hover:font-bold"
href={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
>
Create one
@ -317,7 +317,7 @@ const errorCodeMessages: {
message: () => (
<div>
Admin user already exists.&nbsp;
<Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
<Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
Sign In
</Link>
&nbsp;now.
@ -329,7 +329,7 @@ const errorCodeMessages: {
message: () => (
<div>
Admin user does not exist.&nbsp;
<Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
<Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
Sign In
</Link>
&nbsp;now.

4
apps/space/package.json
View file

@ -12,9 +12,9 @@
"clean": "rm -rf .turbo && rm -rf .next && rm -rf .react-router && rm -rf node_modules && rm -rf dist && rm -rf build",
"check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=932",
"check:types": "react-router typegen && tsc --noEmit",
"check:format": "prettier . --cache --check",
"check:format": "oxfmt --check .",
"fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=932",
"fix:format": "prettier . --cache --write"
"fix:format": "oxfmt ."
},
"dependencies": {
"@bprogress/core": "catalog:",

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