From 51a3e2c63c0c7a01e19a19ed4f455dfa1ed59641 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Thu, 23 May 2024 16:53:48 +0530
Subject: [PATCH] chore: updated empty and loading screens

---
 web/components/estimates/empty-screen.tsx  | 10 ++++++----
 web/components/estimates/index.ts          |  5 ++++-
 web/components/estimates/loader-screen.tsx |  9 +++++++++
 web/components/estimates/root.tsx          |  5 +++--
 4 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 web/components/estimates/loader-screen.tsx

diff --git a/web/components/estimates/empty-screen.tsx b/web/components/estimates/empty-screen.tsx
index 03f21ab8f..45dcca8ee 100644
--- a/web/components/estimates/empty-screen.tsx
+++ b/web/components/estimates/empty-screen.tsx
@@ -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>
diff --git a/web/components/estimates/index.ts b/web/components/estimates/index.ts
index 33d533057..deaa289dc 100644
--- a/web/components/estimates/index.ts
+++ b/web/components/estimates/index.ts
@@ -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
diff --git a/web/components/estimates/loader-screen.tsx b/web/components/estimates/loader-screen.tsx
new file mode 100644
index 000000000..65d6b1897
--- /dev/null
+++ b/web/components/estimates/loader-screen.tsx
@@ -0,0 +1,9 @@
+import { FC } from "react";
+
+export const EstimateLoaderScreen: FC = () => (
+  <div>
+    {/* header */}
+    {/* estimate disable */}
+    <div>Loading screen</div>
+  </div>
+);
diff --git a/web/components/estimates/root.tsx b/web/components/estimates/root.tsx
index e808243d7..3abe709f6 100644
--- a/web/components/estimates/root.tsx
+++ b/web/components/estimates/root.tsx
@@ -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">