[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:
parent
ff181e566f
commit
20d139cc9e
6 changed files with 233 additions and 38 deletions
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue