Skip to content

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

Open
anmolsinghbhatia wants to merge 3 commits intopreviewfrom
feat/instance-not-ready-ui
Open

[WEB-6599] feat: instance not ready ui revamp#8755
anmolsinghbhatia wants to merge 3 commits intopreviewfrom
feat/instance-not-ready-ui

Conversation

@anmolsinghbhatia
Copy link
Collaborator

@anmolsinghbhatia anmolsinghbhatia commented Mar 12, 2026

Description

This PR includes instance not ready page UI revamp.

Type of Change

  • Improvement

Media

Before After
before after

Summary by CodeRabbit

  • Style

    • Enhanced visual presentation of the instance welcome screen with updated background design and new branding elements.
  • Refactor

    • Restructured content layout to use a centered, layout-driven composition with improved visual hierarchy and sticky header positioning.

@anmolsinghbhatia anmolsinghbhatia self-assigned this Mar 12, 2026
Copilot AI review requested due to automatic review settings March 12, 2026 16:56
@makeplane
Copy link

makeplane bot commented Mar 12, 2026

Linked to Plane Work Item(s)

This comment was auto-generated by Plane

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 12, 2026

📝 Walkthrough

Walkthrough

The component underwent layout restructuring, replacing theming-based styling with a DefaultLayout wrapper. The sticky header now contains PlaneLockup, while centered content features a new logo and heading. The action button was repositioned inside a link with primary styling, eliminating useTheme dependencies.

Changes

Cohort / File(s) Summary
Layout Restructuring
apps/web/core/components/instance/not-ready-view.tsx
Replaced theming-based background logic with DefaultLayout wrapper. Reworked header with sticky positioning for PlaneLockup. Restructured content area with centered composition featuring new GradientLogo, updated heading text, and repositioned action button with primary variant styling. Removed useTheme usage and pattern selection logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A layout refreshed with centered grace,
New logos bloom in their rightful place,
The sticky header holds steady and true,
Plane's welcome shines in vibrant hue,
Themed shadows fade—the structure's anew! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: a UI revamp for the instance not ready page, referencing the ticket number WEB-6599.
Description check ✅ Passed The description includes required sections (Description, Type of Change, and Media) with before/after screenshots, though Test Scenarios and References sections are missing.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/instance-not-ready-ui
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Revamps the “instance not ready” screen in the web app to match the updated visual design shown in the PR media, including new branded gradient assets and a simplified layout.

Changes:

  • Reworked InstanceNotReady layout and styling, replacing the theme-based background pattern with new gradient decorations.
  • Added new WebP brand assets (logo + background mark) used by the refreshed view.

Reviewed changes

Copilot reviewed 1 out of 3 changed files in this pull request and generated 2 comments.

File Description
apps/web/core/components/instance/not-ready-view.tsx Updates the “instance not ready” UI structure, assets, and CTA styling.
apps/web/app/assets/auth/gradient-logo.webp Adds the new gradient logo asset used on the page.
apps/web/app/assets/auth/gradient-bg-logo.webp Adds the gradient background decoration asset used on the page.

Comment on lines 1 to +11
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* 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";
Copy link

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file header was changed from the repo-standard AGPL notice to a proprietary/commercial SPDX header. This seems unrelated to the PR’s UI revamp and is inconsistent with other web components (e.g., apps/web/core/components/instance/maintenance-view.tsx). Please revert to the standard project header unless this file is intentionally being relicensed (and, if so, it should be called out explicitly in the PR description).

Copilot uses AI. Check for mistakes.
Comment on lines +14 to 15
import { Button } from "@plane/propel/button";

Copy link

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link is imported but never used, which will be flagged by the repo’s linting/typecheck. Either remove the unused import, or wrap the PlaneLockup in a <Link href="/">…</Link> (matching AuthHeaderBase) so the logo remains a home navigation link.

Copilot uses AI. Check for mistakes.
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/core/components/instance/not-ready-view.tsx`:
- Around line 7-14: Remove the unused Link import: delete the "Link" import from
"next/link" since the component navigates to GOD_MODE_URL via a raw <a> tag
(keep the GOD_MODE_URL reference and existing anchor usage). Ensure no other
references to Link remain in this module (e.g., JSX or helpers) and run a quick
lint/TS check to confirm the unused import is gone.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1787e7be-fd6c-4fb3-9f99-95b230c45991

📥 Commits

Reviewing files that changed from the base of the PR and between 6627282 and 6fb0465.

📒 Files selected for processing (3)
  • apps/web/app/assets/auth/gradient-bg-logo.webp
  • apps/web/app/assets/auth/gradient-logo.webp
  • apps/web/core/components/instance/not-ready-view.tsx

Comment on lines 7 to +14
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";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove unused Link import.

Link from next/link is imported but never used in this file. The component uses a raw <a> tag for the GOD_MODE_URL navigation (which may be intentional for a full page reload to admin mode).

🧹 Proposed fix
-import Link from "next/link";
 import { GOD_MODE_URL } from "@plane/constants";
 // assets
 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";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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";
import { GOD_MODE_URL } from "@plane/constants";
// assets
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";
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/core/components/instance/not-ready-view.tsx` around lines 7 - 14,
Remove the unused Link import: delete the "Link" import from "next/link" since
the component navigates to GOD_MODE_URL via a raw <a> tag (keep the GOD_MODE_URL
reference and existing anchor usage). Ensure no other references to Link remain
in this module (e.g., JSX or helpers) and run a quick lint/TS check to confirm
the unused import is gone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants