github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki 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 ${
isActive
? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
: "bg-brand-base"
: "bg-brand-surface-2"
}`}
/>
</Tooltip>
@ -127,7 +127,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
</div>
<div className="mt-8 flex items-center gap-2 text-xs">
<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-40" />
<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>
</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}>
<LineChart data={data}>
<CartesianGrid stroke="#e2e2e280" />
<CartesianGrid stroke="#858e9660" />
<XAxis dataKey="week_in_month" padding={{ left: 48, right: 48 }} />
<YAxis dataKey="completed_count" allowDecimals={false} />
<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>
<h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
{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
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>
@ -83,11 +83,11 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
})
) : (
<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} />
<span>
<span className="text-brand-secondary">
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
</span>
</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" />
<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
</text>
</g>
@ -79,7 +79,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
return (
<div>
<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}>
<PieChart>
<Pie

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

@ -11,7 +11,7 @@ type Props = {
};
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="flex">
<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";
const WorkspacePage: NextPage = () => {
const [month, setMonth] = useState(new Date().getMonth() + 1);
const [month, setMonth] = useState(new Date().getMonth() + 1);
const router = useRouter();
const { workspaceSlug } = router.query;
@ -42,7 +42,7 @@ const WorkspacePage: NextPage = () => {
<div className="h-full w-full">
<div className="flex flex-col gap-8">
<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%)" }}
>
<p className="font-semibold">
@ -55,7 +55,7 @@ const WorkspacePage: NextPage = () => {
<a
href="https://github.com/makeplane/plane"
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"
>
Star us on GitHub