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() !== "" ? ( {item.avatar && item.avatar.trim() !== "" ? (
<img src={item.avatar} className="h-full w-full rounded-sm object-cover" alt={item.title} /> <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]} {item.title[0]}
</div> </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"> <NodeViewWrapper className="mention-component inline w-fit">
<span <span
className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-primary-text-subtle", { 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, "cursor-pointer": !props.extension.options.readonly,
// "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id) // "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"; 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} */ /** @type {import('tailwindcss').Config} */
export const darkMode = "class"; export const darkMode = "class";
export const content = { export const content = {
@ -44,268 +140,15 @@ export const theme = {
transparent: colors.transparent, transparent: colors.transparent,
black: colors.black, black: colors.black,
white: colors.white, white: colors.white,
primary: { primary: generateColorShades("primary"),
page: { neutral: generateColorShades("neutral"),
"surface-light": "var(--color-primary-10)", success: generateColorShades("success"),
"surface-medium": "var(--color-primary-20)", warning: generateColorShades("warning"),
}, danger: generateColorShades("danger"),
component: { info: generateColorShades("info"),
"surface-light": "var(--color-primary-30)", orange: generateSaturatedColorShades("orange"),
"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)",
},
sidebar: { sidebar: {
neutral: { neutral: generateSidebarColorShades("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)",
},
}, },
}, },
extend: { extend: {

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

@ -151,7 +151,7 @@ export const Avatar: React.FC<Props> = (props) => {
shape shape
)} ${className}`} )} ${className}`}
style={{ style={{
backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))", backgroundColor: fallbackBackgroundColor ?? "var(--color-primary-90)",
color: fallbackTextColor ?? "#ffffff", 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); const buttonIconStyle = getIconStyling(size);
return ( 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>} {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
{children} {children}
{appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>} {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 = export type TButtonVariant =
| "primary" | "primary"
| "accent-primary" | "surface-primary"
| "outline-primary" | "outline-primary"
| "neutral-primary" | "text-primary"
| "link-primary" | "surface-neutral"
| "danger" | "outline-neutral"
| "accent-danger" | "text-neutral"
| "outline-danger" | "warning"
| "link-danger" | "danger";
| "tertiary-danger";
export type TButtonSizes = "sm" | "md" | "lg" | "xl"; export type TButtonSizes = "sm" | "md" | "lg" | "xl";
export interface IButtonStyling { export type TButtonStyling = {
[key: string]: { [key in TButtonVariant]: {
default: string; default: string;
hover: string; hover: string;
pressed: string; pressed: string;
disabled: string; disabled: string;
}; };
} };
enum buttonSizeStyling { 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`, 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", 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: { primary: {
default: `text-white bg-custom-primary-100`, default: `text-white bg-primary-solid`,
hover: `hover:bg-custom-primary-200`, hover: `hover:bg-primary-solid-hover`,
pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`, pressed: `focus:bg-primary-solid-hover focus:ring-2 focus:ring-primary-border-medium`,
disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`, disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
}, },
"accent-primary": { "surface-primary": {
default: `bg-custom-primary-10 text-primary-text-subtle`, default: `bg-primary-component-surface-light text-primary-text-subtle`,
hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`, hover: `hover:bg-primary-component-surface-medium`,
pressed: `focus:bg-custom-primary-20`, pressed: `focus:bg-primary-component-surface-dark focus:ring-2 focus:ring-primary-border-medium focus:text-neutral-text-medium`,
disabled: `cursor-not-allowed !text-custom-primary-60`, disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
}, },
"outline-primary": { "outline-primary": {
default: `text-primary-text-subtle bg-transparent border border-custom-primary-100`, default: `text-primary-text-subtle bg-transparent border border-primary-border-subtle`,
hover: `hover:bg-custom-primary-100/20`, hover: `hover:bg-primary-component-surface-medium hover:border-primary-border-medium`,
pressed: `focus:text-primary-text-subtle focus:bg-custom-primary-100/30`, pressed: `focus:bg-primary-component-surface-dark focus:ring-1 focus:ring-primary-border-medium`,
disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `, disabled: `cursor-not-allowed border-transparent bg-neutral-component-surface-dark text-neutral-text-subtle`,
}, },
"neutral-primary": { "text-primary": {
default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`, 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`, hover: `hover:bg-neutral-component-surface-medium`,
pressed: `focus:text-neutral-text-medium focus:bg-neutral-component-surface-medium`, pressed: `focus:bg-neutral-component-surface-dark focus:ring-2 focus:ring-neutral-border-medium focus:text-neutral-text-medium`,
disabled: `cursor-not-allowed !text-neutral-text-subtle`, disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
}, },
"link-primary": { "outline-neutral": {
default: `text-primary-text-subtle bg-neutral-component-surface-light`, default: `text-neutral-text-subtle bg-transparent border border-neutral-border-subtle`,
hover: `hover:text-custom-primary-200`, hover: `hover:bg-neutral-component-surface-medium hover:border-neutral-border-medium`,
pressed: `focus:text-custom-primary-80 `, pressed: `focus:bg-neutral-component-surface-dark focus:ring-1 focus:ring-neutral-border-medium`,
disabled: `cursor-not-allowed !text-custom-primary-60`, 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: { danger: {
default: `text-white bg-red-500`, default: `text-white bg-danger-solid`,
hover: ` hover:bg-red-600`, hover: ` hover:bg-danger-solid-hover`,
pressed: `focus:text-red-200 focus:bg-red-600`, pressed: `focus:bg-danger-solid-hover focus:ring-2 focus:ring-danger-border-medium`,
disabled: `cursor-not-allowed !bg-red-300`, disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
},
"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`,
}, },
}; };

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 ${ className={`relative inline-flex flex-shrink-0 ${
size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10" 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 ${ } 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" : ""}`} } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
> >
<span className="sr-only">{label}</span> <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}> <Popover.Button as={React.Fragment}>
<Button <Button
ref={setReferenceElement} ref={setReferenceElement}
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
className="border-none !bg-transparent" 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-danger-text-medium": priority === "urgent",
"text-orange-500": priority === "high", "text-orange-500": priority === "high",
"text-yellow-500": priority === "medium", "text-warning-text-subtle": priority === "medium",
"text-primary-text-subtle": priority === "low", "text-primary-text-subtle": priority === "low",
"text-neutral-text-medium": priority === "none", "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"; className = "text-danger-text-medium";
} else if (timeDifference === 24 * 60 * 60 * 1000) { } else if (timeDifference === 24 * 60 * 60 * 1000) {
iconName = "event"; iconName = "event";
className = "text-yellow-500"; className = "text-warning-text-subtle";
} else { } else {
iconName = "calendar_today"; iconName = "calendar_today";
className = ""; className = "";

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

@ -29,7 +29,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
return ( return (
<> <>
<Popover.Button as={React.Fragment}> <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"}`}> <div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
<span>{title}</span> <span>{title}</span>
</div> </div>

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

@ -134,7 +134,7 @@ const IssueNavbar = observer(() => {
{renderEmoji(projectStore.project.icon_prop)} {renderEmoji(projectStore.project.icon_prop)}
</div> </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)} {projectStore.project?.name.charAt(0)}
</span> </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" 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.is_bot
? comment?.actor_detail?.first_name?.charAt(0) ? comment?.actor_detail?.first_name?.charAt(0)
: comment?.actor_detail?.display_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" : priority?.key === "high"
? "border-orange-500/20 bg-orange-500/20 text-orange-500" ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
: priority?.key === "medium" : 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" : priority?.key === "low"
? "border-green-500/20 bg-success-component-surface-dark text-success-text-medium" ? "border-green-500/20 bg-success-component-surface-dark text-success-text-medium"
: "border-neutral-border-medium bg-neutral-component-surface-dark" : "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", key: "medium",
title: "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", 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> </div>
<div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6"> <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 Cancel
</Button> </Button>
<Button variant="danger" onClick={handleDeleteAccount}> <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 ? ( ) : project.icon_prop ? (
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.icon_prop)}</div> <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)} {project?.name.charAt(0)}
</span> </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)} {renderEmoji(projectDetails.icon_prop)}
</div> </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)} {projectDetails?.name.charAt(0)}
</span> </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>
<div className="flex flex-wrap items-center gap-2 justify-self-end"> <div className="flex flex-wrap items-center gap-2 justify-self-end">
<Button <Button
variant="neutral-primary" variant="outline-neutral"
prependIcon={<RefreshCw className="h-3.5 w-3.5" />} prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
onClick={() => { onClick={() => {
if (!workspaceSlug) return; 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>
) : ( ) : (
<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] : "?"} {user.display_name !== "" ? user?.display_name?.[0] : "?"}
</div> </div>
)} )}

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

@ -108,7 +108,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
</p> </p>
</span> </span>
<div className="mt-2 flex justify-end gap-2"> <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 Cancel
</Button> </Button>
<Button variant="danger" onClick={handleDeletion} loading={deleteLoading} size="sm"> <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> <span className="text-xs">Never expires</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Discard Discard
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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"> <p className="text-xs text-neutral-text-subtle">
{tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"} {tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
</p> </p>
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Close Close
</Button> </Button>
</div> </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"> <div className="flex items-center justify-center gap-2">
<Link href="/invitations"> <Link href="/invitations">
<span> <span>
<Button variant="neutral-primary">Check pending invites</Button> <Button variant="outline-neutral">Check pending invites</Button>
</span> </span>
</Link> </Link>
<Link href="/create-workspace"> <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> </div>
<div className="mt-5 flex justify-end gap-2"> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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> </h6>
)} )}
<div className="flex justify-end gap-4"> <div className="flex justify-end gap-4">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<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"> <div className="flex h-12 items-start justify-end gap-2">
<Button <Button
variant="neutral-primary" variant="outline-neutral"
onClick={() => { onClick={() => {
setIsOpen(false); setIsOpen(false);
setImage(null); 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 && ( {filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3"> <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 Cancel
</Button> </Button>
<Button variant="danger" size="sm" onClick={handleSubmit(handleDelete)} loading={isSubmitting}> <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.Options>
</Combobox> </Combobox>
<div className="flex items-center justify-end gap-2 p-3"> <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 Cancel
</Button> </Button>
{selectedIssues.length > 0 && ( {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"}`}> <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
{responseActionButton} {responseActionButton}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}> <Button variant="outline-neutral" size="sm" onClick={onClose}>
Close Close
</Button> </Button>
<Button variant="primary" size="sm" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}> <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> </div>
<div className="mt-5 flex justify-end gap-2"> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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> </Button>
)} )}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<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> </Button>
)} )}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button <Button

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

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

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

@ -172,7 +172,7 @@ export const CycleForm: React.FC<Props> = (props) => {
</div> </div>
</div> </div>
<div className="flex items-center justify-end gap-2 border-t-[0.5px] border-neutral-border-subtle pt-5 "> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={6}> <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 && ( {issues.length > 0 && (
<Link <Link
href={`/${workspaceSlug}/workspace-views/${type}/${filterParams}`} href={`/${workspaceSlug}/workspace-views/${type}/${filterParams}`}
className={cn( className={cn(getButtonStyling("text-primary", "sm"), "w-min my-3 mx-auto py-1 px-2 text-xs")}
getButtonStyling("link-primary", "sm"),
"w-min my-3 mx-auto py-1 px-2 text-xs hover:bg-custom-primary-100/20"
)}
> >
View all issues View all issues
</Link> </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" 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.is_bot
? activity.actor_detail.first_name.charAt(0) ? activity.actor_detail.first_name.charAt(0)
: activity.actor_detail.display_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 ? ( ) : projectDetails.icon_prop ? (
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div> <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)} {projectDetails.name.charAt(0)}
</span> </span>
)} )}

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

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

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

@ -55,7 +55,7 @@ export const EmptyState: React.FC<Props> = ({
const secondaryButtonElement = secondaryButton && ( const secondaryButtonElement = secondaryButton && (
<Button <Button
size={size === "sm" ? "md" : "lg"} size={size === "sm" ? "md" : "lg"}
variant="neutral-primary" variant="outline-neutral"
prependIcon={secondaryButton.icon} prependIcon={secondaryButton.icon}
onClick={secondaryButton.onClick} onClick={secondaryButton.onClick}
disabled={disabled} 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> </div>
<div className="mt-5 flex justify-end gap-2"> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}> <Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel Cancel
</Button> </Button>
<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>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{currentProjectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && ( {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 Use
</Button> </Button>
)} )}

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

@ -87,7 +87,7 @@ export const EstimatesList: React.FC = observer(() => {
Add Estimate Add Estimate
</Button> </Button>
{currentProjectDetails?.estimate && ( {currentProjectDetails?.estimate && (
<Button variant="neutral-primary" onClick={disableEstimates} size="sm"> <Button variant="outline-neutral" onClick={disableEstimates} size="sm">
Disable Estimates Disable Estimates
</Button> </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 className="whitespace-nowrap text-sm">Export the data into separate files</div>
</div> </div>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<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" service.status === "completed"
? "bg-success-component-surface-dark text-success-text-medium" ? "bg-success-component-surface-dark text-success-text-medium"
: service.status === "processing" : service.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-warning-component-surface-light text-warning-text-subtle"
: service.status === "failed" : service.status === "failed"
? "bg-danger-component-surface-dark text-danger-text-medium" ? "bg-danger-component-surface-dark text-danger-text-medium"
: service.status === "expired" : 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 ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )
@ -247,7 +247,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
{canUserCreateIssue && ( {canUserCreateIssue && (
<> <>
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm"> <Button onClick={() => setAnalyticsModal(true)} variant="outline-neutral" size="sm">
Analytics Analytics
</Button> </Button>
<Button <Button

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

@ -63,7 +63,7 @@ export const CyclesHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -171,7 +171,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )
@ -255,7 +255,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
<Button <Button
className="hidden md:block" className="hidden md:block"
onClick={() => setAnalyticsModal(true)} onClick={() => setAnalyticsModal(true)}
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
> >
Analytics Analytics

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

@ -50,7 +50,7 @@ export const ModulesListHeader: React.FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -45,7 +45,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -47,7 +47,7 @@ export const PagesHeader = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -57,7 +57,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -96,7 +96,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -91,7 +91,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -40,7 +40,7 @@ export const ProjectInboxHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -51,7 +51,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -138,7 +138,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
{renderEmoji(currentProjectDetails.icon_prop)} {renderEmoji(currentProjectDetails.icon_prop)}
</div> </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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )
@ -206,7 +206,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
{currentProjectDetails?.inbox_view && inboxDetails && ( {currentProjectDetails?.inbox_view && inboxDetails && (
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
<span> <span>
<Button variant="neutral-primary" size="sm" className="relative"> <Button variant="outline-neutral" size="sm" className="relative">
Inbox Inbox
{inboxDetails?.pending_issue_count > 0 && ( {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"> <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 <Button
className="hidden md:block" className="hidden md:block"
onClick={() => setAnalyticsModal(true)} onClick={() => setAnalyticsModal(true)}
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
> >
Analytics Analytics
@ -234,7 +234,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
}} }}
size="sm" size="sm"
prependIcon={<Plus />} prependIcon={<Plus />}
variant="accent-primary" variant="primary"
> >
Add Issue Add Issue
</Button> </Button>

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

@ -49,7 +49,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
) : currentProjectDetails?.icon_prop ? ( ) : currentProjectDetails?.icon_prop ? (
renderEmoji(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)} {currentProjectDetails?.name.charAt(0)}
</span> </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)} {renderEmoji(currentProjectDetails.icon_prop)}
</div> </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)} {currentProjectDetails?.name.charAt(0)}
</span> </span>
) )

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

@ -51,7 +51,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
{renderEmoji(currentProjectDetails.icon_prop)} {renderEmoji(currentProjectDetails.icon_prop)}
</div> </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)} {currentProjectDetails?.name.charAt(0)}
</span> </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"> <div className="flex-shrink-0">
<Popover className="relative"> <Popover className="relative">
<Popover.Button as="button" type="button"> <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 Snooze
</Button> </Button>
</Popover.Button> </Popover.Button>
@ -307,7 +307,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{isAllowed && issueStatus.status === -2 && ( {isAllowed && issueStatus.status === -2 && (
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Button <Button
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
prependIcon={<FileStack size={14} strokeWidth={2} />} prependIcon={<FileStack size={14} strokeWidth={2} />}
onClick={() => setSelectDuplicateIssue(true)} onClick={() => setSelectDuplicateIssue(true)}
@ -320,7 +320,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{isAllowed && (issueStatus.status === 0 || issueStatus.status === -2) && ( {isAllowed && (issueStatus.status === 0 || issueStatus.status === -2) && (
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Button <Button
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
prependIcon={<CheckCircle2 className="text-success-text-medium" size={14} strokeWidth={2} />} prependIcon={<CheckCircle2 className="text-success-text-medium" size={14} strokeWidth={2} />}
onClick={() => setAcceptIssueModal(true)} onClick={() => setAcceptIssueModal(true)}
@ -333,7 +333,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{isAllowed && issueStatus.status === -2 && ( {isAllowed && issueStatus.status === -2 && (
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Button <Button
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
prependIcon={<XCircle className="text-danger-text-medium" size={14} strokeWidth={2} />} prependIcon={<XCircle className="text-danger-text-medium" size={14} strokeWidth={2} />}
onClick={() => setDeclineIssueModal(true)} onClick={() => setDeclineIssueModal(true)}
@ -346,7 +346,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
{(isAllowed || currentUser?.id === issue?.created_by) && ( {(isAllowed || currentUser?.id === issue?.created_by) && (
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Button <Button
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
prependIcon={<Trash2 className="text-danger-text-medium" size={14} strokeWidth={2} />} prependIcon={<Trash2 className="text-danger-text-medium" size={14} strokeWidth={2} />}
onClick={() => setDeleteIssueModal(true)} 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> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button variant="primary" size="sm" tabIndex={1} onClick={handleAccept} loading={isAccepting}> <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" /> <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={() => handleClose()}> <Button variant="outline-neutral" size="sm" onClick={() => handleClose()}>
Discard Discard
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDecline} loading={isDeclining}> <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> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDelete} loading={isDeleting}> <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 && ( {filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3"> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" onClick={handleSubmit}> <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" : priority === "high"
? "bg-orange-500/20 text-orange-500" ? "bg-orange-500/20 text-orange-500"
: priority === "medium" : priority === "medium"
? "bg-yellow-500/20 text-yellow-500" ? "bg-warning-component-surface-light text-warning-text-subtle"
: priority === "low" : priority === "low"
? "bg-success-component-surface-dark text-success-text-medium" ? "bg-success-component-surface-dark text-success-text-medium"
: "bg-neutral-component-surface-medium text-neutral-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"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Origin URL</h4> <h4 className="text-sm">Origin URL</h4>
<Button <Button
variant="neutral-primary" variant="outline-neutral"
className="flex items-center justify-between py-2" className="flex items-center justify-between py-2"
onClick={() => { onClick={() => {
navigator.clipboard.writeText(originURL); 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"> <div className="flex flex-col gap-1">
<h4 className="text-sm">JavaScript origin URL</h4> <h4 className="text-sm">JavaScript origin URL</h4>
<Button <Button
variant="neutral-primary" variant="outline-neutral"
className="flex items-center justify-between py-2" className="flex items-center justify-between py-2"
onClick={() => { onClick={() => {
navigator.clipboard.writeText(originURL); 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>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="outline-neutral" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<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. to complete the process.
</h4> </h4>
<div className="mt-6 flex items-center justify-between"> <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 Back
</Button> </Button>
<Button variant="primary" type="submit"> <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> </div>
<div className="mt-6 flex items-center justify-end gap-2"> <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 Back
</Button> </Button>
<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> </div>
<div className="mt-6 flex items-center justify-end gap-2"> <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 Back
</Button> </Button>
<Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}> <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> </Loader>
)} )}
<div className="mt-6 flex items-center justify-end gap-2"> <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 Back
</Button> </Button>
<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"> <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" && ( {currentStep?.state !== "import-configure" && (
<Button <Button
variant="neutral-primary" variant="outline-neutral"
onClick={() => { onClick={() => {
const currentElementIndex = integrationWorkflowData.findIndex( const currentElementIndex = integrationWorkflowData.findIndex(
(i) => i?.key === currentStep?.state (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" service.status === "completed"
? "bg-success-component-surface-dark text-success-text-medium" ? "bg-success-component-surface-dark text-success-text-medium"
: service.status === "processing" : service.status === "processing"
? "bg-yellow-500/20 text-yellow-500" ? "bg-warning-component-surface-light text-warning-text-subtle"
: service.status === "failed" : service.status === "failed"
? "bg-danger-component-surface-dark text-danger-text-medium" ? "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 ? ( {projectIntegration ? (
<button <button
type="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" role="switch"
aria-checked aria-checked
onClick={() => { 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> </div>
<div className="flex justify-end gap-2 p-4 sm:px-6"> <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 Cancel
</Button> </Button>
<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>
<div className="flex justify-between gap-2 p-4 sm:px-6"> <div className="flex justify-between gap-2 p-4 sm:px-6">
<div> <div>
<Button variant="neutral-primary" size="sm" onClick={onDiscard}> <Button variant="outline-neutral" size="sm" onClick={onDiscard}>
Discard Discard
</Button> </Button>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}> <Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel Cancel
</Button> </Button>
<Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}> <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> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}> <Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel Cancel
</Button> </Button>
<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> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}> <Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel Cancel
</Button> </Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}> <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> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}> <Button variant="outline-neutral" size="sm" onClick={onClose}>
Cancel Cancel
</Button> </Button>
<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" /> <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={handleDiscard}> <Button variant="outline-neutral" size="sm" onClick={handleDiscard}>
Discard Discard
</Button> </Button>
<Button <Button
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
loading={isSubmitting} loading={isSubmitting}
onClick={handleSubmit((formData) => 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 ( return (
<div className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}> <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="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 !== "" ? ( {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
<img <img
src={comment.actor_detail.avatar} 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> </div>
<div className="mt-5 flex justify-end gap-2"> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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={ secondaryButton={
<Button <Button
variant="neutral-primary" variant="outline-neutral"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />} prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
onClick={() => setCycleIssuesListModal(true)} onClick={() => setCycleIssuesListModal(true)}
disabled={!isEditingAllowed} 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={ secondaryButton={
<Button <Button
variant="neutral-primary" variant="outline-neutral"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />} prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
onClick={() => setModuleIssuesListModal(true)} onClick={() => setModuleIssuesListModal(true)}
disabled={!isEditingAllowed} 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 ? ( ) : projectDetails.icon_prop ? (
<div className="-my-1 grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div> <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)} {projectDetails?.name.charAt(0)}
</span> </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)} {renderEmoji(project.icon_prop)}
</div> </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)} {project?.name.charAt(0)}
</span> </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 <Button
disabled={disabled} disabled={disabled}
ref={setReferenceElement} ref={setReferenceElement}
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
appendIcon={ appendIcon={
<ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} /> <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> <span className="text-xs">Create more</span>
</div> </div>
<div className="flex items-center gap-2"> <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 Discard
</Button> </Button>
@ -677,7 +677,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
<Fragment> <Fragment>
{data?.id ? ( {data?.id ? (
<Button <Button
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
loading={isSubmitting} loading={isSubmitting}
onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))} onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
@ -687,7 +687,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
</Button> </Button>
) : ( ) : (
<Button <Button
variant="neutral-primary" variant="outline-neutral"
size="sm" size="sm"
loading={isSubmitting} loading={isSubmitting}
onClick={handleSubmit((data) => handleFormSubmit(data, true))} 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> </div>
<div className="mt-5 flex justify-end gap-2"> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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> </div>
<Button variant="neutral-primary" onClick={() => handleClose()} size="sm"> <Button variant="outline-neutral" onClick={() => handleClose()} size="sm">
Cancel Cancel
</Button> </Button>
<Button variant="primary" type="submit" size="sm" loading={isSubmitting}> <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> </div>
<div className="flex justify-end gap-2 p-4 sm:px-6"> <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 Cancel
</Button> </Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}> <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> </div>
<div className="flex justify-end gap-2 p-4 sm:px-6"> <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 Cancel
</Button> </Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}> <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> </div>
<div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-neutral-border-medium pt-5"> <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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={9}> <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"; import emptyNotification from "public/empty-state/notification.svg";
// helpers // helpers
import { getNumberCount } from "helpers/string.helper"; import { getNumberCount } from "helpers/string.helper";
import { cn } from "helpers/common.helper";
export const NotificationPopover = observer(() => { export const NotificationPopover = observer(() => {
// store hooks // store hooks
@ -66,19 +67,22 @@ export const NotificationPopover = observer(() => {
<> <>
<Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}> <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
<Popover.Button <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 ${ className={cn(
isActive "group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none",
? "bg-custom-primary-100/10 text-primary-text-subtle" {
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark" "bg-primary-component-surface-light text-primary-text-subtle": isActive,
} ${isSidebarCollapsed ? "justify-center" : ""}`} "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark": !isActive,
"justify-center": isSidebarCollapsed,
}
)}
> >
<Bell className="h-4 w-4" /> <Bell className="h-4 w-4" />
{isSidebarCollapsed ? null : <span>Notifications</span>} {isSidebarCollapsed ? null : <span>Notifications</span>}
{totalNotificationCount && totalNotificationCount > 0 ? ( {totalNotificationCount && totalNotificationCount > 0 ? (
isSidebarCollapsed ? ( 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)} {getNumberCount(totalNotificationCount)}
</span> </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="mt-5 flex items-center justify-between gap-2">
<div className="flex w-full items-center justify-end 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 Cancel
</Button> </Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}> <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} 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]} {invitedWorkspace?.name[0]}
</span> </span>
)} )}

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