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 ( -
- logo + ); } 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: