chore: updated empty and loading screens

This commit is contained in:
guru_sainath 2024-05-23 16:53:48 +05:30
parent d6325320e9
commit 51a3e2c63c
4 changed files with 22 additions and 7 deletions

View File

@ -17,7 +17,7 @@ export const EstimateEmptyScreen: FC<TEstimateEmptyScreen> = (props) => {
}.webp`;
return (
<div className="relative flex flex-col justify-center items-center text-center gap-8 border border-custom-border-300 rounded bg-custom-background-90 py-20">
<div className="relative flex flex-col justify-center items-center text-center gap-8 border border-custom-border-300 rounded bg-custom-background-90 py-10">
<div className="flex-shrink-0 w-[120px] h-[120px] overflow-hidden relative flex justify-center items-center">
<Image
src={emptyScreenImage}
@ -27,9 +27,11 @@ export const EstimateEmptyScreen: FC<TEstimateEmptyScreen> = (props) => {
className="object-contain w-full h-full"
/>
</div>
<div className="space-y-2">
<h3 className="text-xl font-medium text-custom-text-100">No estimate systems yet</h3>
<p className="text-base text-custom-text-300">Explain estimates system here</p>
<div className="space-y-1.5">
<h3 className="text-xl font-semibold text-custom-text-100">No estimate systems yet</h3>
<p className="text-sm text-custom-text-300">
Create a set of estimates to communicate the amount of work per issue.
</p>
</div>
<div>
<Button onClick={onButtonClick}>Add Estimate System</Button>

View File

@ -1,7 +1,10 @@
export * from "./root";
export * from "./empty-screen";
export * from "./loader-screen";
export * from "./estimate-search";
export * from "./estimate-disable";
export * from "./root";
export * from "./estimate-item";
// estimate create

View File

@ -0,0 +1,9 @@
import { FC } from "react";
export const EstimateLoaderScreen: FC = () => (
<div>
{/* header */}
{/* estimate disable */}
<div>Loading screen</div>
</div>
);

View File

@ -4,7 +4,7 @@ import { IEstimate } from "@plane/types";
import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { EmptyState } from "@/components/empty-state";
import { CreateEstimateModal, EstimateEmptyScreen } from "@/components/estimates";
import { EstimateEmptyScreen, EstimateLoaderScreen, CreateEstimateModal } from "@/components/estimates";
import { DeleteEstimateModal, EstimateListItem } from "@/components/estimates-legacy";
// constants
import { EmptyStateType } from "@/constants/empty-state";
@ -61,7 +61,8 @@ export const EstimateRoot: FC<TEstimateRoot> = (props) => {
};
return (
<div>
<div className="container mx-auto">
<EstimateLoaderScreen />
<EstimateEmptyScreen onButtonClick={() => {}} />
{loader === "init-loader" || isSWRLoading ? (
<Loader className="mt-5 space-y-5">