chore: replace old classNames (#8372)

This commit is contained in:
Aaryan Khandelwal 2025-12-18 13:08:38 +05:30 committed by GitHub
parent 9b90fbf5aa
commit 88f4d8253d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
58 changed files with 66 additions and 68 deletions

View file

@ -85,7 +85,7 @@ export function SendTestEmailModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl"> <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all w-full sm:max-w-xl">
<h3 className="text-16 font-medium leading-6 text-primary"> <h3 className="text-16 font-medium leading-6 text-primary">
{sendEmailStep === ESendEmailSteps.SEND_EMAIL {sendEmailStep === ESendEmailSteps.SEND_EMAIL
? "Send test email" ? "Send test email"

View file

@ -39,7 +39,7 @@ export function ConfirmDiscardModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:text-left">

View file

@ -14,14 +14,14 @@ function ErrorPage() {
<p className="mx-auto md:w-1/2 text-13 text-secondary"> <p className="mx-auto md:w-1/2 text-13 text-secondary">
That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
details, please write to{" "} details, please write to{" "}
<a href="mailto:support@plane.so" className="text-custom-primary"> <a href="mailto:support@plane.so" className="text-accent-primary">
support@plane.so support@plane.so
</a>{" "} </a>{" "}
or on our{" "} or on our{" "}
<a <a
href="https://discord.com/invite/A92xrEGCge" href="https://discord.com/invite/A92xrEGCge"
target="_blank" target="_blank"
className="text-custom-primary" className="text-accent-primary"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Discord Discord

View file

@ -16,7 +16,7 @@ export function IssueEmbedUpgradeCard(props: any) {
> >
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<ProIcon className="flex-shrink-0 size-4" /> <ProIcon className="flex-shrink-0 size-4" />
<p className="text-custom-text !text-14"> <p className="text-secondary !text-14">
Embed and access issues in pages seamlessly, upgrade to Plane Pro now. Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
</p> </p>
</div> </div>

View file

@ -87,7 +87,7 @@ export function DeactivateAccountModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className=""> <div className="">
<div className="flex items-start gap-x-4"> <div className="flex items-start gap-x-4">

View file

@ -68,7 +68,7 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-surface-1 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg bg-surface-1 px-4 pb-4 pt-5 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div> <div>
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary"> <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">

View file

@ -21,16 +21,14 @@ export function LatestFeatureBlock() {
</div> </div>
<div <div
className={`mx-auto mt-8 overflow-hidden rounded-md border border-subtle object-cover sm:h-52 sm:w-96 ${ className={`mx-auto mt-8 overflow-hidden rounded-md border border-subtle object-cover sm:h-52 sm:w-96 ${
resolvedTheme === "dark" ? "bg-surface-1" : "bg-custom-primary-70" resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"
}`} }`}
> >
<div className="h-[90%]"> <div className="h-[90%]">
<img <img
src={latestFeatures} src={latestFeatures}
alt="Plane Work items" alt="Plane Work items"
className={`-mt-2 ml-10 h-full rounded-md ${ className={`-mt-2 ml-10 h-full rounded-md ${resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"}`}
resolvedTheme === "dark" ? "bg-surface-1" : "bg-custom-primary-70"
}`}
/> />
</div> </div>
</div> </div>

View file

@ -73,7 +73,7 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form className="space-y-4"> <form className="space-y-4">
<div className="flex w-full justify-between"> <div className="flex w-full justify-between">
<Controller <Controller

View file

@ -303,7 +303,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
<div className="flex w-full flex-1 items-center gap-3"> <div className="flex w-full flex-1 items-center gap-3">
<div <div
{...getRootProps()} {...getRootProps()}
className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${ className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
(image === null && isDragActive) || !value (image === null && isDragActive) || !value
? "border-2 border-dashed border-subtle hover:bg-surface-2" ? "border-2 border-dashed border-subtle hover:bg-surface-2"
: "" : ""

View file

@ -163,7 +163,7 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="relative flex w-full items-center justify-center "> <Dialog.Panel className="relative flex w-full items-center justify-center ">
<div className="w-full max-w-2xl transform divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all"> <div className="w-full max-w-2xl transform divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
<form> <form>
<Combobox <Combobox
onChange={(val: string) => { onChange={(val: string) => {

View file

@ -152,7 +152,7 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-4 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-4 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
<div className="py-4 space-y-0"> <div className="py-4 space-y-0">
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary"> <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
{changeEmailT("title")} {changeEmailT("title")}

View file

@ -156,7 +156,7 @@ export function ExistingIssuesListModal(props: Props) {
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-raised-200 transition-all">
<Combobox <Combobox
as="div" as="div"
onChange={(val: ISearchIssueResponse) => { onChange={(val: ISearchIssueResponse) => {

View file

@ -274,7 +274,7 @@ export function GptAssistantPopover(props: Props) {
<>{responseActionButton}</> <>{responseActionButton}</>
) : ( ) : (
<> <>
<div className="flex items-start justify-center gap-2 text-13 text-custom-primary"> <div className="flex items-start justify-center gap-2 text-13 text-accent-primary">
<AlertCircle className="h-4 w-4" /> <AlertCircle className="h-4 w-4" />
<p>By using this feature, you consent to sharing the message with a 3rd party service. </p> <p>By using this feature, you consent to sharing the message with a 3rd party service. </p>
</div> </div>

View file

@ -113,7 +113,7 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-xl sm:p-6">
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary"> <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
Upload Image Upload Image
@ -122,7 +122,7 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
<div <div
{...getRootProps()} {...getRootProps()}
className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${ className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
(image === null && isDragActive) || !value (image === null && isDragActive) || !value
? "border-2 border-dashed border-subtle hover:bg-surface-2" ? "border-2 border-dashed border-subtle hover:bg-surface-2"
: "" : ""

View file

@ -126,7 +126,7 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-xl sm:p-6">
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary"> <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
Upload image Upload image
@ -135,7 +135,7 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
<div <div
{...getRootProps()} {...getRootProps()}
className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${ className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
(image === null && isDragActive) || !value (image === null && isDragActive) || !value
? "border-2 border-dashed border-subtle hover:bg-surface-2" ? "border-2 border-dashed border-subtle hover:bg-surface-2"
: "" : ""

View file

@ -94,7 +94,7 @@ export function ArchiveCycleModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="px-5 py-4"> <div className="px-5 py-4">
<h3 className="text-18 font-medium 2xl:text-20">Archive cycle {cycleName}</h3> <h3 className="text-18 font-medium 2xl:text-20">Archive cycle {cycleName}</h3>
<p className="mt-3 text-13 text-secondary"> <p className="mt-3 text-13 text-secondary">

View file

@ -106,7 +106,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-surface-1 py-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg bg-surface-1 py-5 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex items-center justify-between px-5"> <div className="flex items-center justify-between px-5">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">

View file

@ -66,7 +66,7 @@ export function ColorPalette(props: TProps) {
background_color: color.key, background_color: color.key,
}); });
}} }}
className="h-6 w-6 rounded-md hover:ring-2 hover:ring-custom-primary focus:outline-none focus:ring-2 focus:ring-custom-primary transition-all" className="h-6 w-6 rounded-md hover:ring-2 hover:ring-accent-strong focus:outline-none focus:ring-2 focus:ring-accent-strong transition-all"
style={{ style={{
backgroundColor: color.backgroundColor, backgroundColor: color.backgroundColor,
}} }}

View file

@ -62,7 +62,7 @@ export function RadioInput({
id={`${name}_${index}`} id={`${name}_${index}`}
name={name} name={name}
className={cn( className={cn(
`group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-custom-background-500 cursor-pointer`, `group flex flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-layer-2 cursor-pointer`,
selected === value ? `bg-accent-primary/80 border-accent-strong ` : ``, selected === value ? `bg-accent-primary/80 border-accent-strong ` : ``,
disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``, disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
inputButtonClassName inputButtonClassName

View file

@ -130,7 +130,7 @@ export const Exporter = observer(function Exporter(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-xl"> <Dialog.Panel className="relative transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-xl">
<div className="flex flex-col gap-6 gap-y-4 p-6"> <div className="flex flex-col gap-6 gap-y-4 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">

View file

@ -33,7 +33,7 @@ export const LeftResizable = observer(function LeftResizable(props: LeftResizabl
<> <>
{(isHovering || isLeftResizing) && dateString && ( {(isHovering || isLeftResizing) && dateString && (
<div className="absolute flex text-11 font-regular text-tertiary h-full w-32 -left-36 justify-end items-center"> <div className="absolute flex text-11 font-regular text-tertiary h-full w-32 -left-36 justify-end items-center">
<div className="px-2 py-1 bg-custom-primary-20 rounded-sm">{dateString}</div> <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
</div> </div>
)} )}
<div <div

View file

@ -33,7 +33,7 @@ export const RightResizable = observer(function RightResizable(props: RightResiz
<> <>
{(isHovering || isRightResizing) && dateString && ( {(isHovering || isRightResizing) && dateString && (
<div className="z-[10] absolute flex text-11 font-regular text-tertiary h-full w-32 -right-36 justify-start items-center"> <div className="z-[10] absolute flex text-11 font-regular text-tertiary h-full w-32 -right-36 justify-start items-center">
<div className="px-2 py-1 bg-custom-primary-20 rounded-sm">{dateString}</div> <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
</div> </div>
)} )}
<div <div

View file

@ -150,7 +150,7 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-raised-200 transition-all">
<Combobox value={value} onChange={handleSubmit}> <Combobox value={value} onChange={handleSubmit}>
<div className="relative m-1"> <div className="relative m-1">
<Search <Search

View file

@ -45,7 +45,7 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative flex transform rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<div className="flex h-full w-full flex-col gap-y-1"> <div className="flex h-full w-full flex-col gap-y-1">
<Calendar <Calendar
className="rounded-md border border-subtle p-3" className="rounded-md border border-subtle p-3"

View file

@ -59,7 +59,7 @@ export const InboxIssueListItem = observer(function InboxIssueListItem(props: In
> >
<Row <Row
className={cn( className={cn(
`flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`, `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-accent-primary/5 cursor-pointer transition-all`,
{ "border-accent-strong border": selectedInboxIssueId === issue.id } { "border-accent-strong border": selectedInboxIssueId === issue.id }
)} )}
> >

View file

@ -89,7 +89,7 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">

View file

@ -86,7 +86,7 @@ export function ArchiveIssueModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="px-5 py-4"> <div className="px-5 py-4">
<h3 className="text-18 font-medium 2xl:text-20"> <h3 className="text-18 font-medium 2xl:text-20">
{t("issue.archive.label")} {projectDetails?.identifier} {issue.sequence_id} {t("issue.archive.label")} {projectDetails?.identifier} {issue.sequence_id}

View file

@ -45,7 +45,7 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
return ( return (
<div <div
{...getRootProps()} {...getRootProps()}
className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-custom-primary/5 px-4 text-11 text-accent-primary ${ className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle" isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
} ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`} } ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
> >

View file

@ -54,7 +54,7 @@ export function ConfirmIssueDiscard(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:text-left">

View file

@ -47,7 +47,7 @@ export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(p
<div <div
className={cn( className={cn(
"p-1 rounded-sm relative transition-all duration-200", "p-1 rounded-sm relative transition-all duration-200",
isFilterApplied && "bg-custom-primary-60/20" isFilterApplied && "bg-accent-primary/20"
)} )}
> >
{isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />} {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}

View file

@ -45,7 +45,7 @@ export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssu
<div <div
className={cn( className={cn(
"p-1 rounded-sm relative transition-all duration-200", "p-1 rounded-sm relative transition-all duration-200",
isFilterApplied && "bg-custom-primary-60/20" isFilterApplied && "bg-accent-primary/20"
)} )}
> >
{isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />} {isFilterApplied && <span className="p-1 rounded-full bg-accent-primary absolute -top-1 -right-1" />}

View file

@ -63,7 +63,7 @@ export function GroupDragOverlay(props: Props) {
<div <div
className={cn("p-3 my-8 flex flex-col rounded-sm items-center", { className={cn("p-3 my-8 flex flex-col rounded-sm items-center", {
"text-secondary": shouldOverlayBeVisible, "text-secondary": shouldOverlayBeVisible,
"text-custom-text-error": isDropDisabled, "text-danger-secondary": isDropDisabled,
})} })}
> >
{dropErrorMessage ? ( {dropErrorMessage ? (

View file

@ -36,7 +36,7 @@ export const SpreadsheetSubIssueColumn = observer(function SpreadsheetSubIssueCo
<Row <Row
onClick={subIssueCount ? redirectToIssueDetail : () => {}} onClick={subIssueCount ? redirectToIssueDetail : () => {}}
className={cn( className={cn(
"flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 hover:bg-surface-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-custom-primary-90", "flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 hover:bg-surface-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary",
{ {
"cursor-pointer": subIssueCount, "cursor-pointer": subIssueCount,
} }

View file

@ -110,7 +110,7 @@ export function ParentIssuesListModal({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-surface-1 shadow-raised-200 transition-all">
<Combobox <Combobox
value={value} value={value}
onChange={(val) => { onChange={(val) => {

View file

@ -80,7 +80,7 @@ export function ArchiveModuleModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="px-5 py-4"> <div className="px-5 py-4">
<h3 className="text-18 font-medium 2xl:text-20">Archive module {moduleName}</h3> <h3 className="text-18 font-medium 2xl:text-20">Archive module {moduleName}</h3>
<p className="mt-3 text-13 text-secondary"> <p className="mt-3 text-13 text-secondary">

View file

@ -268,7 +268,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
value="accordion" value="accordion"
checked={projectPreferences.navigationMode === "accordion"} checked={projectPreferences.navigationMode === "accordion"}
onChange={() => updateNavigationMode("accordion")} onChange={() => updateNavigationMode("accordion")}
className="size-4 text-accent-primary focus:ring-custom-primary-100 mt-1" className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
/> />
<div className="flex-1"> <div className="flex-1">
<div className="text-13 text-secondary">{t("accordion_navigation_control")}</div> <div className="text-13 text-secondary">{t("accordion_navigation_control")}</div>
@ -285,7 +285,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
value="horizontal" value="horizontal"
checked={projectPreferences.navigationMode === "horizontal"} checked={projectPreferences.navigationMode === "horizontal"}
onChange={() => updateNavigationMode("horizontal")} onChange={() => updateNavigationMode("horizontal")}
className="size-4 text-accent-primary focus:ring-custom-primary-100 mt-1" className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
/> />
<div className="flex-1"> <div className="flex-1">
<div className="text-13 text-secondary">{t("horizontal_navigation_bar")}</div> <div className="text-13 text-secondary">{t("horizontal_navigation_bar")}</div>
@ -323,7 +323,7 @@ export const CustomizeNavigationDialog = observer(function CustomizeNavigationDi
"bg-surface-2 border", "bg-surface-2 border",
"text-secondary", "text-secondary",
parseInt(projectCountInput) >= 1 parseInt(projectCountInput) >= 1
? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-custom-primary-100" ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
: "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500" : "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
)} )}
/> />

View file

@ -227,7 +227,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
autoFocus autoFocus
className={cn( className={cn(
"w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-placeholder focus:border-transparent transition-all duration-200", "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
{ {
"border-strong": !errors.first_name, "border-strong": !errors.first_name,
"border-red-500": errors.first_name, "border-red-500": errors.first_name,

View file

@ -179,7 +179,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
placeholder="Enter workspace name" placeholder="Enter workspace name"
ref={ref} ref={ref}
className={cn( className={cn(
"w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-placeholder focus:border-transparent transition-all duration-200", "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
{ {
"border-strong": !errors.name, "border-strong": !errors.name,
"border-red-500": errors.name, "border-red-500": errors.name,
@ -213,7 +213,7 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
render={({ field: { value, ref, onChange } }) => ( render={({ field: { value, ref, onChange } }) => (
<div <div
className={cn( className={cn(
"flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 focus:border-transparent transition-all duration-200", "flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong focus:border-transparent transition-all duration-200",
{ {
"border-strong": !errors.name, "border-strong": !errors.name,
"border-red-500": errors.name, "border-red-500": errors.name,

View file

@ -76,7 +76,7 @@ export function SwitchAccountModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="p-6 pb-1"> <div className="p-6 pb-1">
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<div className="flex items-start"> <div className="flex items-start">

View file

@ -56,7 +56,7 @@ export function ShortcutsModal(props: Props) {
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex h-full items-center justify-center"> <Dialog.Panel className="relative flex h-full items-center justify-center">
<div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]"> <div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-raised-200 transition-all sm:w-[28rem]">
<Dialog.Title as="h3" className="flex justify-between"> <Dialog.Title as="h3" className="flex justify-between">
<span className="text-16 font-medium">Keyboard shortcuts</span> <span className="text-16 font-medium">Keyboard shortcuts</span>
<button type="button" onClick={handleClose}> <button type="button" onClick={handleClose}>

View file

@ -137,7 +137,7 @@ export const ProjectsAppPowerKModalWrapper = observer(function ProjectsAppPowerK
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-custom-shadow-md transition-all"> <Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 divide-opacity-10 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
<Command <Command
filter={(i18nValue: string, search: string) => { filter={(i18nValue: string, search: string) => {
if (i18nValue === "no-results") return 1; if (i18nValue === "no-results") return 1;

View file

@ -73,7 +73,7 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">

View file

@ -115,7 +115,7 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6"> <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">

View file

@ -65,7 +65,7 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 px-5 py-8 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-xl sm:p-6">
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary"> <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
Join Project? Join Project?

View file

@ -134,7 +134,7 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6"> <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">

View file

@ -208,7 +208,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 text-left shadow-raised-200 transition-all sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary"> <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
@ -336,7 +336,7 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
<div className="mt-5 flex items-center justify-between gap-2"> <div className="mt-5 flex items-center justify-between gap-2">
<button <button
type="button" type="button"
className="flex items-center gap-2 bg-transparent py-2 pr-3 text-13 font-medium text-accent-primary outline-custom-primary" className="flex items-center gap-2 bg-transparent py-2 pr-3 text-13 font-medium text-accent-primary outline-accent-strong"
onClick={appendField} onClick={appendField}
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />

View file

@ -103,7 +103,7 @@ export function ArchiveRestoreProjectModal(props: Props) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="px-5 py-4"> <div className="px-5 py-4">
<h3 className="text-18 font-medium 2xl:text-20"> <h3 className="text-18 font-medium 2xl:text-20">
{archive ? "Archive" : "Restore"} {projectDetails.name} {archive ? "Archive" : "Restore"} {projectDetails.name}

View file

@ -30,7 +30,7 @@ export const SettingsMobileNav = observer(function SettingsMobileNav(props: Prop
{!sidebarCollapsed && <HamburgerContent isMobile />} {!sidebarCollapsed && <HamburgerContent isMobile />}
<button <button
type="button" type="button"
className="z-50 group flex-shrink-0 size-6 grid place-items-center rounded-sm border border-subtle transition-all bg-custom-background md:hidden" className="z-50 group flex-shrink-0 size-6 grid place-items-center rounded-sm border border-subtle transition-all md:hidden"
onClick={() => toggleSidebar()} onClick={() => toggleSidebar()}
> >
<Menu className="size-3.5 text-secondary transition-all group-hover:text-primary" /> <Menu className="size-3.5 text-secondary transition-all group-hover:text-primary" />

View file

@ -29,7 +29,7 @@ function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProp
{link ? ( {link ? (
<div className="mt-6 flex"> <div className="mt-6 flex">
<Link href={link.href}> <Link href={link.href}>
<span className="text-13 font-medium text-accent-primary hover:text-custom-primary"> <span className="text-13 font-medium text-accent-primary hover:text-accent-primary">
{link.text} {link.text}
<span aria-hidden="true"> &rarr;</span> <span aria-hidden="true"> &rarr;</span>
</span> </span>

View file

@ -10,7 +10,7 @@ export function IntegrationAndImportExportBanner({ bannerName, description }: Pr
<div className="flex items-start gap-3 border-b border-subtle py-3.5"> <div className="flex items-start gap-3 border-b border-subtle py-3.5">
<h3 className="text-18 font-medium">{bannerName}</h3> <h3 className="text-18 font-medium">{bannerName}</h3>
{description && ( {description && (
<div className="flex items-center gap-3 rounded-[10px] border border-accent-strong/75 bg-custom-primary/5 p-4 text-13 text-primary"> <div className="flex items-center gap-3 rounded-[10px] border border-accent-strong/75 bg-accent-primary/5 p-4 text-13 text-primary">
<AlertCircle className="h-6 w-6 text-primary" /> <AlertCircle className="h-6 w-6 text-primary" />
<p className="leading-5">{description}</p> <p className="leading-5">{description}</p>
</div> </div>

View file

@ -52,7 +52,7 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4"> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">

View file

@ -38,7 +38,7 @@ export const InvitationModalActions = observer(function InvitationModalActions(p
<button <button
type="button" type="button"
className={cn( className={cn(
"flex items-center gap-1 bg-transparent py-2 pr-3 text-caption-md-medium text-accent-primary outline-custom-primary", "flex items-center gap-1 bg-transparent py-2 pr-3 text-caption-md-medium text-accent-primary outline-accent-strong",
{ {
"cursor-not-allowed opacity-60": isInviteDisabled, "cursor-not-allowed opacity-60": isInviteDisabled,
} }

View file

@ -124,7 +124,7 @@ export const CustomLinkExtension = Mark.create<LinkOptions, CustomLinkStorage>({
target: "_blank", target: "_blank",
rel: "noopener noreferrer nofollow", rel: "noopener noreferrer nofollow",
class: class:
"text-accent-secondary underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer", "text-accent-secondary underline underline-offset-[3px] hover:text-accent-primary transition-colors cursor-pointer",
}, },
validate: (url: string) => isValidHttpUrl(url).isValid, validate: (url: string) => isValidHttpUrl(url).isValid,
}; };

View file

@ -107,7 +107,7 @@ const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
"inline-flex items-center justify-center rounded-full border border-dashed border-strong", "inline-flex items-center justify-center rounded-full border border-dashed border-strong",
"bg-surface-1 text-placeholder transition-all duration-200", "bg-surface-1 text-placeholder transition-all duration-200",
"hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5", "hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5",
"focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1", "focus:outline-none focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-1",
"h-6 w-6", "h-6 w-6",
className className
)} )}

View file

@ -142,7 +142,7 @@ const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-11 font-medium transition-colors duration-200", "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-11 font-medium transition-colors duration-200",
"focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-2", "focus:outline-none focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2",
"disabled:opacity-50 disabled:pointer-events-none", "disabled:opacity-50 disabled:pointer-events-none",
buttonVariants[variant], buttonVariants[variant],
className className

View file

@ -30,7 +30,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
name={name} name={name}
checked={checked} checked={checked}
className={cn( className={cn(
"appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50 cursor-pointer", "appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong cursor-pointer",
{ {
"border-subtle bg-layer-1 cursor-not-allowed": disabled, "border-subtle bg-layer-1 cursor-not-allowed": disabled,
"border-strong hover:border-strong-1 bg-transparent": !disabled, "border-strong hover:border-strong-1 bg-transparent": !disabled,

View file

@ -33,7 +33,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
"block rounded-md bg-layer-transparent text-13 placeholder-tertiary border-subtle-1 focus:outline-none", "block rounded-md bg-layer-transparent text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{ {
"rounded-md border-[0.5px]": mode === "primary", "rounded-md border-[0.5px]": mode === "primary",
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary": "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
mode === "transparent", mode === "transparent",
"rounded-sm border-none bg-transparent ring-0": mode === "true-transparent", "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
"border-red-500": hasError, "border-red-500": hasError,

View file

@ -51,7 +51,7 @@ export function ModalCore(props: Props) {
> >
<Dialog.Panel <Dialog.Panel
className={cn( className={cn(
"relative transform rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all w-full", "relative transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all w-full",
width, width,
className className
)} )}