diff --git a/plane-src/apps/web/core/components/common/logo-spinner.tsx b/plane-src/apps/web/core/components/common/logo-spinner.tsx
index 9dfad1d..da76046 100644
--- a/plane-src/apps/web/core/components/common/logo-spinner.tsx
+++ b/plane-src/apps/web/core/components/common/logo-spinner.tsx
@@ -15,8 +15,8 @@ export function LogoSpinner() {
const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
return (
-
-

+
+
);
}
diff --git a/plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx b/plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
index edaccb8..b001676 100644
--- a/plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
@@ -49,8 +49,6 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
// derived values
const issue = getIssueById(issueId);
- if (!issue) return <>>;
-
// handlers
const handleIssueCrudState = (
key: "create" | "existing",
@@ -74,7 +72,7 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
const handleAddExisting = () => {
handleIssueCrudState("existing", issueId, null);
- toggleSubIssuesModal(issue.id);
+ toggleSubIssuesModal(issue?.id ?? issueId);
};
// options
diff --git a/plane-src/apps/web/core/components/stickies/layout/stickies-list.tsx b/plane-src/apps/web/core/components/stickies/layout/stickies-list.tsx
index 6a9e78e..1832233 100644
--- a/plane-src/apps/web/core/components/stickies/layout/stickies-list.tsx
+++ b/plane-src/apps/web/core/components/stickies/layout/stickies-list.tsx
@@ -12,22 +12,15 @@ import type {
import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react";
import { usePathname } from "next/navigation";
-import { useTheme } from "next-themes";
import Masonry from "react-masonry-component";
// plane imports
import { EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
import { EUserWorkspaceRoles } from "@plane/types";
-// assets
-import darkStickiesAsset from "@/app/assets/empty-state/stickies/stickies-dark.webp?url";
-import lightStickiesAsset from "@/app/assets/empty-state/stickies/stickies-light.webp?url";
-import darkStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-dark.webp?url";
-import lightStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-light.webp?url";
// components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
-import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
// hooks
import { useUserPermissions } from "@/hooks/store/user";
@@ -51,8 +44,6 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
const { workspaceSlug, intersectionElement, columnCount } = props;
// navigation
const pathname = usePathname();
- // theme hook
- const { resolvedTheme } = useTheme();
// plane hooks
const { t } = useTranslation();
// store hooks
@@ -69,8 +60,6 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
[EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
EUserPermissionsLevel.WORKSPACE
);
- const stickiesResolvedPath = resolvedTheme === "light" ? lightStickiesAsset : darkStickiesAsset;
- const stickiesSearchResolvedPath = resolvedTheme === "light" ? lightStickiesSearchAsset : darkStickiesSearchAsset;
const masonryRef = useRef
(null);
const handleLayout = () => {
@@ -118,25 +107,36 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
{isStickiesPage ? (
<>
{searchQuery ? (
-
) : (
- ,
- text: t("stickies.empty_state.general.primary_button.text"),
- onClick: () => {
- toggleShowNewSticky(true);
- stickyOperations.create();
- },
- disabled: !hasGuestLevelPermissions,
- }}
+ customButton={
+
+ }
/>
)}
>
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css
index ab4362c..b114159 100644
--- a/plane-src/apps/web/styles/globals.css
+++ b/plane-src/apps/web/styles/globals.css
@@ -1525,6 +1525,56 @@
color: var(--text-color-primary) !important;
}
+ .nodedc-stickies-empty-root {
+ padding-bottom: calc(var(--nodedc-bottom-dock-height) + 2rem) !important;
+ }
+
+ .nodedc-stickies-empty-asset {
+ --illustration-fill-primary: rgba(255, 255, 255, 0.1);
+ --illustration-fill-secondary: rgba(255, 255, 255, 0.075);
+ --illustration-fill-tertiary: rgba(var(--nodedc-card-active-rgb), 0.16);
+ --illustration-fill-quaternary: rgba(var(--nodedc-card-active-rgb), 0.24);
+ --illustration-stroke-primary: rgba(var(--nodedc-card-active-rgb), 0.46);
+ --illustration-stroke-secondary: rgba(var(--nodedc-card-active-rgb), 0.62);
+ --illustration-stroke-tertiary: rgb(var(--nodedc-card-active-rgb));
+ color: rgb(var(--nodedc-card-active-rgb));
+ opacity: 0.92;
+ }
+
+ .nodedc-stickies-empty-primary-button {
+ display: inline-flex;
+ min-height: 3.05rem;
+ align-items: center;
+ justify-content: center;
+ gap: 0.55rem;
+ border: 0 !important;
+ outline: none !important;
+ border-radius: 1.2rem !important;
+ background: rgb(var(--nodedc-card-active-rgb)) !important;
+ color: rgb(var(--nodedc-on-card-active-rgb)) !important;
+ padding: 0 1.45rem !important;
+ font-size: 0.875rem;
+ font-weight: 700;
+ line-height: 1;
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.18),
+ 0 16px 32px rgba(var(--nodedc-card-active-rgb), 0.14) !important;
+ transition:
+ background 160ms ease,
+ transform 160ms ease,
+ opacity 160ms ease;
+ }
+
+ .nodedc-stickies-empty-primary-button:hover:not(:disabled) {
+ background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 84%, white) !important;
+ transform: translateY(-1px);
+ }
+
+ .nodedc-stickies-empty-primary-button:disabled {
+ cursor: not-allowed;
+ opacity: 0.45;
+ }
+
.nodedc-external-sidebar-shell {
border: 0 !important;
background: