From 9e2c2f065a18aafe3624a1781988fcd78f479f45 Mon Sep 17 00:00:00 2001 From: DCCONSTRUCTIONS Date: Sun, 26 Apr 2026 23:28:36 +0300 Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?= =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?= =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=BF?= =?UTF-8?q?=D0=BE=D0=B4=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D1=8B=20?= =?UTF-8?q?=D0=B2=D0=BD=D0=B5=D1=88=D0=BD=D0=B5=D0=B3=D0=BE=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=BD=D1=82=D1=83=D1=80=D0=B0=20=D0=B8=20=D0=B7=D0=B0=D0=B3?= =?UTF-8?q?=D0=BB=D1=83=D1=88=D0=BA=D0=B0=20=D1=81=D1=82=D0=B8=D0=BA=D0=B5?= =?UTF-8?q?=D1=80=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/components/common/logo-spinner.tsx | 4 +- .../sub-issues/quick-action-button.tsx | 4 +- .../stickies/layout/stickies-list.tsx | 50 +++++++++---------- plane-src/apps/web/styles/globals.css | 50 +++++++++++++++++++ 4 files changed, 78 insertions(+), 30 deletions(-) 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: