diff --git a/plane-src/apps/web/ce/components/comments/comment-block.tsx b/plane-src/apps/web/ce/components/comments/comment-block.tsx index c08454e..a6f259a 100644 --- a/plane-src/apps/web/ce/components/comments/comment-block.tsx +++ b/plane-src/apps/web/ce/components/comments/comment-block.tsx @@ -36,13 +36,13 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock) />
-
+
{children}
diff --git a/plane-src/apps/web/core/components/dropdowns/date.tsx b/plane-src/apps/web/core/components/dropdowns/date.tsx index 5797cf0..f323a49 100644 --- a/plane-src/apps/web/core/components/dropdowns/date.tsx +++ b/plane-src/apps/web/core/components/dropdowns/date.tsx @@ -200,7 +200,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
-
+
setQuery(e.target.value)} placeholder={t("search")} @@ -151,7 +151,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) { onKeyDown={searchInputKeyDown} />
-
+
{filteredOptions ? ( filteredOptions.length > 0 ? ( filteredOptions.map( @@ -162,8 +162,8 @@ export const MemberOptions = observer(function MemberOptions(props: Props) { value={option.value} className={({ active, selected }) => cn( - "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none", - active && "bg-layer-transparent-hover", + "nodedc-dropdown-option", + active && "bg-white/6", selected ? "text-primary" : "text-secondary", isUserSuspended(option.value, workspaceSlug?.toString()) ? "cursor-not-allowed" diff --git a/plane-src/apps/web/core/components/dropdowns/priority.tsx b/plane-src/apps/web/core/components/dropdowns/priority.tsx index f45e6ac..89e54d3 100644 --- a/plane-src/apps/web/core/components/dropdowns/priority.tsx +++ b/plane-src/apps/web/core/components/dropdowns/priority.tsx @@ -431,12 +431,12 @@ export function PriorityDropdown(props: Props) { {isOpen && (
-
+
cn( - `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-[0.9rem] px-2 py-2 select-none outline-none ${ + `nodedc-dropdown-option cursor-pointer ${ active ? "bg-white/6" : "" } ${selected ? "text-primary" : "text-secondary"}` ) diff --git a/plane-src/apps/web/core/components/dropdowns/state/base.tsx b/plane-src/apps/web/core/components/dropdowns/state/base.tsx index 9b0f218..2f5de61 100644 --- a/plane-src/apps/web/core/components/dropdowns/state/base.tsx +++ b/plane-src/apps/web/core/components/dropdowns/state/base.tsx @@ -214,7 +214,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown {isOpen && (
@@ -38,13 +38,13 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF )} } - panelClassName="p-2 rounded-md border border-subtle bg-surface-1" + panelClassName="p-2" data={filterOptions} keyExtractor={(item) => item.key} render={(item) => (
-
-
+
+
setQuery(e.target.value)} placeholder={t("common.search.label")} @@ -157,7 +157,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue />
-
+
{isLoading ? (

{t("common.loading")}

) : filteredOptions.length > 0 ? ( @@ -166,7 +166,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue key={option.value} value={option.value} className={({ selected }) => - `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${ + `nodedc-dropdown-option cursor-pointer ${ selected ? "text-primary" : "text-secondary" }` } @@ -194,7 +194,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue if (!query.length) return; handleAddLabel(query); }} - className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`} + className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`} > {query.length ? ( <> @@ -205,10 +205,12 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue t("label.create.type") )} - ) : ( -

{t("common.search.no_matching_results")}

- )} -
+ ) : ( +

+ {t("common.search.no_matching_results")} +

+ )} +
diff --git a/plane-src/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/plane-src/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx index a259a32..e70740e 100644 --- a/plane-src/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx +++ b/plane-src/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx @@ -254,16 +254,16 @@ export function LabelDropdown(props: ILabelDropdownProps) { {isOpen && (
-
+
setQuery(e.target.value)} placeholder={t("common.search.label")} @@ -271,7 +271,7 @@ export function LabelDropdown(props: ILabelDropdownProps) { onKeyDown={searchInputKeyDown} />
-
+
{isLoading ? (

{t("common.loading")}

) : filteredOptions && filteredOptions.length > 0 ? ( @@ -286,8 +286,8 @@ export function LabelDropdown(props: ILabelDropdownProps) { } }} className={({ active, selected }) => - `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${ - active ? "bg-layer-1" : "" + `nodedc-dropdown-option cursor-pointer ${ + active ? "bg-white/6" : "" } ${selected ? "text-primary" : "text-secondary"}` } > @@ -311,7 +311,7 @@ export function LabelDropdown(props: ILabelDropdownProps) { if (!query.length) return; handleAddLabel(query); }} - className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`} + className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`} > {/* TODO: translate here */} {query.length ? ( @@ -323,7 +323,9 @@ export function LabelDropdown(props: ILabelDropdownProps) { )}

) : ( -

{t("common.search.no_matching_results")}

+

+ {t("common.search.no_matching_results")} +

)}
diff --git a/plane-src/apps/web/core/components/navigation/top-nav-power-k.tsx b/plane-src/apps/web/core/components/navigation/top-nav-power-k.tsx index 73a27aa..b117763 100644 --- a/plane-src/apps/web/core/components/navigation/top-nav-power-k.tsx +++ b/plane-src/apps/web/core/components/navigation/top-nav-power-k.tsx @@ -378,7 +378,7 @@ export const TopNavPowerK = observer((props: TTopNavPowerKProps) => { }} >
-
+
{ )}
-
+
{t("power_k.search_menu.quick_access_title")} diff --git a/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx index 24765c4..15932da 100644 --- a/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx +++ b/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx @@ -231,7 +231,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work variant !== "sidebar-panel", "top-11 left-14": variant === "sidebar", "top-10 left-4": variant === "top-navigation", - "nodedc-glass-modal nodedc-glass-surface rounded-[1.5rem] divide-white/10": + "nodedc-glass-modal nodedc-glass-popup-surface rounded-[1.5rem] divide-white/10": variant === "sidebar-panel", } )} diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css index 600f626..e101c3a 100644 --- a/plane-src/apps/web/styles/globals.css +++ b/plane-src/apps/web/styles/globals.css @@ -229,6 +229,19 @@ 0 4px 16px rgba(0, 0, 0, 0.18); } + .nodedc-glass-popup-surface { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.012) 100%), + rgba(8, 8, 11, 0.9); + border: 0 !important; + outline: none !important; + -webkit-backdrop-filter: blur(44px); + backdrop-filter: blur(44px); + box-shadow: + 0 22px 60px rgba(0, 0, 0, 0.36), + 0 6px 18px rgba(0, 0, 0, 0.2); + } + .nodedc-glass-modal [data-slot="button"], .nodedc-glass-modal [data-slot="icon-button"] { border: none !important; @@ -311,4 +324,53 @@ .nodedc-modal-editor .ProseMirror p.is-editor-empty:first-child::before { color: rgba(255, 255, 255, 0.42) !important; } + + .nodedc-dropdown-surface { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%), + rgba(8, 8, 11, 0.9); + @apply rounded-[1.25rem] px-3 py-3 text-12 outline-none; + border: 0 !important; + -webkit-backdrop-filter: blur(44px); + backdrop-filter: blur(44px); + box-shadow: + 0 22px 60px rgba(0, 0, 0, 0.36), + 0 6px 18px rgba(0, 0, 0, 0.2); + } + + .nodedc-dropdown-search { + @apply flex items-center gap-1.5 rounded-[0.95rem] border-0 bg-white/5 px-3 py-2 outline-none; + } + + .nodedc-dropdown-search input { + @apply w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none; + } + + .nodedc-dropdown-option { + @apply flex w-full items-center justify-between gap-2 truncate rounded-[0.9rem] px-2 py-2 text-secondary select-none outline-none transition-colors; + } + + .nodedc-dropdown-option:hover { + @apply bg-white/6; + } + + .nodedc-calendar-shell { + @apply rounded-[1.1rem] border-0 bg-transparent p-1 shadow-none outline-none; + } + + .nodedc-calendar-shell .rdp-root, + .nodedc-calendar-shell .rdp-months, + .nodedc-calendar-shell .rdp-month { + @apply bg-transparent; + } + + .nodedc-calendar-shell .rdp-day_button, + .nodedc-calendar-shell .rdp-button_previous, + .nodedc-calendar-shell .rdp-button_next, + .nodedc-calendar-shell .rdp-dropdown_root { + border: 0 !important; + box-shadow: none !important; + outline: none !important; + border-radius: 0.95rem !important; + } } diff --git a/plane-src/packages/ui/src/dropdowns/custom-menu.tsx b/plane-src/packages/ui/src/dropdowns/custom-menu.tsx index 7066c17..8a58e9e 100644 --- a/plane-src/packages/ui/src/dropdowns/custom-menu.tsx +++ b/plane-src/packages/ui/src/dropdowns/custom-menu.tsx @@ -200,7 +200,7 @@ function CustomMenu(props: ICustomMenuDropdownProps) { >
(
(
diff --git a/plane-src/packages/ui/src/popovers/popover-menu.tsx b/plane-src/packages/ui/src/popovers/popover-menu.tsx index cc194d9..825f356 100644 --- a/plane-src/packages/ui/src/popovers/popover-menu.tsx +++ b/plane-src/packages/ui/src/popovers/popover-menu.tsx @@ -35,7 +35,7 @@ export function PopoverMenu(props: TPopoverMenu) { button={button} disabled={disabled} panelClassName={cn( - "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none", + "nodedc-glass-modal nodedc-glass-popup-surface my-1 w-52 rounded-[1.25rem] border-0 px-2 py-2.5 text-12 shadow-none outline-none", panelClassName )} popoverClassName={popoverClassName}