Skip to content

Commit d08c03f

Browse files
aaryan610aaryan610
authored
[WEB-3203] fix: dashboard widgets' empty state content and assets (#6450)
* fix: empty state content * chore: replace margin with padding
1 parent 0b53912 commit d08c03f

File tree

20 files changed

+157
-162
lines changed

20 files changed

+157
-162
lines changed

‎packages/editor/src/styles/editor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,14 +105,14 @@ ul[data-type="taskList"] li > div {
105105
}
106106

107107
ul[data-type="taskList"] li > label input[type="checkbox"] {
108-
border: 1px solid rgba(var(--color-border-300)) !important;
108+
border: 1px solid rgba(var(--color-text-100), 0.2) !important;
109109
outline: none;
110110
border-radius: 2px;
111111
transform: scale(1.05);
112112
}
113113

114114
.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
115-
background-color: rgba(var(--color-background-80));
115+
background-color: rgba(var(--color-text-100), 0.1);
116116
}
117117

118118
.ProseMirror[contenteditable="false"] input[type="checkbox"] {

‎web/core/components/editor/sticky-editor/editor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { getEditorFileHandlers } from "@/helpers/editor.helper";
1212
// plane web hooks
1313
import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
1414
import { useFileSize } from "@/plane-web/hooks/use-file-size";
15-
import { Toolbar } from "./toolbar";
15+
import { StickyEditorToolbar } from "./toolbar";
1616

1717
interface StickyEditorWrapperProps
1818
extends Omit<ILiteTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
@@ -87,7 +87,7 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
8787
isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
8888
)}
8989
>
90-
<Toolbar
90+
<StickyEditorToolbar
9191
executeCommand={(item) => {
9292
// TODO: update this while toolbar homogenization
9393
// @ts-expect-error type mismatch here

‎web/core/components/editor/sticky-editor/toolbar.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type Props = {
2323

2424
const toolbarItems = TOOLBAR_ITEMS.sticky;
2525

26-
export const Toolbar: React.FC<Props> = (props) => {
26+
export const StickyEditorToolbar: React.FC<Props> = (props) => {
2727
const { executeCommand, editorRef, handleColorChange, handleDelete } = props;
2828

2929
// State to manage active states of toolbar items
@@ -69,7 +69,11 @@ export const Toolbar: React.FC<Props> = (props) => {
6969
</p>
7070
}
7171
>
72-
<button onClick={() => setShowColorPalette(!showColorPalette)} className="flex text-custom-text-300">
72+
<button
73+
type="button"
74+
onClick={() => setShowColorPalette(!showColorPalette)}
75+
className="flex text-custom-text-100/50"
76+
>
7377
<Palette className="size-4 my-auto" />
7478
</button>
7579
</Tooltip>
@@ -95,7 +99,7 @@ export const Toolbar: React.FC<Props> = (props) => {
9599
type="button"
96100
onClick={() => executeCommand(item)}
97101
className={cn(
98-
"grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-300",
102+
"grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-100/50",
99103
{}
100104
)}
101105
>
@@ -122,7 +126,7 @@ export const Toolbar: React.FC<Props> = (props) => {
122126
</p>
123127
}
124128
>
125-
<button onClick={handleDelete} className="my-auto text-custom-text-300">
129+
<button type="button" onClick={handleDelete} className="my-auto text-custom-text-100/50">
126130
<Trash2 className="size-4" />
127131
</button>
128132
</Tooltip>

‎web/core/components/home/home-dashboard-widgets.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const HOME_WIDGETS_LIST: {
2525
quick_links: {
2626
component: DashboardQuickLinks,
2727
fullWidth: false,
28-
title: "Quick links",
28+
title: "Quicklinks",
2929
},
3030
recents: {
3131
component: RecentActivityWidget,

‎web/core/components/home/widgets/empty-states/index.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
export * from "./root";
1+
export * from "./links";
2+
export * from "./no-projects";
3+
export * from "./recents";
4+
export * from "./stickies";

‎web/core/components/home/widgets/empty-states/links.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { Link2 } from "lucide-react";
22

33
export const LinksEmptyState = () => (
4-
<div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
5-
<div className="m-auto flex gap-2">
6-
<Link2 size={30} className="text-custom-text-400/40 -rotate-45" />
7-
<div className="text-custom-text-400 text-sm text-center my-auto">
8-
Add any links you need for quick access to your work.
9-
</div>
10-
</div>
4+
<div className="min-h-[110px] w-full flex items-center justify-center gap-2 py-6 bg-custom-background-90 text-custom-text-400 rounded">
5+
<div className="flex-shrink-0 size-[30px] grid place-items-center">
6+
<Link2 className="size-6 -rotate-45" />
117
</div>
12-
);
8+
<p className="text-sm text-center font-medium">Save links to work things that you{"'"}d like handy.</p>
9+
</div>
10+
);

web/core/components/home/widgets/empty-states/root.tsx renamed to web/core/components/home/widgets/empty-states/no-projects.tsx

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import React from "react";
22
import Link from "next/link";
33
import { useParams } from "next/navigation";
44
import { Briefcase, Hotel, Users } from "lucide-react";
5+
// plane ui
6+
import { Avatar } from "@plane/ui";
57
// helpers
68
import { getFileURL } from "@/helpers/file.helper";
79
// hooks
810
import { useCommandPalette, useEventTracker, useUser, useUserPermissions } from "@/hooks/store";
911
// plane web constants
1012
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants";
1113

12-
export const EmptyWorkspace = () => {
14+
export const NoProjectsEmptyState = () => {
1315
// navigation
1416
const { workspaceSlug } = useParams();
1517
// store hooks
@@ -26,11 +28,11 @@ export const EmptyWorkspace = () => {
2628
const EMPTY_STATE_DATA = [
2729
{
2830
id: "create-project",
29-
title: "Create a project",
30-
description: "Create your first project now to get started",
31-
icon: <Briefcase className="w-[40px] h-[40px] text-custom-primary-100" />,
31+
title: "Create a project.",
32+
description: "Most things start with a project in Plane.",
33+
icon: <Briefcase className="size-12 text-custom-primary-100" />,
3234
cta: {
33-
text: "Create Project",
35+
text: "Get started",
3436
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
3537
if (!canCreateProject) return;
3638
e.preventDefault();
@@ -42,66 +44,56 @@ export const EmptyWorkspace = () => {
4244
},
4345
{
4446
id: "invite-team",
45-
title: "Invite your team",
46-
description: "The sub text will be of two lines and that will be placed.",
47-
icon: <Users className="w-[40px] h-[40px] text-custom-primary-100" />,
47+
title: "Invite your team.",
48+
description: "Build, ship, and manage with coworkers.",
49+
icon: <Users className="size-12 text-custom-primary-100" />,
4850
cta: {
49-
text: "Invite now",
51+
text: "Get them in",
5052
link: `/${workspaceSlug}/settings/members`,
5153
},
5254
},
5355
{
5456
id: "configure-workspace",
55-
title: "Configure your workspace",
56-
description: "The sub text will be of two lines and that will be placed.",
57-
icon: <Hotel className="w-[40px] h-[40px] text-custom-primary-100" />,
57+
title: "Set up your workspace.",
58+
description: "Turn features on or off or go beyond that.",
59+
icon: <Hotel className="size-12 text-custom-primary-100" />,
5860
cta: {
59-
text: "Configure workspace",
61+
text: "Configure this workspace",
6062
link: "settings",
6163
},
6264
},
6365
{
6466
id: "personalize-account",
65-
title: "Personalize your account",
66-
description: "The sub text will be of two lines and that will be placed.",
67-
icon:
68-
currentUser?.avatar_url && currentUser?.avatar_url.trim() !== "" ? (
69-
<Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
70-
<span className="relative flex h-6 w-6 items-center justify-center rounded-full p-4 capitalize text-white">
71-
<img
72-
src={getFileURL(currentUser?.avatar_url)}
73-
className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
74-
alt={currentUser?.display_name || currentUser?.email}
75-
/>
76-
</span>
77-
</Link>
78-
) : (
79-
<Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
80-
<span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-gray-700 p-4 capitalize text-white text-sm">
81-
{(currentUser?.email ?? currentUser?.display_name ?? "?")[0]}
82-
</span>
83-
</Link>
84-
),
67+
title: "Make Plane yours.",
68+
description: "Choose your picture, colors, and more.",
69+
icon: (
70+
<Avatar
71+
src={getFileURL(currentUser?.avatar_url ?? "")}
72+
name={currentUser?.display_name}
73+
size={48}
74+
className="text-xl"
75+
showTooltip={false}
76+
/>
77+
),
8578
cta: {
86-
text: "Personalize account",
79+
text: "Personalize now",
8780
link: "/profile",
8881
},
8982
},
9083
];
9184

9285
return (
93-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
86+
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
9487
{EMPTY_STATE_DATA.map((item) => (
9588
<div
9689
key={item.id}
97-
className="flex flex-col items-center justify-center py-8 bg-custom-background-100 rounded-lg text-center border border-custom-border-200/40"
90+
className="flex flex-col items-center justify-center p-6 bg-custom-background-100 rounded-lg text-center border border-custom-border-200/40"
9891
>
99-
<div className="flex items-center justify-center bg-custom-primary-100/10 rounded-full w-[80px] h-[80px] mb-4">
92+
<div className="grid place-items-center bg-custom-primary-100/10 rounded-full size-24 mb-3">
10093
<span className="text-3xl my-auto">{item.icon}</span>
10194
</div>
102-
<h3 className="text-lg font-medium text-custom-text-100 mb-2">{item.title}</h3>
103-
<p className="text-sm text-custom-text-200 mb-4 w-[80%] flex-1">{item.description}</p>
104-
95+
<h3 className="text-base font-medium text-custom-text-100 mb-2">{item.title}</h3>
96+
<p className="text-sm text-custom-text-300 mb-2">{item.description}</p>
10597
{item.cta.link ? (
10698
<Link
10799
href={item.cta.link}
@@ -111,6 +103,7 @@ export const EmptyWorkspace = () => {
111103
</Link>
112104
) : (
113105
<button
106+
type="button"
114107
className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
115108
onClick={item.cta.onClick}
116109
>

‎web/core/components/home/widgets/empty-states/recents.tsx‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
import { Briefcase, FileText, History } from "lucide-react";
2+
// plane ui
23
import { LayersIcon } from "@plane/ui";
34

5+
const getDisplayContent = (type: string) => {
6+
switch (type) {
7+
case "project":
8+
return {
9+
icon: Briefcase,
10+
text: "Projects you go into or have assigned work in will show up here.",
11+
};
12+
case "page":
13+
return {
14+
icon: FileText,
15+
text: "Create, see, or change something on pages you have access to and see them here.",
16+
};
17+
case "issue":
18+
return {
19+
icon: LayersIcon,
20+
text: "Let's see some issues to see them show up here.",
21+
};
22+
default:
23+
return {
24+
icon: History,
25+
text: "Whatever you see and act on in Plane will show up here.",
26+
};
27+
}
28+
};
29+
430
export const RecentsEmptyState = ({ type }: { type: string }) => {
5-
const getDisplayContent = () => {
6-
switch (type) {
7-
case "project":
8-
return {
9-
icon: <Briefcase size={30} className="text-custom-text-400/40" />,
10-
text: "Your recent projects will appear here once you visit one.",
11-
};
12-
case "page":
13-
return {
14-
icon: <FileText size={30} className="text-custom-text-400/40" />,
15-
text: "Your recent pages will appear here once you visit one.",
16-
};
17-
case "issue":
18-
return {
19-
icon: <LayersIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
20-
text: "Your recent issues will appear here once you visit one.",
21-
};
22-
default:
23-
return {
24-
icon: <History size={30} className="text-custom-text-400/40" />,
25-
text: "You don’t have any recent items yet.",
26-
};
27-
}
28-
};
29-
const { icon, text } = getDisplayContent();
31+
const displayContent = getDisplayContent(type);
3032

3133
return (
32-
<div className="min-h-[120px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
33-
<div className="m-auto flex gap-2">
34-
{icon} <div className="text-custom-text-400 text-sm text-center my-auto">{text}</div>
34+
<div className="min-h-[110px] w-full flex items-center justify-center gap-2 py-6 bg-custom-background-90 text-custom-text-400 rounded">
35+
<div className="flex-shrink-0 size-[30px] grid place-items-center">
36+
<displayContent.icon className="size-6" />
3537
</div>
38+
<p className="text-sm text-center font-medium">{displayContent.text}</p>
3639
</div>
3740
);
3841
};

‎web/core/components/home/widgets/empty-states/stickies.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
import { RecentStickyIcon } from "@plane/ui";
33

44
export const StickiesEmptyState = () => (
5-
<div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
6-
<div className="m-auto flex gap-2">
7-
<RecentStickyIcon className="h-[30px] w-[30px] text-custom-text-400/40" />
8-
<div className="text-custom-text-400 text-sm text-center my-auto">
9-
No stickies yet. Add one to start making quick notes.
10-
</div>
5+
<div className="min-h-[110px] w-full flex items-center justify-center gap-2 py-6 bg-custom-background-90 text-custom-text-400 rounded">
6+
<div className="flex-shrink-0 size-[30px] grid place-items-center">
7+
<RecentStickyIcon className="size-6" />
118
</div>
9+
<p className="text-sm text-center font-medium">
10+
Jot down an idea, capture an aha, or record a brainwave. Add a sticky to get started.
11+
</p>
1212
</div>
1313
);

‎web/core/components/home/widgets/links/action.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const AddLink = (props: TProps) => {
1414
<div className="rounded p-2 bg-custom-background-80/40 w-8 h-8 my-auto">
1515
<PlusIcon className="h-4 w-4 stroke-2 text-custom-text-350" />
1616
</div>
17-
<div className="text-sm font-medium my-auto">Add quick Link</div>
17+
<div className="text-sm font-medium my-auto">Add quicklink</div>
1818
</button>
1919
);
2020
};

0 commit comments

Comments
 (0)