binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

regression: red and green color backgrounds (#8456)

Browse source
This commit is contained in:
Aaryan Khandelwal 2025-12-26 19:17:03 +05:30 • committed by GitHub
parent 2980c2d76b
commit 6cc5c1946a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
42 changed files with 86 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/admin/core/components/common/banner.tsx
View file

@ -10,7 +10,7 @@ export function Banner(props: TBanner) {
return ( return (
<div <div
className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-primary border-danger-strong" : "bg-success-primary border-success-strong"}`} className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-subtle border-danger-strong" : "bg-success-subtle border-success-strong"}`}
> >
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="flex-shrink-0"> <div className="flex-shrink-0">

2
apps/space/core/components/account/auth-forms/email.tsx
View file

@ -68,7 +68,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="name@company.com" placeholder="name@company.com"
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`} className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-subtle border-0 focus:bg-none active:bg-transparent`}
autoComplete="on" autoComplete="on"
autoFocus autoFocus
ref={inputRef} ref={inputRef}

12
apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
View file

@ -132,22 +132,16 @@ export const CommentCard = observer(function CommentCard(props: Props) {
<button <button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-green-500" className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-success-primary"
> >
<CheckIcon <CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
className="h-3 w-3 text-success-primary duration-300 group-hover:text-on-color"
strokeWidth={2}
/>
</button> </button>
<button <button
type="button" type="button"
className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover" className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover"
onClick={() => setIsEditing(false)} onClick={() => setIsEditing(false)}
> >
<CloseIcon <CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
className="h-3 w-3 text-danger-primary duration-300 group-hover:text-on-color"
strokeWidth={2}
/>
</button> </button>
</div> </div>
</form> </form>

2
apps/web/ce/components/relations/index.tsx
View file

@ -23,7 +23,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
blocked_by: { blocked_by: {
key: "blocked_by", key: "blocked_by",
i18n_label: "issue.relation.blocked_by", i18n_label: "issue.relation.blocked_by",
className: "bg-danger-primary text-danger-primary", className: "bg-danger-subtle text-danger-primary",
icon: (size) => <CircleDot size={size} className="text-secondary" />, icon: (size) => <CircleDot size={size} className="text-secondary" />,
placeholder: "None", placeholder: "None",
}, },

2
apps/web/core/components/account/auth-forms/email.tsx
View file

@ -67,7 +67,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder={t("auth.common.email.placeholder")} placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`} className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
autoComplete="on" autoComplete="on"
autoFocus autoFocus
ref={inputRef} ref={inputRef}

13
apps/web/core/components/account/auth-forms/password.tsx
View file

@ -124,19 +124,20 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
return ( return (
<> <>
{isBannerMessage && mode === EAuthModes.SIGN_UP && ( {isBannerMessage && mode === EAuthModes.SIGN_UP && (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-primary"> <div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-subtle">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center"> <div className="w-4 h-4 shrink-0 relative flex justify-center items-center">
<Info size={16} className="text-danger-primary" /> <Info size={16} className="text-danger-primary" />
</div> </div>
<div className="w-full text-13 font-medium text-danger-primary"> <div className="w-full text-13 font-medium text-danger-primary">
{t("auth.sign_up.errors.password.strength")} {t("auth.sign_up.errors.password.strength")}
</div> </div>
<div <button
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-primary text-accent-primary/80" type="button"
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-subtle-hover text-accent-primary/80"
onClick={() => setBannerMessage(false)} onClick={() => setBannerMessage(false)}
> >
<CloseIcon className="w-4 h-4 flex-shrink-0 text-danger-primary" /> <CloseIcon className="w-4 h-4 shrink-0 text-danger-primary" />
</div> </button>
</div> </div>
)} )}
<form <form

2
apps/web/core/components/account/deactivate-account-modal.tsx
View file

@ -67,7 +67,7 @@ export function DeactivateAccountModal(props: Props) {
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className=""> <div className="">
<div className="flex items-start gap-x-4"> <div className="flex items-start gap-x-4">
<div className="mt-3 grid place-items-center rounded-full bg-danger-primary p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 "> <div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
<TrashIcon <TrashIcon
className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6" className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
aria-hidden="true" aria-hidden="true"

4
apps/web/core/components/analytics/trend-piece.tsx
View file

@ -43,9 +43,9 @@ const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtra
atrisk: "text-danger-primary border border-danger-strong", atrisk: "text-danger-primary border border-danger-strong",
}, },
tinted: { tinted: {
ontrack: "text-success-primary bg-success-primary", ontrack: "text-success-primary bg-success-subtle",
offtrack: "text-yellow-500 bg-yellow-500/10", offtrack: "text-yellow-500 bg-yellow-500/10",
atrisk: "text-danger-primary bg-danger-primary", atrisk: "text-danger-primary bg-danger-subtle",
}, },
} as const; } as const;

2
apps/web/core/components/api-token/token-list-item.tsx
View file

@ -38,7 +38,7 @@ export function ApiTokenListItem(props: Props) {
<h5 className="truncate text-13 font-medium">{token.label}</h5> <h5 className="truncate text-13 font-medium">{token.label}</h5>
<span <span
className={`${ className={`${
token.is_active ? "bg-success-primary text-success-primary" : "bg-layer-1 text-placeholder" token.is_active ? "bg-success-subtle text-success-primary" : "bg-layer-1 text-placeholder"
} ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`} } ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`}
> >
{token.is_active ? "Active" : "Expired"} {token.is_active ? "Active" : "Expired"}

28
apps/web/core/components/comments/card/edit-form.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import type { EditorRefApi } from "@plane/editor"; import type { EditorRefApi } from "@plane/editor";
@ -111,40 +111,26 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
onClick={handleSubmit(onEnter)} onClick={handleSubmit(onEnter)}
disabled={isDisabled} disabled={isDisabled}
className={cn( className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300", "group rounded-lg border border-success-subtle size-7 grid place-items-center shadow-raised-100 bg-success-subtle duration-300",
isDisabled isDisabled ? "" : "hover:bg-success-subtle-1"
? "cursor-not-allowed border-success-strong/50 bg-success-primary"
: "border-success-strong bg-success-primary hover:bg-green-500"
)} )}
> >
<CheckIcon <CheckIcon className="size-4 text-success-primary" />
className={cn(
"size-4 duration-300",
isDisabled ? "text-success-primary/50" : "text-success-primary group-hover:text-on-color"
)}
/>
</button> </button>
)} )}
<button <button
type="button" type="button"
disabled={isSubmitting} disabled={isSubmitting}
className={cn( className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300", "group rounded-lg border border-danger-subtle size-7 grid place-items-center shadow-raised-100 bg-danger-subtle duration-300",
isSubmitting isSubmitting ? "" : "hover:bg-danger-subtle-hover"
? "cursor-not-allowed border-danger-strong/50 bg-danger-primary"
: "border-danger-strong bg-danger-primary hover:bg-red-500"
)} )}
onClick={() => { onClick={() => {
setIsEditing(false); setIsEditing(false);
editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>"); editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
}} }}
> >
<CloseIcon <CloseIcon className="size-4 text-danger-primary" />
className={cn(
"size-5 duration-300",
isSubmitting ? "text-danger-primary/50" : "text-danger-primary group-hover:text-on-color"
)}
/>
</button> </button>
</div> </div>
</form> </form>

4
apps/web/core/components/exporter/column.tsx
View file

@ -72,11 +72,11 @@ export const useExportColumns = () => {
<span <span
className={`rounded-sm text-11 px-2 py-1 capitalize ${ className={`rounded-sm text-11 px-2 py-1 capitalize ${
rowData.status === "completed" rowData.status === "completed"
? "bg-success-primary text-success-primary" ? "bg-success-subtle text-success-primary"
: rowData.status === "processing" : rowData.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-yellow-500/20 text-yellow-500"
: rowData.status === "failed" : rowData.status === "failed"
? "bg-danger-primary text-danger-primary" ? "bg-danger-subtle text-danger-primary"
: rowData.status === "expired" : rowData.status === "expired"
? "bg-orange-500/20 text-orange-500" ? "bg-orange-500/20 text-orange-500"
: "bg-gray-500/20 text-gray-500" : "bg-gray-500/20 text-gray-500"

4
apps/web/core/components/exporter/single-export.tsx
View file

@ -38,11 +38,11 @@ export function SingleExport({ service, refreshing }: Props) {
<span <span
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${ className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed" service.status === "completed"
? "bg-success-primary text-success-primary" ? "bg-success-subtle text-success-primary"
: service.status === "processing" : service.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed" : service.status === "failed"
? "bg-danger-primary text-danger-primary" ? "bg-danger-subtle text-danger-primary"
: service.status === "expired" : service.status === "expired"
? "bg-orange-500/20 text-orange-500" ? "bg-orange-500/20 text-orange-500"
: "" : ""

10
apps/web/core/components/inbox/content/inbox-issue-header.tsx
View file

@ -270,7 +270,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
/> />
</> </>
<Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-[15] border-b border-subtle"> <Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-15 border-b border-subtle">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{isNotificationEmbed && ( {isNotificationEmbed && (
<button onClick={embedRemoveCurrentNotification}> <button onClick={embedRemoveCurrentNotification}>
@ -310,11 +310,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{canMarkAsAccepted && ( {canMarkAsAccepted && (
<div className="flex-shrink-0"> <div className="shrink-0">
<Button <Button
variant="secondary" variant="secondary"
prependIcon={<CircleCheck className="w-3 h-3" />} prependIcon={<CircleCheck className="w-3 h-3" />}
className="text-success-primary border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary" className="text-on-color border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
onClick={() => onClick={() =>
handleActionWithPermission( handleActionWithPermission(
isProjectAdmin, isProjectAdmin,
@ -329,11 +329,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
)} )}
{canMarkAsDeclined && ( {canMarkAsDeclined && (
<div className="flex-shrink-0"> <div className="shrink-0">
<Button <Button
variant="secondary" variant="secondary"
prependIcon={<CircleX className="w-3 h-3" />} prependIcon={<CircleX className="w-3 h-3" />}
className="text-danger-primary border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover" className="text-on-color border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
onClick={() => onClick={() =>
handleActionWithPermission( handleActionWithPermission(
isProjectAdmin, isProjectAdmin,

2
apps/web/core/components/inbox/inbox-status-icon.tsx
View file

@ -18,7 +18,7 @@ export const ICON_PROPERTIES = {
[EInboxIssueStatus.SNOOZED]: { [EInboxIssueStatus.SNOOZED]: {
icon: Clock, icon: Clock,
textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"), textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"),
bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-primary" : "bg-[#E0E1E6]"), bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-subtle" : "bg-[#E0E1E6]"),
}, },
[EInboxIssueStatus.ACCEPTED]: { [EInboxIssueStatus.ACCEPTED]: {
icon: CheckCircle2, icon: CheckCircle2,

2
apps/web/core/components/integration/delete-import-modal.tsx
View file

@ -59,7 +59,7 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}> <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-danger-primary p-4"> <span className="place-items-center rounded-full bg-danger-subtle p-4">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">

4
apps/web/core/components/integration/single-import.tsx
View file

@ -36,11 +36,11 @@ export const SingleImport = observer(function SingleImport({ service, refreshing
<span <span
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${ className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed" service.status === "completed"
? "bg-success-primary text-success-primary" ? "bg-success-subtle text-success-primary"
: service.status === "processing" : service.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed" : service.status === "failed"
? "bg-danger-primary text-danger-primary" ? "bg-danger-subtle text-danger-primary"
: "" : ""
}`} }`}
> >

8
apps/web/core/components/issues/issue-detail/label/create-label.tsx
View file

@ -144,13 +144,17 @@ export function LabelCreate(props: ILabelCreate) {
/> />
<button <button
type="button" type="button"
className="grid place-items-center rounded-sm bg-red-500 p-1" className="grid place-items-center rounded-sm bg-danger-primary p-1"
onClick={() => setIsCreateToggle(false)} onClick={() => setIsCreateToggle(false)}
disabled={disabled} disabled={disabled}
> >
<CloseIcon className="h-3.5 w-3.5 text-on-color" /> <CloseIcon className="h-3.5 w-3.5 text-on-color" />
</button> </button>
<button type="submit" className="grid place-items-center rounded-sm bg-green-500 p-1" disabled={isSubmitting}> <button
type="submit"
className="grid place-items-center rounded-sm bg-success-primary p-1"
disabled={isSubmitting}
>
{isSubmitting ? ( {isSubmitting ? (
<Loader className="spin h-3.5 w-3.5 text-on-color" /> <Loader className="spin h-3.5 w-3.5 text-on-color" />
) : ( ) : (

4
apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
View file

@ -47,8 +47,8 @@ export function GroupDragOverlay(props: Props) {
className={cn( className={cn(
`absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`, `absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`,
{ {
"flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible, "flex flex-col border-[1px] border-strong z-2": shouldOverlayBeVisible,
"bg-danger-primary": workflowDisabledSource && isDropDisabled, "bg-danger-subtle": workflowDisabledSource && isDropDisabled,
}, },
{ hidden: !shouldOverlayBeVisible } { hidden: !shouldOverlayBeVisible }
)} )}

2
apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file

@ -258,7 +258,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
className={`${ className={`${
isDragging ? `opacity-100` : `opacity-0` isDragging ? `opacity-100` : `opacity-0`
} flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-danger-primary ${ } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-danger-primary ${
isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : "" isDragOverDelete ? "bg-danger-primary blur-2xl" : ""
} transition duration-300`} } transition duration-300`}
> >
Drop here to delete the work item. Drop here to delete the work item.

2
apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
View file

@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props; const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-primary")}> <div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-subtle")}>
<form <form
ref={ref} ref={ref}
onSubmit={onSubmit} onSubmit={onSubmit}

2
apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
View file

@ -151,7 +151,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
<div <div
className={cn( className={cn(
containerClassName, containerClassName,
errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-primary` : `` errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-subtle` : ``
)} )}
> >
{isOpen ? ( {isOpen ? (

2
apps/web/core/components/onboarding/step-indicator.tsx
View file

@ -21,7 +21,7 @@ export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingS
<div <div
key={`line-${i}`} key={`line-${i}`}
className={cn("h-1.5 -ml-0.5 w-full", { className={cn("h-1.5 -ml-0.5 w-full", {
"bg-green-700": isCompleted, "bg-success-primary": isCompleted,
"bg-surface-1": !isCompleted, "bg-surface-1": !isCompleted,
"rounded-l-full": isFirstStep, "rounded-l-full": isFirstStep,
"rounded-r-full": isLastStep || isActive, "rounded-r-full": isLastStep || isActive,

2
apps/web/core/components/onboarding/switch-account-dropdown.tsx
View file

@ -34,7 +34,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
<SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} /> <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
<Menu as="div" className="relative"> <Menu as="div" className="relative">
<Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-layer-1 z-10"> <Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-layer-1 z-10">
<div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-on-color font-semibold text-13 capitalize"> <div className="size-6 rounded-full bg-success-primary flex items-center justify-center text-on-color font-semibold text-13 capitalize">
{user?.avatar_url ? ( {user?.avatar_url ? (
<img <img
src={getFileURL(user?.avatar_url)} src={getFileURL(user?.avatar_url)}

4
apps/web/core/components/profile/sidebar.tsx
View file

@ -167,10 +167,10 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
<div <div
className={`rounded-sm px-1 py-0.5 text-11 font-medium ${ className={`rounded-sm px-1 py-0.5 text-11 font-medium ${
completedIssuePercentage <= 35 completedIssuePercentage <= 35
? "bg-danger-primary text-danger-primary" ? "bg-danger-subtle text-danger-primary"
: completedIssuePercentage <= 70 : completedIssuePercentage <= 70
? "bg-yellow-500/10 text-yellow-500" ? "bg-yellow-500/10 text-yellow-500"
: "bg-success-primary text-success-primary" : "bg-success-subtle text-success-primary"
}`} }`}
> >
{completedIssuePercentage}% {completedIssuePercentage}%

2
apps/web/core/components/project/confirm-project-member-remove.tsx
View file

@ -50,7 +50,7 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}> <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-primary sm:mx-0 sm:h-10 sm:w-10"> <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</div> </div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left"> <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

2
apps/web/core/components/project/delete-project-modal.tsx
View file

@ -91,7 +91,7 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}> <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6"> <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-danger-primary p-4"> <span className="place-items-center rounded-full bg-danger-subtle p-4">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">

2
apps/web/core/components/project/leave-project-modal.tsx
View file

@ -110,7 +110,7 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}> <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6"> <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-danger-primary p-4"> <span className="place-items-center rounded-full bg-danger-subtle p-4">
<AlertTriangleIcon className="h-6 w-6 text-danger-primary" aria-hidden="true" /> <AlertTriangleIcon className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span> </span>
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">

4
apps/web/core/components/views/view-list-item-action.tsx
View file

@ -96,10 +96,10 @@ export const ViewListItemAction = observer(function ViewListItemAction(props: Pr
{view?.anchor && publishLink ? ( {view?.anchor && publishLink ? (
<div <div
className="px-3 py-1.5 bg-success-primary text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer" className="px-3 py-1.5 bg-success-subtle text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
onClick={() => setPublishModalOpen(true)} onClick={() => setPublishModalOpen(true)}
> >
<span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" /> <span className="flex-shrink-0 rounded-full size-1.5 bg-success-primary" />
Live Live
</div> </div>
) : ( ) : (

2
apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
View file

@ -55,7 +55,7 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" /> <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</div> </div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left"> <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

2
packages/constants/src/cycle.ts
View file

@ -29,7 +29,7 @@ export const CYCLE_STATUS: {
i18n_title: "project_cycles.status.completed", i18n_title: "project_cycles.status.completed",
color: "#16A34A", color: "#16A34A",
textColor: "text-success-primary", textColor: "text-success-primary",
bgColor: "bg-green-50", bgColor: "bg-success-subtle",
}, },
{ {
i18n_label: "project_cycles.status.draft", i18n_label: "project_cycles.status.draft",

4
packages/constants/src/dashboard.ts
View file

@ -44,8 +44,8 @@ export const DURATION_FILTER_OPTIONS: {
// random background colors for project cards // random background colors for project cards
export const PROJECT_BACKGROUND_COLORS = [ export const PROJECT_BACKGROUND_COLORS = [
"bg-gray-500/20", "bg-gray-500/20",
"bg-success-primary", "bg-success-subtle",
"bg-danger-primary", "bg-danger-subtle",
"bg-orange-500/20", "bg-orange-500/20",
"bg-blue-500/20", "bg-blue-500/20",
"bg-yellow-500/20", "bg-yellow-500/20",

4
packages/constants/src/module.ts
View file

@ -52,14 +52,14 @@ export const MODULE_STATUS: {
value: "completed", value: "completed",
color: MODULE_STATUS_COLORS.completed, color: MODULE_STATUS_COLORS.completed,
textColor: "text-success-primary", textColor: "text-success-primary",
bgColor: "bg-green-100", bgColor: "bg-success-subtle",
}, },
{ {
i18n_label: "project_modules.status.cancelled", i18n_label: "project_modules.status.cancelled",
value: "cancelled", value: "cancelled",
color: MODULE_STATUS_COLORS.cancelled, color: MODULE_STATUS_COLORS.cancelled,
textColor: "text-danger-primary", textColor: "text-danger-primary",
bgColor: "bg-red-50", bgColor: "bg-danger-subtle",
}, },
]; ];

2
packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
View file

@ -90,7 +90,7 @@ export function BubbleMenuLinkSelector(props: Props) {
{editor.getAttributes("link").href ? ( {editor.getAttributes("link").href ? (
<button <button
type="button" type="button"
className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-primary transition-all" className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-subtle-hover transition-all"
onClick={(e) => { onClick={(e) => {
unsetLinkEditor(editor); unsetLinkEditor(editor);
e.stopPropagation(); e.stopPropagation();

2
packages/editor/src/core/extensions/code/code-block-node-view.tsx
View file

@ -41,7 +41,7 @@ export function CodeBlockComponent({ node }: Props) {
className={cn( className={cn(
"group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm", "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
{ {
"bg-success-primary hover:bg-success-primary active:bg-success-primary": copied, "bg-success-subtle hover:bg-success-subtle-1 active:bg-success-subtle-1": copied,
} }
)} )}
onClick={copyToClipboard} onClick={copyToClipboard}

15
packages/editor/src/core/extensions/custom-image/components/uploader.tsx
View file

@ -168,7 +168,8 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
[uploadFile, editor, getPos] [uploadFile, editor, getPos]
); );
const isErrorState = failedToLoadImage || hasDuplicationFailed; // const isErrorState = failedToLoadImage || hasDuplicationFailed;
const isErrorState = true;
const borderColor = const borderColor =
selected && editor.isEditable && !isErrorState selected && editor.isEditable && !isErrorState
@ -212,10 +213,10 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
"bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState, "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
"text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary": "text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
selected && editor.isEditable && !isErrorState, selected && editor.isEditable && !isErrorState,
"text-danger-primary cursor-default": isErrorState, "text-danger-primary bg-danger-subtle cursor-default": isErrorState,
"hover:text-danger-primary hover:bg-danger-primary": isErrorState && editor.isEditable, "hover:text-danger-primary hover:bg-danger-subtle-hover": isErrorState && editor.isEditable,
"bg-danger-primary": isErrorState && selected, "bg-danger-subtle-selected": isErrorState && selected,
"hover:bg-danger-primary": isErrorState && selected && editor.isEditable, "hover:bg-danger-subtle-active": isErrorState && selected && editor.isEditable,
} }
)} )}
style={borderColor ? { borderColor } : undefined} style={borderColor ? { borderColor } : undefined}
@ -236,9 +237,9 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
type="button" type="button"
onClick={handleRetryClick} onClick={handleRetryClick}
className={cn( className={cn(
"flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-primary hover:text-danger-primary", "flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
{ {
"hover:bg-danger-primary": selected, "hover:bg-danger-subtle-hover": selected,
} }
)} )}
title="Retry duplication" title="Retry duplication"

4
packages/propel/src/banner/helper.tsx
View file

@ -14,8 +14,8 @@ export const bannerSizeStyling = {
// TODO: update this with new color once its implemented // TODO: update this with new color once its implemented
// Banner variant styling // Banner variant styling
export const bannerStyling: IBannerStyling = { export const bannerStyling: IBannerStyling = {
success: "bg-success-primary", success: "bg-success-subtle",
error: "bg-danger-primary", error: "bg-danger-subtle",
warning: "bg-yellow-500/10", warning: "bg-yellow-500/10",
info: "bg-blue-500/10", info: "bg-blue-500/10",
}; };

2
packages/propel/src/toolbar/toolbar.tsx
View file

@ -129,7 +129,7 @@ const buttonVariants = {
outline: outline:
"border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20", "border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20",
ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2", ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2",
destructive: "bg-red-500 text-on-color hover:bg-red-600 focus:bg-red-600", destructive: "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-selected",
}; };
const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton( const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(

83
packages/types/src/issues.ts
View file

@ -2,7 +2,7 @@ import type { ICycle } from "./cycle";
import type { TIssue } from "./issues/issue"; import type { TIssue } from "./issues/issue";
import type { IModule } from "./module"; import type { IModule } from "./module";
import type { IProjectLite } from "./project"; import type { IProjectLite } from "./project";
import type { IStateLite } from "./state"; import type { TStateGroups } from "./state";
import type { IUserLite } from "./users"; import type { IUserLite } from "./users";
import type { import type {
IIssueDisplayProperties, IIssueDisplayProperties,
@ -11,7 +11,7 @@ import type {
TIssueGroupingFilters, TIssueGroupingFilters,
TIssueOrderByOptions, TIssueOrderByOptions,
} from "./view-props"; } from "./view-props";
import type { IWorkspaceLite, Properties } from "./workspace"; import type { IWorkspaceLite } from "./workspace";
export interface IIssueCycle { export interface IIssueCycle {
id: string; id: string;
@ -39,23 +39,6 @@ export interface IIssueModule {
workspace: string; workspace: string;
} }
export interface IIssueParent {
description: any;
id: string;
name: string;
priority: string | null;
project_detail: IProjectLite;
sequence_id: number;
start_date: string | null;
state_detail: IStateLite;
target_date: string | null;
}
export interface IIssueLink {
title: string;
url: string;
}
export interface ILinkDetails { export interface ILinkDetails {
created_at: Date; created_at: Date;
created_by: string; created_by: string;
@ -65,37 +48,11 @@ export interface ILinkDetails {
url: string; url: string;
} }
export interface ISubIssuesState {
backlog: number;
unstarted: number;
started: number;
completed: number;
cancelled: number;
}
export interface ISubIssueResponse { export interface ISubIssueResponse {
state_distribution: ISubIssuesState; state_distribution: Record<TStateGroups, number>;
sub_issues: TIssue[]; sub_issues: TIssue[];
} }
export interface BlockeIssueDetail {
id: string;
name: string;
sequence_id: number;
project_detail: IProjectLite;
}
export type IssuePriorities = {
id: string;
created_at: Date;
updated_at: Date;
uuid: string;
properties: Properties;
created_by: number;
updated_by: number;
user: string;
};
export interface IIssueLabel { export interface IIssueLabel {
id: string; id: string;
name: string; name: string;
@ -145,31 +102,6 @@ export interface IIssueActivity {
workspace_detail?: IWorkspaceLite; workspace_detail?: IWorkspaceLite;
} }
export interface IIssueLite {
id: string;
name: string;
project_id: string;
start_date?: string | null;
target_date?: string | null;
workspace__slug: string;
}
export interface IIssueAttachment {
asset: string;
attributes: {
name: string;
size: number;
};
created_at: string;
created_by: string;
id: string;
issue: string;
project: string;
updated_at: string;
updated_by: string;
workspace: string;
}
export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none"; export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
export interface ViewFlags { export interface ViewFlags {
@ -208,15 +140,6 @@ export interface IIssueMap {
[key: string]: TIssue; [key: string]: TIssue;
} }
export interface IIssueListRow {
id: string;
groupId: string;
type: "HEADER" | "NO_ISSUES" | "QUICK_ADD" | "ISSUE";
name?: string;
icon?: React.ReactElement | undefined;
payload?: Partial<TIssue>;
}
export interface ILayoutDisplayFiltersOptions { export interface ILayoutDisplayFiltersOptions {
display_properties: (keyof IIssueDisplayProperties)[]; display_properties: (keyof IIssueDisplayProperties)[];
display_filters: { display_filters: {

4
packages/types/src/issues/issue.ts
View file

@ -73,7 +73,7 @@ export type TBaseIssue = {
is_intake?: boolean; is_intake?: boolean;
}; };
export type IssueRelation = { type IssueRelation = {
id: string; id: string;
name: string; name: string;
project_id: string; project_id: string;
@ -182,7 +182,7 @@ export interface IPublicIssue extends Pick<
vote_items: IPublicVote[]; vote_items: IPublicVote[];
} }
export type TPublicIssueResponseResults = type TPublicIssueResponseResults =
| IPublicIssue[] | IPublicIssue[]
| { | {
[key: string]: { [key: string]: {

4
packages/ui/src/form-fields/password/helper.tsx
View file

@ -54,11 +54,11 @@ export const getFragmentColor = (fragmentIndex: number, activeFragments: number)
switch (activeFragments) { switch (activeFragments) {
case 1: case 1:
return "bg-red-500"; return "bg-danger-primary";
case 2: case 2:
return "bg-orange-500"; return "bg-orange-500";
case 3: case 3:
return "bg-green-500"; return "bg-success-primary";
default: default:
return "bg-layer-1"; return "bg-layer-1";
} }

2
packages/ui/src/form-fields/textarea.tsx
View file

@ -47,7 +47,7 @@ const TextArea = React.forwardRef(function TextArea(
"px-3 py-2": textAreaSize === "sm", "px-3 py-2": textAreaSize === "sm",
"p-3": textAreaSize === "md", "p-3": textAreaSize === "md",
"border-danger-strong": hasError, "border-danger-strong": hasError,
"bg-red-100": hasError && mode === "primary", "bg-danger-subtle": hasError && mode === "primary",
}, },
className className
)} )}

2
packages/ui/src/modals/alert-modal.tsx
View file

@ -42,7 +42,7 @@ const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
}; };
const VARIANT_CLASSES: Record<TModalVariant, string> = { const VARIANT_CLASSES: Record<TModalVariant, string> = {
danger: "bg-danger-primary text-danger-primary", danger: "bg-danger-subtle text-danger-primary",
primary: "bg-accent-primary/20 text-accent-primary", primary: "bg-accent-primary/20 text-accent-primary",
}; };