mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
3c2f5d12ed
* chore: add next theme and initial setup * chore: add dark mode colors to layouts * chore: user general setting page theming * chore: dashboard theming * chore: project page theming * chore: workspace setting page theming * chore: my issue page theming * chore: cmdk theming * chore: change hardcode bg and text color to theme * chore: change color name according to the design * style: fix card in the dashboard * style: fix merge conflict design issues * style: add light high contrast and dark high contrast * style: fix cmd k menu color and selection * feat: change theme from cmdk menu * chore: add multiple theme field to custom theme * chore: removed custom theming * fix: build error --------- Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import { LinearProgressIndicator } from "components/ui";
|
|
|
|
export const EmptyCycle = () => {
|
|
const emptyCycleData = [
|
|
{
|
|
id: 1,
|
|
name: "backlog",
|
|
value: 20,
|
|
color: "#DEE2E6",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "unstarted",
|
|
value: 14,
|
|
color: "#26B5CE",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "started",
|
|
value: 27,
|
|
color: "#F7AE59",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "cancelled",
|
|
value: 15,
|
|
color: "#D687FF",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "completed",
|
|
value: 14,
|
|
color: "#09A953",
|
|
},
|
|
];
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
|
|
<div className="relative h-32 w-72">
|
|
<div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
|
|
<div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
|
|
<span className="text-sm font-semibold text-brand-base">Cycle Name</span>
|
|
<div className="flex h-full w-full items-center gap-4">
|
|
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
|
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
|
|
<LinearProgressIndicator data={emptyCycleData} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
|
|
<div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
|
|
<span className="text-sm font-semibold text-brand-base">Cycle Name</span>
|
|
<div className="flex h-full w-full items-center gap-4">
|
|
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
|
<span className="h-2 w-20 rounded-full bg-brand-surface-2" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
|
|
<LinearProgressIndicator data={emptyCycleData} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center justify-center gap-4 text-center ">
|
|
<h3 className="text-xl font-semibold">Create New Cycle</h3>
|
|
<p className="text-sm text-brand-secondary">
|
|
Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
|
|
time. Create new cycle now.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|