fix: upgrader ee banner

This commit is contained in:
guru_sainath 2024-06-03 17:23:35 +05:30
parent 16fa9c9baa
commit 84ab12d501
2 changed files with 32 additions and 10 deletions

View File

@ -1,25 +1,47 @@
import { FC } from "react"; import { FC } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Crown } from "lucide-react";
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// public images
import EstimateEmptyDarkImage from "@/public/empty-state/estimates/dark.svg";
import EstimateEmptyLightImage from "@/public/empty-state/estimates/light.svg";
export const EstimateEEBanner: FC = (props) => { export const EstimateEEBanner: FC = () => {
const {} = props; const { resolvedTheme } = useTheme();
const emptyScreenImage = resolvedTheme === "light" ? EstimateEmptyLightImage : EstimateEmptyDarkImage;
return ( return (
<div className="border border-red-500 rounded overflow-hidden relative flex items-center"> <div className="rounded overflow-hidden relative flex items-center mt-10 bg-[linear-gradient(270deg,_#3B5DC5_1.71%,_rgba(44,66,131,0)_111.71%)]">
<div> <div className="w-full p-10 space-y-2">
<div className="text-lg">Estimate issues better with points</div> <div className="text-xl font-semibold">Estimate issues better with points</div>
<div className="text-base text-custom-text-200"> <div className="text-base text-custom-text-200">
Use points to estimate scope of work better, monitor capacity, track the burn-down report for your project. Use points to estimate scope of work better, monitor capacity, track the burn-down report for your project.
</div> </div>
<div> <div className="relative flex items-center gap-4 pt-4">
<Button variant="primary" size="sm"> <Button prependIcon={<Crown size={12} className="text-amber-400" />} variant="primary" size="sm">
Upgrade Upgrade
</Button> </Button>
<div>Talk custom pricing</div> <a
href={"#"}
target="_blank"
className="text-base text-custom-primary-100/80 hover:text-custom-primary-100 underline underline-offset-4 transition-colors"
>
Talk custom pricing
</a>
</div> </div>
</div> </div>
<div className="border border-red-500 w-full">Image</div> <div className="hidden lg:block h-[260px]">
<Image
src={emptyScreenImage}
alt="Empty estimate image"
width={100}
height={100}
className="object-contain w-full h-full"
/>
</div>
</div> </div>
); );
}; };

View File

@ -93,7 +93,7 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
</div> </div>
)} )}
{/* <EstimateEEBanner /> */} <EstimateEEBanner />
{/* CRUD modals */} {/* CRUD modals */}
<CreateEstimateModal <CreateEstimateModal