UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: стандартизация borderless matte glass popup и dropdown

plane-src/apps/web/ce/components/comments/comment-block.tsx

@@ -36,13 +36,13 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock)
       />
       <div
         className={cn(
-          "transition-border relative z-[3] flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg border border-subtle bg-layer-2 uppercase shadow-raised-100 duration-1000"
+          "transition-border relative z-[3] flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-[0.95rem] border-0 bg-white/[0.05] uppercase shadow-none duration-1000"
         )}
       >
         <CommentReplyIcon width={14} height={14} className="text-secondary" aria-hidden="true" />
       </div>
       <div className="flex flex-grow flex-col gap-3 truncate">
-        <div className="mb-2 rounded-lg border border-subtle bg-layer-2 p-3 text-body-sm-regular shadow-raised-100">
+        <div className="mb-2 rounded-[1.35rem] border-0 bg-white/[0.05] p-4 text-body-sm-regular shadow-none">
           {children}
         </div>
       </div>

plane-src/apps/web/core/components/dropdowns/date.tsx

@@ -200,7 +200,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200",
+                "nodedc-dropdown-surface z-30 my-1 overflow-hidden",
                 optionsClassName
               )}
               ref={setPopperElement}
@@ -208,7 +208,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
               {...attributes.popper}
             >
               <Calendar
-                className="rounded-md border border-subtle p-3"
+                className="nodedc-calendar-shell"
                 captionLayout="dropdown"
                 selected={getDate(value)}
                 defaultMonth={getDate(value)}

plane-src/apps/web/core/components/dropdowns/intake-state/base.tsx

@@ -212,7 +212,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="nodedc-glass-modal nodedc-glass-surface my-1 w-52 rounded-[1.25rem] border-0 px-3 py-3 text-12 shadow-none outline-none"
+            className="nodedc-glass-modal nodedc-glass-popup-surface my-1 w-52 rounded-[1.25rem] border-0 px-3 py-3 text-12 shadow-none outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}

plane-src/apps/web/core/components/dropdowns/member/member-options.tsx

@@ -129,7 +129,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
     <Combobox.Options data-prevent-outside-click static>
       <div
         className={cn(
-          "z-30 my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
+          "nodedc-dropdown-surface z-30 my-1 w-52",
           optionsClassName
         )}
         ref={setPopperElement}
@@ -138,12 +138,12 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
         }}
         {...attributes.popper}
       >
-        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+        <div className="nodedc-dropdown-search">
           <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
           <Combobox.Input
             as="input"
             ref={inputRef}
-            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+            className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder={t("search")}
@@ -151,7 +151,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
             onKeyDown={searchInputKeyDown}
           />
         </div>
-        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+        <div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
           {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",
+                          "nodedc-dropdown-option",
-                          active && "bg-layer-transparent-hover",
+                          active && "bg-white/6",
                           selected ? "text-primary" : "text-secondary",
                           isUserSuspended(option.value, workspaceSlug?.toString())
                             ? "cursor-not-allowed"

plane-src/apps/web/core/components/dropdowns/priority.tsx

@@ -431,12 +431,12 @@ export function PriorityDropdown(props: Props) {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="nodedc-glass-modal nodedc-glass-surface my-1 w-52 rounded-[1.25rem] border-0 px-3 py-3 text-12 shadow-none outline-none"
+            className="nodedc-dropdown-surface my-1 w-52"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded-[0.95rem] border-0 bg-white/5 px-3 py-2 outline-none">
+            <div className="nodedc-dropdown-search">
               <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
@@ -457,7 +457,7 @@ export function PriorityDropdown(props: Props) {
                     value={option.value}
                     className={({ active, selected }) =>
                       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"}`
                       )

plane-src/apps/web/core/components/dropdowns/state/base.tsx

@@ -214,7 +214,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="nodedc-glass-modal nodedc-glass-surface my-1 w-52 rounded-[1.25rem] border-0 px-3 py-3 text-12 shadow-none outline-none"
+            className="nodedc-glass-modal nodedc-glass-popup-surface my-1 w-52 rounded-[1.25rem] border-0 px-3 py-3 text-12 shadow-none outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}

plane-src/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx

@@ -29,7 +29,7 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
 
   return (
     <PopoverMenu
-      buttonClassName="outline-none"
+      buttonClassName="outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0"
       button={
         <>
           <IconButton variant="tertiary" icon={ListFilter} />
@@ -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) => (
         <div
           key={item.key}
-          className="flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 text-13 transition-all hover:bg-layer-1"
+          className="flex cursor-pointer items-center gap-2 rounded-[0.9rem] px-2 py-2 text-13 transition-all hover:bg-white/6"
           onClick={item.onClick}
         >
           <div

plane-src/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx

@@ -138,16 +138,16 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
 
         <Combobox.Options className="fixed z-10">
           <div
-            className={`z-10 my-1 w-48 rounded-sm border border-strong bg-surface-1 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none`}
+            className={`nodedc-dropdown-surface z-10 my-1 w-52 whitespace-nowrap`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="px-2">
+            <div>
-              <div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
+              <div className="nodedc-dropdown-search">
                 <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
                 <Combobox.Input
-                  className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                  className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder={t("common.search.label")}
@@ -157,7 +157,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                 />
               </div>
             </div>
-            <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
+            <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
               {isLoading ? (
                 <p className="text-center text-secondary">{t("common.loading")}</p>
               ) : 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 ? (
                     <>
@@ -206,7 +206,9 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                   )}
                 </Combobox.Option>
                 ) : (
-                <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
+                  <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
+                    {t("common.search.no_matching_results")}
+                  </p>
                 )}
               </div>
           </div>

plane-src/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx

@@ -254,16 +254,16 @@ export function LabelDropdown(props: ILabelDropdownProps) {
         {isOpen && (
           <Combobox.Options className="fixed z-10" static>
             <div
-              className={`z-10 my-1 h-auto w-48 rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-caption-sm-regular whitespace-nowrap shadow-raised-200 focus:outline-none ${optionsClassName}`}
+              className={`nodedc-dropdown-surface z-10 my-1 h-auto w-52 whitespace-nowrap ${optionsClassName}`}
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
             >
-              <div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
+              <div className="nodedc-dropdown-search">
                 <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
                 <Combobox.Input
                   ref={inputRef}
-                  className="w-full bg-transparent px-2 py-1 text-caption-sm-regular text-secondary placeholder:text-placeholder focus:outline-none"
+                  className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder={t("common.search.label")}
@@ -271,7 +271,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
                   onKeyDown={searchInputKeyDown}
                 />
               </div>
-              <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
+              <div className={`mt-2 max-h-56 space-y-1 overflow-y-auto`}>
                 {isLoading ? (
                   <p className="text-center text-secondary">{t("common.loading")}</p>
                 ) : 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 ${
+                        `nodedc-dropdown-option cursor-pointer ${
-                          active ? "bg-layer-1" : ""
+                          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) {
                     )}
                   </p>
                 ) : (
-                  <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
+                  <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
+                    {t("common.search.no_matching_results")}
+                  </p>
                 )}
               </div>
             </div>

plane-src/apps/web/core/components/navigation/top-nav-power-k.tsx

@@ -378,7 +378,7 @@ export const TopNavPowerK = observer((props: TTopNavPowerKProps) => {
             }}
           >
             <div className="relative">
-              <div className="nodedc-glass-modal nodedc-glass-surface flex h-8 w-full items-center overflow-hidden rounded-full pl-11 pr-3">
+              <div className="nodedc-glass-modal nodedc-glass-popup-surface flex h-8 w-full items-center overflow-hidden rounded-full pl-11 pr-3">
                 <input
                   ref={inputRef}
                   type="text"
@@ -400,7 +400,7 @@ export const TopNavPowerK = observer((props: TTopNavPowerKProps) => {
                   </button>
                 )}
               </div>
-              <div className="nodedc-glass-modal nodedc-glass-surface absolute bottom-full left-0 mb-3 flex max-h-[70vh] w-full flex-col overflow-hidden rounded-[1.5rem] pt-3">
+              <div className="nodedc-glass-modal nodedc-glass-popup-surface absolute bottom-full left-0 mb-3 flex max-h-[70vh] w-full flex-col overflow-hidden rounded-[1.5rem] pt-3">
                 <div className="px-4 pb-2">
                   <div className="text-[13px] font-medium text-secondary">
                     {t("power_k.search_menu.quick_access_title")}

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",
                     }
                   )}

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;
+  }
 }

plane-src/packages/ui/src/dropdowns/custom-menu.tsx

@@ -200,7 +200,7 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
     >
       <div
         className={cn(
-          "my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
+          "nodedc-glass-modal nodedc-glass-popup-surface my-1 min-w-[13rem] overflow-y-auto rounded-[1.25rem] border-0 px-2 py-2.5 text-12 whitespace-nowrap shadow-none outline-none",
           {
             "max-h-60": maxHeight === "lg",
             "max-h-48": maxHeight === "md",
@@ -400,9 +400,9 @@ function SubMenu(props: ICustomSubMenuProps) {
           {({ active }) => (
             <div
               className={cn(
-                "flex w-full cursor-pointer items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
+                "flex w-full cursor-pointer items-center justify-between rounded-[0.9rem] px-2 py-2 text-left text-secondary select-none outline-none",
                 {
-                  "bg-layer-transparent-hover": active && !disabled,
+                  "bg-white/6": active && !disabled,
                   "text-placeholder": disabled,
                   "cursor-not-allowed": disabled,
                 }
@@ -423,7 +423,7 @@ function SubMenu(props: ICustomSubMenuProps) {
             style={styles.popper}
             {...attributes.popper}
             className={cn(
-              "fixed z-30 min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1 p-1 text-11",
+              "nodedc-glass-modal nodedc-glass-popup-surface fixed z-30 min-w-[13rem] overflow-hidden rounded-[1.25rem] border-0 p-2 text-12 shadow-none outline-none",
               contentClassName
             )}
             data-prevent-outside-click="true"
@@ -462,9 +462,9 @@ function MenuItem(props: ICustomMenuItemProps) {
         <button
           type="button"
           className={cn(
-            "w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none",
+            "w-full truncate rounded-[0.9rem] px-2 py-2 text-left text-secondary select-none outline-none",
             {
-              "bg-layer-transparent-hover": active && !disabled,
+              "bg-white/6": active && !disabled,
               "text-placeholder": disabled,
             },
             className
@@ -492,9 +492,9 @@ function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
       {({ active }) => (
         <div
           className={cn(
-            "flex w-full items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
+            "flex w-full items-center justify-between rounded-[0.9rem] px-2 py-2 text-left text-secondary select-none outline-none",
             {
-              "bg-layer-transparent-hover": active && !disabled,
+              "bg-white/6": active && !disabled,
               "text-placeholder": disabled,
               "cursor-pointer": !disabled,
               "cursor-not-allowed": disabled,
@@ -516,7 +516,7 @@ function SubMenuContent(props: ICustomSubMenuContentProps) {
   return (
     <div
       className={cn(
-        "z-[15] min-w-[12rem] overflow-hidden rounded-md border border-subtle-1 bg-surface-1 p-1 text-11",
+        "nodedc-glass-modal nodedc-glass-popup-surface z-[15] min-w-[13rem] overflow-hidden rounded-[1.25rem] border-0 p-2 text-12 shadow-none outline-none",
         className
       )}
     >

plane-src/packages/ui/src/popovers/popover-menu.tsx

@@ -35,7 +35,7 @@ export function PopoverMenu<T>(props: TPopoverMenu<T>) {
       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}