github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: updated button component and tailwind config implementation

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-02-09 16:12:42 +05:30
parent 146d4e72a4
commit 6b68f1510e
144 changed files with 374 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/core/src/ui/mentions/mention-list.tsx
View File

@ -77,7 +77,7 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
{item.avatar && item.avatar.trim() !== "" ? (
<img src={item.avatar} className="h-full w-full rounded-sm object-cover" alt={item.title} />
) : (
<div className="grid h-full w-full place-items-center rounded-sm bg-gray-700 text-xs capitalize text-white">
<div className="grid h-full w-full place-items-center rounded-sm bg-primary-solid text-xs capitalize text-white">
{item.title[0]}
</div>
)}

4
packages/editor/core/src/ui/mentions/mention-node-view.tsx
View File

@ -20,7 +20,9 @@ export const MentionNodeView = (props) => {
<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-primary-text-subtle", {
"bg-yellow-500/20 text-yellow-500": highlights ? highlights.includes(props.node.attrs.id) : false,
"bg-warning-component-surface-light text-warning-text-subtle": 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)
})}

365
packages/tailwind-config-custom/tailwind.config.js
View File

@ -1,5 +1,101 @@
import colors from "tailwindcss/colors";
const generateColorShades = (color) => ({
page: {
...(color === "neutral"
? { "surface-default": `var(--color-${color}-0)` }
: {}),
"surface-light": `var(--color-${color}-10)`,
"surface-medium": `var(--color-${color}-20)`,
},
component: {
"surface-light": `var(--color-${color}-30)`,
"surface-medium": `var(--color-${color}-40)`,
"surface-dark": `var(--color-${color}-50)`,
},
border: {
subtle: `var(--color-${color}-60)`,
medium: `var(--color-${color}-70)`,
strong: `var(--color-${color}-80)`,
},
solid: `var(--color-${color}-90)`,
"solid-hover": `var(--color-${color}-100)`,
text: {
subtle: `var(--color-${color}-100)`,
medium: `var(--color-${color}-110)`,
strong: `var(--color-${color}-120)`,
},
10: `var(--color-${color}-10)`,
20: `var(--color-${color}-20)`,
30: `var(--color-${color}-30)`,
40: `var(--color-${color}-40)`,
50: `var(--color-${color}-50)`,
60: `var(--color-${color}-60)`,
70: `var(--color-${color}-70)`,
80: `var(--color-${color}-80)`,
90: `var(--color-${color}-90)`,
100: `var(--color-${color}-100)`,
110: `var(--color-${color}-110)`,
120: `var(--color-${color}-120)`,
DEFAULT: `var(--color-${color}-90)`,
});
const generateSidebarColorShades = (color) => ({
page: {
...(color === "neutral"
? { "surface-default": `var(--color-sidebar-${color}-0)` }
: {}),
"surface-light": `var(--color-sidebar-${color}-10)`,
"surface-medium": `var(--color-sidebar-${color}-20)`,
},
component: {
"surface-light": `var(--color-sidebar-${color}-30)`,
"surface-medium": `var(--color-sidebar-${color}-40)`,
"surface-dark": `var(--color-sidebar-${color}-50)`,
},
border: {
subtle: `var(--color-sidebar-${color}-60)`,
medium: `var(--color-sidebar-${color}-70)`,
strong: `var(--color-sidebar-${color}-80)`,
},
solid: `var(--color-sidebar-${color}-90)`,
"solid-hover": `var(--color-sidebar-${color}-100)`,
text: {
subtle: `var(--color-sidebar-${color}-100)`,
medium: `var(--color-sidebar-${color}-110)`,
strong: `var(--color-sidebar-${color}-120)`,
},
10: `var(--color-sidebar-${color}-10)`,
20: `var(--color-sidebar-${color}-20)`,
30: `var(--color-sidebar-${color}-30)`,
40: `var(--color-sidebar-${color}-40)`,
50: `var(--color-sidebar-${color}-50)`,
60: `var(--color-sidebar-${color}-60)`,
70: `var(--color-sidebar-${color}-70)`,
80: `var(--color-sidebar-${color}-80)`,
90: `var(--color-sidebar-${color}-90)`,
100: `var(--color-sidebar-${color}-100)`,
110: `var(--color-sidebar-${color}-110)`,
120: `var(--color-sidebar-${color}-120)`,
DEFAULT: `var(--color-sidebar-${color}-90)`,
});
const generateSaturatedColorShades = (color) => ({
10: `var(--color-${color}-10)`,
20: `var(--color-${color}-20)`,
30: `var(--color-${color}-30)`,
40: `var(--color-${color}-40)`,
50: `var(--color-${color}-50)`,
60: `var(--color-${color}-60)`,
70: `var(--color-${color}-70)`,
80: `var(--color-${color}-80)`,
90: `var(--color-${color}-90)`,
100: `var(--color-${color}-100)`,
110: `var(--color-${color}-110)`,
120: `var(--color-${color}-120)`,
DEFAULT: `var(--color-${color}-90)`,
});
/** @type {import('tailwindcss').Config} */
export const darkMode = "class";
export const content = {
@ -44,268 +140,15 @@ export const theme = {
transparent: colors.transparent,
black: colors.black,
white: colors.white,
primary: {
page: {
"surface-light": "var(--color-primary-10)",
"surface-medium": "var(--color-primary-20)",
},
component: {
"surface-light": "var(--color-primary-30)",
"surface-medium": "var(--color-primary-40)",
"surface-dark": "var(--color-primary-50)",
},
border: {
subtle: "var(--color-primary-60)",
medium: "var(--color-primary-70)",
strong: "var(--color-primary-80)",
},
solid: "var(--color-primary-90)",
text: {
subtle: "var(--color-primary-100)",
medium: "var(--color-primary-110)",
strong: "var(--color-primary-120)",
},
10: "var(--color-primary-10)",
20: "var(--color-primary-20)",
30: "var(--color-primary-30)",
40: "var(--color-primary-40)",
50: "var(--color-primary-50)",
60: "var(--color-primary-60)",
70: "var(--color-primary-70)",
80: "var(--color-primary-80)",
90: "var(--color-primary-90)",
100: "var(--color-primary-100)",
110: "var(--color-primary-110)",
120: "var(--color-primary-120)",
DEFAULT: "var(--color-primary-90)",
},
neutral: {
page: {
"surface-default": "var(--color-neutral-0)",
"surface-light": "var(--color-neutral-10)",
"surface-medium": "var(--color-neutral-20)",
},
component: {
"surface-light": "var(--color-neutral-30)",
"surface-medium": "var(--color-neutral-40)",
"surface-dark": "var(--color-neutral-50)",
},
border: {
subtle: "var(--color-neutral-60)",
medium: "var(--color-neutral-70)",
strong: "var(--color-neutral-80)",
},
solid: "var(--color-neutral-90)",
text: {
subtle: "var(--color-neutral-100)",
medium: "var(--color-neutral-110)",
strong: "var(--color-neutral-120)",
},
10: "var(--color-neutral-10)",
20: "var(--color-neutral-20)",
30: "var(--color-neutral-30)",
40: "var(--color-neutral-40)",
50: "var(--color-neutral-50)",
60: "var(--color-neutral-60)",
70: "var(--color-neutral-70)",
80: "var(--color-neutral-80)",
90: "var(--color-neutral-90)",
100: "var(--color-neutral-100)",
110: "var(--color-neutral-110)",
120: "var(--color-neutral-120)",
DEFAULT: "var(--color-neutral-90)",
},
success: {
page: {
"surface-light": "var(--color-success-10)",
"surface-medium": "var(--color-success-20)",
},
component: {
"surface-light": "var(--color-success-30)",
"surface-medium": "var(--color-success-40)",
"surface-dark": "var(--color-success-50)",
},
border: {
subtle: "var(--color-success-60)",
medium: "var(--color-success-70)",
strong: "var(--color-success-80)",
},
solid: "var(--color-success-90)",
text: {
subtle: "var(--color-success-100)",
medium: "var(--color-success-110)",
strong: "var(--color-success-120)",
},
10: "var(--color-success-10)",
20: "var(--color-success-20)",
30: "var(--color-success-30)",
40: "var(--color-success-40)",
50: "var(--color-success-50)",
60: "var(--color-success-60)",
70: "var(--color-success-70)",
80: "var(--color-success-80)",
90: "var(--color-success-90)",
100: "var(--color-success-100)",
110: "var(--color-success-110)",
120: "var(--color-success-120)",
DEFAULT: "var(--color-success-90)",
},
warning: {
page: {
"surface-light": "var(--color-warning-10)",
"surface-medium": "var(--color-warning-20)",
},
component: {
"surface-light": "var(--color-warning-30)",
"surface-medium": "var(--color-warning-40)",
"surface-dark": "var(--color-warning-50)",
},
border: {
subtle: "var(--color-warning-60)",
medium: "var(--color-warning-70)",
strong: "var(--color-warning-80)",
},
solid: "var(--color-warning-90)",
text: {
subtle: "var(--color-warning-100)",
medium: "var(--color-warning-110)",
strong: "var(--color-warning-120)",
},
10: "var(--color-warning-10)",
20: "var(--color-warning-20)",
30: "var(--color-warning-30)",
40: "var(--color-warning-40)",
50: "var(--color-warning-50)",
60: "var(--color-warning-60)",
70: "var(--color-warning-70)",
80: "var(--color-warning-80)",
90: "var(--color-warning-90)",
100: "var(--color-warning-100)",
110: "var(--color-warning-110)",
120: "var(--color-warning-120)",
DEFAULT: "var(--color-warning-90)",
},
danger: {
page: {
"surface-light": "var(--color-danger-10)",
"surface-medium": "var(--color-danger-20)",
},
component: {
"surface-light": "var(--color-danger-30)",
"surface-medium": "var(--color-danger-40)",
"surface-dark": "var(--color-danger-50)",
},
border: {
subtle: "var(--color-danger-60)",
medium: "var(--color-danger-70)",
strong: "var(--color-danger-80)",
},
solid: "var(--color-danger-90)",
text: {
subtle: "var(--color-danger-100)",
medium: "var(--color-danger-110)",
strong: "var(--color-danger-120)",
},
10: "var(--color-danger-10)",
20: "var(--color-danger-20)",
30: "var(--color-danger-30)",
40: "var(--color-danger-40)",
50: "var(--color-danger-50)",
60: "var(--color-danger-60)",
70: "var(--color-danger-70)",
80: "var(--color-danger-80)",
90: "var(--color-danger-90)",
100: "var(--color-danger-100)",
110: "var(--color-danger-110)",
120: "var(--color-danger-120)",
DEFAULT: "var(--color-danger-90)",
},
info: {
page: {
"surface-light": "var(--color-info-10)",
"surface-medium": "var(--color-info-20)",
},
component: {
"surface-light": "var(--color-info-30)",
"surface-medium": "var(--color-info-40)",
"surface-dark": "var(--color-info-50)",
},
border: {
subtle: "var(--color-info-60)",
medium: "var(--color-info-70)",
strong: "var(--color-info-80)",
},
solid: "var(--color-info-90)",
text: {
subtle: "var(--color-info-100)",
medium: "var(--color-info-110)",
strong: "var(--color-info-120)",
},
10: "var(--color-info-10)",
20: "var(--color-info-20)",
30: "var(--color-info-30)",
40: "var(--color-info-40)",
50: "var(--color-info-50)",
60: "var(--color-info-60)",
70: "var(--color-info-70)",
80: "var(--color-info-80)",
90: "var(--color-info-90)",
100: "var(--color-info-100)",
110: "var(--color-info-110)",
120: "var(--color-info-120)",
DEFAULT: "var(--color-info-90)",
},
orange: {
10: "var(--color-orange-10)",
20: "var(--color-orange-20)",
30: "var(--color-orange-30)",
40: "var(--color-orange-40)",
50: "var(--color-orange-50)",
60: "var(--color-orange-60)",
70: "var(--color-orange-70)",
80: "var(--color-orange-80)",
90: "var(--color-orange-90)",
100: "var(--color-orange-100)",
110: "var(--color-orange-110)",
120: "var(--color-orange-120)",
},
primary: generateColorShades("primary"),
neutral: generateColorShades("neutral"),
success: generateColorShades("success"),
warning: generateColorShades("warning"),
danger: generateColorShades("danger"),
info: generateColorShades("info"),
orange: generateSaturatedColorShades("orange"),
sidebar: {
neutral: {
page: {
"surface-default": "var(--color-neutral-0)",
"surface-light": "var(--color-neutral-10)",
"surface-medium": "var(--color-neutral-20)",
},
component: {
"surface-light": "var(--color-neutral-30)",
"surface-medium": "var(--color-neutral-40)",
"surface-dark": "var(--color-neutral-50)",
},
border: {
subtle: "var(--color-neutral-60)",
medium: "var(--color-neutral-70)",
strong: "var(--color-neutral-80)",
},
solid: "var(--color-neutral-90)",
text: {
subtle: "var(--color-neutral-100)",
medium: "var(--color-neutral-110)",
strong: "var(--color-neutral-120)",
},
10: "var(--color-neutral-10)",
20: "var(--color-neutral-20)",
30: "var(--color-neutral-30)",
40: "var(--color-neutral-40)",
50: "var(--color-neutral-50)",
60: "var(--color-neutral-60)",
70: "var(--color-neutral-70)",
80: "var(--color-neutral-80)",
90: "var(--color-neutral-90)",
100: "var(--color-neutral-100)",
110: "var(--color-neutral-110)",
120: "var(--color-neutral-120)",
DEFAULT: "var(--color-neutral-90)",
},
neutral: generateSidebarColorShades("neutral"),
},
},
extend: {

2
packages/ui/src/avatar/avatar.tsx
View File

@ -151,7 +151,7 @@ export const Avatar: React.FC<Props> = (props) => {
shape
)} ${className}`}
style={{
backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
backgroundColor: fallbackBackgroundColor ?? "var(--color-primary-90)",
color: fallbackTextColor ?? "#ffffff",
}}
>

8
packages/ui/src/button/button.tsx
View File

@ -32,7 +32,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
const buttonIconStyle = getIconStyling(size);
return (
<button ref={ref} type={type} className={cn(buttonStyle, className)} disabled={disabled || loading} {...rest}>
<button
ref={ref}
type={type}
className={cn("outline-none", buttonStyle, className)}
disabled={disabled || loading}
{...rest}
>
{prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
{children}
{appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}

118
packages/ui/src/button/helper.tsx
View File

@ -1,25 +1,24 @@
export type TButtonVariant =
| "primary"
| "accent-primary"
| "surface-primary"
| "outline-primary"
| "neutral-primary"
| "link-primary"
| "danger"
| "accent-danger"
| "outline-danger"
| "link-danger"
| "tertiary-danger";
| "text-primary"
| "surface-neutral"
| "outline-neutral"
| "text-neutral"
| "warning"
| "danger";
export type TButtonSizes = "sm" | "md" | "lg" | "xl";
export interface IButtonStyling {
[key: string]: {
export type TButtonStyling = {
[key in TButtonVariant]: {
default: string;
hover: string;
pressed: string;
disabled: string;
};
}
};
enum buttonSizeStyling {
sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
@ -35,67 +34,60 @@ enum buttonIconStyling {
xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
}
export const buttonStyling: IButtonStyling = {
export const buttonStyling: TButtonStyling = {
primary: {
default: `text-white bg-custom-primary-100`,
hover: `hover:bg-custom-primary-200`,
pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
default: `text-white bg-primary-solid`,
hover: `hover:bg-primary-solid-hover`,
pressed: `focus:bg-primary-solid-hover focus:ring-2 focus:ring-primary-border-medium`,
disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
"accent-primary": {
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`,
"surface-primary": {
default: `bg-primary-component-surface-light text-primary-text-subtle`,
hover: `hover:bg-primary-component-surface-medium`,
pressed: `focus:bg-primary-component-surface-dark focus:ring-2 focus:ring-primary-border-medium focus:text-neutral-text-medium`,
disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
"outline-primary": {
default: `text-primary-text-subtle bg-transparent border border-custom-primary-100`,
hover: `hover:bg-custom-primary-100/20`,
pressed: `focus:text-primary-text-subtle focus:bg-custom-primary-100/30`,
disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
default: `text-primary-text-subtle bg-transparent border border-primary-border-subtle`,
hover: `hover:bg-primary-component-surface-medium hover:border-primary-border-medium`,
pressed: `focus:bg-primary-component-surface-dark focus:ring-1 focus:ring-primary-border-medium`,
disabled: `cursor-not-allowed border-transparent bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
"neutral-primary": {
default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
"text-primary": {
default: `text-primary-text-subtle bg-transparent`,
hover: `hover:bg-primary-component-surface-light`,
pressed: `focus:bg-primary-component-surface-medium`,
disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
"surface-neutral": {
default: `bg-neutral-component-surface-light text-neutral-text-subtle`,
hover: `hover:bg-neutral-component-surface-medium`,
pressed: `focus:text-neutral-text-medium focus:bg-neutral-component-surface-medium`,
disabled: `cursor-not-allowed !text-neutral-text-subtle`,
pressed: `focus:bg-neutral-component-surface-dark focus:ring-2 focus:ring-neutral-border-medium focus:text-neutral-text-medium`,
disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
"link-primary": {
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`,
"outline-neutral": {
default: `text-neutral-text-subtle bg-transparent border border-neutral-border-subtle`,
hover: `hover:bg-neutral-component-surface-medium hover:border-neutral-border-medium`,
pressed: `focus:bg-neutral-component-surface-dark focus:ring-1 focus:ring-neutral-border-medium`,
disabled: `cursor-not-allowed border-transparent bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
"text-neutral": {
default: `text-neutral-text-subtle bg-transparent`,
hover: `hover:bg-neutral-component-surface-light`,
pressed: `focus:bg-neutral-component-surface-medium`,
disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
warning: {
default: `text-white bg-warning-solid`,
hover: `hover:bg-warning-solid-hover`,
pressed: `focus:bg-warning-solid-hover focus:ring-2 focus:ring-warning-border-medium`,
disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
danger: {
default: `text-white bg-red-500`,
hover: ` hover:bg-red-600`,
pressed: `focus:text-red-200 focus:bg-red-600`,
disabled: `cursor-not-allowed !bg-red-300`,
},
"accent-danger": {
default: `text-danger-text-medium bg-red-50`,
hover: `hover:text-danger-text-medium hover:bg-red-100`,
pressed: `focus:text-danger-text-medium focus:bg-red-100`,
disabled: `cursor-not-allowed !text-red-300`,
},
"outline-danger": {
default: `text-danger-text-medium bg-transparent border border-red-500`,
hover: `hover:text-red-400 hover:border-red-400`,
pressed: `focus:text-red-400 focus:border-red-400`,
disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
},
"link-danger": {
default: `text-danger-text-medium bg-neutral-component-surface-light`,
hover: `hover:text-red-400`,
pressed: `focus:text-red-400`,
disabled: `cursor-not-allowed !text-red-300`,
},
"tertiary-danger": {
default: `text-danger-text-medium bg-neutral-component-surface-light border border-red-200`,
hover: `hover:bg-red-50 hover:border-red-300`,
pressed: `focus:text-red-400`,
disabled: `cursor-not-allowed !text-red-300`,
default: `text-white bg-danger-solid`,
hover: ` hover:bg-danger-solid-hover`,
pressed: `focus:bg-danger-solid-hover focus:ring-2 focus:ring-danger-border-medium`,
disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
};

2
packages/ui/src/button/toggle-switch.tsx
View File

@ -22,7 +22,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
className={`relative inline-flex flex-shrink-0 ${
size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
} flex-shrink-0 cursor-pointer rounded-full border border-neutral-border-medium transition-colors duration-200 ease-in-out focus:outline-none ${
value ? "bg-custom-primary-100" : "bg-gray-700"
value ? "bg-custom-primary-100" : "bg-primary-solid"
} ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
>
<span className="sr-only">{label}</span>

2
packages/ui/src/form-fields/input-color-picker.tsx
View File

@ -58,7 +58,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
<Popover.Button as={React.Fragment}>
<Button
ref={setReferenceElement}
variant="neutral-primary"
variant="outline-neutral"
size="sm"
className="border-none !bg-transparent"
>

2
packages/ui/src/icons/priority-icon.tsx
View File

@ -66,7 +66,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
{
"text-danger-text-medium": priority === "urgent",
"text-orange-500": priority === "high",
"text-yellow-500": priority === "medium",
"text-warning-text-subtle": priority === "medium",
"text-primary-text-subtle": priority === "low",
"text-neutral-text-medium": priority === "none",
},

2
space/components/issues/board-views/block-due-date.tsx
View File

@ -32,7 +32,7 @@ export const dueDateIconDetails = (
className = "text-danger-text-medium";
} else if (timeDifference === 24 * 60 * 60 * 1000) {
iconName = "event";
className = "text-yellow-500";
className = "text-warning-text-subtle";
} else {
iconName = "calendar_today";
className = "";

2
space/components/issues/filters/helpers/dropdown.tsx
View File

@ -29,7 +29,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
return (
<>
<Popover.Button as={React.Fragment}>
<Button ref={setReferenceElement} variant="neutral-primary" size="sm">
<Button ref={setReferenceElement} variant="outline-neutral" size="sm">
<div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
<span>{title}</span>
</div>

2
space/components/issues/navbar/index.tsx
View File

@ -134,7 +134,7 @@ const IssueNavbar = observer(() => {
{renderEmoji(projectStore.project.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{projectStore.project?.name.charAt(0)}
</span>
)

4
space/components/issues/peek-overview/comment/comment-detail-card.tsx
View File

@ -75,7 +75,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
className="grid h-7 w-7 place-items-center rounded-full border-2 border-neutral-border-medium"
/>
) : (
<div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
<div
className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-primary-solid text-white`}
>
{comment.actor_detail.is_bot
? comment?.actor_detail?.first_name?.charAt(0)
: comment?.actor_detail?.display_name?.charAt(0)}

2
space/components/issues/peek-overview/issue-properties.tsx
View File

@ -86,7 +86,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
: priority?.key === "high"
? "border-orange-500/20 bg-orange-500/20 text-orange-500"
: priority?.key === "medium"
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
? "border-yellow-500/20 bg-warning-component-surface-light text-warning-text-subtle"
: priority?.key === "low"
? "border-green-500/20 bg-success-component-surface-dark text-success-text-medium"
: "border-neutral-border-medium bg-neutral-component-surface-dark"

2
space/constants/data.ts
View File

@ -39,7 +39,7 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
{
key: "medium",
title: "Medium",
className: "text-yellow-500 border-neutral-border-medium",
className: "text-warning-text-subtle border-neutral-border-medium",
icon: "signal_cellular_alt_2_bar",
},
{

2
web/components/account/deactivate-account-modal.tsx
View File

@ -108,7 +108,7 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
</div>
</div>
<div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
<Button variant="neutral-primary" onClick={onClose}>
<Button variant="outline-neutral" onClick={onClose}>
Cancel
</Button>
<Button variant="danger" onClick={handleDeleteAccount}>

2
web/components/analytics/custom-analytics/sidebar/projects-list.tsx
View File

@ -33,7 +33,7 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
) : project.icon_prop ? (
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.icon_prop)}</div>
) : (
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{project?.name.charAt(0)}
</span>
)}

2
web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
View File

@ -87,7 +87,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
{renderEmoji(projectDetails.icon_prop)}
</div>
) : (
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{projectDetails?.name.charAt(0)}
</span>
)}

2
web/components/analytics/custom-analytics/sidebar/sidebar.tsx
View File

@ -176,7 +176,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="flex flex-wrap items-center gap-2 justify-self-end">
<Button
variant="neutral-primary"
variant="outline-neutral"
prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
onClick={() => {
if (!workspaceSlug) return;

2
web/components/analytics/scope-and-demand/leaderboard.tsx
View File

@ -40,7 +40,7 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
/>
</div>
) : (
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 text-[11px] capitalize text-white">
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-primary-solid text-[11px] capitalize text-white">
{user.display_name !== "" ? user?.display_name?.[0] : "?"}
</div>
)}

2
web/components/api-token/delete-token-modal.tsx
View File

@ -108,7 +108,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
</p>
</span>
<div className="mt-2 flex justify-end gap-2">
<Button variant="neutral-primary" onClick={handleClose} size="sm">
<Button variant="outline-neutral" onClick={handleClose} size="sm">
Cancel
</Button>
<Button variant="danger" onClick={handleDeletion} loading={deleteLoading} size="sm">

2
web/components/api-token/modal/form.tsx
View File

@ -238,7 +238,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
<span className="text-xs">Never expires</span>
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Discard
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/api-token/modal/generated-token-details.tsx
View File

@ -52,7 +52,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
<p className="text-xs text-neutral-text-subtle">
{tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
</p>
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Close
</Button>
</div>

2
web/components/auth-screens/workspace/not-a-member.tsx
View File

@ -19,7 +19,7 @@ export const NotAWorkspaceMember = () => (
<div className="flex items-center justify-center gap-2">
<Link href="/invitations">
<span>
<Button variant="neutral-primary">Check pending invites</Button>
<Button variant="outline-neutral">Check pending invites</Button>
</span>
</Link>
<Link href="/create-workspace">

2
web/components/automation/select-month-modal.tsx
View File

@ -152,7 +152,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/core/filters/date-filter-modal.tsx
View File

@ -127,7 +127,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
</h6>
)}
<div className="flex justify-end gap-4">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button

2
web/components/core/image-picker-popover.tsx
View File

@ -339,7 +339,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
<div className="flex h-12 items-start justify-end gap-2">
<Button
variant="neutral-primary"
variant="outline-neutral"
onClick={() => {
setIsOpen(false);
setImage(null);

2
web/components/core/modals/bulk-delete-issues-modal.tsx
View File

@ -192,7 +192,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
{filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="danger" size="sm" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>

2
web/components/core/modals/existing-issues-list-modal.tsx
View File

@ -271,7 +271,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
</Combobox.Options>
</Combobox>
<div className="flex items-center justify-end gap-2 p-3">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
{selectedIssues.length > 0 && (

2
web/components/core/modals/gpt-assistant-popover.tsx
View File

@ -253,7 +253,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
<div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
{responseActionButton}
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Close
</Button>
<Button variant="primary" size="sm" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}>

2
web/components/core/modals/link-modal.tsx
View File

@ -150,7 +150,7 @@ export const LinkModal: FC<Props> = (props) => {
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/core/modals/user-image-upload-modal.tsx
View File

@ -171,7 +171,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
</Button>
)}
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button

2
web/components/core/modals/workspace-image-upload-modal.tsx
View File

@ -178,7 +178,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
</Button>
)}
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button

2
web/components/cycles/delete-modal.tsx
View File

@ -115,7 +115,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>

2
web/components/cycles/form.tsx
View File

@ -172,7 +172,7 @@ export const CycleForm: React.FC<Props> = (props) => {
</div>
</div>
<div className="flex items-center justify-end gap-2 border-t-[0.5px] border-neutral-border-subtle pt-5 ">
<Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={5}>
<Button variant="outline-neutral" size="sm" onClick={handleClose} tabIndex={5}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={6}>

5
web/components/dashboard/widgets/issue-panels/issues-list.tsx
View File

@ -110,10 +110,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
{issues.length > 0 && (
<Link
href={`/${workspaceSlug}/workspace-views/${type}/${filterParams}`}
className={cn(
getButtonStyling("link-primary", "sm"),
"w-min my-3 mx-auto py-1 px-2 text-xs hover:bg-custom-primary-100/20"
)}
className={cn(getButtonStyling("text-primary", "sm"), "w-min my-3 mx-auto py-1 px-2 text-xs")}
>
View all issues
</Link>

2
web/components/dashboard/widgets/recent-activity.tsx
View File

@ -59,7 +59,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
className="h-full w-full rounded-full object-cover"
/>
) : (
<div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white">
<div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-primary-solid text-xs text-white">
{activity.actor_detail.is_bot
? activity.actor_detail.first_name.charAt(0)
: activity.actor_detail.display_name.charAt(0)}

2
web/components/dashboard/widgets/recent-projects.tsx
View File

@ -45,7 +45,7 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
) : projectDetails.icon_prop ? (
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{projectDetails.name.charAt(0)}
</span>
)}

6
web/components/dropdowns/priority.tsx
View File

@ -56,7 +56,7 @@ const BorderButton = (props: ButtonProps) => {
const priorityClasses = {
urgent: "bg-danger-component-surface-dark text-red-950 border-red-500",
high: "bg-orange-500/20 text-orange-950 border-orange-500",
medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
medium: "bg-warning-component-surface-light text-warning-text-subtle border-yellow-500",
low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
none: "bg-neutral-component-surface-dark border-neutral-border-medium",
};
@ -125,7 +125,7 @@ const BackgroundButton = (props: ButtonProps) => {
const priorityClasses = {
urgent: "bg-danger-component-surface-dark text-red-950",
high: "bg-orange-500/20 text-orange-950",
medium: "bg-yellow-500/20 text-yellow-950",
medium: "bg-warning-component-surface-light text-warning-text-subtle",
low: "bg-blue-500/20 text-blue-950",
none: "bg-neutral-component-surface-dark",
};
@ -195,7 +195,7 @@ const TransparentButton = (props: ButtonProps) => {
const priorityClasses = {
urgent: "text-red-950",
high: "text-orange-950",
medium: "text-yellow-950",
medium: "text-warning-text-subtle",
low: "text-blue-950",
none: "",
};

2
web/components/empty-state/empty-state.tsx
View File

@ -55,7 +55,7 @@ export const EmptyState: React.FC<Props> = ({
const secondaryButtonElement = secondaryButton && (
<Button
size={size === "sm" ? "md" : "lg"}
variant="neutral-primary"
variant="outline-neutral"
prependIcon={secondaryButton.icon}
onClick={secondaryButton.onClick}
disabled={disabled}

2
web/components/estimates/create-update-estimate-modal.tsx
View File

@ -306,7 +306,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/estimates/delete-estimate-modal.tsx
View File

@ -105,7 +105,7 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button

2
web/components/estimates/estimate-list-item.tsx
View File

@ -65,7 +65,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
</div>
<div className="flex items-center gap-2">
{currentProjectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && (
<Button variant="neutral-primary" onClick={handleUseEstimate} size="sm">
<Button variant="outline-neutral" onClick={handleUseEstimate} size="sm">
Use
</Button>
)}

2
web/components/estimates/estimates-list.tsx
View File

@ -87,7 +87,7 @@ export const EstimatesList: React.FC = observer(() => {
Add Estimate
</Button>
{currentProjectDetails?.estimate && (
<Button variant="neutral-primary" onClick={disableEstimates} size="sm">
<Button variant="outline-neutral" onClick={disableEstimates} size="sm">
Disable Estimates
</Button>
)}

2
web/components/exporter/export-modal.tsx
View File

@ -163,7 +163,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
<div className="whitespace-nowrap text-sm">Export the data into separate files</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button

2
web/components/exporter/single-export.tsx
View File

@ -38,7 +38,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
service.status === "completed"
? "bg-success-component-surface-dark text-success-text-medium"
: service.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
? "bg-warning-component-surface-light text-warning-text-subtle"
: service.status === "failed"
? "bg-danger-component-surface-dark text-danger-text-medium"
: service.status === "expired"

4
web/components/headers/cycle-issues.tsx
View File

@ -168,7 +168,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
<span className="flex h-4 w-4 items-center justify-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
@ -247,7 +247,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
{canUserCreateIssue && (
<>
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
<Button onClick={() => setAnalyticsModal(true)} variant="outline-neutral" size="sm">
Analytics
</Button>
<Button

2
web/components/headers/cycles.tsx
View File

@ -63,7 +63,7 @@ export const CyclesHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
<span className="flex h-4 w-4 items-center justify-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

4
web/components/headers/module-issues.tsx
View File

@ -171,7 +171,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
@ -255,7 +255,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
<Button
className="hidden md:block"
onClick={() => setAnalyticsModal(true)}
variant="neutral-primary"
variant="outline-neutral"
size="sm"
>
Analytics

2
web/components/headers/modules-list.tsx
View File

@ -50,7 +50,7 @@ export const ModulesListHeader: React.FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/page-details.tsx
View File

@ -45,7 +45,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/pages.tsx
View File

@ -47,7 +47,7 @@ export const PagesHeader = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/project-archived-issue-details.tsx
View File

@ -57,7 +57,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/project-archived-issues.tsx
View File

@ -96,7 +96,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/project-draft-issues.tsx
View File

@ -91,7 +91,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/project-inbox.tsx
View File

@ -40,7 +40,7 @@ export const ProjectInboxHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/project-issue-details.tsx
View File

@ -51,7 +51,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

8
web/components/headers/project-issues.tsx
View File

@ -138,7 +138,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
@ -206,7 +206,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
{currentProjectDetails?.inbox_view && inboxDetails && (
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
<span>
<Button variant="neutral-primary" size="sm" className="relative">
<Button variant="outline-neutral" 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-sidebar-neutral-component-surface-dark text-neutral-text-strong">
@ -222,7 +222,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<Button
className="hidden md:block"
onClick={() => setAnalyticsModal(true)}
variant="neutral-primary"
variant="outline-neutral"
size="sm"
>
Analytics
@ -234,7 +234,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
}}
size="sm"
prependIcon={<Plus />}
variant="accent-primary"
variant="primary"
>
Add Issue
</Button>

2
web/components/headers/project-settings.tsx
View File

@ -49,7 +49,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/project-view-issues.tsx
View File

@ -128,7 +128,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

2
web/components/headers/project-views.tsx
View File

@ -51,7 +51,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)

10
web/components/inbox/inbox-issue-actions.tsx
View File

@ -268,7 +268,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
<div className="flex-shrink-0">
<Popover className="relative">
<Popover.Button as="button" type="button">
<Button variant="neutral-primary" prependIcon={<Clock size={14} strokeWidth={2} />} size="sm">
<Button variant="outline-neutral" prependIcon={<Clock size={14} strokeWidth={2} />} size="sm">
Snooze
</Button>
</Popover.Button>
@ -307,7 +307,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{isAllowed && issueStatus.status === -2 && (
<div className="flex-shrink-0">
<Button
variant="neutral-primary"
variant="outline-neutral"
size="sm"
prependIcon={<FileStack size={14} strokeWidth={2} />}
onClick={() => setSelectDuplicateIssue(true)}
@ -320,7 +320,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{isAllowed && (issueStatus.status === 0 || issueStatus.status === -2) && (
<div className="flex-shrink-0">
<Button
variant="neutral-primary"
variant="outline-neutral"
size="sm"
prependIcon={<CheckCircle2 className="text-success-text-medium" size={14} strokeWidth={2} />}
onClick={() => setAcceptIssueModal(true)}
@ -333,7 +333,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{isAllowed && issueStatus.status === -2 && (
<div className="flex-shrink-0">
<Button
variant="neutral-primary"
variant="outline-neutral"
size="sm"
prependIcon={<XCircle className="text-danger-text-medium" size={14} strokeWidth={2} />}
onClick={() => setDeclineIssueModal(true)}
@ -346,7 +346,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{(isAllowed || currentUser?.id === issue?.created_by) && (
<div className="flex-shrink-0">
<Button
variant="neutral-primary"
variant="outline-neutral"
size="sm"
prependIcon={<Trash2 className="text-danger-text-medium" size={14} strokeWidth={2} />}
onClick={() => setDeleteIssueModal(true)}

2
web/components/inbox/modals/accept-issue-modal.tsx
View File

@ -76,7 +76,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSub
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary" size="sm" tabIndex={1} onClick={handleAccept} loading={isAccepting}>

2
web/components/inbox/modals/create-issue-modal.tsx
View File

@ -330,7 +330,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
<ToggleSwitch value={createMore} onChange={() => {}} size="md" />
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={() => handleClose()}>
<Button variant="outline-neutral" size="sm" onClick={() => handleClose()}>
Discard
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/inbox/modals/decline-issue-modal.tsx
View File

@ -76,7 +76,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSu
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDecline} loading={isDeclining}>

2
web/components/inbox/modals/delete-issue-modal.tsx
View File

@ -79,7 +79,7 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDelete} loading={isDeleting}>

2
web/components/inbox/modals/select-duplicate.tsx
View File

@ -180,7 +180,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
{filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary" size="sm" onClick={handleSubmit}>

2
web/components/inbox/sidebar/filter/applied-filters.tsx
View File

@ -82,7 +82,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
: priority === "high"
? "bg-orange-500/20 text-orange-500"
: priority === "medium"
? "bg-yellow-500/20 text-yellow-500"
? "bg-warning-component-surface-light text-warning-text-subtle"
: priority === "low"
? "bg-success-component-surface-dark text-success-text-medium"
: "bg-neutral-component-surface-medium text-neutral-text-medium"

2
web/components/instance/github-config-form.tsx
View File

@ -141,7 +141,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
<div className="flex flex-col gap-1">
<h4 className="text-sm">Origin URL</h4>
<Button
variant="neutral-primary"
variant="outline-neutral"
className="flex items-center justify-between py-2"
onClick={() => {
navigator.clipboard.writeText(originURL);

2
web/components/instance/google-config-form.tsx
View File

@ -90,7 +90,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
<div className="flex flex-col gap-1">
<h4 className="text-sm">JavaScript origin URL</h4>
<Button
variant="neutral-primary"
variant="outline-neutral"
className="flex items-center justify-between py-2"
onClick={() => {
navigator.clipboard.writeText(originURL);

2
web/components/integration/delete-import-modal.tsx
View File

@ -129,7 +129,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
/>
</div>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button

2
web/components/integration/github/import-confirm.tsx
View File

@ -19,7 +19,7 @@ export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
to complete the process.
</h4>
<div className="mt-6 flex items-center justify-between">
<Button variant="neutral-primary" onClick={() => handleStepChange("import-users")}>
<Button variant="outline-neutral" onClick={() => handleStepChange("import-users")}>
Back
</Button>
<Button variant="primary" type="submit">

2
web/components/integration/github/import-data.tsx
View File

@ -110,7 +110,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
</div>
</div>
<div className="mt-6 flex items-center justify-end gap-2">
<Button variant="neutral-primary" onClick={() => handleStepChange("import-configure")}>
<Button variant="outline-neutral" onClick={() => handleStepChange("import-configure")}>
Back
</Button>
<Button

2
web/components/integration/github/import-users.tsx
View File

@ -38,7 +38,7 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
</div>
</div>
<div className="mt-6 flex items-center justify-end gap-2">
<Button variant="neutral-primary" onClick={() => handleStepChange("repo-details")}>
<Button variant="outline-neutral" onClick={() => handleStepChange("repo-details")}>
Back
</Button>
<Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>

2
web/components/integration/github/repo-details.tsx
View File

@ -88,7 +88,7 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
</Loader>
)}
<div className="mt-6 flex items-center justify-end gap-2">
<Button variant="neutral-primary" onClick={() => handleStepChange("import-data")}>
<Button variant="outline-neutral" onClick={() => handleStepChange("import-data")}>
Back
</Button>
<Button

2
web/components/integration/jira/root.tsx
View File

@ -167,7 +167,7 @@ export const JiraImporterRoot: React.FC = () => {
<div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-neutral-border-medium p-4 pb-0">
{currentStep?.state !== "import-configure" && (
<Button
variant="neutral-primary"
variant="outline-neutral"
onClick={() => {
const currentElementIndex = integrationWorkflowData.findIndex(
(i) => i?.key === currentStep?.state

2
web/components/integration/single-import.tsx
View File

@ -29,7 +29,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
service.status === "completed"
? "bg-success-component-surface-dark text-success-text-medium"
: service.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
? "bg-warning-component-surface-light text-warning-text-subtle"
: service.status === "failed"
? "bg-danger-component-surface-dark text-danger-text-medium"
: ""

2
web/components/integration/slack/select-channel.tsx
View File

@ -89,7 +89,7 @@ export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
{projectIntegration ? (
<button
type="button"
className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-700 transition-colors duration-200 ease-in-out focus:outline-none`}
className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary-solid transition-colors duration-200 ease-in-out focus:outline-none`}
role="switch"
aria-checked
onClick={() => {

2
web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
View File

@ -82,7 +82,7 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
</div>
</div>
<div className="flex justify-end gap-2 p-4 sm:px-6">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button

4
web/components/issues/confirm-issue-discard.tsx
View File

@ -69,12 +69,12 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
</div>
<div className="flex justify-between gap-2 p-4 sm:px-6">
<div>
<Button variant="neutral-primary" size="sm" onClick={onDiscard}>
<Button variant="outline-neutral" size="sm" onClick={onDiscard}>
Discard
</Button>
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>

2
web/components/issues/delete-archived-issue-modal.tsx
View File

@ -115,7 +115,7 @@ export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button

2
web/components/issues/delete-draft-issue-modal.tsx
View File

@ -120,7 +120,7 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>

2
web/components/issues/delete-issue-modal.tsx
View File

@ -106,7 +106,7 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
</p>
</span>
<div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button

4
web/components/issues/draft-issue-form.tsx
View File

@ -637,11 +637,11 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
<ToggleSwitch value={createMore} onChange={() => {}} size="md" />
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleDiscard}>
<Button variant="outline-neutral" size="sm" onClick={handleDiscard}>
Discard
</Button>
<Button
variant="neutral-primary"
variant="outline-neutral"
size="sm"
loading={isSubmitting}
onClick={handleSubmit((formData) =>

2
web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
View File

@ -25,7 +25,7 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = (props) => {
return (
<div className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}>
<div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-neutral-component-surface-dark" aria-hidden={true} />
<div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-10 bg-gray-500 text-white border border-white uppercase font-medium">
<div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-10 bg-primary-solid text-white border border-white uppercase font-medium">
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
<img
src={comment.actor_detail.avatar}

2
web/components/issues/issue-detail/links/create-update-link-modal.tsx
View File

@ -143,7 +143,7 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = (props)
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/issues/issue-layouts/empty-states/cycle.tsx
View File

@ -87,7 +87,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
}}
secondaryButton={
<Button
variant="neutral-primary"
variant="outline-neutral"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
onClick={() => setCycleIssuesListModal(true)}
disabled={!isEditingAllowed}

2
web/components/issues/issue-layouts/empty-states/module.tsx
View File

@ -82,7 +82,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
}}
secondaryButton={
<Button
variant="neutral-primary"
variant="outline-neutral"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
onClick={() => setModuleIssuesListModal(true)}
disabled={!isEditingAllowed}

2
web/components/issues/issue-layouts/filters/applied-filters/project.tsx
View File

@ -33,7 +33,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
) : projectDetails.icon_prop ? (
<div className="-my-1 grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div>
) : (
<span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{projectDetails?.name.charAt(0)}
</span>
)}

2
web/components/issues/issue-layouts/filters/header/filters/project.tsx
View File

@ -61,7 +61,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
{renderEmoji(project.icon_prop)}
</div>
) : (
<span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
<span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
{project?.name.charAt(0)}
</span>
)

2
web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
View File

@ -42,7 +42,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
<Button
disabled={disabled}
ref={setReferenceElement}
variant="neutral-primary"
variant="outline-neutral"
size="sm"
appendIcon={
<ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />

6
web/components/issues/issue-modal/form.tsx
View File

@ -669,7 +669,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
<span className="text-xs">Create more</span>
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={17}>
<Button variant="outline-neutral" size="sm" onClick={onClose} tabIndex={17}>
Discard
</Button>
@ -677,7 +677,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
<Fragment>
{data?.id ? (
<Button
variant="neutral-primary"
variant="outline-neutral"
size="sm"
loading={isSubmitting}
onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
@ -687,7 +687,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
</Button>
) : (
<Button
variant="neutral-primary"
variant="outline-neutral"
size="sm"
loading={isSubmitting}
onClick={handleSubmit((data) => handleFormSubmit(data, true))}

2
web/components/labels/create-label-modal.tsx
View File

@ -196,7 +196,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
<Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/labels/create-update-label-inline.tsx
View File

@ -193,7 +193,7 @@ export const CreateUpdateLabelInline = observer(
)}
/>
</div>
<Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
<Button variant="outline-neutral" onClick={() => handleClose()} size="sm">
Cancel
</Button>
<Button variant="primary" type="submit" size="sm" loading={isSubmitting}>

2
web/components/labels/delete-label-modal.tsx
View File

@ -104,7 +104,7 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
</div>
</div>
<div className="flex justify-end gap-2 p-4 sm:px-6">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>

2
web/components/modules/delete-module-modal.tsx
View File

@ -118,7 +118,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
</div>
</div>
<div className="flex justify-end gap-2 p-4 sm:px-6">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>

2
web/components/modules/form.tsx
View File

@ -221,7 +221,7 @@ export const ModuleForm: React.FC<Props> = ({
</div>
</div>
<div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-neutral-border-medium pt-5">
<Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={8}>
<Button variant="outline-neutral" size="sm" onClick={handleClose} tabIndex={8}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={9}>

18
web/components/notifications/notification-popover.tsx
View File

@ -13,6 +13,7 @@ import { Loader, Tooltip } from "@plane/ui";
import emptyNotification from "public/empty-state/notification.svg";
// helpers
import { getNumberCount } from "helpers/string.helper";
import { cn } from "helpers/common.helper";
export const NotificationPopover = observer(() => {
// store hooks
@ -66,19 +67,22 @@ export const NotificationPopover = observer(() => {
<>
<Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
<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-primary-text-subtle"
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
} ${isSidebarCollapsed ? "justify-center" : ""}`}
className={cn(
"group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none",
{
"bg-primary-component-surface-light text-primary-text-subtle": isActive,
"text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark": !isActive,
"justify-center": isSidebarCollapsed,
}
)}
>
<Bell className="h-4 w-4" />
{isSidebarCollapsed ? null : <span>Notifications</span>}
{totalNotificationCount && totalNotificationCount > 0 ? (
isSidebarCollapsed ? (
<span className="absolute right-3.5 top-2 h-2 w-2 rounded-full bg-custom-primary-300" />
<span className="absolute right-3.5 top-2 h-2 w-2 rounded-full bg-primary-component-surface-medium" />
) : (
<span className="ml-auto rounded-full bg-custom-primary-300 px-1.5 text-xs text-white">
<span className="ml-auto rounded-full bg-primary-component-surface-medium px-1.5 text-xs text-white">
{getNumberCount(totalNotificationCount)}
</span>
)

2
web/components/notifications/select-snooze-till-modal.tsx
View File

@ -250,7 +250,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
<div className="mt-5 flex items-center justify-between gap-2">
<div className="flex w-full items-center justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
<Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>

2
web/components/onboarding/invitations.tsx
View File

@ -107,7 +107,7 @@ export const Invitations: React.FC<Props> = (props) => {
alt={invitedWorkspace.name}
/>
) : (
<span className="grid h-9 w-9 place-items-center rounded bg-gray-700 px-3 py-1.5 uppercase text-white">
<span className="grid h-9 w-9 place-items-center rounded bg-primary-solid px-3 py-1.5 uppercase text-white">
{invitedWorkspace?.name[0]}
</span>
)}

Some files were not shown because too many files have changed in this diff Show More