[WEB-4839] chore: maintenance mode empty state updated (#7728)

* chore: maintenance mode empty state updated

* chore: code refactor

* chore: code refactor

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-09-05 20:16:39 +05:30 committed by GitHub
parent ff181e566f
commit 20d139cc9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 233 additions and 38 deletions

View file

@ -2,33 +2,36 @@
import { FC } from "react";
import Image from "next/image";
// ui
import { Button } from "@plane/ui";
import { useTheme } from "next-themes";
// layouts
import DefaultLayout from "@/layouts/default-layout";
// components
import { MaintenanceMessage } from "@/plane-web/components/instance";
// images
import maintenanceModeImage from "@/public/maintenance-mode.webp";
import maintenanceModeDarkModeImage from "@/public/instance/maintenance-mode-dark.svg";
import maintenanceModeLightModeImage from "@/public/instance/maintenance-mode-light.svg";
export const MaintenanceView: FC = () => (
<DefaultLayout>
<div className="relative container mx-auto h-full w-full flex flex-col md:flex-row gap-2 items-center justify-center gap-y-5 bg-custom-background-100 text-center">
<div className="relative w-full">
<Image
src={maintenanceModeImage}
height="176"
width="288"
alt="ProjectSettingImg"
className="w-full h-full object-fill object-center"
/>
export const MaintenanceView: FC = () => {
// hooks
const { resolvedTheme } = useTheme();
// derived values
const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage;
return (
<DefaultLayout>
<div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center">
<div className="relative w-full">
<Image
src={maintenanceModeImage}
height="176"
width="288"
alt="ProjectSettingImg"
className="w-full h-full object-fill object-center"
/>
</div>
<div className="w-full relative flex flex-col gap-4 mt-4">
<MaintenanceMessage />
</div>
</div>
<div className="w-full space-y-4 relative flex flex-col justify-center md:justify-start items-center md:items-start">
<MaintenanceMessage />
<Button variant="outline-primary" onClick={() => window.location.reload()}>
Reload
</Button>
</div>
</div>
</DefaultLayout>
);
</DefaultLayout>
);
};