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

[WEB-6599] feat: instance not ready ui revamp (#8755)

Browse source 
* feat: instance not ready ui revamp

* chore: code refactoring

* chore: code refactoring
This commit is contained in:
Anmol Singh Bhatia 2026-03-16 14:29:33 +05:30 • committed by GitHub
parent 6627282bc5
commit 588dc2927e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 37 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
apps/web/app/assets/auth/gradient-bg-logo.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
apps/web/app/assets/auth/gradient-logo.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

76
apps/web/core/components/instance/not-ready-view.tsx
View file

@ -4,57 +4,55 @@
* See the LICENSE file for details.
*/
import type { FC } from "react";
import Link from "next/link";
import { useTheme } from "next-themes";
import { GOD_MODE_URL } from "@plane/constants";
import { Button } from "@plane/propel/button";
import { PlaneLockup } from "@plane/propel/icons";
// assets
import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
import PlaneTakeOffImage from "@/app/assets/plane-takeoff.png?url";
import GradientLogo from "@/app/assets/auth/gradient-logo.webp?url";
import GradientBgLogo from "@/app/assets/auth/gradient-bg-logo.webp?url";
import DefaultLayout from "@/layouts/default-layout";
import { PlaneLockup } from "@plane/propel/icons";
import { Button } from "@plane/propel/button";
export function InstanceNotReady() {
const { resolvedTheme } = useTheme();
const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
return (
<div className="relative">
<div className="flex h-screen w-full flex-col overflow-hidden overflow-y-auto">
<div className="z-50 container mx-auto flex h-[110px] flex-shrink-0 items-center justify-between gap-5 px-5 lg:px-0">
<div className="flex items-center gap-x-2 py-10">
<Link href={`/`}>
<PlaneLockup className="h-7 w-auto text-primary" />
</Link>
<DefaultLayout>
<div className="relative z-10 flex h-screen w-screen overflow-hidden">
{/* Background decorations */}
<img
src={GradientBgLogo}
className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-15"
alt=""
aria-hidden="true"
/>
<img
src={GradientBgLogo}
className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-15"
alt=""
aria-hidden="true"
/>
{/* Main content */}
<div className="flex h-full w-full flex-col items-center px-8 pt-6 pb-10">
<div className="sticky top-0 flex w-full shrink-0 items-center justify-between gap-6">
<PlaneLockup height={20} width={95} className="text-primary" />
</div>
</div>
<div className="absolute inset-0 z-0">
<img src={patternBackground} className="h-full w-full object-cover" alt="Plane background pattern" />
</div>
<div className="relative z-10 mb-[110px] flex-grow">
<div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
<div className="relative w-auto max-w-2xl space-y-8 py-10">
<div className="relative flex flex-col items-center justify-center space-y-4">
<h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
<img src={PlaneTakeOffImage} className="h-full w-full object-cover" alt="Plane Logo" />
<p className="text-14 font-medium text-placeholder">
Get started by setting up your instance and workspace
<div className="flex h-full w-full flex-col items-center justify-center gap-7">
<div className="flex flex-col items-center gap-11">
<img src={GradientLogo} className="h-24 w-40 object-contain" alt="Plane Logo" />
<div className="flex max-w-124 flex-col items-center gap-3">
<h1 className="text-h2-semibold text-primary">Welcome to Plane</h1>
<p className="text-center text-body-md-regular text-secondary">
Set up your instance and create your first workspace to begin managing projects and work.
</p>
</div>
<div>
<a href={GOD_MODE_URL}>
<Button size="xl" className="w-full">
Get started
</Button>
</a>
</div>
</div>
<a href={GOD_MODE_URL} className="w-72">
<Button variant="primary" className="w-full" size="xl">
Get started
</Button>
</a>
</div>
</div>
</div>
</div>
</DefaultLayout>
);
}