mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: update primary text color
This commit is contained in:
Aaryan Khandelwal
parent
8dd5776e69
commit
fd52712983
@ -19,7 +19,7 @@ export const MentionNodeView = (props) => {
|
||||
return (
|
||||
<NodeViewWrapper className="mention-component inline w-fit">
|
||||
<span
|
||||
className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-custom-primary-100", {
|
||||
className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-primary-text-subtle", {
|
||||
"bg-yellow-500/20 text-yellow-500": highlights ? highlights.includes(props.node.attrs.id) : false,
|
||||
"cursor-pointer": !props.extension.options.readonly,
|
||||
// "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)
|
||||
|
||||
@ -34,7 +34,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
|
||||
type="button"
|
||||
ref={setReferenceElement}
|
||||
className={`grid h-7 w-7 place-items-center rounded ${
|
||||
sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-neutral-text-medium"
|
||||
sidePeekVisible ? "bg-custom-primary-100/20 text-primary-text-subtle" : "text-neutral-text-medium"
|
||||
}`}
|
||||
onClick={() => setSidePeekVisible(!sidePeekVisible)}
|
||||
>
|
||||
|
||||
@ -66,7 +66,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
|
||||
<div
|
||||
className={`${
|
||||
!isAValidNumber(size) ? sizeInfo.avatarSize : ""
|
||||
} grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-custom-primary-100 ring-1 ring-custom-background-100`}
|
||||
} grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-primary-text-subtle ring-1 ring-custom-background-100`}
|
||||
style={
|
||||
isAValidNumber(size)
|
||||
? {
|
||||
|
||||
@ -46,12 +46,12 @@ export const badgeStyling: IBadgeStyling = {
|
||||
disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
|
||||
},
|
||||
"accent-primary": {
|
||||
default: `bg-custom-primary-10 text-custom-primary-100`,
|
||||
default: `bg-custom-primary-10 text-primary-text-subtle`,
|
||||
hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
|
||||
disabled: `cursor-not-allowed !text-custom-primary-60`,
|
||||
},
|
||||
"outline-primary": {
|
||||
default: `text-custom-primary-100 bg-neutral-component-surface-light border border-custom-primary-100`,
|
||||
default: `text-primary-text-subtle bg-neutral-component-surface-light border border-custom-primary-100`,
|
||||
hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
|
||||
disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
|
||||
},
|
||||
|
||||
@ -43,15 +43,15 @@ export const buttonStyling: IButtonStyling = {
|
||||
disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
|
||||
},
|
||||
"accent-primary": {
|
||||
default: `bg-custom-primary-10 text-custom-primary-100`,
|
||||
default: `bg-custom-primary-10 text-primary-text-subtle`,
|
||||
hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
|
||||
pressed: `focus:bg-custom-primary-20`,
|
||||
disabled: `cursor-not-allowed !text-custom-primary-60`,
|
||||
},
|
||||
"outline-primary": {
|
||||
default: `text-custom-primary-100 bg-transparent border border-custom-primary-100`,
|
||||
default: `text-primary-text-subtle bg-transparent border border-custom-primary-100`,
|
||||
hover: `hover:bg-custom-primary-100/20`,
|
||||
pressed: `focus:text-custom-primary-100 focus:bg-custom-primary-100/30`,
|
||||
pressed: `focus:text-primary-text-subtle focus:bg-custom-primary-100/30`,
|
||||
disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
|
||||
},
|
||||
"neutral-primary": {
|
||||
@ -61,7 +61,7 @@ export const buttonStyling: IButtonStyling = {
|
||||
disabled: `cursor-not-allowed !text-neutral-text-subtle`,
|
||||
},
|
||||
"link-primary": {
|
||||
default: `text-custom-primary-100 bg-neutral-component-surface-light`,
|
||||
default: `text-primary-text-subtle bg-neutral-component-surface-light`,
|
||||
hover: `hover:text-custom-primary-200`,
|
||||
pressed: `focus:text-custom-primary-80 `,
|
||||
disabled: `cursor-not-allowed !text-custom-primary-60`,
|
||||
|
||||
@ -16,7 +16,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
|
||||
const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
|
||||
|
||||
const priorityClasses = {
|
||||
urgent: "bg-danger-110 text-red-500 border-danger-110",
|
||||
urgent: "bg-danger-90 text-red-500 border-danger-90",
|
||||
high: "bg-orange-30 text-orange-80 border-orange-80",
|
||||
medium: "bg-warning-20 text-warning-80 border-warning-80",
|
||||
low: "bg-primary-30 text-primary-90 border-primary-90",
|
||||
@ -67,7 +67,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
|
||||
"text-red-500": priority === "urgent",
|
||||
"text-orange-500": priority === "high",
|
||||
"text-yellow-500": priority === "medium",
|
||||
"text-custom-primary-100": priority === "low",
|
||||
"text-primary-text-subtle": priority === "low",
|
||||
"text-neutral-text-medium": priority === "none",
|
||||
},
|
||||
className
|
||||
|
||||
@ -92,7 +92,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click{" "}
|
||||
<span className="text-custom-primary-100">{isOnboarded ? "Go to board" : "Set up profile"}</span> above, you
|
||||
<span className="text-primary-text-subtle">{isOnboarded ? "Go to board" : "Set up profile"}</span> above, you
|
||||
agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
|
||||
@ -191,7 +191,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
||||
type="button"
|
||||
onClick={handleForgotPassword}
|
||||
className={`text-xs font-medium ${
|
||||
isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
|
||||
isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-primary-text-subtle"
|
||||
}`}
|
||||
disabled={isSendingResetPasswordLink}
|
||||
>
|
||||
@ -222,7 +222,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click <span className="text-custom-primary-100">Go to board</span> above, you agree with our{" "}
|
||||
When you click <span className="text-primary-text-subtle">Go to board</span> above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
|
||||
@ -66,7 +66,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
|
||||
We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
|
||||
We have sent a link to <span className="font-semibold text-primary-text-subtle">{email},</span> so you can set a
|
||||
password
|
||||
</p>
|
||||
|
||||
|
||||
@ -157,7 +157,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
|
||||
Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below.
|
||||
Paste the code you got at <span className="font-semibold text-primary-text-subtle">{email}</span> below.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
|
||||
@ -227,7 +227,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
className={`text-xs ${
|
||||
isRequestNewCodeDisabled
|
||||
? "text-onboarding-text-300"
|
||||
: "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
: "text-onboarding-text-200 hover:text-primary-text-subtle"
|
||||
}`}
|
||||
disabled={isRequestNewCodeDisabled}
|
||||
>
|
||||
|
||||
@ -59,7 +59,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -54,7 +54,7 @@ export const FilterState: React.FC<Props> = (props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -117,7 +117,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
|
||||
commentReactions?.some(
|
||||
(r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
|
||||
)
|
||||
? "text-custom-primary-100"
|
||||
? "text-primary-text-subtle"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
|
||||
@ -94,7 +94,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
|
||||
<span
|
||||
className={
|
||||
reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
|
||||
? "text-custom-primary-100"
|
||||
? "text-primary-text-subtle"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
|
||||
@ -26,7 +26,7 @@ export const ForgotPasswordPopover = () => {
|
||||
<button
|
||||
type="button"
|
||||
ref={setReferenceElement}
|
||||
className="text-xs font-medium text-custom-primary-100 outline-none"
|
||||
className="text-xs font-medium text-primary-text-subtle outline-none"
|
||||
>
|
||||
Forgot your password?
|
||||
</button>
|
||||
|
||||
@ -186,7 +186,7 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
|
||||
{isSmtpConfigured ? (
|
||||
<Link
|
||||
href={`/accounts/forgot-password?email=${email}`}
|
||||
className="text-xs font-medium text-custom-primary-100"
|
||||
className="text-xs font-medium text-primary-text-subtle"
|
||||
>
|
||||
Forgot your password?
|
||||
</Link>
|
||||
|
||||
@ -110,7 +110,7 @@ export const SignInRoot = observer(() => {
|
||||
<OAuthOptions handleSignInRedirection={handleRedirection} type="sign_in" />
|
||||
<p className="text-xs text-onboarding-text-300 text-center mt-6">
|
||||
Don{"'"}t have an account?{" "}
|
||||
<Link href="/accounts/sign-up" className="text-custom-primary-100 font-medium underline">
|
||||
<Link href="/accounts/sign-up" className="text-primary-text-subtle font-medium underline">
|
||||
Sign up
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@ -127,7 +127,7 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
|
||||
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
|
||||
Paste the code you got at
|
||||
<br />
|
||||
<span className="font-semibold text-custom-primary-100">{email}</span> below.
|
||||
<span className="font-semibold text-primary-text-subtle">{email}</span> below.
|
||||
</p>
|
||||
<form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
|
||||
<div>
|
||||
@ -187,7 +187,7 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
|
||||
className={`text-xs ${
|
||||
isRequestNewCodeDisabled
|
||||
? "text-onboarding-text-300"
|
||||
: "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
: "text-onboarding-text-200 hover:text-primary-text-subtle"
|
||||
}`}
|
||||
disabled={isRequestNewCodeDisabled}
|
||||
>
|
||||
|
||||
@ -86,7 +86,7 @@ export const SignUpRoot = observer(() => {
|
||||
<OAuthOptions handleSignInRedirection={handleRedirection} type="sign_up" />
|
||||
<p className="text-xs text-onboarding-text-300 text-center mt-6">
|
||||
Already using Plane?{" "}
|
||||
<Link href="/" className="text-custom-primary-100 font-medium underline">
|
||||
<Link href="/" className="text-primary-text-subtle font-medium underline">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
@ -127,7 +127,7 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
|
||||
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
|
||||
Paste the code you got at
|
||||
<br />
|
||||
<span className="font-semibold text-custom-primary-100">{email}</span> below.
|
||||
<span className="font-semibold text-primary-text-subtle">{email}</span> below.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
|
||||
@ -188,7 +188,7 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
|
||||
className={`text-xs ${
|
||||
isRequestNewCodeDisabled
|
||||
? "text-onboarding-text-300"
|
||||
: "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
: "text-onboarding-text-200 hover:text-primary-text-subtle"
|
||||
}`}
|
||||
disabled={isRequestNewCodeDisabled}
|
||||
>
|
||||
|
||||
@ -7,7 +7,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
|
||||
const { theme: themStore } = useApplication();
|
||||
return (
|
||||
<div
|
||||
className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
|
||||
className="w-7 h-7 rounded flex justify-center items-center bg-neutral-component-surface-dark transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
|
||||
onClick={() => themStore.toggleSidebar()}
|
||||
>
|
||||
<Menu size={14} className="text-neutral-text-medium group-hover:text-neutral-text-strong transition-all" />
|
||||
|
||||
@ -166,12 +166,12 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
||||
<CircularProgressIndicator size={38} percentage={progress}>
|
||||
{isCompleted ? (
|
||||
progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
|
||||
) : (
|
||||
<span className="text-sm text-custom-primary-100">{`!`}</span>
|
||||
<span className="text-sm text-primary-text-subtle">{`!`}</span>
|
||||
)
|
||||
) : progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
|
||||
) : (
|
||||
<span className="text-xs text-neutral-text-medium">{`${progress}%`}</span>
|
||||
)}
|
||||
@ -221,7 +221,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
||||
))}
|
||||
</AvatarGroup>
|
||||
) : (
|
||||
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
|
||||
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-neutral-component-surface-dark">
|
||||
<User2 className="h-4 w-4 text-neutral-text-subtle" />
|
||||
</span>
|
||||
)}
|
||||
|
||||
@ -403,7 +403,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<>
|
||||
<Popover.Button
|
||||
ref={startDateButtonRef}
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
|
||||
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
|
||||
}`}
|
||||
disabled={isCompleted || !isEditingAllowed}
|
||||
@ -460,7 +460,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<>
|
||||
<Popover.Button
|
||||
ref={endDateButtonRef}
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
|
||||
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
|
||||
}`}
|
||||
disabled={isCompleted || !isEditingAllowed}
|
||||
|
||||
@ -74,7 +74,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
|
||||
})}
|
||||
>
|
||||
Issues
|
||||
<span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
|
||||
<span className="flex-shrink-0 bg-custom-primary-100/20 text-primary-text-subtle text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
|
||||
{totalIssues}
|
||||
</span>
|
||||
</h6>
|
||||
|
||||
@ -21,7 +21,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
|
||||
return (
|
||||
<Tab.List
|
||||
as="div"
|
||||
className="relative border-[0.5px] border-neutral-border-medium rounded bg-custom-background-80 grid"
|
||||
className="relative border-[0.5px] border-neutral-border-medium rounded bg-neutral-component-surface-dark grid"
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
|
||||
}}
|
||||
|
||||
@ -75,7 +75,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
|
||||
{STATS_LIST.map((stat, index) => (
|
||||
<div
|
||||
className={cn(
|
||||
`w-full flex flex-col gap-2 hover:bg-custom-background-80`,
|
||||
`w-full flex flex-col gap-2 hover:bg-neutral-component-surface-dark`,
|
||||
index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
|
||||
index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
|
||||
index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",
|
||||
|
||||
@ -110,7 +110,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
|
||||
toggleCreateProjectModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="h-[3.375rem] w-[3.375rem] bg-custom-primary-100/20 text-custom-primary-100 grid place-items-center rounded border border-dashed border-custom-primary-60 flex-shrink-0">
|
||||
<div className="h-[3.375rem] w-[3.375rem] bg-custom-primary-100/20 text-primary-text-subtle grid place-items-center rounded border border-dashed border-custom-primary-60 flex-shrink-0">
|
||||
<Plus className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="text-sm text-neutral-text-medium font-medium group-hover:underline group-hover:text-neutral-text-strong">
|
||||
|
||||
@ -54,8 +54,8 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
|
||||
<Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
|
||||
<div
|
||||
className={cn(
|
||||
"h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
|
||||
{ "bg-custom-background-80": isActive },
|
||||
"h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-neutral-component-surface-dark rounded text-xs px-2 py-0.5",
|
||||
{ "bg-neutral-component-surface-dark": isActive },
|
||||
className
|
||||
)}
|
||||
>
|
||||
@ -72,7 +72,7 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
|
||||
<Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
|
||||
<div
|
||||
className={cn(
|
||||
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
|
||||
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-neutral-component-surface-dark",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@ -89,8 +89,8 @@ const TransparentButton: React.FC<ButtonProps> = (props) => {
|
||||
<Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
|
||||
<div
|
||||
className={cn(
|
||||
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
|
||||
{ "bg-custom-background-80": isActive },
|
||||
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-neutral-component-surface-dark",
|
||||
{ "bg-neutral-component-surface-dark": isActive },
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@ -208,7 +208,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
|
||||
active ? "bg-custom-background-80" : ""
|
||||
active ? "bg-neutral-component-surface-dark" : ""
|
||||
} ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
|
||||
}
|
||||
>
|
||||
|
||||
@ -90,7 +90,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
|
||||
return (
|
||||
<div
|
||||
key={moduleId}
|
||||
className="flex items-center gap-1 bg-custom-background-80 text-neutral-text-medium rounded px-1.5 py-1"
|
||||
className="flex items-center gap-1 bg-neutral-component-surface-dark text-neutral-text-medium rounded px-1.5 py-1"
|
||||
>
|
||||
{!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
|
||||
{!hideText && (
|
||||
@ -349,7 +349,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
|
||||
cn(
|
||||
"w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
|
||||
{
|
||||
"bg-custom-background-80": active,
|
||||
"bg-neutral-component-surface-dark": active,
|
||||
"text-neutral-text-strong": selected,
|
||||
"text-neutral-text-medium": !selected,
|
||||
}
|
||||
|
||||
@ -211,7 +211,7 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
"px-0.5": hideText,
|
||||
// highlight the whole button if text is hidden and priority is urgent
|
||||
"bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
|
||||
"bg-custom-background-80": isActive,
|
||||
"bg-neutral-component-surface-dark": isActive,
|
||||
},
|
||||
className
|
||||
)}
|
||||
@ -350,7 +350,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
className={cn(
|
||||
"h-full",
|
||||
{
|
||||
"bg-custom-background-80": isOpen,
|
||||
"bg-neutral-component-surface-dark": isOpen,
|
||||
},
|
||||
className
|
||||
)}
|
||||
|
||||
@ -106,7 +106,7 @@ const IntegrationGuide = observer(() => {
|
||||
<button
|
||||
disabled={!exporterServices?.prev_page_results}
|
||||
onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
|
||||
className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
|
||||
className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${
|
||||
exporterServices?.prev_page_results
|
||||
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
|
||||
: "cursor-not-allowed opacity-75"
|
||||
@ -118,7 +118,7 @@ const IntegrationGuide = observer(() => {
|
||||
<button
|
||||
disabled={!exporterServices?.next_page_results}
|
||||
onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
|
||||
className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
|
||||
className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${
|
||||
exporterServices?.next_page_results
|
||||
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
|
||||
: "cursor-not-allowed opacity-75"
|
||||
|
||||
@ -93,7 +93,7 @@ export const GanttChartBlocks: FC<GanttChartBlocksProps> = (props) => {
|
||||
key={`block-${block.id}`}
|
||||
className={cn(
|
||||
"h-11",
|
||||
{ "rounded bg-custom-background-80": activeBlock?.id === block.id },
|
||||
{ "rounded bg-neutral-component-surface-dark": activeBlock?.id === block.id },
|
||||
{
|
||||
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
|
||||
peekIssue?.issueId === block.data.id,
|
||||
|
||||
@ -76,7 +76,7 @@ export const ChartAddBlock: React.FC<Props> = (props) => {
|
||||
<Tooltip tooltipContent={buttonStartDate && renderFormattedDate(buttonStartDate)}>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-custom-background-80 p-1.5 rounded border border-neutral-border-medium grid place-items-center text-neutral-text-medium hover:text-neutral-text-strong"
|
||||
className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-neutral-component-surface-dark p-1.5 rounded border border-neutral-border-medium grid place-items-center text-neutral-text-medium hover:text-neutral-text-strong"
|
||||
style={{
|
||||
marginLeft: `${buttonXPosition}px`,
|
||||
}}
|
||||
|
||||
@ -132,7 +132,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
||||
<div
|
||||
className={cn(
|
||||
"h-11",
|
||||
{ "rounded bg-custom-background-80": snapshot.isDragging },
|
||||
{ "rounded bg-neutral-component-surface-dark": snapshot.isDragging },
|
||||
{
|
||||
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
|
||||
peekIssue?.issueId === block.data.id,
|
||||
|
||||
@ -264,7 +264,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-sidebar-neutral-component-surface-dark"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
|
||||
@ -272,7 +272,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="grid md:hidden h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
|
||||
className="grid md:hidden h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-sidebar-neutral-component-surface-dark"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<PanelRight
|
||||
|
||||
@ -274,7 +274,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-sidebar-neutral-component-surface-dark"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<ArrowRight
|
||||
|
||||
@ -163,7 +163,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
|
||||
{currentProjectDetails?.is_deployed && deployUrl && (
|
||||
<a
|
||||
href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
|
||||
className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
|
||||
className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-primary-text-subtle"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@ -209,7 +209,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
|
||||
<Button variant="neutral-primary" size="sm" className="relative">
|
||||
Inbox
|
||||
{inboxDetails?.pending_issue_count > 0 && (
|
||||
<span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-custom-sidebar-background-80 text-neutral-text-strong">
|
||||
<span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-dark text-neutral-text-strong">
|
||||
{inboxDetails?.pending_issue_count}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@ -37,13 +37,13 @@ export const WorkspaceDashboardHeader = () => {
|
||||
href="https://plane.so/changelog"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
|
||||
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-neutral-component-surface-dark px-3 py-1.5"
|
||||
>
|
||||
<Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
|
||||
<span className="text-xs hidden sm:hidden md:block font-medium">{"What's new?"}</span>
|
||||
</a>
|
||||
<a
|
||||
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 "
|
||||
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-neutral-component-surface-dark px-3 py-1.5 "
|
||||
href="https://github.com/makeplane/plane"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
@ -80,7 +80,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
|
||||
<a
|
||||
href="https://platform.openai.com/docs/models/overview"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Learn more
|
||||
@ -129,7 +129,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
|
||||
<a
|
||||
href="https://platform.openai.com/api-keys"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
here.
|
||||
|
||||
@ -82,7 +82,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
|
||||
<a
|
||||
href="https://github.com/settings/applications/new"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
GitHub OAuth application settings.
|
||||
@ -131,7 +131,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
|
||||
<a
|
||||
href="https://github.com/settings/applications/new"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
GitHub OAuth application settings.
|
||||
@ -160,7 +160,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
|
||||
<a
|
||||
href="https://github.com/settings/applications/new"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
here.
|
||||
|
||||
@ -80,7 +80,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
|
||||
<a
|
||||
href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Learn more
|
||||
@ -109,7 +109,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
|
||||
<a
|
||||
href="https://console.cloud.google.com/apis/credentials/oauthclient"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
here.
|
||||
|
||||
@ -95,7 +95,7 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
|
||||
<a
|
||||
href="https://unsplash.com/documentation#creating-a-developer-account"
|
||||
target="_blank"
|
||||
className="text-custom-primary-100 hover:underline"
|
||||
className="text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Learn more.
|
||||
|
||||
@ -55,7 +55,7 @@ export const InstanceAdminRestriction: FC<InstanceAdminRestrictionProps> = ({ re
|
||||
<a
|
||||
href="https://discord.com/channels/1031547764020084846/1094927053867995176"
|
||||
target="_blank"
|
||||
className="font-medium text-custom-primary-100 hover:underline"
|
||||
className="font-medium text-primary-text-subtle hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Talk to us.
|
||||
|
||||
@ -143,7 +143,7 @@ export const InstanceSidebarDropdown = observer(() => {
|
||||
<div className="p-2 pb-0">
|
||||
<Menu.Item as="button" type="button" className="w-full">
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
|
||||
<span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
|
||||
Exit God Mode
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
@ -59,7 +59,7 @@ export const InstanceAdminSidebarMenu = () => {
|
||||
<div
|
||||
className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
|
||||
isActive
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
? "bg-custom-primary-100/10 text-primary-text-subtle"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
|
||||
} ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
>
|
||||
@ -68,7 +68,7 @@ export const InstanceAdminSidebarMenu = () => {
|
||||
<div className="flex flex-col leading-snug">
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
isActive ? "text-custom-primary-100" : "text-sidebar-neutral-text-medium"
|
||||
isActive ? "text-primary-text-subtle" : "text-sidebar-neutral-text-medium"
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
|
||||
@ -63,8 +63,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
|
||||
"group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
|
||||
{
|
||||
"cursor-not-allowed": disabled,
|
||||
"hover:bg-custom-background-80": !disabled,
|
||||
"bg-custom-background-80": isParentIssueModalOpen,
|
||||
"hover:bg-neutral-component-surface-dark": !disabled,
|
||||
"bg-neutral-component-surface-dark": isParentIssueModalOpen,
|
||||
},
|
||||
className
|
||||
)}
|
||||
|
||||
@ -106,7 +106,7 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
|
||||
}`}
|
||||
>
|
||||
<span>{renderEmoji(reaction)}</span>
|
||||
<span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
|
||||
<span className={userReactions.includes(reaction) ? "text-primary-text-subtle" : ""}>
|
||||
{(reactionIds || {})[reaction].length}{" "}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -91,7 +91,7 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
|
||||
}`}
|
||||
>
|
||||
<span>{renderEmoji(reaction)}</span>
|
||||
<span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
|
||||
<span className={userReactions.includes(reaction) ? "text-primary-text-subtle" : ""}>
|
||||
{(reactionIds || {})[reaction].length}{" "}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -105,8 +105,8 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
|
||||
"group flex items-center gap-2 px-2 py-0.5 rounded outline-none",
|
||||
{
|
||||
"cursor-not-allowed": disabled,
|
||||
"hover:bg-custom-background-80": !disabled,
|
||||
"bg-custom-background-80": isRelationModalOpen === relationKey,
|
||||
"hover:bg-neutral-component-surface-dark": !disabled,
|
||||
"bg-neutral-component-surface-dark": isRelationModalOpen === relationKey,
|
||||
},
|
||||
className
|
||||
)}
|
||||
|
||||
@ -181,11 +181,11 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
|
||||
<div className="hidden rounded border-[0.5px] border-neutral-border-medium group-hover:block">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100"
|
||||
className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-primary-text-subtle"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
<span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -64,7 +64,7 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -63,7 +63,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -59,7 +59,7 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -64,7 +64,7 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -72,7 +72,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -54,7 +54,7 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -55,7 +55,7 @@ export const FilterState: React.FC<Props> = observer((props) => {
|
||||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-xs font-medium text-primary-text-subtle"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
||||
@ -152,11 +152,11 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-primary-text-subtle"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
<span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -62,7 +62,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
|
||||
<div className="line-clamp-1 text-xs text-neutral-text-medium">
|
||||
{getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
<div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
|
||||
<div className="absolute top-0 -right-1 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
|
||||
</div>
|
||||
</WithDisplayPropertiesHOC>
|
||||
|
||||
|
||||
@ -98,7 +98,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
||||
}`}
|
||||
>
|
||||
{sub_group_by === null && (
|
||||
<div className="flex-shrink-0 sticky top-0 z-[2] w-full bg-neutral-component-surface-medium py-1">
|
||||
<div className="flex-shrink-0 sticky top-0 z-[2] w-full bg-neutral-page-surface-default py-1">
|
||||
<HeaderGroupByCard
|
||||
sub_group_by={sub_group_by}
|
||||
group_by={group_by}
|
||||
|
||||
@ -160,7 +160,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
|
||||
</CustomMenu>
|
||||
) : (
|
||||
<div
|
||||
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-neutral-component-surface-dark"
|
||||
onClick={() => {
|
||||
setTrackElement("Kanban layout");
|
||||
setIsOpen(true);
|
||||
|
||||
@ -132,7 +132,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
||||
{provided.placeholder}
|
||||
|
||||
{enableQuickIssueCreate && !disableIssueCreation && (
|
||||
<div className="w-full bg-neutral-component-surface-medium py-0.5 sticky bottom-0">
|
||||
<div className="w-full bg-neutral-page-surface-default py-0.5 sticky bottom-0">
|
||||
<KanBanQuickAddIssueForm
|
||||
formKey="name"
|
||||
groupId={groupId}
|
||||
|
||||
@ -146,11 +146,11 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-primary-text-subtle"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
<span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -117,8 +117,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
list.length > 0 &&
|
||||
list.map((_list: any) => (
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
<div className="sticky top-[50px] z-[1] flex w-full items-center bg-neutral-component-surface-medium py-1">
|
||||
<div className="sticky left-0 flex-shrink-0 bg-neutral-component-surface-medium pr-2">
|
||||
<div className="sticky top-[50px] z-[1] flex w-full items-center bg-neutral-page-surface-default py-1">
|
||||
<div className="sticky left-0 flex-shrink-0 pr-2">
|
||||
<HeaderSubGroupByCard
|
||||
column_id={_list.id}
|
||||
icon={_list.Icon}
|
||||
@ -218,7 +218,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="sticky top-0 z-[2] h-[50px] bg-neutral-component-surface-medium">
|
||||
<div className="sticky top-0 z-[2] h-[50px] bg-neutral-page-surface-default">
|
||||
<SubGroupSwimlaneHeader
|
||||
issueIds={issueIds}
|
||||
group_by={group_by}
|
||||
|
||||
@ -111,7 +111,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
(_list: any) =>
|
||||
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
|
||||
<div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
|
||||
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-neutral-border-medium bg-neutral-component-surface-medium px-3 py-1">
|
||||
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-neutral-border-medium bg-neutral-page-surface-default px-3 py-1">
|
||||
<HeaderGroupByCard
|
||||
icon={_list.icon}
|
||||
title={_list.name || ""}
|
||||
|
||||
@ -99,7 +99,7 @@ export const HeaderGroupByCard = observer(
|
||||
</CustomMenu>
|
||||
) : (
|
||||
<div
|
||||
className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-neutral-component-surface-dark"
|
||||
onClick={() => {
|
||||
setTrackElement("List layout");
|
||||
setIsOpen(true);
|
||||
|
||||
@ -146,11 +146,11 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-primary-text-subtle"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
<span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -120,7 +120,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
|
||||
<div
|
||||
key={label?.id}
|
||||
className={`flex overflow-hidden hover:bg-custom-background-80 ${
|
||||
className={`flex overflow-hidden hover:bg-neutral-component-surface-dark ${
|
||||
!disabled && "cursor-pointer"
|
||||
} h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs`}
|
||||
>
|
||||
@ -227,8 +227,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
|
||||
active ? "bg-custom-background-80" : ""
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-neutral-component-surface-dark ${
|
||||
active ? "bg-neutral-component-surface-dark" : ""
|
||||
} ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
|
||||
}
|
||||
>
|
||||
|
||||
@ -27,7 +27,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
|
||||
value={issue.label_ids}
|
||||
defaultOptions={defaultLabelOptions}
|
||||
onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
|
||||
className="h-11 w-full border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80"
|
||||
className="h-11 w-full border-b-[0.5px] border-neutral-border-medium hover:bg-neutral-component-surface-dark"
|
||||
buttonClassName="px-2.5 h-full"
|
||||
hideDropdownArrow
|
||||
maxRender={1}
|
||||
|
||||
@ -217,11 +217,11 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-x-[6px] rounded-md px-2 pt-3 text-custom-primary-100"
|
||||
className="flex items-center gap-x-[6px] rounded-md px-2 pt-3 text-primary-text-subtle"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
<span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -307,7 +307,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
{!disabled && (
|
||||
<div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
|
||||
<div
|
||||
className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
|
||||
className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-neutral-component-surface-dark"
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail add sub-issue");
|
||||
handleIssueCrudState("create", parentIssueId, null);
|
||||
@ -316,7 +316,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
Add sub-issue
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
|
||||
className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-neutral-component-surface-dark"
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail add sub-issue");
|
||||
handleIssueCrudState("existing", parentIssueId, null);
|
||||
|
||||
@ -144,12 +144,12 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||
<CircularProgressIndicator size={38} percentage={progress}>
|
||||
{completedModuleCheck ? (
|
||||
progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
|
||||
) : (
|
||||
<span className="text-sm text-custom-primary-100">{`!`}</span>
|
||||
<span className="text-sm text-primary-text-subtle">{`!`}</span>
|
||||
)
|
||||
) : progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
|
||||
) : (
|
||||
<span className="text-xs text-neutral-text-medium">{`${progress}%`}</span>
|
||||
)}
|
||||
|
||||
@ -349,7 +349,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<>
|
||||
<Popover.Button
|
||||
ref={startDateButtonRef}
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
|
||||
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
|
||||
}`}
|
||||
disabled={!isEditingAllowed}
|
||||
@ -405,7 +405,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<>
|
||||
<Popover.Button
|
||||
ref={endDateButtonRef}
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
|
||||
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
|
||||
}`}
|
||||
disabled={!isEditingAllowed}
|
||||
@ -629,7 +629,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
{isEditingAllowed && (
|
||||
<div className="flex w-full items-center justify-end">
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-primary-text-subtle"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
@ -657,7 +657,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<span className="p-0.5 text-xs text-neutral-text-medium">No links added yet</span>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-primary-text-subtle"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
|
||||
@ -165,7 +165,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
|
||||
onClick={() => setSelectedTab(tab.value)}
|
||||
className={`whitespace-nowrap border-b-2 px-1 pb-4 text-sm font-medium outline-none ${
|
||||
tab.value === selectedTab
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
? "border-custom-primary-100 text-primary-text-subtle"
|
||||
: "border-transparent text-neutral-text-medium"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -68,7 +68,7 @@ export const NotificationPopover = observer(() => {
|
||||
<Popover.Button
|
||||
className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
||||
isActive
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
? "bg-custom-primary-100/10 text-primary-text-subtle"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
|
||||
} ${isSidebarCollapsed ? "justify-center" : ""}`}
|
||||
>
|
||||
@ -156,7 +156,7 @@ export const NotificationPopover = observer(() => {
|
||||
{hasMore && !isLoadingMore && (
|
||||
<button
|
||||
type="button"
|
||||
className="my-6 flex w-full items-center justify-center text-sm font-medium text-custom-primary-100"
|
||||
className="my-6 flex w-full items-center justify-center text-sm font-medium text-primary-text-subtle"
|
||||
disabled={isLoadingMore}
|
||||
onClick={() => {
|
||||
setSize((prev) => prev + 1);
|
||||
|
||||
@ -118,7 +118,7 @@ export const Invitations: React.FC<Props> = (props) => {
|
||||
<p className="text-xs text-neutral-text-medium">{ROLE[invitation.role]}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-neutral-text-medium"}`}
|
||||
className={`flex-shrink-0 ${isSelected ? "text-primary-text-subtle" : "text-neutral-text-medium"}`}
|
||||
>
|
||||
<CheckCircle2 className="h-5 w-5" />
|
||||
</span>
|
||||
|
||||
@ -416,7 +416,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 bg-transparent py-2 pr-3 text-sm font-semibold text-custom-primary-100 outline-custom-primary-100"
|
||||
className="flex items-center gap-2 bg-transparent py-2 pr-3 text-sm font-semibold text-primary-text-subtle outline-custom-primary-100"
|
||||
onClick={appendField}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
|
||||
@ -108,7 +108,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-transparent text-xs font-medium text-custom-primary-100 outline-custom-text-100"
|
||||
className="bg-transparent text-xs font-medium text-primary-text-subtle outline-custom-text-100"
|
||||
onClick={onComplete}
|
||||
>
|
||||
No thanks, I will explore it myself
|
||||
|
||||
@ -48,7 +48,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
|
||||
key={option.key}
|
||||
className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-sm font-medium capitalize ${
|
||||
step === option.key
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
? "border-custom-primary-100 text-primary-text-subtle"
|
||||
: "border-transparent text-neutral-text-medium"
|
||||
}`}
|
||||
onClick={() => setStep(option.key)}
|
||||
|
||||
@ -29,7 +29,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
|
||||
<span
|
||||
className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
|
||||
router.pathname === tab.selected
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
? "border-custom-primary-100 text-primary-text-subtle"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -325,7 +325,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
|
||||
<CopyLinkToClipboard copy_link={`${plane_deploy_url}/${workspaceSlug}/${project.id}`} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-1 text-custom-primary-100">
|
||||
<div className="mt-3 flex items-center gap-1 text-primary-text-subtle">
|
||||
<div className="flex h-5 w-5 items-center overflow-hidden">
|
||||
<CircleDot className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
|
||||
<h4 className="text-base font-medium capitalize text-neutral-text-medium">{group}</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 px-2 text-custom-primary-100 outline-none hover:text-custom-primary-200"
|
||||
className="flex items-center gap-2 px-2 text-primary-text-subtle outline-none hover:text-custom-primary-200"
|
||||
onClick={() => {
|
||||
setTrackElement("PROJECT_SETTINGS_STATES_PAGE");
|
||||
setActiveGroup(group as keyof StateGroup);
|
||||
@ -122,7 +122,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
|
||||
<h4 className="text-base font-medium text-neutral-text-medium capitalize">{key}</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
|
||||
className="flex items-center gap-2 text-primary-text-subtle px-2 hover:text-custom-primary-200 outline-none"
|
||||
onClick={() => setActiveGroup(key as keyof StateGroup)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
// nivo
|
||||
import { ResponsiveCalendar, CalendarSvgProps } from "@nivo/calendar";
|
||||
// types
|
||||
import { TGraph } from "./types";
|
||||
// constants
|
||||
import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
|
||||
|
||||
export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" | "width">> = ({
|
||||
height = "400px",
|
||||
width = "100%",
|
||||
margin,
|
||||
theme,
|
||||
...rest
|
||||
}) => (
|
||||
<div style={{ height, width }}>
|
||||
<ResponsiveCalendar
|
||||
margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
|
||||
colors={
|
||||
rest.colors ?? [
|
||||
"rgba(var(--color-primary-100), 0.2)",
|
||||
"rgba(var(--color-primary-100), 0.4)",
|
||||
"rgba(var(--color-primary-100), 0.8)",
|
||||
"rgba(var(--color-primary-100), 1)",
|
||||
]
|
||||
}
|
||||
emptyColor={rest.emptyColor ?? "rgb(var(--color-background-80))"}
|
||||
dayBorderColor={rest.dayBorderColor ?? "transparent"}
|
||||
daySpacing={rest.daySpacing ?? 5}
|
||||
monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-background-100))"}
|
||||
theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
|
||||
{...rest}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -1,5 +1,4 @@
|
||||
export * from "./bar-graph";
|
||||
export * from "./calendar-graph";
|
||||
export * from "./line-graph";
|
||||
export * from "./marimekko-graph";
|
||||
export * from "./pie-graph";
|
||||
|
||||
@ -194,7 +194,7 @@ export const WorkspaceDetails: FC = observer(() => {
|
||||
}/${currentWorkspace.slug}`}</button>
|
||||
{isAdmin && (
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-left text-xs font-medium text-custom-primary-100"
|
||||
className="flex items-center gap-1.5 text-left text-xs font-medium text-primary-text-subtle"
|
||||
onClick={() => setIsImageUploadModalOpen(true)}
|
||||
>
|
||||
{watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
|
||||
|
||||
@ -227,7 +227,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
||||
>
|
||||
<Menu.Item
|
||||
as="div"
|
||||
className="flex items-center gap-2 rounded px-2 py-1 text-sm text-sidebar-neutral-text-strong hover:bg-sidebar-neutral-component-surface-dark font-medium"
|
||||
className="flex items-center gap-2 rounded px-2 py-1 text-sm text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark font-medium"
|
||||
>
|
||||
<PlusSquare strokeWidth={1.75} className="h-4 w-4 flex-shrink-0" />
|
||||
Create workspace
|
||||
@ -291,7 +291,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
||||
>
|
||||
<Menu.Items
|
||||
className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left flex-col divide-y
|
||||
divide-custom-sidebar-border-200 rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
|
||||
divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
@ -330,7 +330,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
||||
<div className="p-2 pb-0">
|
||||
<Link href="/god-mode">
|
||||
<Menu.Item as="button" type="button" className="w-full">
|
||||
<span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
|
||||
<span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
|
||||
Enter God Mode
|
||||
</span>
|
||||
</Menu.Item>
|
||||
|
||||
@ -49,8 +49,8 @@ export const WorkspaceSidebarMenu = observer(() => {
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
||||
link.highlight(router.asPath, `/${workspaceSlug}`)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
? "bg-primary-component-surface-light text-primary-text-subtle"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
|
||||
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
|
||||
>
|
||||
{
|
||||
|
||||
@ -28,7 +28,7 @@ const ViewTab = observer((props: { viewId: string }) => {
|
||||
id={`global-view-${viewId}`}
|
||||
className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
|
||||
viewId === globalViewId
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
? "border-custom-primary-100 text-primary-text-subtle"
|
||||
: "border-transparent hover:border-neutral-border-medium hover:text-neutral-text-subtle"
|
||||
}`}
|
||||
>
|
||||
@ -71,7 +71,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
|
||||
<span
|
||||
className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
|
||||
tab.key === globalViewId
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
? "border-custom-primary-100 text-primary-text-subtle"
|
||||
: "border-transparent hover:border-neutral-border-medium hover:text-neutral-text-subtle"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -3,7 +3,7 @@ import { Theme } from "@nivo/core";
|
||||
|
||||
export const CHARTS_THEME: Theme = {
|
||||
background: "transparent",
|
||||
textColor: "rgb(var(--color-text-200))",
|
||||
textColor: "rgb(var(--color-neutral-110))",
|
||||
axis: {
|
||||
domain: {
|
||||
line: {
|
||||
@ -15,14 +15,14 @@ export const CHARTS_THEME: Theme = {
|
||||
tooltip: {
|
||||
container: {
|
||||
background: "rgb(var(--color-background-80))",
|
||||
color: "rgb(var(--color-text-200))",
|
||||
color: "rgb(var(--color-neutral-110))",
|
||||
fontSize: "0.8rem",
|
||||
border: "1px solid rgb(var(--color-border-300))",
|
||||
border: "1px solid rgb(var(--color-neutral-70))",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
line: {
|
||||
stroke: "rgb(var(--color-border-100))",
|
||||
stroke: "rgb(var(--color-neutral-60))",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -28,7 +28,7 @@ export const ProfilePreferenceSettingsSidebar = () => {
|
||||
<div
|
||||
className={`rounded-md px-4 py-2 text-sm font-medium ${
|
||||
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
? "bg-custom-primary-100/10 text-primary-text-subtle"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -106,7 +106,7 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
||||
link.highlight(router.pathname)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
? "bg-custom-primary-100/10 text-primary-text-subtle"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
|
||||
} ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
>
|
||||
|
||||
@ -28,7 +28,7 @@ export const ProjectSettingsSidebar = () => {
|
||||
<div
|
||||
className={`rounded-md px-4 py-2 text-sm font-medium ${
|
||||
link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
? "bg-custom-primary-100/10 text-primary-text-subtle"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -30,7 +30,7 @@ export const WorkspaceSettingsSidebar = () => {
|
||||
<div
|
||||
className={`rounded-md px-4 py-2 text-sm font-medium ${
|
||||
link.highlight(router.asPath, `/${workspaceSlug}`)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
? "bg-custom-primary-100/10 text-primary-text-subtle"
|
||||
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -115,7 +115,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
|
||||
key={tab.key}
|
||||
className={({ selected }) =>
|
||||
`border-b-2 p-4 text-sm font-medium outline-none ${
|
||||
selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
|
||||
selected ? "border-custom-primary-100 text-primary-text-subtle" : "border-transparent"
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -125,7 +125,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
|
||||
</Tab.List>
|
||||
<div className="hidden sm:block">
|
||||
{cycleTab !== "active" && (
|
||||
<div className="flex items-center self-end sm:self-center md:self-center lg:self-center gap-1 rounded bg-custom-background-80 p-1">
|
||||
<div className="flex items-center self-end sm:self-center md:self-center lg:self-center gap-1 rounded bg-neutral-component-surface-dark p-1">
|
||||
{CYCLE_VIEW_LAYOUTS.map((layout) => {
|
||||
if (layout.key === "gantt" && cycleTab === "draft") return null;
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
||||
<p>Slack-like emails for authentication.</p>
|
||||
You need to have set up email{" "}
|
||||
<Link href="email">
|
||||
<span className="text-custom-primary-100 hover:underline">here</span>
|
||||
<span className="text-primary-text-subtle hover:underline">here</span>
|
||||
</Link>{" "}
|
||||
to enable this.
|
||||
</div>
|
||||
|
||||
@ -172,7 +172,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
|
||||
</div>
|
||||
<span
|
||||
className={`flex-shrink-0 ${
|
||||
isSelected ? "text-custom-primary-100" : "text-neutral-text-medium"
|
||||
isSelected ? "text-primary-text-subtle" : "text-neutral-text-medium"
|
||||
}`}
|
||||
>
|
||||
<CheckCircle2 className="h-5 w-5" />
|
||||
|
||||
@ -213,7 +213,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
|
||||
</div>
|
||||
|
||||
{/* <Link href={`/profile/${myProfile.id}`}>
|
||||
<span className="flex item-center gap-1 text-sm text-custom-primary-100 underline font-medium">
|
||||
<span className="flex item-center gap-1 text-sm text-primary-text-subtle underline font-medium">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Activity Overview
|
||||
</span>
|
||||
|
||||
@ -228,9 +228,9 @@
|
||||
--color-primary-110: #9eb1ff;
|
||||
--color-primary-120: #d6e1ff;
|
||||
|
||||
--color-neutral-0: #18191b;
|
||||
--color-neutral-10: #111113;
|
||||
--color-neutral-20: #18191b;
|
||||
--color-neutral-0: #1b1c1e;
|
||||
--color-neutral-10: #1b1c1e;
|
||||
--color-neutral-20: #1e1f22;
|
||||
--color-neutral-30: #212225;
|
||||
--color-neutral-40: #272a2d;
|
||||
--color-neutral-50: #2e3135;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user