thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: dashboard styling (#924)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-22 00:56:17 +05:30 committed by GitHub
parent 68930c256f
commit e17c824119
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/components/workspace/activity-graph.tsx
View File

@ -118,7 +118,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
} h-4 w-4 rounded ${ } h-4 w-4 rounded ${
isActive isActive
? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}` ? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
: "bg-brand-base" : "bg-brand-surface-2"
}`} }`}
/> />
</Tooltip> </Tooltip>
@ -127,7 +127,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
</div> </div>
<div className="mt-8 flex items-center gap-2 text-xs"> <div className="mt-8 flex items-center gap-2 text-xs">
<span>Less</span> <span>Less</span>
<span className="h-4 w-4 rounded bg-brand-base" /> <span className="h-4 w-4 rounded bg-brand-surface-2" />
<span className="h-4 w-4 rounded bg-brand-accent opacity-20" /> <span className="h-4 w-4 rounded bg-brand-accent opacity-20" />
<span className="h-4 w-4 rounded bg-brand-accent opacity-40" /> <span className="h-4 w-4 rounded bg-brand-accent opacity-40" />
<span className="h-4 w-4 rounded bg-brand-accent opacity-80" /> <span className="h-4 w-4 rounded bg-brand-accent opacity-80" />

4
apps/app/components/workspace/completed-issues-graph.tsx
View File

@ -55,10 +55,10 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
))} ))}
</CustomMenu> </CustomMenu>
</div> </div>
<div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-8 pl-4"> <div className="rounded-[10px] border border-brand-base bg-brand-base p-8 pl-4">
<ResponsiveContainer width="100%" height={250}> <ResponsiveContainer width="100%" height={250}>
<LineChart data={data}> <LineChart data={data}>
<CartesianGrid stroke="#e2e2e280" /> <CartesianGrid stroke="#858e9660" />
<XAxis dataKey="week_in_month" padding={{ left: 48, right: 48 }} /> <XAxis dataKey="week_in_month" padding={{ left: 48, right: 48 }} />
<YAxis dataKey="completed_count" allowDecimals={false} /> <YAxis dataKey="completed_count" allowDecimals={false} />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />

10
apps/app/components/workspace/issues-list.tsx
View File

@ -36,10 +36,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
<div> <div>
<h3 className="mb-2 font-semibold capitalize">{type} Issues</h3> <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
{issues ? ( {issues ? (
<div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4 text-sm h-[calc(100%-2.25rem)]"> <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-brand-base bg-brand-base p-4 text-sm">
<div <div
className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${ className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
type === "overdue" ? "bg-red-600 bg-opacity-20" : "bg-brand-surface-1" type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-brand-surface-2"
}`} }`}
> >
<h4 className="capitalize">{type}</h4> <h4 className="capitalize">{type}</h4>
@ -83,11 +83,11 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
}) })
) : ( ) : (
<div className="grid h-full place-items-center"> <div className="grid h-full place-items-center">
<div className="flex flex-col items-center gap-4 my-5"> <div className="my-5 flex flex-col items-center gap-4">
<LayerDiagonalIcon height={60} width={60} /> <LayerDiagonalIcon height={60} width={60} />
<span> <span className="text-brand-secondary">
No issues found. Use{" "} No issues found. Use{" "}
<pre className="inline rounded bg-brand-surface-1 px-2 py-1">C</pre> shortcut to <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre> shortcut to
create a new issue create a new issue
</span> </span>
</div> </div>

4
apps/app/components/workspace/issues-pie-chart.tsx
View File

@ -69,7 +69,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
/> />
<path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" /> <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" /> <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333"> <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#858e96">
{value} issues {value} issues
</text> </text>
</g> </g>
@ -79,7 +79,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
return ( return (
<div> <div>
<h3 className="mb-2 font-semibold">Issues by States</h3> <h3 className="mb-2 font-semibold">Issues by States</h3>
<div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4"> <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
<ResponsiveContainer width="100%" height={320}> <ResponsiveContainer width="100%" height={320}>
<PieChart> <PieChart>
<Pie <Pie

2
apps/app/components/workspace/issues-stats.tsx
View File

@ -11,7 +11,7 @@ type Props = {
}; };
export const IssuesStats: React.FC<Props> = ({ data }) => ( export const IssuesStats: React.FC<Props> = ({ data }) => (
<div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-sidebar lg:grid-cols-3"> <div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-base lg:grid-cols-3">
<div className="grid grid-cols-1 divide-y divide-brand-base border-b border-brand-base lg:border-r lg:border-b-0"> <div className="grid grid-cols-1 divide-y divide-brand-base border-b border-brand-base lg:border-r lg:border-b-0">
<div className="flex"> <div className="flex">
<div className="basis-1/2 p-4"> <div className="basis-1/2 p-4">

6
apps/app/pages/[workspaceSlug]/index.tsx
View File

@ -21,7 +21,7 @@ import type { NextPage } from "next";
import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys"; import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
const WorkspacePage: NextPage = () => { const WorkspacePage: NextPage = () => {
const [month, setMonth] = useState(new Date().getMonth() + 1); const [month, setMonth] = useState(new Date().getMonth() + 1);
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -42,7 +42,7 @@ const WorkspacePage: NextPage = () => {
<div className="h-full w-full"> <div className="h-full w-full">
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<div <div
className="flex flex-col bg-brand-sidebar justify-between gap-x-2 gap-y-6 rounded-lg px-8 py-6 text-brand-muted-1 md:flex-row md:items-center md:py-3" className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg bg-brand-base px-8 py-6 md:flex-row md:items-center md:py-3"
// style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }} // style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }}
> >
<p className="font-semibold"> <p className="font-semibold">
@ -55,7 +55,7 @@ const WorkspacePage: NextPage = () => {
<a <a
href="https://github.com/makeplane/plane" href="https://github.com/makeplane/plane"
target="_blank" target="_blank"
className="rounded-md border-2 border-brand-base font-medium px-3 py-1.5 text-sm duration-300" className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Star us on GitHub Star us on GitHub