-
+
+ {typeof Icon === "function" ? : Icon}
{label}
{appendElement}
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index 26de3aa6bf..1edc2baad1 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -1,6 +1,5 @@
import type { ReactNode } from "react";
-import { Fragment, useRef, useState } from "react";
-import { useTheme } from "next-themes";
+import { useRef, useState } from "react";
import { usePopper } from "react-popper";
import { Check, Search, SignalHigh } from "lucide-react";
import { Combobox } from "@headlessui/react";
@@ -341,10 +340,6 @@ export function PriorityDropdown(props: Props) {
],
});
- // next-themes
- // TODO: remove this after new theming implementation
- const { resolvedTheme } = useTheme();
-
const options = ISSUE_PRIORITIES.map((priority) => ({
value: priority.key,
query: priority.key,
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index d2fe9a3f0d..8a4c018458 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -35,7 +35,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
key={labelId}
type="button"
className={cn(
- "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
+ "h-full w-min flex items-center gap-1.5 rounded-sm px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
{
"cursor-pointer": !disabled,
}
@@ -43,7 +43,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
onClick={handleLabel}
disabled={disabled}
>
-
+
{label.name}
{!disabled && (
diff --git a/apps/web/core/components/issues/issue-detail/label/root.tsx b/apps/web/core/components/issues/issue-detail/label/root.tsx
index 3e6ee31aeb..a61e01129e 100644
--- a/apps/web/core/components/issues/issue-detail/label/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/root.tsx
@@ -92,7 +92,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
);
return (
-
+
-
-
-
- {t("label.select")}
-
+
+ {t("label.select")}
+
);
const searchInputKeyDown = async (e: React.KeyboardEvent) => {
@@ -121,101 +114,149 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
if (!issueId || !values) return <>>;
return (
- <>
- onSelect(value)}
- multiple
- >
-
-
-
-
-
-
-
-
-
- setQuery(e.target.value)}
- placeholder={t("common.search.label")}
- displayValue={(assigned: any) => assigned?.name}
- onKeyDown={searchInputKeyDown}
- tabIndex={baseTabIndex}
- />
-
-
-
- {isLoading ? (
-
{t("common.loading")}
- ) : filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
- selected ? "text-primary" : "text-secondary"
- }`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected && (
-
-
-
- )}
- >
- )}
-
- ))
- ) : submitting ? (
-
- ) : canCreateLabel ? (
-
{
- e.preventDefault();
- e.stopPropagation();
- if (!query.length) return;
- handleAddLabel(query);
- }}
- className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
- >
- {query.length ? (
- <>
- {/* TODO: Translate here */}+ Add "{query}" to
- labels
- >
- ) : (
- t("label.create.type")
- )}
-
- ) : (
-
{t("common.search.no_matching_results")}
- )}
+
onSelect(value)}
+ multiple
+ >
+
+
+
+
+
+
+
+
+ setQuery(e.target.value)}
+ placeholder={t("common.search.label")}
+ displayValue={(assigned: any) => assigned?.name}
+ onKeyDown={searchInputKeyDown}
+ tabIndex={baseTabIndex}
+ />
-
-
- >
+
+ {isLoading ? (
+
{t("common.loading")}
+ ) : filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
+ selected ? "text-primary" : "text-secondary"
+ }`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected && (
+
+
+
+ )}
+ >
+ )}
+
+ ))
+ ) : submitting ? (
+
+ ) : canCreateLabel ? (
+
{
+ e.preventDefault();
+ e.stopPropagation();
+ if (!query.length) return;
+ handleAddLabel(query);
+ }}
+ className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
+ >
+ {query.length ? (
+ <>
+ {/* TODO: Translate here */}+ Add "{query}" to
+ labels
+ >
+ ) : (
+ t("label.create.type")
+ )}
+
+ ) : (
+
{t("common.search.no_matching_results")}
+ )}
+
+
+
+ {isLoading ? (
+
{t("common.loading")}
+ ) : filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
+ selected ? "text-primary" : "text-secondary"
+ }`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected && (
+
+
+
+ )}
+ >
+ )}
+
+ ))
+ ) : submitting ? (
+
+ ) : canCreateLabel ? (
+
{
+ e.preventDefault();
+ e.stopPropagation();
+ if (!query.length) return;
+ handleAddLabel(query);
+ }}
+ className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
+ >
+ {query.length ? (
+ <>
+ {/* TODO: Translate here */}+ Add "{query}" to labels
+ >
+ ) : (
+ t("label.create.type")
+ )}
+
+ ) : (
+
{t("common.search.no_matching_results")}
+ )}
+
+
+
);
});
diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
index 148ac1b889..5b470211ce 100644
--- a/apps/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -75,8 +75,8 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
"group flex items-center justify-between gap-2 px-2 py-0.5 rounded-sm outline-none",
{
"cursor-not-allowed": disabled,
- "hover:bg-layer-1": !disabled,
- "bg-layer-1": isParentIssueModalOpen,
+ "hover:bg-layer-transparent-hover": !disabled,
+ "bg-layer-transparent-selected": isParentIssueModalOpen,
},
className
)}
diff --git a/apps/web/core/components/issues/issue-detail/root.tsx b/apps/web/core/components/issues/issue-detail/root.tsx
index 8194045d19..104f84f101 100644
--- a/apps/web/core/components/issues/issue-detail/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/root.tsx
@@ -301,7 +301,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
/>
) : (
-
+
-
{t("common.properties")}
-
+
{t("common.properties")}
+
issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
disabled={!isEditable}
- buttonVariant="border-with-text"
- className="w-full grow rounded-lg"
- buttonContainerClassName="w-full text-left px-2 h-7.5"
- buttonClassName="w-min h-6 whitespace-nowrap"
+ buttonVariant="transparent-with-text"
+ className="w-full h-7.5 grow rounded-sm"
+ buttonContainerClassName="size-full text-left"
+ buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
/>
@@ -236,7 +235,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
disabled={disabled}
- buttonVariant="border-with-text"
- className="w-full grow group rounded-lg px-2"
- buttonContainerClassName="w-full text-left"
- buttonClassName="w-min h-auto whitespace-nowrap"
+ buttonVariant="transparent-with-text"
+ className="w-full h-7.5 grow rounded-sm"
+ buttonContainerClassName="size-full text-left"
+ buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
/>
@@ -155,7 +154,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
-
+
@@ -231,7 +230,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p