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

14
.prettierrc → .oxfmtrc.json
View file

@ -1,5 +1,11 @@
{ {
"$schema": "https://json.schemastore.org/prettierrc", "printWidth": 120,
"tabWidth": 2,
"trailingComma": "es5",
"sortTailwindcss": {
"stylesheet": "packages/tailwind-config/index.css",
"functions": ["cn", "clsx", "cva"]
},
"overrides": [ "overrides": [
{ {
"files": ["packages/codemods/**/*"], "files": ["packages/codemods/**/*"],
@ -7,9 +13,5 @@
"printWidth": 80 "printWidth": 80
} }
} }
], ]
"plugins": ["@prettier/plugin-oxc"],
"printWidth": 120,
"tabWidth": 2,
"trailingComma": "es5"
} }

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

@ -120,16 +120,16 @@ export function InstanceAIForm(props: IInstanceAIForm) {
</div> </div>
</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}> <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
{isSubmitting ? "Saving" : "Save changes"} {isSubmitting ? "Saving" : "Save changes"}
</Button> </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" /> <Lightbulb className="size-4" />
<div> <div>
If you have a preferred AI models vendor, please get in{" "} 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. touch with us.
</a> </a>
</div> </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 className="space-y-8">
<Loader.Item height="50px" width="40%" /> <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" />
<Loader.Item height="50px" /> <Loader.Item height="50px" />
</div> </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)} handleClose={() => setIsDiscardChangesModalOpen(false)}
/> />
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full"> <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1"> <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> <div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
{GITEA_FORM_FIELDS.map((field) => ( {GITEA_FORM_FIELDS.map((field) => (
<ControllerInput <ControllerInput
@ -211,7 +211,7 @@ export function InstanceGiteaConfigForm(props: Props) {
</div> </div>
</div> </div>
<div className="col-span-2 md:col-span-1"> <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> <div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
{GITEA_SERVICE_FIELD.map((field) => ( {GITEA_SERVICE_FIELD.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} /> <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)} handleClose={() => setIsDiscardChangesModalOpen(false)}
/> />
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full"> <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1"> <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> <div className="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
{GITHUB_FORM_FIELDS.map((field) => ( {GITHUB_FORM_FIELDS.map((field) => (
<ControllerInput <ControllerInput
@ -231,24 +231,24 @@ export function InstanceGithubConfigForm(props: Props) {
</div> </div>
</div> </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="pt-2 text-18 font-medium">Plane-provided details for GitHub</div>
<div className="flex flex-col gap-y-4"> <div className="flex flex-col gap-y-4">
{/* common service details */} {/* 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) => ( {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} /> <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))} ))}
</div> </div>
{/* web service details */} {/* web service details */}
<div className="flex flex-col rounded-lg overflow-hidden"> <div className="flex flex-col overflow-hidden rounded-lg">
<div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary"> <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
<Monitor className="w-3 h-3" /> <Monitor className="h-3 w-3" />
Web Web
</div> </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) => ( {GITHUB_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} /> <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)} handleClose={() => setIsDiscardChangesModalOpen(false)}
/> />
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full"> <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1"> <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> <div className="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</div>
{GITLAB_FORM_FIELDS.map((field) => ( {GITLAB_FORM_FIELDS.map((field) => (
<ControllerInput <ControllerInput
@ -215,7 +215,7 @@ export function InstanceGitlabConfigForm(props: Props) {
</div> </div>
</div> </div>
<div className="col-span-2 md:col-span-1"> <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> <div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
{GITLAB_SERVICE_FIELD.map((field) => ( {GITLAB_SERVICE_FIELD.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} /> <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)} handleClose={() => setIsDiscardChangesModalOpen(false)}
/> />
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full"> <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
<div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1"> <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> <div className="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
{GOOGLE_FORM_FIELDS.map((field) => ( {GOOGLE_FORM_FIELDS.map((field) => (
<ControllerInput <ControllerInput
@ -219,24 +219,24 @@ export function InstanceGoogleConfigForm(props: Props) {
</div> </div>
</div> </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="pt-2 text-18 font-medium">Plane-provided details for Google</div>
<div className="flex flex-col gap-y-4"> <div className="flex flex-col gap-y-4">
{/* common service details */} {/* 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) => ( {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} /> <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
))} ))}
</div> </div>
{/* web service details */} {/* web service details */}
<div className="flex flex-col rounded-lg overflow-hidden"> <div className="flex flex-col overflow-hidden rounded-lg">
<div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary"> <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
<Monitor className="w-3 h-3" /> <Monitor className="h-3 w-3" />
Web Web
</div> </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) => ( {GOOGLE_SERVICE_DETAILS.map((field) => (
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} /> <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 ? ( {formattedConfig ? (
<div className="space-y-3"> <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="flex grow items-center gap-4">
<div className="grow"> <div className="grow">
<div className="text-16 font-medium pb-1">Allow anyone to sign up even without an invite</div> <div className="pb-1 text-16 font-medium">Allow anyone to sign up even without an invite</div>
<div className={cn("font-regular leading-5 text-tertiary text-11")}> <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
Toggling this off will only let users sign up when they are invited. Toggling this off will only let users sign up when they are invited.
</div> </div>
</div> </div>
@ -143,7 +143,7 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
</div> </div>
</div> </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) => ( {authenticationModes.map((method) => (
<AuthenticationMethodCard <AuthenticationMethodCard
key={method.key} 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> </CustomSelect>
</div> </div>
</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="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="mr-8 flex items-center gap-10 pt-4">
<div className="grow"> <div className="grow">
@ -207,7 +207,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
</div> </div>
</div> </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 <Button
variant="primary" variant="primary"
size="lg" 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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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"> <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 font-medium leading-6 text-primary"> <h3 className="text-16 leading-6 font-medium text-primary">
{sendEmailStep === ESendEmailSteps.SEND_EMAIL {sendEmailStep === ESendEmailSteps.SEND_EMAIL
? "Send test email" ? "Send test email"
: sendEmailStep === ESendEmailSteps.SUCCESS : sendEmailStep === ESendEmailSteps.SUCCESS
@ -121,7 +121,7 @@ export function SendTestEmailModal(props: Props) {
</div> </div>
)} )}
{sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</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}> <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
{sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"} {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
</Button> </Button>

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

@ -112,18 +112,18 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
</div> </div>
<div className="space-y-6"> <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} /> <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
<div className="flex items-center gap-14"> <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="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" /> <Telescope className="size-5 text-tertiary" />
</div> </div>
</div> </div>
<div className="grow"> <div className="grow">
<div className="text-13 font-medium text-primary leading-5">Let Plane collect anonymous usage data</div> <div className="text-13 leading-5 font-medium text-primary">Let Plane collect anonymous usage data</div>
<div className="text-11 font-regular text-tertiary leading-5"> <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 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
in line with{" "} in line with{" "}
<a <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 ( return (
<> <>
<div className="flex items-center gap-14"> <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="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">
<MessageSquare className="size-5 text-tertiary p-0.5" /> <MessageSquare className="size-5 p-0.5 text-tertiary" />
</div> </div>
</div> </div>
<div className="grow"> <div className="grow">
<div className="text-13 font-medium text-primary leading-5">Chat with us</div> <div className="text-13 leading-5 font-medium text-primary">Chat with us</div>
<div className="text-11 font-regular text-tertiary leading-5"> <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 Let your users chat with us via Intercom or another service. Toggling Telemetry off turns this off
automatically. automatically.
</div> </div>

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

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

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

@ -39,14 +39,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
const getSidebarMenuItems = () => ( const getSidebarMenuItems = () => (
<Menu.Items <Menu.Items
className={cn( 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, "left-4": isSidebarCollapsed,
} }
)} )}
> >
<div className="flex flex-col gap-2.5 pb-2"> <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>
<div className="py-2"> <div className="py-2">
<Menu.Item <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 ( return (
<div <div
className={cn( 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}> <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
<a <a
href={redirectionLink} 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} /> <NewTabIcon width={14} height={14} />
{!isSidebarCollapsed && "Redirect to Plane"} {!isSidebarCollapsed && "Redirect to Plane"}
@ -101,9 +101,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<div <div
className={`absolute bottom-2 min-w-[10rem] z-[15] ${ className={`absolute bottom-2 z-[15] min-w-[10rem] ${
isSidebarCollapsed ? "left-full" : "-left-[75px]" 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} ref={helpOptionsRef}
> >
<div className="space-y-1 pb-2"> <div className="space-y-1 pb-2">
@ -134,7 +134,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
); );
})} })}
</div> </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> </div>
</Transition> </Transition>
</div> </div>

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

@ -29,7 +29,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
}; };
return ( 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) => { {sidebarMenu.map((item, index) => {
const isActive = item.href === pathName || pathName?.includes(item.href); const isActive = item.href === pathName || pathName?.includes(item.href);
return ( return (
@ -38,9 +38,9 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
<Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}> <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
<div <div
className={cn( 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, "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
}, },
isSidebarCollapsed ? "justify-center" : "w-[260px]" 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" />} {<item.Icon className="h-4 w-4 flex-shrink-0" />}
{!isSidebarCollapsed && ( {!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-body-xs-medium transition-colors`)}>{item.name}</div>
<div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div> <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
</div> </div>

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

@ -44,13 +44,7 @@ export const AdminSidebar = observer(function AdminSidebar() {
return ( return (
<div <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 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]"} `}
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]"}
`}
> >
<div ref={ref} className="flex h-full w-full flex-1 flex-col"> <div ref={ref} className="flex h-full w-full flex-1 flex-col">
<AdminSidebarDropdown /> <AdminSidebarDropdown />

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

@ -123,8 +123,8 @@ export function WorkspaceCreateForm() {
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4> <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"> <div className="flex w-full items-center gap-0.5 rounded-md border-[0.5px] border-subtle px-3">
<span className="whitespace-nowrap text-13 text-secondary">{workspaceBaseURL}</span> <span className="text-13 whitespace-nowrap text-secondary">{workspaceBaseURL}</span>
<Controller <Controller
control={control} control={control}
name="slug" name="slug"
@ -188,7 +188,7 @@ export function WorkspaceCreateForm() {
</div> </div>
</div> </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 <Button
variant="primary" variant="primary"
size="lg" 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"> <div className="space-y-3">
{formattedConfig ? ( {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="flex grow items-center gap-4">
<div className="grow"> <div className="grow">
<div className="text-16 font-medium pb-1">Prevent anyone else from creating a workspace.</div> <div className="pb-1 text-16 font-medium">Prevent anyone else from creating a workspace.</div>
<div className={cn("font-regular leading-5 text-tertiary text-11")}> <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. Toggling this on will let only you create workspaces. You will have to invite users to new workspaces.
</div> </div>
</div> </div>
@ -116,15 +116,15 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
)} )}
{workspaceLoader !== "init-loader" ? ( {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 flex-col items-start gap-x-2">
<div className="flex items-center gap-2 text-16 font-medium"> <div className="flex items-center gap-2 text-16 font-medium">
All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span> All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
{workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && ( {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
<LoaderIcon className="w-4 h-4 animate-spin" /> <LoaderIcon className="h-4 w-4 animate-spin" />
)} )}
</div> </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 You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
Member. Member.
</div> </div>
@ -149,7 +149,7 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
disabled={workspaceLoader === "pagination"} disabled={workspaceLoader === "pagination"}
> >
Load more Load more
{workspaceLoader === "pagination" && <LoaderIcon className="w-3 h-3 animate-spin" />} {workspaceLoader === "pagination" && <LoaderIcon className="h-3 w-3 animate-spin" />}
</Button> </Button>
</div> </div>
)} )}

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

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

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

@ -50,7 +50,7 @@ const errorCodeMessages: {
message: () => ( message: () => (
<div> <div>
Admin user already exists.&nbsp; 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 Sign In
</Link> </Link>
&nbsp;now. &nbsp;now.
@ -62,7 +62,7 @@ const errorCodeMessages: {
message: () => ( message: () => (
<div> <div>
Admin user does not exist.&nbsp; 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 Sign In
</Link> </Link>
&nbsp;now. &nbsp;now.

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

@ -22,7 +22,7 @@ function RootLayout() {
}, [replace, isUserLoggedIn]); }, [replace, isUserLoggedIn]);
return ( 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 /> <Outlet />
</div> </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 is not fetched, show loading
if (!instance && !error) { if (!instance && !error) {
return ( return (
<div className="flex items-center justify-center h-screen w-full"> <div className="flex h-screen w-full items-center justify-center">
<LogoSpinner /> <LogoSpinner />
</div> </div>
); );

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

@ -111,8 +111,8 @@ export function InstanceSignInForm() {
return ( return (
<> <>
<AuthHeader /> <AuthHeader />
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10"> <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full"> <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
<FormHeader <FormHeader
heading="Manage your Plane instance" heading="Manage your Plane instance"
subHeading="Configure instance-wide settings to secure your instance" subHeading="Configure instance-wide settings to secure your instance"
@ -134,7 +134,7 @@ export function InstanceSignInForm() {
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} /> <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="w-full space-y-1"> <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> Email <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
@ -152,7 +152,7 @@ export function InstanceSignInForm() {
</div> </div>
<div className="w-full space-y-1"> <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> Password <span className="text-danger-primary">*</span>
</label> </label>
<div className="relative"> <div className="relative">
@ -170,7 +170,7 @@ export function InstanceSignInForm() {
{showPassword ? ( {showPassword ? (
<button <button
type="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)} onClick={() => setShowPassword(false)}
> >
<EyeOff className="h-4 w-4" /> <EyeOff className="h-4 w-4" />
@ -178,7 +178,7 @@ export function InstanceSignInForm() {
) : ( ) : (
<button <button
type="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)} onClick={() => setShowPassword(true)}
> >
<Eye className="h-4 w-4" /> <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() { export default function Root() {
return ( return (
<div className="bg-canvas min-h-screen"> <div className="min-h-screen bg-canvas">
<Outlet /> <Outlet />
</div> </div>
); );

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

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

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

@ -16,12 +16,12 @@ export function Banner(props: TBanner) {
return ( return (
<div <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 items-center justify-center">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{type === "error" ? ( {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" /> <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
</span> </span>
) : ( ) : (

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

@ -22,12 +22,12 @@ export function BreadcrumbLink(props: Props) {
{href ? ( {href ? (
<Link className="flex items-center gap-1 text-13 font-medium text-tertiary hover:text-primary" href={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>} {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> </Link>
) : ( ) : (
<div className="flex cursor-default items-center gap-1 text-13 font-medium text-primary"> <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>} {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>
)} )}
</div> </div>

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

@ -16,9 +16,9 @@ export function CodeBlock({ children, className, darkerShade }: TProps) {
return ( return (
<span <span
className={cn( 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 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" 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]"> <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="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left"> <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 You have unsaved changes
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className="mt-2">
@ -60,7 +60,7 @@ export function ConfirmDiscardModal(props: Props) {
</div> </div>
</div> </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}> <Button variant="secondary" size="lg" onClick={handleClose}>
Keep editing Keep editing
</Button> </Button>

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

@ -67,7 +67,7 @@ export function ControllerInput(props: Props) {
(showPassword ? ( (showPassword ? (
<button <button
tabIndex={-1} 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)} onClick={() => setShowPassword(false)}
> >
<EyeOff className="h-4 w-4" /> <EyeOff className="h-4 w-4" />
@ -75,7 +75,7 @@ export function ControllerInput(props: Props) {
) : ( ) : (
<button <button
tabIndex={-1} 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)} onClick={() => setShowPassword(true)}
> >
<Eye className="h-4 w-4" /> <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 h-full w-full items-center justify-center`}>
<div className="flex w-full flex-col items-center text-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"} />} {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>} {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{primaryButton && ( {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(); const { isSidebarCollapsed, toggleSidebar } = useTheme();
return ( return (
<button <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)} 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> </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 <></>; if (!isNewUserPopup) return <></>;
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="flex gap-4">
<div className="grow"> <div className="grow">
<div className="text-14 font-semibold">Create workspace</div> <div className="text-14 font-semibold">Create workspace</div>
@ -41,7 +41,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
</Button> </Button>
</div> </div>
</div> </div>
<div className="shrink-0 flex items-center justify-center"> <div className="flex shrink-0 items-center justify-center">
<img <img
src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight} src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
height={80} height={80}

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

@ -24,25 +24,25 @@ export const PageWrapper = (props: TPageWrapperProps) => {
return ( return (
<div <div
className={cn("mx-auto w-full h-full space-y-6 py-4", { className={cn("mx-auto h-full w-full space-y-6 py-4", {
"md:px-4 max-w-[1000px] 2xl:max-w-[1200px]": size === "md", "max-w-[1000px] md:px-4 2xl:max-w-[1200px]": size === "md",
"px-4 lg:px-12": size === "lg", "px-4 lg:px-12": size === "lg",
})} })}
> >
{customHeader ? ( {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 && ( 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={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
<div className="text-primary text-h5-semibold">{header.title}</div> <div className="text-h5-semibold text-primary">{header.title}</div>
<div className="text-secondary text-body-sm-regular">{header.description}</div> <div className="text-body-sm-regular text-secondary">{header.description}</div>
</div> </div>
{header.actions && <div className="shrink-0">{header.actions}</div>} {header.actions && <div className="shrink-0">{header.actions}</div>}
</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} {children}
</div> </div>
</div> </div>

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

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

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

@ -7,8 +7,8 @@
export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) { export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
return ( return (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="text-20 font-semibold text-primary leading-7">{heading}</span> <span className="text-20 leading-7 font-semibold text-primary">{heading}</span>
<span className="text-16 font-semibold text-placeholder leading-7">{subHeading}</span> <span className="text-16 leading-7 font-semibold text-placeholder">{subHeading}</span>
</div> </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() { export function InstanceNotReady() {
return ( return (
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center"> <div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
<div className="w-auto max-w-2xl relative space-y-8 py-10"> <div className="relative w-auto max-w-2xl space-y-8 py-10">
<div className="relative flex flex-col justify-center items-center space-y-4"> <div className="relative flex flex-col items-center justify-center space-y-4">
<h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1> <h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
<img src={PlaneTakeOffImage} alt="Plane Logo" /> <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>
<div> <div>

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

@ -139,8 +139,8 @@ export function InstanceSetupForm() {
return ( return (
<> <>
<AuthHeader /> <AuthHeader />
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10"> <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full"> <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
<FormHeader <FormHeader
heading="Setup your Plane Instance" heading="Setup your Plane Instance"
subHeading="Post setup you will be able to manage this 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="csrfmiddlewaretoken" value={csrfToken} />
<input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} /> <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"> <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> First name <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
@ -185,7 +185,7 @@ export function InstanceSetupForm() {
/> />
</div> </div>
<div className="w-full space-y-1"> <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> Last name <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
@ -209,7 +209,7 @@ export function InstanceSetupForm() {
</div> </div>
<div className="w-full space-y-1"> <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> Email <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
@ -230,7 +230,7 @@ export function InstanceSetupForm() {
</div> </div>
<div className="w-full space-y-1"> <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> Company name <span className="text-danger-primary">*</span>
</label> </label>
<Input <Input
@ -252,7 +252,7 @@ export function InstanceSetupForm() {
</div> </div>
<div className="w-full space-y-1"> <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> Set a password <span className="text-danger-primary">*</span>
</label> </label>
<div className="relative"> <div className="relative">
@ -274,7 +274,7 @@ export function InstanceSetupForm() {
<button <button
type="button" type="button"
tabIndex={-1} 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")} onClick={() => handleShowPassword("password")}
> >
<EyeOff className="h-4 w-4" /> <EyeOff className="h-4 w-4" />
@ -283,7 +283,7 @@ export function InstanceSetupForm() {
<button <button
type="button" type="button"
tabIndex={-1} 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")} onClick={() => handleShowPassword("password")}
> >
<Eye className="h-4 w-4" /> <Eye className="h-4 w-4" />
@ -297,7 +297,7 @@ export function InstanceSetupForm() {
</div> </div>
<div className="w-full space-y-1"> <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> Confirm password <span className="text-danger-primary">*</span>
</label> </label>
<div className="relative"> <div className="relative">
@ -318,7 +318,7 @@ export function InstanceSetupForm() {
<button <button
type="button" type="button"
tabIndex={-1} 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")} onClick={() => handleShowPassword("retypePassword")}
> >
<EyeOff className="h-4 w-4" /> <EyeOff className="h-4 w-4" />
@ -327,7 +327,7 @@ export function InstanceSetupForm() {
<button <button
type="button" type="button"
tabIndex={-1} 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")} onClick={() => handleShowPassword("retypePassword")}
> >
<Eye className="h-4 w-4" /> <Eye className="h-4 w-4" />
@ -344,21 +344,21 @@ export function InstanceSetupForm() {
<div className="relative flex gap-2"> <div className="relative flex gap-2">
<div> <div>
<Checkbox <Checkbox
className="w-4 h-4" className="h-4 w-4"
iconClassName="w-3 h-3" iconClassName="w-3 h-3"
id="is_telemetry_enabled" id="is_telemetry_enabled"
onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)} onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
checked={formData.is_telemetry_enabled} checked={formData.is_telemetry_enabled}
/> />
</div> </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.{" "} Allow Plane to anonymously collect usage events.{" "}
<a <a
tabIndex={-1} tabIndex={-1}
href="https://developers.plane.so/self-hosting/telemetry" href="https://developers.plane.so/self-hosting/telemetry"
target="_blank" target="_blank"
rel="noopener noreferrer" 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 See More
</a> </a>

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

@ -30,19 +30,19 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
key={workspaceId} key={workspaceId}
href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`} href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
target="_blank" 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" rel="noreferrer"
> >
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<span <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 && "rounded-lg bg-accent-primary text-on-color"
}`} }`}
> >
{workspace?.logo_url && workspace.logo_url !== "" ? ( {workspace?.logo_url && workspace.logo_url !== "" ? (
<img <img
src={getFileURL(workspace.logo_url)} 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" alt="Workspace Logo"
/> />
) : ( ) : (
@ -50,7 +50,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
)} )}
</span> </span>
<div className="flex flex-col items-start gap-1"> <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>/ <h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
<Tooltip tooltipContent="The unique URL of your workspace"> <Tooltip tooltipContent="The unique URL of your workspace">
<h4 className="text-13 text-tertiary">[{workspace.slug}]</h4> <h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
@ -58,14 +58,14 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
</div> </div>
{workspace.owner.email && ( {workspace.owner.email && (
<div className="flex items-center gap-1 text-11"> <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> <h4 className="text-tertiary">{workspace.owner.email}</h4>
</div> </div>
)} )}
<div className="flex items-center gap-2.5 text-11"> <div className="flex items-center gap-2.5 text-11">
{workspace.total_projects !== null && ( {workspace.total_projects !== null && (
<span className="flex items-center gap-1"> <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> <h4 className="text-tertiary">{workspace.total_projects}</h4>
</span> </span>
)} )}
@ -73,7 +73,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
<> <>
• •
<span className="flex items-center gap-1"> <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> <h4 className="text-tertiary">{workspace.total_members}</h4>
</span> </span>
</> </>

8
apps/admin/package.json
View file

@ -1,9 +1,9 @@
{ {
"name": "admin", "name": "admin",
"description": "Admin UI for Plane",
"version": "1.2.0", "version": "1.2.0",
"license": "AGPL-3.0",
"private": true, "private": true,
"description": "Admin UI for Plane",
"license": "AGPL-3.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "react-router dev --port 3001", "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", "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:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=485",
"check:types": "react-router typegen && tsc --noEmit", "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:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=485",
"fix:format": "prettier . --cache --write" "fix:format": "oxfmt ."
}, },
"dependencies": { "dependencies": {
"@bprogress/core": "catalog:", "@bprogress/core": "catalog:",

12
apps/live/package.json
View file

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

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

@ -13,11 +13,11 @@ function ErrorPage() {
}; };
return ( 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-8 text-center">
<div className="space-y-2"> <div className="space-y-2">
<h3 className="text-16 font-semibold">Yikes! That doesn{"'"}t look good.</h3> <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 That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
details, please write to{" "} details, please write to{" "}
<a href="mailto:support@plane.so" className="text-accent-primary"> <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) { if (!publishSettings && !error) {
return ( 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 /> <LogoSpinner />
</div> </div>
); );
@ -133,10 +133,10 @@ function IssuesLayout(props: Route.ComponentProps) {
return ( return (
<> <>
<div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden"> <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} /> <IssuesNavbarRoot publishSettings={publishSettings} />
</div> </div>
<div className="relative size-full bg-surface-2 overflow-hidden"> <div className="relative size-full overflow-hidden bg-surface-2">
<Outlet /> <Outlet />
</div> </div>
</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() { function NotFound() {
return ( 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="text-center">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full"> <div className="mx-auto grid size-32 place-items-center rounded-full md:size-52">
<div className="size-16 md:size-32 grid place-items-center"> <div className="grid size-16 place-items-center md:size-32">
<img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} /> <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
</div> </div>
</div> </div>
<h1 className="mt-8 md:mt-12 text-18 md:text-24 font-semibold">That didn{"'"}t work</h1> <h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">That didn{"'"}t work</h1>
<p className="mt-2 md:mt-4 text-13 md:text-14"> <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. Check the URL you are entering in the browser{"'"}s address bar and try again.
</p> </p>
</div> </div>

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

@ -35,7 +35,7 @@ const HomePage = observer(function HomePage() {
if (isInitializing) if (isInitializing)
return ( 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 /> <LogoSpinner />
</div> </div>
); );
@ -43,7 +43,7 @@ const HomePage = observer(function HomePage() {
if (currentUser && isAuthenticated) { if (currentUser && isAuthenticated) {
if (nextPath && isValidNextPath(nextPath)) { if (nextPath && isValidNextPath(nextPath)) {
return ( 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 /> <LogoSpinner />
</div> </div>
); );

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

@ -90,7 +90,7 @@ export default function Root() {
export function HydrateFallback() { export function HydrateFallback() {
return ( 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 /> <LogoSpinner />
</div> </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 <></>; if (!bannerData) return <></>;
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="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center"> <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
<Info size={16} className="text-accent-primary" /> <Info size={16} className="text-accent-primary" />
</div> </div>
<div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div> <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
<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)} onClick={() => handleBannerData && handleBannerData(undefined)}
> >
<CloseIcon className="w-4 h-4 flex-shrink-0" /> <CloseIcon className="h-4 w-4 flex-shrink-0" />
</div> </div>
</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 ( return (
<> <>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="text-20 font-semibold text-primary leading-7">{header}</span> <span className="text-20 leading-7 font-semibold text-primary">{header}</span>
<span className="text-20 font-semibold text-placeholder leading-7">{subHeader}</span> <span className="text-20 leading-7 font-semibold text-placeholder">{subHeader}</span>
</div> </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 ( return (
<div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10"> <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
<div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full"> <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
{errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && ( {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
<AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} /> <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 ( return (
<form onSubmit={handleFormSubmit} className="mt-5 space-y-4"> <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
<div className="space-y-1"> <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 Email
</label> </label>
<div <div
className={cn( 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` !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-subtle`
)} )}
onFocus={() => { onFocus={() => {
@ -74,7 +74,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="name@company.com" 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" autoComplete="off"
autoFocus autoFocus
ref={inputRef} ref={inputRef}
@ -89,12 +89,12 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
}} }}
tabIndex={-1} 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> </button>
)} )}
</div> </div>
{emailError?.email && !isFocused && ( {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} /> <CircleAlert height={12} width={12} />
{emailError.email} {emailError.email}
</p> </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"> <label className="text-13 font-medium text-tertiary" htmlFor="email">
Email Email
</label> </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 <Input
id="email" id="email"
name="email" name="email"
@ -133,7 +133,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
value={passwordFormData.email} value={passwordFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)} onChange={(e) => handleFormChange("email", e.target.value)}
placeholder="name@company.com" 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 disabled
/> />
{passwordFormData.email.length > 0 && ( {passwordFormData.email.length > 0 && (
@ -146,7 +146,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
</div> </div>
<div className="space-y-1"> <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"} {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
</label> </label>
<div className="relative flex items-center rounded-md bg-surface-1"> <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} value={passwordFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)} onChange={(e) => handleFormChange("password", e.target.value)}
placeholder="Enter password" 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)} onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)} onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="off" autoComplete="off"
@ -179,7 +179,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
{mode === EAuthModes.SIGN_UP && ( {mode === EAuthModes.SIGN_UP && (
<div className="space-y-1"> <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 Confirm password
</label> </label>
<div className="relative flex items-center rounded-md bg-surface-1"> <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} value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)} onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder="Confirm password" 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)} onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)} onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="off" 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"> <label className="text-13 font-medium text-tertiary" htmlFor="email">
Email Email
</label> </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 <Input
id="email" id="email"
name="email" name="email"
@ -97,7 +97,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
value={uniqueCodeFormData.email} value={uniqueCodeFormData.email}
onChange={(e) => handleFormChange("email", e.target.value)} onChange={(e) => handleFormChange("email", e.target.value)}
placeholder="name@company.com" 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" autoComplete="off"
disabled disabled
/> />
@ -119,11 +119,11 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
value={uniqueCodeFormData.code} value={uniqueCodeFormData.code}
onChange={(e) => handleFormChange("code", e.target.value)} onChange={(e) => handleFormChange("code", e.target.value)}
placeholder="123456" 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" autoComplete="off"
autoFocus 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"> <p className="flex items-center gap-1 font-medium text-success-primary">
<CircleCheck height={12} width={12} /> <CircleCheck height={12} width={12} />
Paste the code sent to your email 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; const { isSignUp = false } = props;
return ( return (
<span className="flex items-center justify-center py-6"> <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"} {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"> <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> <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; if (!user) return null;
return ( 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"> <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" /> <PlaneLockup className="h-6 w-auto text-primary" />
<UserAvatar /> <UserAvatar />
</div> </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="text-center">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-layer-1"> <div className="mx-auto grid size-32 place-items-center rounded-full bg-layer-1 md:size-52">
<div className="size-16 md:size-32 grid place-items-center"> <div className="grid size-16 place-items-center md:size-32">
<img src={UserLoggedInImage} alt="User already logged in" className="w-full h-full object-cover" /> <img src={UserLoggedInImage} alt="User already logged in" className="h-full w-full object-cover" />
</div> </div>
</div> </div>
<h1 className="mt-8 md:mt-12 text-18 md:text-24 font-semibold">Nice! Just one more step.</h1> <h1 className="mt-8 text-18 font-semibold md:mt-12 md:text-24">Nice! Just one more step.</h1>
<p className="mt-2 md:mt-4 text-13 md:text-14"> <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 Enter the public-share URL or link of the view or Page you are trying to see in the browser{"'"}s address
bar. bar.
</p> </p>

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

@ -21,7 +21,7 @@ export function PoweredBy(props: TPoweredBy) {
return ( return (
<a <a
href={WEBSITE_URL} 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" target="_blank"
rel="noreferrer noopener" 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) { if (!userDetails) {
return ( 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 @deactivated user
</div> </div>
); );
@ -33,7 +33,7 @@ export const EditorUserMention = observer(function EditorUserMention(props: Prop
return ( return (
<div <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, "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 ( 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 <LiteTextEditorWithRef
ref={ref} ref={ref}
disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]} 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" type="button"
onClick={() => executeCommand(item)} onClick={() => executeCommand(item)}
className={cn( 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, "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 ( return (
<div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center"> <div className="relative container mx-auto flex h-screen items-center justify-center overflow-x-hidden overflow-y-auto px-5">
<div className="w-auto max-w-2xl relative space-y-8 py-10"> <div className="relative w-auto max-w-2xl space-y-8 py-10">
<div className="relative flex flex-col justify-center items-center space-y-4"> <div className="relative flex flex-col items-center justify-center space-y-4">
<img src={instanceImage} alt="Plane instance failure image" /> <img src={instanceImage} alt="Plane instance failure image" />
<h3 className="font-medium text-20 text-on-color ">Unable to fetch instance details.</h3> <h3 className="text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
<p className="font-medium text-14 text-center"> <p className="text-center text-14 font-medium">
We were unable to fetch the details of the instance. <br /> We were unable to fetch the details of the instance. <br />
Fret not, it might just be a connectivity work items. Fret not, it might just be a connectivity work items.
</p> </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"> <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> </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"> <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() { export function SomethingWentWrongError() {
return ( 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="text-center">
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full"> <div className="mx-auto grid h-52 w-52 place-items-center rounded-full">
<div className="grid h-32 w-32 place-items-center"> <div className="grid h-32 w-32 place-items-center">
<img <img
src={SomethingWentWrongImage} src={SomethingWentWrongImage}
alt="Oops! Something went wrong" alt="Oops! Something went wrong"
className="w-full h-full object-contain" className="h-full w-full object-contain"
/> />
</div> </div>
</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) { if (getIssueLoader() === "init-loader" || issueCount === undefined) {
return ( return (
<div className="relative size-full grid place-items-center"> <div className="relative grid size-full place-items-center">
<LogoSpinner /> <LogoSpinner />
</div> </div>
); );
} }
if (getGroupIssueCount(undefined, undefined, false) === 0) { 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}</>; 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 ( return (
<IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}> <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
<div <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} ref={scrollableContainerRef}
> >
<div className="relative h-full w-max min-w-full"> <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 <></>; if (!canVote && !canReact) return <></>;
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="flex w-full flex-wrap rounded-b-lg border-t-[1px] border-t-subtle-1 bg-surface-2 outline-transparent">
<div className="py-2 px-3 flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2 px-3 py-2">
{canVote && ( {canVote && (
<div <div
className={cn(`flex items-center gap-2 pr-1`, { 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" /> <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> </div>
</WithDisplayPropertiesHOC> </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}> <Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span> <span>{issue.name}</span>
</Tooltip> </Tooltip>
</div> </div>
<IssueProperties <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} issue={issue}
displayProperties={displayProperties} 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("group/kanban-block relative p-1.5")}>
<div <div
className={cn( 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), "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 ( return (
<div className="relative size-full flex gap-2 px-2"> <div className="relative flex size-full gap-2 px-2">
{groupList?.map((subList) => { {groupList?.map((subList) => {
const groupByVisibilityToggle = visibilityGroupBy(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 ( 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"> <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-xs">
{icon ? icon : <Circle width={14} strokeWidth={2} />} {icon ? icon : <Circle width={14} strokeWidth={2} />}
</div> </div>
<div className="relative flex items-center gap-1 w-full flex-row overflow-hidden"> <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
<div className="line-clamp-1 inline-block overflow-hidden truncate font-medium text-primary">{title}</div> <div className="line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary">{title}</div>
<div className="shrink-0 text-13 font-medium text-tertiary pl-2">{count || 0}</div> <div className="shrink-0 pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
</div> </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; const { icon, title, count, isExpanded, toggleExpanded } = props;
return ( return (
<div <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()} 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"> <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> ref: React.ForwardedRef<HTMLSpanElement>
) { ) {
return ( 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"; KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
@ -96,7 +96,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
<KanbanIssueBlockLoader /> <KanbanIssueBlockLoader />
) : ( ) : (
<div <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} onClick={loadMoreIssuesInThisGroup}
role="button" role="button"
> >
@ -110,7 +110,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
return ( return (
<div <div
id={`${groupId}__${subGroupId}`} 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} ref={columnRef}
> >
<KanbanIssueBlocksList <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 ( return (
<> <>
<div className="flex flex-shrink-0 flex-col"> <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"> <div className="sticky left-0 flex-shrink-0">
<HeaderSubGroupByCard <HeaderSubGroupByCard
icon={group.icon as any} 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 <div
ref={issueRef} ref={issueRef}
className={cn( 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), "border-accent-strong!": getIsIssuePeeked(issue.id),
"last:border-b-transparent": !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 grow items-center gap-0.5 truncate">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{displayProperties && displayProperties?.key && ( {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} {projectIdentifier}-{issue.sequence_id}
</div> </div>
)} )}
@ -77,7 +77,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
id={`issue-${issue.id}`} id={`issue-${issue.id}`}
href={`?${queryParam}`} href={`?${queryParam}`}
onClick={handleIssuePeekOverview} 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"> <Tooltip tooltipContent={issue.name} position="top-start">
<p className="truncate">{issue.name}</p> <p className="truncate">{issue.name}</p>
@ -87,7 +87,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
</div> </div>
<div className="flex shrink-0 items-center gap-2"> <div className="flex shrink-0 items-center gap-2">
<IssueProperties <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} issue={issue}
displayProperties={displayProperties} 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; if (!groupList) return null;
return ( return (
<div className="relative size-full flex flex-col"> <div className="relative flex size-full flex-col">
{groupList && ( {groupList && (
<> <>
<div <div
ref={containerRef} 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) => ( {groupList.map((group) => (
<ListGroup <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 ( return (
<> <>
<div <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)} onClick={() => toggleListGroup(groupID)}
role="button" 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} />} {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
</div> </div>
<div className="relative flex w-full items-center gap-1 overflow-hidden cursor-pointer"> <div className="relative flex w-full cursor-pointer items-center gap-1 overflow-hidden">
<div className="inline-block line-clamp-1 truncate font-medium text-primary">{title}</div> <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 className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
</div> </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> ref: React.ForwardedRef<HTMLDivElement>
) { ) {
return ( 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"> <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-10 animate-pulse rounded-sm bg-layer-1" />
<span className={`h-5 w-52 bg-layer-1 rounded-sm animate-pulse`} /> <span className={`h-5 w-52 animate-pulse rounded-sm bg-layer-1`} />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{[...Array(6)].map((_, index) => ( {[...Array(6)].map((_, index) => (
<Fragment key={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> </Fragment>
))} ))}
</div> </div>
@ -100,7 +100,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
) : ( ) : (
<div <div
className={ 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)} onClick={() => loadMoreIssues(group.id)}
role="button" 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( 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", "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"}> <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? "No Cycle"}>
<div <div
className={cn( 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 } { "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" /> <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>
</div> </div>
</Tooltip> </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 ( return (
<Tooltip position="top" tooltipHeading="Labels" tooltipContent="None"> <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
<div <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} /> <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
{shouldShowLabel && <span>No Labels</span>} {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 ?? ""}> <Tooltip key={label.id} position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
<div <div
key={label?.id} 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"> <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-secondary">
<span <span
@ -60,8 +60,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
</> </>
) : ( ) : (
<div <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}> <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelsString}>
<div className="flex h-full items-center gap-1.5 text-secondary"> <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 ? ( return Icon ? (
<Icon className="h-3 w-3 flex-shrink-0" /> <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); const members = getMembersByIds(memberIds);
return ( 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 <div
className={cn("flex flex-shrink-0 cursor-default items-center rounded-md text-11", { 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, "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 || "")}> <Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
<div <div
className={cn( 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"], priorityClasses[priority ?? "none"],
{ {
// compact the icons if text is hidden // 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)}> <Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
<button <button
type="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" : "" activeLayout == layout.key ? "bg-layer-transparent-active hover:bg-layer-transparent-selected" : ""
}`} }`}
onClick={() => handleCurrentBoardView(layout.key)} 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; const { project_details } = publishSettings;
return ( 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 */} {/* project detail */}
<div className="flex shrink-0 items-center gap-2"> <div className="flex shrink-0 items-center gap-2">
{project_details ? ( {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" /> <ProjectLogo logo={project_details.logo_props} className="text-16" />
</span> </span>
) : ( ) : (

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

@ -28,9 +28,9 @@ export const NavbarTheme = observer(function NavbarTheme() {
<button <button
type="button" type="button"
onClick={handleTheme} 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> </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> <Popover.Panel>
<div <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} ref={setPopperElement}
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
@ -104,7 +104,7 @@ export const UserAvatar = observer(function UserAvatar() {
<input type="hidden" name="next_path" value={`${pathName}?${queryParam}`} /> <input type="hidden" name="next_path" value={`${pathName}?${queryParam}`} />
<button <button
type="submit" 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" /> <LogOut size={12} className="shrink-0 text-danger-primary" />
<div>Sign out</div> <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 <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.is_bot
? comment?.actor_detail?.first_name?.charAt(0) ? comment?.actor_detail?.first_name?.charAt(0)
@ -88,7 +88,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
</div> </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} /> <MessageSquare className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
</span> </span>
</div> </div>
@ -138,13 +138,13 @@ export const CommentCard = observer(function CommentCard(props: Props) {
<button <button
type="submit" type="submit"
disabled={isSubmitting} 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} /> <CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
</button> </button>
<button <button
type="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)} onClick={() => setIsEditing(false)}
> >
<CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} /> <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" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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> <Menu.Item>
{({ active }) => ( {({ active }) => (
<div className="py-1"> <div className="py-1">
@ -195,7 +195,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
onClick={() => { onClick={() => {
setIsEditing(true); 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" : "" active ? "bg-layer-transparent-hover" : ""
}`} }`}
> >
@ -210,7 +210,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
<button <button
type="button" type="button"
onClick={handleDelete} 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" : "" 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" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <div className="space-y-1 p-2">
{PEEK_MODES.map((mode) => ( {PEEK_MODES.map((mode) => (
<Listbox.Option <Listbox.Option
key={mode.key} key={mode.key}
value={mode.key} value={mode.key}
className={({ active, selected }) => 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" : "" active ? "bg-layer-transparent-hover" : ""
} ${selected ? "text-primary" : "text-secondary"}` } ${selected ? "text-primary" : "text-secondary"}`
} }
@ -119,7 +119,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
<button <button
type="button" type="button"
onClick={handleCopyLink} 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} tabIndex={1}
> >
<LinkIcon className="h-4 w-4 -rotate-45" /> <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"> <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"> <p className="flex items-center gap-2 overflow-hidden text-13 break-words text-secondary">
<Lock className="shrink-0 size-3" /> <Lock className="size-3 shrink-0" />
Sign in to add your comment Sign in to add your comment
</p> </p>
<Link href={`/?next_path=${pathname}`}> <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"> <h6 className="text-14 font-medium text-placeholder">
{project_details?.identifier}-{issueDetails?.sequence_id} {project_details?.identifier}-{issueDetails?.sequence_id}
</h6> </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>" && ( {description && description !== "" && description !== "<p></p>" && (
<RichTextEditor <RichTextEditor
editable={false} 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> </h6>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button type="button" onClick={handleCopyLink} className="-rotate-45"> <button type="button" onClick={handleCopyLink} className="-rotate-45">
<LinkIcon className="shrink-0 size-3.5" /> <LinkIcon className="size-3.5 shrink-0" />
</button> </button>
</div> </div>
</div> </div>
)} )}
<div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}> <div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
<div className="flex items-center gap-3 h-8"> <div className="flex h-8 items-center gap-3">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary"> <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
<StatePropertyIcon className="size-4 flex-shrink-0" /> <StatePropertyIcon className="size-4 flex-shrink-0" />
<span>State</span> <span>State</span>
</div> </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} /> <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
{addSpaceIfCamelCase(state?.name ?? "")} {addSpaceIfCamelCase(state?.name ?? "")}
</div> </div>
</div> </div>
<div className="flex items-center gap-3 h-8"> <div className="flex h-8 items-center gap-3">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary"> <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
<PriorityPropertyIcon className="size-4 flex-shrink-0" /> <PriorityPropertyIcon className="size-4 flex-shrink-0" />
<span>Priority</span> <span>Priority</span>
</div> </div>
<div className="w-3/4"> <div className="w-3/4">
<div <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" priority?.key === "urgent"
? "border-priority-urgent text-priority-urgent" ? "border-priority-urgent text-priority-urgent"
: priority?.key === "high" : priority?.key === "high"
@ -111,8 +111,8 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
</div> </div>
</div> </div>
<div className="flex items-center gap-3 h-8"> <div className="flex h-8 items-center gap-3">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-13 text-tertiary"> <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
<DueDatePropertyIcon className="size-4 flex-shrink-0" /> <DueDatePropertyIcon className="size-4 flex-shrink-0" />
<span>Due date</span> <span>Due date</span>
</div> </div>
@ -127,7 +127,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
{renderFormattedDate(issueDetails.target_date)} {renderFormattedDate(issueDetails.target_date)}
</div> </div>
) : ( ) : (
<span className="text-secondary text-13">Empty</span> <span className="text-13 text-secondary">Empty</span>
)} )}
</div> </div>
</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" leaveFrom="translate-x-0"
leaveTo="translate-x-full" 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} /> <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
@ -104,7 +104,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
> >
<Dialog.Panel> <Dialog.Panel>
<div <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%]" 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}`); else router.push(`/?next_path=${pathName}?${queryParam}`);
}} }}
className={cn( 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, votingDimensions,
{ {
"border-accent-strong-200 text-accent-secondary": isUpVotedByUser, "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> <span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
</button> </button>
</Tooltip> </Tooltip>
@ -147,7 +147,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
else router.push(`/?next_path=${pathName}?${queryParam}`); else router.push(`/?next_path=${pathName}?${queryParam}`);
}} }}
className={cn( 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, votingDimensions,
{ {
"border-danger-strong text-danger-primary": isDownVotedByUser, "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> <span className="text-13 font-regular transition-opacity ease-in-out">{allDownVotes.length}</span>
</button> </button>
</Tooltip> </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="grid h-full place-items-center p-4">
<div className="space-y-8 text-center"> <div className="space-y-8 text-center">
<div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80"> <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>
<div className="space-y-2"> <div className="space-y-2">
<h3 className="text-16 font-semibold">Oops! Something went wrong.</h3> <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() { export function AuthView() {
return ( 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 /> <AuthHeader />
<AuthRoot /> <AuthRoot />
<PoweredBy /> <PoweredBy />

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

@ -10,7 +10,7 @@ import { PlaneLockup } from "@plane/propel/icons";
export function AuthHeader() { export function AuthHeader() {
return ( 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="/"> <Link href="/">
<PlaneLockup height={20} width={95} className="text-primary" /> <PlaneLockup height={20} width={95} className="text-primary" />
</Link> </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) if (!instance && !error)
return ( return (
<div className="flex items-center justify-center h-screen w-full"> <div className="flex h-screen w-full items-center justify-center">
<LogoSpinner /> <LogoSpinner />
</div> </div>
); );
@ -49,8 +49,8 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
if (error) { if (error) {
return ( return (
<div className="relative"> <div className="relative">
<div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col"> <div className="flex h-screen w-full flex-col overflow-hidden overflow-y-auto">
<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="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"> <div className="flex items-center gap-x-2 py-10">
<Link href={`${SPACE_BASE_PATH}/`}> <Link href={`${SPACE_BASE_PATH}/`}>
<PlaneLockup className="h-7 w-auto text-primary" /> <PlaneLockup className="h-7 w-auto text-primary" />
@ -58,10 +58,10 @@ export const InstanceProvider = observer(function InstanceProvider({ children }:
</div> </div>
</div> </div>
<div className="absolute inset-0 z-0"> <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>
<div className="relative z-10 flex-grow"> <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 /> <InstanceFailureView />
</div> </div>
</div> </div>

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

@ -129,7 +129,7 @@ const errorCodeMessages: {
<div> <div>
Your account is already registered.&nbsp; Your account is already registered.&nbsp;
<Link <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)}` : ``}`} href={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
> >
Sign In Sign In
@ -171,7 +171,7 @@ const errorCodeMessages: {
<div> <div>
No account found.&nbsp; No account found.&nbsp;
<Link <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)}` : ``}`} href={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
> >
Create one Create one
@ -317,7 +317,7 @@ const errorCodeMessages: {
message: () => ( message: () => (
<div> <div>
Admin user already exists.&nbsp; 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 Sign In
</Link> </Link>
&nbsp;now. &nbsp;now.
@ -329,7 +329,7 @@ const errorCodeMessages: {
message: () => ( message: () => (
<div> <div>
Admin user does not exist.&nbsp; 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 Sign In
</Link> </Link>
&nbsp;now. &nbsp;now.

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