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

style: auth screens (#1531)

Browse Source 
* chore: invitations empty state

* style: new auth screens

* chore: update typography

* chore: update border colors

* chore: resend code text
This commit is contained in:
Aaryan Khandelwal 2023-07-17 13:00:44 +05:30 committed by GitHub
parent da6ecd439c
commit 5fadf53580
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
181 changed files with 682 additions and 645 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
apps/app/components/account/email-code-form.tsx
View File

@ -32,6 +32,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
setError, setError,
setValue, setValue,
getValues, getValues,
watch,
formState: { errors, isSubmitting, isValid, isDirty }, formState: { errors, isSubmitting, isValid, isDirty },
} = useForm<EmailCodeFormValues>({ } = useForm<EmailCodeFormValues>({
defaultValues: { defaultValues: {
@ -112,43 +113,34 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
return ( return (
<> <>
<form className="space-y-5 py-5 px-5"> {(codeSent || codeResent) && (
{(codeSent || codeResent) && ( <p className="text-center mt-4">
<div className="rounded-md bg-green-500/20 p-4"> We have sent the sign in code.
<div className="flex"> <br />
<div className="flex-shrink-0"> Please check your inbox at <span className="font-medium">{watch("email")}</span>
<CheckCircleIcon className="h-5 w-5 text-green-500" aria-hidden="true" /> </p>
</div> )}
<div className="ml-3"> <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto">
<p className="text-sm font-medium text-green-500"> <div className="space-y-1">
{codeResent
? "Please check your mail for new code."
: "Please check your mail for code."}
</p>
</div>
</div>
</div>
)}
<div>
<Input <Input
id="email" id="email"
type="email" type="email"
name="email" name="email"
register={register} register={register}
validations={{ validations={{
required: "Email ID is required", required: "Email address is required",
validate: (value) => validate: (value) =>
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
value value
) || "Email ID is not valid", ) || "Email address is not valid",
}} }}
error={errors.email} error={errors.email}
placeholder="Enter your Email ID" placeholder="Enter your email address..."
/> />
</div> </div>
{codeSent && ( {codeSent && (
<div> <>
<Input <Input
id="token" id="token"
type="token" type="token"
@ -158,14 +150,14 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
required: "Code is required", required: "Code is required",
}} }}
error={errors.token} error={errors.token}
placeholder="Enter code" placeholder="Enter code..."
/> />
<button <button
type="button" type="button"
className={`mt-5 flex w-full justify-end text-xs outline-none ${ className={`flex w-full justify-end text-xs outline-none ${
isResendDisabled isResendDisabled
? "cursor-default text-custom-text-200" ? "cursor-default text-custom-text-200"
: "cursor-pointer text-custom-primary" : "cursor-pointer text-custom-primary-100"
} `} } `}
onClick={() => { onClick={() => {
setIsCodeResending(true); setIsCodeResending(true);
@ -178,46 +170,43 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
disabled={isResendDisabled} disabled={isResendDisabled}
> >
{resendCodeTimer > 0 ? ( {resendCodeTimer > 0 ? (
<p className="text-right"> <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
Didn{"'"}t receive code? Get new code in {resendCodeTimer} seconds.
</p>
) : isCodeResending ? ( ) : isCodeResending ? (
"Sending code..." "Sending new code..."
) : errorResendingCode ? ( ) : errorResendingCode ? (
"Please try again later" "Please try again later"
) : ( ) : (
"Resend code" "Resend code"
)} )}
</button> </button>
</div> </>
)}
{codeSent ? (
<PrimaryButton
type="submit"
className="w-full text-center"
size="md"
onClick={handleSubmit(handleSignin)}
disabled={!isValid && isDirty}
loading={isLoading}
>
{isLoading ? "Signing in..." : "Sign in"}
</PrimaryButton>
) : (
<PrimaryButton
className="w-full text-center"
size="md"
onClick={() => {
handleSubmit(onSubmit)().then(() => {
setResendCodeTimer(30);
});
}}
disabled={!isValid && isDirty}
loading={isSubmitting}
>
{isSubmitting ? "Sending code..." : "Send sign in code"}
</PrimaryButton>
)} )}
<div>
{codeSent ? (
<PrimaryButton
type="submit"
className="w-full text-center"
size="md"
onClick={handleSubmit(handleSignin)}
disabled={!isValid && isDirty}
loading={isLoading}
>
{isLoading ? "Signing in..." : "Sign in"}
</PrimaryButton>
) : (
<PrimaryButton
className="w-full text-center"
size="md"
onClick={() => {
handleSubmit(onSubmit)().then(() => {
setResendCodeTimer(30);
});
}}
loading={isSubmitting || (!isValid && isDirty)}
>
{isSubmitting ? "Sending code..." : "Send code"}
</PrimaryButton>
)}
</div>
</form> </form>
</> </>
); );

72
apps/app/components/account/email-password-form.tsx
View File

@ -8,7 +8,7 @@ import { useForm } from "react-hook-form";
// components // components
import { EmailResetPasswordForm } from "components/account"; import { EmailResetPasswordForm } from "components/account";
// ui // ui
import { Input, SecondaryButton } from "components/ui"; import { Input, PrimaryButton } from "components/ui";
// types // types
type EmailPasswordFormValues = { type EmailPasswordFormValues = {
email: string; email: string;
@ -42,28 +42,38 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
return ( return (
<> <>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
{isResettingPassword
? "Reset your password"
: isSignUpPage
? "Sign up on Plane"
: "Sign in to Plane"}
</h1>
{isResettingPassword ? ( {isResettingPassword ? (
<EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} /> <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
) : ( ) : (
<form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}> <form
<div> className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
onSubmit={handleSubmit(onSubmit)}
>
<div className="space-y-1">
<Input <Input
id="email" id="email"
type="email" type="email"
name="email" name="email"
register={register} register={register}
validations={{ validations={{
required: "Email ID is required", required: "Email address is required",
validate: (value) => validate: (value) =>
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
value value
) || "Email ID is not valid", ) || "Email address is not valid",
}} }}
error={errors.email} error={errors.email}
placeholder="Enter your email ID" placeholder="Enter your email address..."
/> />
</div> </div>
<div className="mt-5"> <div className="space-y-1">
<Input <Input
id="password" id="password"
type="password" type="password"
@ -73,30 +83,28 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
required: "Password is required", required: "Password is required",
}} }}
error={errors.password} error={errors.password}
placeholder="Enter your password" placeholder="Enter your password..."
/> />
</div> </div>
<div className="mt-2 flex items-center justify-between"> <div className="text-right text-xs">
<div className="ml-auto text-sm"> {isSignUpPage ? (
{isSignUpPage ? ( <Link href="/">
<Link href="/"> <a className="text-custom-text-200 hover:text-custom-primary-100">
<a className="font-medium text-custom-primary hover:text-custom-primary"> Already have an account? Sign in.
Already have an account? Sign in. </a>
</a> </Link>
</Link> ) : (
) : ( <button
<button type="button"
type="button" onClick={() => setIsResettingPassword(true)}
onClick={() => setIsResettingPassword(true)} className="text-custom-text-200 hover:text-custom-primary-100"
className="font-medium text-custom-primary hover:text-custom-primary" >
> Forgot your password?
Forgot your password? </button>
</button> )}
)}
</div>
</div> </div>
<div className="mt-5"> <div>
<SecondaryButton <PrimaryButton
type="submit" type="submit"
className="w-full text-center" className="w-full text-center"
disabled={!isValid && isDirty} disabled={!isValid && isDirty}
@ -105,14 +113,14 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
{isSignUpPage {isSignUpPage
? isSubmitting ? isSubmitting
? "Signing up..." ? "Signing up..."
: "Sign Up" : "Sign up"
: isSubmitting : isSubmitting
? "Signing in..." ? "Signing in..."
: "Sign In"} : "Sign in"}
</SecondaryButton> </PrimaryButton>
{!isSignUpPage && ( {!isSignUpPage && (
<Link href="/sign-up"> <Link href="/sign-up">
<a className="block font-medium text-custom-primary hover:text-custom-primary text-sm mt-1"> <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
Don{"'"}t have an account? Sign up. Don{"'"}t have an account? Sign up.
</a> </a>
</Link> </Link>

15
apps/app/components/account/email-reset-password-form.tsx
View File

@ -59,25 +59,28 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
}; };
return ( return (
<form className="mt-5 py-5 px-5" onSubmit={handleSubmit(forgotPassword)}> <form
<div> className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
onSubmit={handleSubmit(forgotPassword)}
>
<div className="space-y-1">
<Input <Input
id="email" id="email"
type="email" type="email"
name="email" name="email"
register={register} register={register}
validations={{ validations={{
required: "Email ID is required", required: "Email address is required",
validate: (value) => validate: (value) =>
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
value value
) || "Email ID is not valid", ) || "Email address is not valid",
}} }}
error={errors.email} error={errors.email}
placeholder="Enter registered Email ID" placeholder="Enter registered email address.."
/> />
</div> </div>
<div className="mt-5 flex items-center gap-2"> <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
<SecondaryButton <SecondaryButton
className="w-full text-center" className="w-full text-center"
onClick={() => setIsResettingPassword(false)} onClick={() => setIsResettingPassword(false)}

32
apps/app/components/account/github-login-button.tsx
View File

@ -1,9 +1,14 @@
import { useEffect, useState, FC } from "react"; import { useEffect, useState, FC } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// next-themes
import { useTheme } from "next-themes";
// images // images
import githubImage from "/public/logos/github-black.png"; import githubBlackImage from "/public/logos/github-black.png";
import githubWhiteImage from "/public/logos/github-white.png";
const { NEXT_PUBLIC_GITHUB_ID } = process.env; const { NEXT_PUBLIC_GITHUB_ID } = process.env;
@ -11,15 +16,15 @@ export interface GithubLoginButtonProps {
handleSignIn: React.Dispatch<string>; handleSignIn: React.Dispatch<string>;
} }
export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => { export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
const { handleSignIn } = props; const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
// router const [gitCode, setGitCode] = useState<null | string>(null);
const { const {
query: { code }, query: { code },
} = useRouter(); } = useRouter();
// states
const [loginCallBackURL, setLoginCallBackURL] = useState(undefined); const { theme } = useTheme();
const [gitCode, setGitCode] = useState<null | string>(null);
useEffect(() => { useEffect(() => {
if (code && !gitCode) { if (code && !gitCode) {
@ -35,13 +40,18 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
}, []); }, []);
return ( return (
<div className="w-full flex justify-center items-center px-[3px]"> <div className="w-full flex justify-center items-center">
<Link <Link
href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`} href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
> >
<button className="flex w-full items-center justify-center gap-3 rounded border border-custom-border-100 p-2 text-sm font-medium text-custom-text-200 duration-300 hover:bg-custom-background-80"> <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80">
<Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" /> <Image
<span>Sign In with Github</span> src={theme === "light" ? githubBlackImage : githubWhiteImage}
height={20}
width={20}
alt="GitHub Logo"
/>
<span>Sign in with GitHub</span>
</button> </button>
</Link> </Link>
</div> </div>

4
apps/app/components/account/google-login.tsx
View File

@ -27,7 +27,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
theme: "outline", theme: "outline",
size: "large", size: "large",
logo_alignment: "center", logo_alignment: "center",
width: "410", width: "360",
text: "continue_with", text: "continue_with",
} as GsiButtonConfiguration // customization attributes } as GsiButtonConfiguration // customization attributes
); );
@ -48,7 +48,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
<> <>
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} /> <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
<div <div
className="overflow-hidden rounded w-full flex justify-center items-center" className="overflow-hidden rounded w-full flex justify-center items-center !text-sm !font-medium !text-custom-text-100"
id="googleSignInButton" id="googleSignInButton"
ref={googleSignInButton} ref={googleSignInButton}
/> />

2
apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
View File

@ -111,7 +111,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
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 border border-custom-border-100 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl 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 <Dialog.Title

2
apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
View File

@ -31,7 +31,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
} }
return ( return (
<div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs"> <div className="flex items-center gap-2 rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
<span <span
className="h-3 w-3 rounded" className="h-3 w-3 rounded"
style={{ style={{

2
apps/app/components/analytics/custom-analytics/sidebar.tsx
View File

@ -185,7 +185,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
<div <div
className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${ className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
fullScreen fullScreen
? "border-l border-custom-border-100 md:h-full md:border-l md:border-custom-border-100 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5" ? "border-l border-custom-border-300 md:h-full md:border-l md:border-custom-border-300 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
: "" : ""
}`} }`}
> >

8
apps/app/components/analytics/custom-analytics/table.tsx
View File

@ -37,9 +37,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
<div className="flow-root"> <div className="flow-root">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<div className="inline-block min-w-full align-middle"> <div className="inline-block min-w-full align-middle">
<table className="min-w-full divide-y divide-custom-border-100 whitespace-nowrap border-y border-custom-border-100"> <table className="min-w-full divide-y divide-custom-border-300 whitespace-nowrap border-y border-custom-border-300">
<thead className="bg-custom-background-80"> <thead className="bg-custom-background-80">
<tr className="divide-x divide-custom-border-100 text-sm text-custom-text-100"> <tr className="divide-x divide-custom-border-300 text-sm text-custom-text-100">
<th scope="col" className="py-3 px-2.5 text-left font-medium"> <th scope="col" className="py-3 px-2.5 text-left font-medium">
{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label} {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
</th> </th>
@ -80,11 +80,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
)} )}
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-custom-border-100"> <tbody className="divide-y divide-custom-border-300">
{barGraphData.data.map((item, index) => ( {barGraphData.data.map((item, index) => (
<tr <tr
key={`table-row-${index}`} key={`table-row-${index}`}
className="divide-x divide-custom-border-100 text-xs text-custom-text-200" className="divide-x divide-custom-border-300 text-xs text-custom-text-200"
> >
<td <td
className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${ className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${

6
apps/app/components/analytics/project-modal.tsx
View File

@ -155,7 +155,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
} ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`} } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
> >
<div <div
className={`flex h-full flex-col overflow-hidden border-custom-border-100 bg-custom-background-100 text-left ${ className={`flex h-full flex-col overflow-hidden border-custom-border-300 bg-custom-background-100 text-left ${
fullScreen ? "rounded-lg border" : "border-l" fullScreen ? "rounded-lg border" : "border-l"
}`} }`}
> >
@ -186,12 +186,12 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
</div> </div>
</div> </div>
<Tab.Group as={Fragment}> <Tab.Group as={Fragment}>
<Tab.List as="div" className="space-x-2 border-b border-custom-border-100 p-5 pt-0"> <Tab.List as="div" className="space-x-2 border-b border-custom-border-300 p-5 pt-0">
{tabsList.map((tab) => ( {tabsList.map((tab) => (
<Tab <Tab
key={tab} key={tab}
className={({ selected }) => className={({ selected }) =>
`rounded-3xl border border-custom-border-100 px-4 py-2 text-xs hover:bg-custom-background-80 ${ `rounded-3xl border border-custom-border-300 px-4 py-2 text-xs hover:bg-custom-background-80 ${
selected ? "bg-custom-background-80" : "" selected ? "bg-custom-background-80" : ""
}` }`
} }

4
apps/app/components/analytics/scope-and-demand/demand.tsx
View File

@ -10,7 +10,7 @@ type Props = {
}; };
export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => ( export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
<div className="space-y-3 rounded-[10px] border border-custom-border-100 p-3"> <div className="space-y-3 rounded-[10px] border border-custom-border-300 p-3">
<h5 className="text-xs text-red-500">DEMAND</h5> <h5 className="text-xs text-red-500">DEMAND</h5>
<div> <div>
<h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4> <h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4>
@ -50,7 +50,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
); );
})} })}
</div> </div>
<div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs"> <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
<p className="flex items-center gap-1 text-custom-text-200"> <p className="flex items-center gap-1 text-custom-text-200">
<PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" /> <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
<span>Estimate Demand:</span> <span>Estimate Demand:</span>

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

@ -10,7 +10,7 @@ type Props = {
}; };
export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => ( export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
<div className="p-3 border border-custom-border-100 rounded-[10px]"> <div className="p-3 border border-custom-border-300 rounded-[10px]">
<h6 className="text-base font-medium">{title}</h6> <h6 className="text-base font-medium">{title}</h6>
{users.length > 0 ? ( {users.length > 0 ? (
<div className="mt-3 space-y-3"> <div className="mt-3 space-y-3">

6
apps/app/components/analytics/scope-and-demand/scope.tsx
View File

@ -8,9 +8,9 @@ type Props = {
}; };
export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => ( export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
<div className="rounded-[10px] border border-custom-border-100"> <div className="rounded-[10px] border border-custom-border-300">
<h5 className="p-3 text-xs text-green-500">SCOPE</h5> <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
<div className="divide-y divide-custom-border-100"> <div className="divide-y divide-custom-border-300">
<div> <div>
<h6 className="px-3 text-base font-medium">Pending issues</h6> <h6 className="px-3 text-base font-medium">Pending issues</h6>
{defaultAnalytics.pending_issue_user.length > 0 ? ( {defaultAnalytics.pending_issue_user.length > 0 ? (
@ -27,7 +27,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
); );
return ( return (
<div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs"> <div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
<span className="font-medium text-custom-text-200"> <span className="font-medium text-custom-text-200">
{assignee {assignee
? assignee.assignees__first_name + " " + assignee.assignees__last_name ? assignee.assignees__first_name + " " + assignee.assignees__last_name

4
apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
View File

@ -15,7 +15,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2]; const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
return ( return (
<div className="py-3 border border-custom-border-100 rounded-[10px]"> <div className="py-3 border border-custom-border-300 rounded-[10px]">
<h1 className="px-3 text-base font-medium">Issues closed in a year</h1> <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
{defaultAnalytics.issue_completed_month_wise.length > 0 ? ( {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
<LineGraph <LineGraph
@ -43,7 +43,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
margin={{ top: 20 }} margin={{ top: 20 }}
enableSlices="x" enableSlices="x"
sliceTooltip={(datum) => ( sliceTooltip={(datum) => (
<div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs"> <div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
{datum.slice.points[0].data.yFormatted} {datum.slice.points[0].data.yFormatted}
<span className="text-custom-text-200"> issues closed in </span> <span className="text-custom-text-200"> issues closed in </span>
{datum.slice.points[0].data.xFormatted} {datum.slice.points[0].data.xFormatted}

4
apps/app/components/command-palette/command-pallette.tsx
View File

@ -421,7 +421,7 @@ export const CommandPalette: React.FC = () => {
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 mx-auto max-w-2xl transform divide-y divide-custom-border-100 divide-opacity-10 rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-custom-border-300 divide-opacity-10 rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
<Command <Command
filter={(value, search) => { filter={(value, search) => {
if (value.toLowerCase().includes(search.toLowerCase())) return 1; if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@ -456,7 +456,7 @@ export const CommandPalette: React.FC = () => {
aria-hidden="true" aria-hidden="true"
/> />
<Command.Input <Command.Input
className="w-full border-0 border-b border-custom-border-100 bg-transparent p-4 pl-11 text-custom-text-100 outline-none focus:ring-0 sm:text-sm" className="w-full border-0 border-b border-custom-border-300 bg-transparent p-4 pl-11 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
placeholder={placeholder} placeholder={placeholder}
value={searchTerm} value={searchTerm}
onValueChange={(e) => { onValueChange={(e) => {

14
apps/app/components/command-palette/shortcuts-modal.tsx
View File

@ -104,7 +104,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</span> </span>
</Dialog.Title> </Dialog.Title>
<div> <div>
<div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-100 bg-custom-background-90 px-3 py-2"> <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-300 bg-custom-background-90 px-3 py-2">
<MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" /> <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
<Input <Input
className="w-full border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none" className="w-full border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
@ -130,15 +130,15 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
{shortcut.keys.split(",").map((key, index) => ( {shortcut.keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? ( {key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5"> <span className="flex h-full items-center rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
</span> </span>
) : key === "Ctrl" ? ( ) : key === "Ctrl" ? (
<kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
</kbd> </kbd>
) : ( ) : (
<kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
{key} {key}
</kbd> </kbd>
)} )}
@ -173,15 +173,15 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
{keys.split(",").map((key, index) => ( {keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
{key === "Ctrl" ? ( {key === "Ctrl" ? (
<span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-custom-text-200"> <span className="flex h-full items-center rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5 text-custom-text-200">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
</span> </span>
) : key === "Ctrl" ? ( ) : key === "Ctrl" ? (
<kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
<CommandIcon className="h-4 w-4 fill-current text-custom-text-200" /> <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
</kbd> </kbd>
) : ( ) : (
<kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200"> <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
{key} {key}
</kbd> </kbd>
)} )}

2
apps/app/components/core/board-view/all-boards.tsx
View File

@ -74,7 +74,7 @@ export const AllBoards: React.FC<Props> = ({
); );
})} })}
{!showEmptyGroups && ( {!showEmptyGroups && (
<div className="h-full w-96 flex-shrink-0 space-y-3 p-1"> <div className="h-full w-96 flex-shrink-0 space-y-2 p-1">
<h2 className="text-lg font-semibold">Hidden groups</h2> <h2 className="text-lg font-semibold">Hidden groups</h2>
<div className="space-y-3"> <div className="space-y-3">
{Object.keys(groupedByIssues).map((singleGroup, index) => { {Object.keys(groupedByIssues).map((singleGroup, index) => {

6
apps/app/components/core/board-view/single-issue.tsx
View File

@ -392,7 +392,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}> <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LayerDiagonalIcon className="h-3.5 w-3.5" /> <LayerDiagonalIcon className="h-3.5 w-3.5" />
@ -402,7 +402,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.link && ( {properties.link && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}> <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
@ -412,7 +412,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.attachment_count && ( {properties.attachment_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}> <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45" /> <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />

8
apps/app/components/core/calendar-view/calendar-header.tsx
View File

@ -92,7 +92,7 @@ export const CalendarHeader: React.FC<Props> = ({
</button> </button>
))} ))}
</div> </div>
<div className="grid grid-cols-4 border-t border-custom-border-100 px-2"> <div className="grid grid-cols-4 border-t border-custom-border-300 px-2">
{MONTHS_LIST.map((month) => ( {MONTHS_LIST.map((month) => (
<button <button
onClick={() => onClick={() =>
@ -152,7 +152,7 @@ export const CalendarHeader: React.FC<Props> = ({
<div className="flex w-full items-center justify-end gap-2"> <div className="flex w-full items-center justify-end gap-2">
<button <button
className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-100 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none" className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-300 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
onClick={() => { onClick={() => {
if (isMonthlyView) { if (isMonthlyView) {
updateDate(new Date()); updateDate(new Date());
@ -170,7 +170,7 @@ export const CalendarHeader: React.FC<Props> = ({
<CustomMenu <CustomMenu
customButton={ customButton={
<div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-100 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none "> <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-300 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none ">
{isMonthlyView ? "Monthly" : "Weekly"} {isMonthlyView ? "Monthly" : "Weekly"}
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" /> <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
</div> </div>
@ -207,7 +207,7 @@ export const CalendarHeader: React.FC<Props> = ({
/> />
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<div className="mt-1 flex w-52 items-center justify-between border-t border-custom-border-100 py-2 px-1 text-sm text-custom-text-200"> <div className="mt-1 flex w-52 items-center justify-between border-t border-custom-border-300 py-2 px-1 text-sm text-custom-text-200">
<h4>Show weekends</h4> <h4>Show weekends</h4>
<ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} /> <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
</div> </div>

2
apps/app/components/core/calendar-view/calendar.tsx
View File

@ -191,7 +191,7 @@ export const CalendarView: React.FC<Props> = ({
{weeks.map((date, index) => ( {weeks.map((date, index) => (
<div <div
key={index} key={index}
className={`flex items-center justify-start gap-2 border-custom-border-100 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${ className={`flex items-center justify-start gap-2 border-custom-border-300 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
!isMonthlyView !isMonthlyView
? showWeekEnds ? showWeekEnds
? (index + 1) % 7 === 0 ? (index + 1) % 7 === 0

4
apps/app/components/core/calendar-view/single-date.tsx
View File

@ -49,7 +49,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
key={index} key={index}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-100 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${ className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-300 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${
isMonthlyView ? "" : "pt-9" isMonthlyView ? "" : "pt-9"
} ${ } ${
showWeekEnds showWeekEnds
@ -83,7 +83,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
{totalIssues > 4 && ( {totalIssues > 4 && (
<button <button
type="button" type="button"
className="w-min whitespace-nowrap rounded-md border border-custom-border-100 bg-custom-background-80 px-1.5 py-1 text-xs" className="w-min whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 px-1.5 py-1 text-xs"
onClick={() => setShowAllIssues((prevData) => !prevData)} onClick={() => setShowAllIssues((prevData) => !prevData)}
> >
{showAllIssues ? "Hide" : totalIssues - 4 + " more"} {showAllIssues ? "Hide" : totalIssues - 4 + " more"}

8
apps/app/components/core/calendar-view/single-issue.tsx
View File

@ -163,7 +163,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
className={`w-full relative cursor-pointer rounded border border-custom-border-100 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${ className={`w-full relative cursor-pointer rounded border border-custom-border-300 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${
snapshot.isDragging ? "bg-custom-background-80 shadow-lg" : "" snapshot.isDragging ? "bg-custom-background-80 shadow-lg" : ""
}`} }`}
> >
@ -267,7 +267,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}> <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LayerDiagonalIcon className="h-3.5 w-3.5" /> <LayerDiagonalIcon className="h-3.5 w-3.5" />
@ -277,7 +277,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.link && ( {properties.link && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}> <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
@ -287,7 +287,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.attachment_count && ( {properties.attachment_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}> <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45" /> <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />

2
apps/app/components/core/feeds.tsx
View File

@ -263,7 +263,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
} }
editable={false} editable={false}
noBorder noBorder
customClassName="text-xs border border-custom-border-100 bg-custom-background-100" customClassName="text-xs border border-custom-border-300 bg-custom-background-100"
/> />
</div> </div>
</div> </div>

2
apps/app/components/core/filters/due-date-filter-modal.tsx
View File

@ -109,7 +109,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
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 border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}> <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
<div className="flex w-full justify-between"> <div className="flex w-full justify-between">
<Controller <Controller

6
apps/app/components/core/filters/filters-list.tsx
View File

@ -58,7 +58,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
return ( return (
<div <div
key={key} key={key}
className="flex items-center gap-x-2 rounded-full border border-custom-border-100 bg-custom-background-80 px-2 py-1" className="flex items-center gap-x-2 rounded-full border border-custom-border-300 bg-custom-background-80 px-2 py-1"
> >
<span className="capitalize text-custom-text-200"> <span className="capitalize text-custom-text-200">
{key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}: {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
@ -310,7 +310,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
return ( return (
<div <div
key={date} key={date}
className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-100 px-1 py-0.5" className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-300 bg-custom-background-100 px-1 py-0.5"
> >
<div className="h-1.5 w-1.5 rounded-full" /> <div className="h-1.5 w-1.5 rounded-full" />
<span className="capitalize"> <span className="capitalize">
@ -381,7 +381,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
target_date: null, target_date: null,
}) })
} }
className="flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-80 px-3 py-1.5 text-xs" className="flex items-center gap-x-1 rounded-full border border-custom-border-300 bg-custom-background-80 px-3 py-1.5 text-xs"
> >
<span>Clear all filters</span> <span>Clear all filters</span>
<XMarkIcon className="h-3 w-3" /> <XMarkIcon className="h-3 w-3" />

6
apps/app/components/core/filters/issues-view-filter.tsx
View File

@ -165,8 +165,8 @@ export const IssuesFilterView: React.FC = () => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-100 bg-custom-background-90 p-3 shadow-lg"> <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-300 bg-custom-background-90 p-3 shadow-lg">
<div className="relative divide-y-2 divide-custom-border-100"> <div className="relative divide-y-2 divide-custom-border-300">
<div className="space-y-4 pb-3 text-xs"> <div className="space-y-4 pb-3 text-xs">
{issueView !== "calendar" && issueView !== "spreadsheet" && ( {issueView !== "calendar" && issueView !== "spreadsheet" && (
<> <>
@ -292,7 +292,7 @@ export const IssuesFilterView: React.FC = () => {
className={`rounded border px-2 py-1 text-xs capitalize ${ className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties] properties[key as keyof Properties]
? "border-custom-primary bg-custom-primary text-white" ? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-100" : "border-custom-border-300"
}`} }`}
onClick={() => setProperties(key as keyof Properties)} onClick={() => setProperties(key as keyof Properties)}
> >

6
apps/app/components/core/image-picker-popover.tsx
View File

@ -62,7 +62,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
return ( return (
<Popover className="relative z-[2]" ref={ref}> <Popover className="relative z-[2]" ref={ref}>
<Popover.Button <Popover.Button
className="rounded-md border border-custom-border-100 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200" className="rounded-md border border-custom-border-300 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
onClick={() => setIsOpen((prev) => !prev)} onClick={() => setIsOpen((prev) => !prev)}
> >
{label} {label}
@ -76,8 +76,8 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-100 bg-custom-background-80 shadow-lg"> <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-300 bg-custom-background-80 shadow-lg">
<div className="h-96 w-80 overflow-auto rounded border border-custom-border-100 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]"> <div className="h-96 w-80 overflow-auto rounded border border-custom-border-300 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
<Tab.Group> <Tab.Group>
<Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1"> <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
{tabOptions.map((tab) => ( {tabOptions.map((tab) => (

2
apps/app/components/core/issues-view.tsx
View File

@ -488,7 +488,7 @@ export const IssuesView: React.FC<Props> = ({
{viewId ? "Update" : "Save"} view {viewId ? "Update" : "Save"} view
</PrimaryButton> </PrimaryButton>
</div> </div>
{<div className="mt-3 border-t border-custom-border-100" />} {<div className="mt-3 border-t border-custom-border-300" />}
</> </>
)} )}

8
apps/app/components/core/list-view/single-issue.tsx
View File

@ -219,7 +219,7 @@ export const SingleListIssue: React.FC<Props> = ({
</a> </a>
</ContextMenu> </ContextMenu>
<div <div
className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-custom-border-100 bg-custom-background-100 last:border-b-0" className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-custom-border-300 bg-custom-background-100 last:border-b-0"
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu(true); setContextMenu(true);
@ -307,7 +307,7 @@ export const SingleListIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}> <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LayerDiagonalIcon className="h-3.5 w-3.5" /> <LayerDiagonalIcon className="h-3.5 w-3.5" />
@ -317,7 +317,7 @@ export const SingleListIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.link && ( {properties.link && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}> <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
@ -327,7 +327,7 @@ export const SingleListIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.attachment_count && ( {properties.attachment_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}> <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45" /> <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />

4
apps/app/components/core/modals/bulk-delete-issues-modal.tsx
View File

@ -173,7 +173,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
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-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
<form> <form>
<Combobox <Combobox
onChange={(val: string) => { onChange={(val: string) => {
@ -201,7 +201,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
<Combobox.Options <Combobox.Options
static static
className="max-h-80 scroll-py-2 divide-y divide-custom-border-100 overflow-y-auto" className="max-h-80 scroll-py-2 divide-y divide-custom-border-300 overflow-y-auto"
> >
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">

6
apps/app/components/core/modals/existing-issues-list-modal.tsx
View File

@ -154,7 +154,7 @@ export const ExistingIssuesListModal: React.FC<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-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
<Combobox <Combobox
as="div" as="div"
onChange={(val: ISearchIssueResponse) => { onChange={(val: ISearchIssueResponse) => {
@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
{selectedIssues.map((issue) => ( {selectedIssues.map((issue) => (
<div <div
key={issue.id} key={issue.id}
className="flex items-center gap-1 text-xs border border-custom-border-100 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap" className="flex items-center gap-1 text-xs border border-custom-border-300 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
> >
{issue.project__identifier}-{issue.sequence_id} {issue.project__identifier}-{issue.sequence_id}
<button <button
@ -200,7 +200,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
))} ))}
</div> </div>
) : ( ) : (
<div className="w-min text-xs border border-custom-border-100 bg-custom-background-80 p-2 rounded-md whitespace-nowrap"> <div className="w-min text-xs border border-custom-border-300 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
No issues selected No issues selected
</div> </div>
)} )}

2
apps/app/components/core/modals/gpt-assistant-modal.tsx
View File

@ -143,7 +143,7 @@ export const GptAssistantModal: React.FC<Props> = ({
return ( return (
<div <div
className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4 shadow ${ className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4 shadow ${
isOpen ? "block" : "hidden" isOpen ? "block" : "hidden"
}`} }`}
> >

4
apps/app/components/core/modals/image-upload-modal.tsx
View File

@ -118,7 +118,7 @@ export const ImageUploadModal: React.FC<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 border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
@ -132,7 +132,7 @@ export const ImageUploadModal: React.FC<Props> = ({
{...getRootProps()} {...getRootProps()}
className={`relative grid h-80 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-80 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 ${
(image === null && isDragActive) || !value (image === null && isDragActive) || !value
? "border-2 border-dashed border-custom-border-100 hover:bg-custom-background-90" ? "border-2 border-dashed border-custom-border-300 hover:bg-custom-background-90"
: "" : ""
}`} }`}
> >

2
apps/app/components/core/sidebar/progress-chart.tsx
View File

@ -119,7 +119,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))} gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
enableSlices="x" enableSlices="x"
sliceTooltip={(datum) => ( sliceTooltip={(datum) => (
<div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs"> <div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
{datum.slice.points[0].data.yFormatted} {datum.slice.points[0].data.yFormatted}
<span className="text-custom-text-200"> issues pending on </span> <span className="text-custom-text-200"> issues pending on </span>
{datum.slice.points[0].data.xFormatted} {datum.slice.points[0].data.xFormatted}

8
apps/app/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -87,7 +87,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-full ${ `w-full ${
roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded" roundedTab ? "rounded-3xl border border-custom-border-300" : "rounded"
} px-3 py-1 text-custom-text-100 ${ } px-3 py-1 text-custom-text-100 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80" selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
}` }`
@ -98,7 +98,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-full ${ `w-full ${
roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded" roundedTab ? "rounded-3xl border border-custom-border-300" : "rounded"
} px-3 py-1 text-custom-text-100 ${ } px-3 py-1 text-custom-text-100 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80" selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
}` }`
@ -109,7 +109,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-full ${ `w-full ${
roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded" roundedTab ? "rounded-3xl border border-custom-border-300" : "rounded"
} px-3 py-1 text-custom-text-100 ${ } px-3 py-1 text-custom-text-100 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80" selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
}` }`
@ -159,7 +159,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
key={`unassigned-${index}`} key={`unassigned-${index}`}
title={ title={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-5 w-5 rounded-full border-2 border-custom-border-100 bg-custom-background-80"> <div className="h-5 w-5 rounded-full border-2 border-custom-border-300 bg-custom-background-80">
<img <img
src="/user.png" src="/user.png"
height="100%" height="100%"

22
apps/app/components/core/spreadsheet-view/single-issue.tsx
View File

@ -179,10 +179,10 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
return ( return (
<div <div
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-100 w-full min-w-max" className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-300 w-full min-w-max"
style={{ gridTemplateColumns }} style={{ gridTemplateColumns }}
> >
<div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full"> <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-300 w-full">
<div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}> <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14"> <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
{properties.key && ( {properties.key && (
@ -198,7 +198,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)} onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
content={ content={
<div <div
className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`} className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-300 bg-custom-background-90`}
> >
<button <button
type="button" type="button"
@ -270,7 +270,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
</Link> </Link>
</div> </div>
{properties.state && ( {properties.state && (
<div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
<ViewStateSelect <ViewStateSelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
@ -284,7 +284,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.priority && ( {properties.priority && (
<div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
<ViewPrioritySelect <ViewPrioritySelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
@ -297,7 +297,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.assignee && ( {properties.assignee && (
<div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
<ViewAssigneeSelect <ViewAssigneeSelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
@ -310,7 +310,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.labels && ( {properties.labels && (
<div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
<ViewLabelSelect <ViewLabelSelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
@ -324,7 +324,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
)} )}
{properties.due_date && ( {properties.due_date && (
<div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
<ViewDueDateSelect <ViewDueDateSelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
@ -336,7 +336,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.estimate && ( {properties.estimate && (
<div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
<ViewEstimateSelect <ViewEstimateSelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
@ -348,12 +348,12 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
</div> </div>
)} )}
{properties.created_on && ( {properties.created_on && (
<div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
{renderLongDetailDateFormat(issue.created_at)} {renderLongDetailDateFormat(issue.created_at)}
</div> </div>
)} )}
{properties.updated_on && ( {properties.updated_on && (
<div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100"> <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
{renderLongDetailDateFormat(issue.updated_at)} {renderLongDetailDateFormat(issue.updated_at)}
</div> </div>
)} )}

8
apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
View File

@ -62,7 +62,7 @@ export const SpreadsheetView: React.FC<Props> = ({
return ( return (
<div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100"> <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
<div className="sticky z-[2] top-0 border-b border-custom-border-100 bg-custom-background-90 w-full min-w-max"> <div className="sticky z-[2] top-0 border-b border-custom-border-300 bg-custom-background-90 w-full min-w-max">
<SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} /> <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
</div> </div>
{spreadsheetIssues ? ( {spreadsheetIssues ? (
@ -84,12 +84,12 @@ export const SpreadsheetView: React.FC<Props> = ({
/> />
))} ))}
<div <div
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-100 w-full min-w-max" className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-300 w-full min-w-max"
style={{ gridTemplateColumns }} style={{ gridTemplateColumns }}
> >
{type === "issue" ? ( {type === "issue" ? (
<button <button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full" className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-300 w-full"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" }); const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e); document.dispatchEvent(e);
@ -104,7 +104,7 @@ export const SpreadsheetView: React.FC<Props> = ({
className="sticky left-0 z-[1]" className="sticky left-0 z-[1]"
customButton={ customButton={
<button <button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full" className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-300 w-full"
type="button" type="button"
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />

2
apps/app/components/core/theme/color-picker-input.tsx
View File

@ -81,7 +81,7 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
> >
{watch(name) && watch(name) !== "" ? ( {watch(name) && watch(name) !== "" ? (
<span <span
className="h-4 w-4 rounded border border-custom-border-100" className="h-4 w-4 rounded border border-custom-border-300"
style={{ style={{
backgroundColor: `${watch(name)}`, backgroundColor: `${watch(name)}`,
}} }}

18
apps/app/components/cycles/active-cycle-details.tsx
View File

@ -209,8 +209,8 @@ export const ActiveCycleDetails: React.FC = () => {
})); }));
return ( return (
<div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-100"> <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-300">
<div className="grid grid-cols-1 divide-y border-custom-border-100 lg:divide-y-0 lg:divide-x lg:grid-cols-3"> <div className="grid grid-cols-1 divide-y border-custom-border-300 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
<div className="flex flex-col text-xs"> <div className="flex flex-col text-xs">
<div className="h-full w-full"> <div className="h-full w-full">
<div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4"> <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
@ -362,8 +362,8 @@ export const ActiveCycleDetails: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-100 md:divide-y-0 md:divide-x md:grid-cols-2"> <div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-300 md:divide-y-0 md:divide-x md:grid-cols-2">
<div className="flex h-60 flex-col border-custom-border-100"> <div className="flex h-60 flex-col border-custom-border-300">
<div className="flex h-full w-full flex-col text-custom-text-200 p-4"> <div className="flex h-full w-full flex-col text-custom-text-200 p-4">
<div className="flex w-full items-center gap-2 py-1"> <div className="flex w-full items-center gap-2 py-1">
<span>Progress</span> <span>Progress</span>
@ -391,12 +391,12 @@ export const ActiveCycleDetails: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="border-custom-border-100 h-60 overflow-y-scroll"> <div className="border-custom-border-300 h-60 overflow-y-scroll">
<ActiveCycleProgressStats cycle={cycle} /> <ActiveCycleProgressStats cycle={cycle} />
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 divide-y border-custom-border-100 lg:divide-y-0 lg:divide-x lg:grid-cols-2"> <div className="grid grid-cols-1 divide-y border-custom-border-300 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
<div className="flex flex-col justify-between p-4"> <div className="flex flex-col justify-between p-4">
<div> <div>
<div className="text-custom-primary">High Priority Issues</div> <div className="text-custom-primary">High Priority Issues</div>
@ -406,7 +406,7 @@ export const ActiveCycleDetails: React.FC = () => {
issues.map((issue) => ( issues.map((issue) => (
<div <div
key={issue.id} key={issue.id}
className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-100 bg-custom-background-90 px-3 py-1.5" className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-300 bg-custom-background-90 px-3 py-1.5"
> >
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div> <div>
@ -444,7 +444,7 @@ export const ActiveCycleDetails: React.FC = () => {
{issue.label_details.map((label) => ( {issue.label_details.map((label) => (
<span <span
key={label.id} key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200" className="group flex items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200"
> >
<span <span
className="h-1.5 w-1.5 rounded-full" className="h-1.5 w-1.5 rounded-full"
@ -517,7 +517,7 @@ export const ActiveCycleDetails: React.FC = () => {
</div> </div>
)} )}
</div> </div>
<div className="flex flex-col justify-between border-custom-border-100 p-4"> <div className="flex flex-col justify-between border-custom-border-300 p-4">
<div className="flex items-start justify-between gap-4 py-1.5 text-xs"> <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
<div className="flex items-center gap-3 text-custom-text-100"> <div className="flex items-center gap-3 text-custom-text-100">
<div className="flex items-center justify-center gap-1"> <div className="flex items-center justify-center gap-1">

6
apps/app/components/cycles/active-cycle-stats.tsx
View File

@ -52,7 +52,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
> >
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-100 ${ `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-300 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80" selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
}` }`
} }
@ -61,7 +61,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-100 ${ `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-300 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80" selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
}` }`
} }
@ -103,7 +103,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
key={`unassigned-${index}`} key={`unassigned-${index}`}
title={ title={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-5 w-5 rounded-full border-2 border-custom-border-100 bg-custom-background-80"> <div className="h-5 w-5 rounded-full border-2 border-custom-border-300 bg-custom-background-80">
<img <img
src="/user.png" src="/user.png"
height="100%" height="100%"

4
apps/app/components/cycles/cycles-view.tsx
View File

@ -173,10 +173,10 @@ export const CyclesView: React.FC<Props> = ({ cycles, viewType }) => {
{cycles ? ( {cycles ? (
cycles.length > 0 ? ( cycles.length > 0 ? (
viewType === "list" ? ( viewType === "list" ? (
<div className="divide-y divide-custom-border-100"> <div className="divide-y divide-custom-border-300">
{cycles.map((cycle) => ( {cycles.map((cycle) => (
<div className="hover:bg-custom-background-80"> <div className="hover:bg-custom-background-80">
<div className="flex flex-col border-custom-border-100"> <div className="flex flex-col border-custom-border-300">
<SingleCycleList <SingleCycleList
key={cycle.id} key={cycle.id}
cycle={cycle} cycle={cycle}

2
apps/app/components/cycles/delete-cycle-modal.tsx
View File

@ -124,7 +124,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="px-4 pt-5 pb-4 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-500/20 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-500/20 sm:mx-0 sm:h-10 sm:w-10">

2
apps/app/components/cycles/form.tsx
View File

@ -107,7 +107,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
</div> </div>
</div> </div>
</div> </div>
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-100 px-5 pt-5"> <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-300 px-5 pt-5">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" loading={isSubmitting}> <PrimaryButton type="submit" loading={isSubmitting}>
{status {status

2
apps/app/components/cycles/modal.tsx
View File

@ -247,7 +247,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
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 border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<CycleForm <CycleForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
handleClose={handleClose} handleClose={handleClose}

2
apps/app/components/cycles/select.tsx
View File

@ -66,7 +66,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
{({ open }) => ( {({ open }) => (
<> <>
<Listbox.Button <Listbox.Button
className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`} className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
> >
<CyclesIcon className="h-3 w-3 text-custom-text-200" /> <CyclesIcon className="h-3 w-3 text-custom-text-200" />
<div className="flex items-center gap-2 truncate"> <div className="flex items-center gap-2 truncate">

12
apps/app/components/cycles/sidebar.tsx
View File

@ -292,14 +292,14 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div <div
className={`fixed top-[66px] ${ className={`fixed top-[66px] ${
isOpen ? "right-0" : "-right-[24rem]" isOpen ? "right-0" : "-right-[24rem]"
} h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`} } h-full w-[24rem] overflow-y-auto border-l border-custom-border-300 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
> >
{cycle ? ( {cycle ? (
<> <>
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-5 text-sm"> <div className="flex gap-2.5 px-5 text-sm">
<div className="flex items-center"> <div className="flex items-center">
<span className="flex items-center rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize"> <span className="flex items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
{capitalizeFirstLetter(cycleStatus)} {capitalizeFirstLetter(cycleStatus)}
</span> </span>
</div> </div>
@ -309,7 +309,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<> <>
<Popover.Button <Popover.Button
disabled={isCompleted ?? false} disabled={isCompleted ?? false}
className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${ className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-xs ${
cycle.start_date ? "" : "text-custom-text-200" cycle.start_date ? "" : "text-custom-text-200"
}`} }`}
> >
@ -359,7 +359,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<> <>
<Popover.Button <Popover.Button
disabled={isCompleted ?? false} disabled={isCompleted ?? false}
className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${ className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-xs ${
cycle.end_date ? "" : "text-custom-text-200" cycle.end_date ? "" : "text-custom-text-200"
}`} }`}
> >
@ -477,7 +477,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6"> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-300 p-6">
<Disclosure defaultOpen> <Disclosure defaultOpen>
{({ open }) => ( {({ open }) => (
<div <div
@ -561,7 +561,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
)} )}
</Disclosure> </Disclosure>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6"> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-300 p-6">
<Disclosure defaultOpen> <Disclosure defaultOpen>
{({ open }) => ( {({ open }) => (
<div <div

4
apps/app/components/cycles/single-cycle-card.tsx
View File

@ -128,7 +128,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
return ( return (
<div> <div>
<div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-100 text-xs shadow"> <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-300 text-xs shadow">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a className="w-full"> <a className="w-full">
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4"> <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
@ -321,7 +321,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-100 bg-custom-background-80 text-custom-text-200 ${ className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-300 bg-custom-background-80 text-custom-text-200 ${
open ? "" : "flex-row" open ? "" : "flex-row"
}`} }`}
> >

2
apps/app/components/cycles/transfer-issues-modal.tsx
View File

@ -119,7 +119,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
<XMarkIcon className="h-4 w-4" /> <XMarkIcon className="h-4 w-4" />
</button> </button>
</div> </div>
<div className="flex items-center gap-2 border-b border-custom-border-100 px-5 pb-3"> <div className="flex items-center gap-2 border-b border-custom-border-300 px-5 pb-3">
<MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" /> <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
<input <input
className="bg-custom-background-90 outline-none" className="bg-custom-background-90 outline-none"

8
apps/app/components/emoji-icon-picker/index.tsx
View File

@ -63,8 +63,8 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-100 bg-custom-background-80 shadow-lg"> <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-300 bg-custom-background-80 shadow-lg">
<div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-100 bg-custom-background-80 p-2 shadow-xl"> <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-300 bg-custom-background-80 p-2 shadow-xl">
<Tab.Group as="div" className="flex h-full w-full flex-col"> <Tab.Group as="div" className="flex h-full w-full flex-col">
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1"> <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
{tabOptions.map((tab) => ( {tabOptions.map((tab) => (
@ -107,7 +107,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
</div> </div>
</div> </div>
)} )}
<hr className="mb-2 h-[1px] w-full border-custom-border-100" /> <hr className="mb-2 h-[1px] w-full border-custom-border-300" />
<div> <div>
<div className="grid grid-cols-8 gap-x-2 gap-y-3"> <div className="grid grid-cols-8 gap-x-2 gap-y-3">
{emojis.map((emoji) => ( {emojis.map((emoji) => (
@ -173,7 +173,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
/> />
</div> </div>
</div> </div>
<hr className="mb-1 h-[1px] w-full border-custom-border-100" /> <hr className="mb-1 h-[1px] w-full border-custom-border-300" />
<div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3"> <div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
{icons.material_rounded.map((icon, index) => ( {icons.material_rounded.map((icon, index) => (
<button <button

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

@ -254,7 +254,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
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 border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6"> <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-3"> <div className="space-y-3">
<div className="text-lg font-medium leading-6"> <div className="text-lg font-medium leading-6">

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

@ -60,7 +60,7 @@ export const DeleteEstimateModal: React.FC<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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl 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">

4
apps/app/components/gantt-chart/blocks/index.tsx
View File

@ -44,7 +44,7 @@ export const GanttChartBlocks: FC<{
</div> </div>
<div <div
className="rounded shadow-sm bg-custom-background-100 overflow-hidden relative flex items-center h-[34px] border border-custom-border-100" className="rounded shadow-sm bg-custom-background-100 overflow-hidden relative flex items-center h-[34px] border border-custom-border-300"
style={{ style={{
width: `${block?.position?.width}px`, width: `${block?.position?.width}px`,
}} }}
@ -68,7 +68,7 @@ export const GanttChartBlocks: FC<{
</div> </div>
{/* sidebar */} {/* sidebar */}
{/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-100 border-r border-custom-border-100 overflow-y-auto"> {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-300 border-r border-custom-border-300 overflow-y-auto">
{blocks && {blocks &&
blocks.length > 0 && blocks.length > 0 &&
blocks.map((block: any, _idx: number) => ( blocks.map((block: any, _idx: number) => (

8
apps/app/components/gantt-chart/chart/bi-week.tsx
View File

@ -7,18 +7,18 @@ export const BiWeekChartView: FC<any> = () => {
return ( return (
<> <>
<div className="absolute flex h-full flex-grow divide-x divide-custom-border-100"> <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
{renderView && {renderView &&
renderView.length > 0 && renderView.length > 0 &&
renderView.map((_itemRoot: any, _idxRoot: any) => ( renderView.map((_itemRoot: any, _idxRoot: any) => (
<div key={`title-${_idxRoot}`} className="relative flex flex-col"> <div key={`title-${_idxRoot}`} className="relative flex flex-col">
<div className="relative border-b border-custom-border-100"> <div className="relative border-b border-custom-border-300">
<div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize"> <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
{_itemRoot?.title} {_itemRoot?.title}
</div> </div>
</div> </div>
<div className="flex h-full w-full divide-x divide-custom-border-100"> <div className="flex h-full w-full divide-x divide-custom-border-300">
{_itemRoot.children && {_itemRoot.children &&
_itemRoot.children.length > 0 && _itemRoot.children.length > 0 &&
_itemRoot.children.map((_item: any, _idx: any) => ( _itemRoot.children.map((_item: any, _idx: any) => (
@ -29,7 +29,7 @@ export const BiWeekChartView: FC<any> = () => {
> >
<div <div
className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${ className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
_item?.today ? `text-red-500 border-red-500` : `border-custom-border-100` _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
}`} }`}
> >
<div>{_item.title}</div> <div>{_item.title}</div>

8
apps/app/components/gantt-chart/chart/day.tsx
View File

@ -7,18 +7,18 @@ export const DayChartView: FC<any> = () => {
return ( return (
<> <>
<div className="absolute flex h-full flex-grow divide-x divide-custom-border-100"> <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
{renderView && {renderView &&
renderView.length > 0 && renderView.length > 0 &&
renderView.map((_itemRoot: any, _idxRoot: any) => ( renderView.map((_itemRoot: any, _idxRoot: any) => (
<div key={`title-${_idxRoot}`} className="relative flex flex-col"> <div key={`title-${_idxRoot}`} className="relative flex flex-col">
<div className="relative border-b border-custom-border-100"> <div className="relative border-b border-custom-border-300">
<div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize"> <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
{_itemRoot?.title} {_itemRoot?.title}
</div> </div>
</div> </div>
<div className="flex h-full w-full divide-x divide-custom-border-100"> <div className="flex h-full w-full divide-x divide-custom-border-300">
{_itemRoot.children && {_itemRoot.children &&
_itemRoot.children.length > 0 && _itemRoot.children.length > 0 &&
_itemRoot.children.map((_item: any, _idx: any) => ( _itemRoot.children.map((_item: any, _idx: any) => (
@ -29,7 +29,7 @@ export const DayChartView: FC<any> = () => {
> >
<div <div
className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${ className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
_item?.today ? `text-red-500 border-red-500` : `border-custom-border-100` _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
}`} }`}
> >
<div>{_item.title}</div> <div>{_item.title}</div>

8
apps/app/components/gantt-chart/chart/hours.tsx
View File

@ -7,18 +7,18 @@ export const HourChartView: FC<any> = () => {
return ( return (
<> <>
<div className="absolute flex h-full flex-grow divide-x divide-custom-border-100"> <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
{renderView && {renderView &&
renderView.length > 0 && renderView.length > 0 &&
renderView.map((_itemRoot: any, _idxRoot: any) => ( renderView.map((_itemRoot: any, _idxRoot: any) => (
<div key={`title-${_idxRoot}`} className="relative flex flex-col"> <div key={`title-${_idxRoot}`} className="relative flex flex-col">
<div className="relative border-b border-custom-border-100"> <div className="relative border-b border-custom-border-300">
<div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize"> <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
{_itemRoot?.title} {_itemRoot?.title}
</div> </div>
</div> </div>
<div className="flex h-full w-full divide-x divide-custom-border-100"> <div className="flex h-full w-full divide-x divide-custom-border-300">
{_itemRoot.children && {_itemRoot.children &&
_itemRoot.children.length > 0 && _itemRoot.children.length > 0 &&
_itemRoot.children.map((_item: any, _idx: any) => ( _itemRoot.children.map((_item: any, _idx: any) => (
@ -29,7 +29,7 @@ export const HourChartView: FC<any> = () => {
> >
<div <div
className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${ className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
_item?.today ? `text-red-500 border-red-500` : `border-custom-border-100` _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
}`} }`}
> >
<div>{_item.title}</div> <div>{_item.title}</div>

14
apps/app/components/gantt-chart/chart/index.tsx
View File

@ -219,11 +219,11 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100` ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100`
: `relative` : `relative`
} ${ } ${
border ? `border border-custom-border-100` : `` border ? `border border-custom-border-300` : ``
} flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`} } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
> >
{/* chart title */} {/* chart title */}
{/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-100"> {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-300">
{title && ( {title && (
<div className="text-lg font-medium flex gap-2 items-center"> <div className="text-lg font-medium flex gap-2 items-center">
<div>{title}</div> <div>{title}</div>
@ -244,7 +244,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
{/* chart header */} {/* chart header */}
<div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2"> <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
{/* <div {/* <div
className="transition-all border border-custom-border-100 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80" className="transition-all border border-custom-border-300 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
onClick={() => setBlocksSidebarView(() => !blocksSidebarView)} onClick={() => setBlocksSidebarView(() => !blocksSidebarView)}
> >
{blocksSidebarView ? ( {blocksSidebarView ? (
@ -279,7 +279,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
allViews.map((_chatView: any, _idx: any) => ( allViews.map((_chatView: any, _idx: any) => (
<div <div
key={_chatView?.key} key={_chatView?.key}
className={`cursor-pointer rounded-sm border border-custom-border-100 p-1 px-2 text-xs ${ className={`cursor-pointer rounded-sm border border-custom-border-300 p-1 px-2 text-xs ${
currentView === _chatView?.key currentView === _chatView?.key
? `bg-custom-background-80` ? `bg-custom-background-80`
: `hover:bg-custom-background-90` : `hover:bg-custom-background-90`
@ -293,7 +293,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<div <div
className={`cursor-pointer rounded-sm border border-custom-border-100 p-1 px-2 text-xs hover:bg-custom-background-80`} className={`cursor-pointer rounded-sm border border-custom-border-300 p-1 px-2 text-xs hover:bg-custom-background-80`}
onClick={handleToday} onClick={handleToday}
> >
Today Today
@ -301,7 +301,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
</div> </div>
<div <div
className="transition-all border border-custom-border-100 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80" className="transition-all border border-custom-border-300 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
onClick={() => setFullScreenMode(() => !fullScreenMode)} onClick={() => setFullScreenMode(() => !fullScreenMode)}
> >
{fullScreenMode ? ( {fullScreenMode ? (
@ -313,7 +313,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
</div> </div>
{/* content */} {/* content */}
<div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-100"> <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-300">
<div <div
className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto" className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
id="scroll-container" id="scroll-container"

8
apps/app/components/gantt-chart/chart/month.tsx
View File

@ -7,18 +7,18 @@ export const MonthChartView: FC<any> = () => {
return ( return (
<> <>
<div className="absolute flex h-full flex-grow divide-x divide-custom-border-100"> <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
{renderView && {renderView &&
renderView.length > 0 && renderView.length > 0 &&
renderView.map((_itemRoot: any, _idxRoot: any) => ( renderView.map((_itemRoot: any, _idxRoot: any) => (
<div key={`title-${_idxRoot}`} className="relative flex flex-col"> <div key={`title-${_idxRoot}`} className="relative flex flex-col">
<div className="relative border-b border-custom-border-100"> <div className="relative border-b border-custom-border-300">
<div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize"> <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
{_itemRoot?.title} {_itemRoot?.title}
</div> </div>
</div> </div>
<div className="flex h-full w-full divide-x divide-custom-border-100"> <div className="flex h-full w-full divide-x divide-custom-border-300">
{_itemRoot.children && {_itemRoot.children &&
_itemRoot.children.length > 0 && _itemRoot.children.length > 0 &&
_itemRoot.children.map((_item: any, _idx: any) => ( _itemRoot.children.map((_item: any, _idx: any) => (
@ -29,7 +29,7 @@ export const MonthChartView: FC<any> = () => {
> >
<div <div
className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${ className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
_item?.today ? `text-red-500 border-red-500` : `border-custom-border-100` _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
}`} }`}
> >
<div>{_item.title}</div> <div>{_item.title}</div>

8
apps/app/components/gantt-chart/chart/quarter.tsx
View File

@ -7,18 +7,18 @@ export const QuarterChartView: FC<any> = () => {
return ( return (
<> <>
<div className="absolute flex h-full flex-grow divide-x divide-custom-border-100"> <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
{renderView && {renderView &&
renderView.length > 0 && renderView.length > 0 &&
renderView.map((_itemRoot: any, _idxRoot: any) => ( renderView.map((_itemRoot: any, _idxRoot: any) => (
<div key={`title-${_idxRoot}`} className="relative flex flex-col"> <div key={`title-${_idxRoot}`} className="relative flex flex-col">
<div className="relative border-b border-custom-border-100"> <div className="relative border-b border-custom-border-300">
<div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize"> <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
{_itemRoot?.title} {_itemRoot?.title}
</div> </div>
</div> </div>
<div className="flex h-full w-full divide-x divide-custom-border-100"> <div className="flex h-full w-full divide-x divide-custom-border-300">
{_itemRoot.children && {_itemRoot.children &&
_itemRoot.children.length > 0 && _itemRoot.children.length > 0 &&
_itemRoot.children.map((_item: any, _idx: any) => ( _itemRoot.children.map((_item: any, _idx: any) => (
@ -29,7 +29,7 @@ export const QuarterChartView: FC<any> = () => {
> >
<div <div
className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${ className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
_item?.today ? `text-red-500 border-red-500` : `border-custom-border-100` _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
}`} }`}
> >
<div>{_item.title}</div> <div>{_item.title}</div>

8
apps/app/components/gantt-chart/chart/week.tsx
View File

@ -7,18 +7,18 @@ export const WeekChartView: FC<any> = () => {
return ( return (
<> <>
<div className="absolute flex h-full flex-grow divide-x divide-custom-border-100"> <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
{renderView && {renderView &&
renderView.length > 0 && renderView.length > 0 &&
renderView.map((_itemRoot: any, _idxRoot: any) => ( renderView.map((_itemRoot: any, _idxRoot: any) => (
<div key={`title-${_idxRoot}`} className="relative flex flex-col"> <div key={`title-${_idxRoot}`} className="relative flex flex-col">
<div className="relative border-b border-custom-border-100"> <div className="relative border-b border-custom-border-300">
<div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize"> <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
{_itemRoot?.title} {_itemRoot?.title}
</div> </div>
</div> </div>
<div className="flex h-full w-full divide-x divide-custom-border-100"> <div className="flex h-full w-full divide-x divide-custom-border-300">
{_itemRoot.children && {_itemRoot.children &&
_itemRoot.children.length > 0 && _itemRoot.children.length > 0 &&
_itemRoot.children.map((_item: any, _idx: any) => ( _itemRoot.children.map((_item: any, _idx: any) => (
@ -29,7 +29,7 @@ export const WeekChartView: FC<any> = () => {
> >
<div <div
className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${ className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
_item?.today ? `text-red-500 border-red-500` : `border-custom-border-100` _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
}`} }`}
> >
<div>{_item.title}</div> <div>{_item.title}</div>

8
apps/app/components/gantt-chart/chart/year.tsx
View File

@ -7,18 +7,18 @@ export const YearChartView: FC<any> = () => {
return ( return (
<> <>
<div className="absolute flex h-full flex-grow divide-x divide-custom-border-100"> <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
{renderView && {renderView &&
renderView.length > 0 && renderView.length > 0 &&
renderView.map((_itemRoot: any, _idxRoot: any) => ( renderView.map((_itemRoot: any, _idxRoot: any) => (
<div key={`title-${_idxRoot}`} className="relative flex flex-col"> <div key={`title-${_idxRoot}`} className="relative flex flex-col">
<div className="relative border-b border-custom-border-100"> <div className="relative border-b border-custom-border-300">
<div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize"> <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
{_itemRoot?.title} {_itemRoot?.title}
</div> </div>
</div> </div>
<div className="flex h-full w-full divide-x divide-custom-border-100"> <div className="flex h-full w-full divide-x divide-custom-border-300">
{_itemRoot.children && {_itemRoot.children &&
_itemRoot.children.length > 0 && _itemRoot.children.length > 0 &&
_itemRoot.children.map((_item: any, _idx: any) => ( _itemRoot.children.map((_item: any, _idx: any) => (
@ -29,7 +29,7 @@ export const YearChartView: FC<any> = () => {
> >
<div <div
className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${ className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
_item?.today ? `text-red-500 border-red-500` : `border-custom-border-100` _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
}`} }`}
> >
<div>{_item.title}</div> <div>{_item.title}</div>

2
apps/app/components/inbox/accept-issue-modal.tsx
View File

@ -56,7 +56,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl 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-green-500/20 p-4"> <span className="place-items-center rounded-full bg-green-500/20 p-4">

2
apps/app/components/inbox/decline-issue-modal.tsx
View File

@ -56,7 +56,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl 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">

2
apps/app/components/inbox/delete-issue-modal.tsx
View File

@ -111,7 +111,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl 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">

2
apps/app/components/inbox/filters-dropdown.tsx
View File

@ -72,7 +72,7 @@ export const FiltersDropdown: React.FC = () => {
]} ]}
/> />
{filtersLength > 0 && ( {filtersLength > 0 && (
<div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-100 z-10"> <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-300 z-10">
<span>{filtersLength}</span> <span>{filtersLength}</span>
</div> </div>
)} )}

4
apps/app/components/inbox/filters-list.tsx
View File

@ -22,7 +22,7 @@ export const InboxFiltersList = () => {
return ( return (
<div <div
key={key} key={key}
className="flex items-center gap-x-2 rounded-full border border-custom-border-100 bg-custom-background-80 px-2 py-1" className="flex items-center gap-x-2 rounded-full border border-custom-border-300 bg-custom-background-80 px-2 py-1"
> >
<span className="capitalize text-custom-text-200"> <span className="capitalize text-custom-text-200">
{replaceUnderscoreIfSnakeCase(key)}: {replaceUnderscoreIfSnakeCase(key)}:
@ -116,7 +116,7 @@ export const InboxFiltersList = () => {
<button <button
type="button" type="button"
onClick={clearAllFilters} onClick={clearAllFilters}
className="flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100" className="flex items-center gap-x-1 rounded-full border border-custom-border-300 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
> >
<span>Clear all</span> <span>Clear all</span>
<XMarkIcon className="h-3 w-3" /> <XMarkIcon className="h-3 w-3" />

8
apps/app/components/inbox/inbox-action-headers.tsx
View File

@ -162,7 +162,7 @@ export const InboxActionHeader = () => {
handleClose={() => setDeleteIssueModal(false)} handleClose={() => setDeleteIssueModal(false)}
data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)} data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
/> />
<div className="grid grid-cols-4 border-b border-custom-border-100 divide-x divide-custom-border-100"> <div className="grid grid-cols-4 border-b border-custom-border-300 divide-x divide-custom-border-300">
<div className="col-span-1 flex justify-between p-4"> <div className="col-span-1 flex justify-between p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<InboxIcon className="h-4 w-4 text-custom-text-200" /> <InboxIcon className="h-4 w-4 text-custom-text-200" />
@ -175,7 +175,7 @@ export const InboxActionHeader = () => {
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<button <button
type="button" type="button"
className="rounded border border-custom-border-100 bg-custom-background-90 p-1.5 hover:bg-custom-background-80" className="rounded border border-custom-border-300 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { key: "ArrowUp" }); const e = new KeyboardEvent("keydown", { key: "ArrowUp" });
document.dispatchEvent(e); document.dispatchEvent(e);
@ -185,7 +185,7 @@ export const InboxActionHeader = () => {
</button> </button>
<button <button
type="button" type="button"
className="rounded border border-custom-border-100 bg-custom-background-90 p-1.5 hover:bg-custom-background-80" className="rounded border border-custom-border-300 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { key: "ArrowDown" }); const e = new KeyboardEvent("keydown", { key: "ArrowDown" });
document.dispatchEvent(e); document.dispatchEvent(e);
@ -207,7 +207,7 @@ export const InboxActionHeader = () => {
<span>Snooze</span> <span>Snooze</span>
</SecondaryButton> </SecondaryButton>
</Popover.Button> </Popover.Button>
<Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-100 bg-custom-background-80 shadow-lg"> <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-300 bg-custom-background-80 shadow-lg">
{({ close }) => ( {({ close }) => (
<div className="w-full h-full flex flex-col gap-y-1"> <div className="w-full h-full flex flex-col gap-y-1">
<DatePicker <DatePicker

6
apps/app/components/inbox/inbox-issue-card.tsx
View File

@ -40,7 +40,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
<a> <a>
<div <div
id={issue.id} id={issue.id}
className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-100 hover:bg-custom-primary/5 ${ className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-300 hover:bg-custom-primary/5 ${
active ? "bg-custom-primary/5" : " " active ? "bg-custom-primary/5" : " "
} ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`} } ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
> >
@ -62,7 +62,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500" ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
: issue.priority === "low" : issue.priority === "low"
? "border-green-500/20 bg-green-500/20 text-green-500" ? "border-green-500/20 bg-green-500/20 text-green-500"
: "border-custom-border-100" : "border-custom-border-300"
}`} }`}
> >
{getPriorityIcon( {getPriorityIcon(
@ -75,7 +75,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
tooltipHeading="Created on" tooltipHeading="Created on"
tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`} tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
> >
<div className="flex items-center gap-1 rounded border border-custom-border-100 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200"> <div className="flex items-center gap-1 rounded border border-custom-border-300 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
<CalendarDaysIcon className="h-3.5 w-3.5" /> <CalendarDaysIcon className="h-3.5 w-3.5" />
<span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span> <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
</div> </div>

2
apps/app/components/inbox/inbox-main-content.tsx
View File

@ -310,7 +310,7 @@ export const InboxMainContent: React.FC = () => {
</div> </div>
</div> </div>
<div className="basis-1/3 space-y-5 border-custom-border-100 p-5"> <div className="basis-1/3 space-y-5 border-custom-border-300 p-5">
<IssueDetailsSidebar <IssueDetailsSidebar
control={control} control={control}
issueDetail={issueDetails} issueDetail={issueDetails}

2
apps/app/components/inbox/issues-list-sidebar.tsx
View File

@ -18,7 +18,7 @@ export const IssuesListSidebar = () => {
<InboxFiltersList /> <InboxFiltersList />
{inboxIssues ? ( {inboxIssues ? (
inboxIssues.length > 0 ? ( inboxIssues.length > 0 ? (
<div className="divide-y divide-custom-border-100 overflow-auto h-full"> <div className="divide-y divide-custom-border-300 overflow-auto h-full">
{inboxIssues.map((issue) => ( {inboxIssues.map((issue) => (
<InboxIssueCard <InboxIssueCard
key={issue.id} key={issue.id}

4
apps/app/components/inbox/select-duplicate.tsx
View File

@ -101,7 +101,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<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-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
<Combobox <Combobox
value={selectedItem} value={selectedItem}
onChange={(value) => { onChange={(value) => {
@ -123,7 +123,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
<Combobox.Options <Combobox.Options
static static
className="max-h-80 scroll-py-2 divide-y divide-custom-border-100 overflow-y-auto" className="max-h-80 scroll-py-2 divide-y divide-custom-border-300 overflow-y-auto"
> >
{filteredIssues.length > 0 ? ( {filteredIssues.length > 0 ? (
<li className="p-2"> <li className="p-2">

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

@ -88,7 +88,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl 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">

6
apps/app/components/integration/github/root.tsx
View File

@ -185,7 +185,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
</div> </div>
</Link> </Link>
<div className="space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4"> <div className="space-y-4 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-10 w-10 flex-shrink-0"> <div className="h-10 w-10 flex-shrink-0">
<Image src={GithubLogo} alt="GithubLogo" /> <Image src={GithubLogo} alt="GithubLogo" />
@ -201,7 +201,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
? "border-opacity-100 bg-opacity-100" ? "border-opacity-100 bg-opacity-100"
: "border-opacity-80 bg-opacity-80" : "border-opacity-80 bg-opacity-80"
}` }`
: "border-custom-border-100" : "border-custom-border-300"
}`} }`}
> >
<integration.icon <integration.icon
@ -216,7 +216,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
className={`border-b px-7 ${ className={`border-b px-7 ${
index <= activeIntegrationState() - 1 index <= activeIntegrationState() - 1
? `border-custom-primary` ? `border-custom-primary`
: `border-custom-border-100` : `border-custom-border-300`
}`} }`}
> >
{" "} {" "}

6
apps/app/components/integration/guide.tsx
View File

@ -83,7 +83,7 @@ const IntegrationGuide = () => {
{IMPORTERS_EXPORTERS_LIST.map((service) => ( {IMPORTERS_EXPORTERS_LIST.map((service) => (
<div <div
key={service.provider} key={service.provider}
className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4" className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4"
> >
<div className="flex items-center gap-4 whitespace-nowrap"> <div className="flex items-center gap-4 whitespace-nowrap">
<div className="relative h-10 w-10 flex-shrink-0"> <div className="relative h-10 w-10 flex-shrink-0">
@ -113,7 +113,7 @@ const IntegrationGuide = () => {
</div> </div>
))} ))}
</div> </div>
<div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4"> <div className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
<h3 className="mb-2 flex gap-2 text-lg font-medium"> <h3 className="mb-2 flex gap-2 text-lg font-medium">
Previous Imports Previous Imports
<button <button
@ -133,7 +133,7 @@ const IntegrationGuide = () => {
{importerServices ? ( {importerServices ? (
importerServices.length > 0 ? ( importerServices.length > 0 ? (
<div className="space-y-2"> <div className="space-y-2">
<div className="divide-y divide-custom-border-100"> <div className="divide-y divide-custom-border-300">
{importerServices.map((service) => ( {importerServices.map((service) => (
<SingleImport <SingleImport
key={service.id} key={service.id}

2
apps/app/components/integration/jira/import-users.tsx
View File

@ -51,7 +51,7 @@ export const JiraImportUsers: FC = () => {
})); }));
return ( return (
<div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-100 overflow-y-auto"> <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-300 overflow-y-auto">
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="font-semibold">Users</h3> <h3 className="font-semibold">Users</h3>

10
apps/app/components/integration/jira/root.tsx
View File

@ -118,7 +118,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
</div> </div>
</Link> </Link>
<div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4"> <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-10 w-10 flex-shrink-0"> <div className="h-10 w-10 flex-shrink-0">
<Image src={JiraLogo} alt="jira logo" /> <Image src={JiraLogo} alt="jira logo" />
@ -135,14 +135,14 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
index > activeIntegrationState() + 1 || index > activeIntegrationState() + 1 ||
Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter) Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
} }
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-100 ${ className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-300 ${
index <= activeIntegrationState() index <= activeIntegrationState()
? `border-custom-primary bg-custom-primary ${ ? `border-custom-primary bg-custom-primary ${
index === activeIntegrationState() index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100" ? "border-opacity-100 bg-opacity-100"
: "border-opacity-80 bg-opacity-80" : "border-opacity-80 bg-opacity-80"
}` }`
: "border-custom-border-100" : "border-custom-border-300"
}`} }`}
> >
<integration.icon <integration.icon
@ -157,7 +157,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
className={`border-b px-7 ${ className={`border-b px-7 ${
index <= activeIntegrationState() - 1 index <= activeIntegrationState() - 1
? `border-custom-primary` ? `border-custom-primary`
: `border-custom-border-100` : `border-custom-border-300`
}`} }`}
> >
{" "} {" "}
@ -183,7 +183,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
{currentStep?.state === "import-confirmation" && <JiraConfirmImport />} {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
</div> </div>
<div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-100 p-4 pb-0"> <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-300 p-4 pb-0">
{currentStep?.state !== "import-configure" && ( {currentStep?.state !== "import-configure" && (
<SecondaryButton <SecondaryButton
onClick={() => { onClick={() => {

2
apps/app/components/integration/single-integration-card.tsx
View File

@ -99,7 +99,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
); );
return ( return (
<div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5"> <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="h-12 w-12 flex-shrink-0"> <div className="h-12 w-12 flex-shrink-0">
<Image <Image

2
apps/app/components/issues/activity.tsx
View File

@ -288,7 +288,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
} }
value = ( value = (
<span className="relative inline-flex items-center rounded-full border border-custom-border-100 px-2 py-0.5 text-xs"> <span className="relative inline-flex items-center rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<span className="absolute flex flex-shrink-0 items-center justify-center"> <span className="absolute flex flex-shrink-0 items-center justify-center">
<span <span
className="h-1.5 w-1.5 rounded-full" className="h-1.5 w-1.5 rounded-full"

2
apps/app/components/issues/attachment-upload.tsx
View File

@ -90,7 +90,7 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
<div <div
{...getRootProps()} {...getRootProps()}
className={`flex items-center justify-center h-[60px] border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-4 ${ className={`flex items-center justify-center h-[60px] border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-4 ${
isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-100" isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-300"
} ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`} } ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
> >
<input {...getInputProps()} /> <input {...getInputProps()} />

2
apps/app/components/issues/attachments.tsx
View File

@ -61,7 +61,7 @@ export const IssueAttachments = () => {
attachments.map((file) => ( attachments.map((file) => (
<div <div
key={file.id} key={file.id}
className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-100 bg-custom-background-100 px-4 py-2 text-sm" className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-300 bg-custom-background-100 px-4 py-2 text-sm"
> >
<Link href={file.asset}> <Link href={file.asset}>
<a target="_blank"> <a target="_blank">

4
apps/app/components/issues/comment/comment-card.tsx
View File

@ -72,7 +72,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
alt={comment.actor_detail.first_name} alt={comment.actor_detail.first_name}
height={30} height={30}
width={30} width={30}
className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-100" className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-300"
/> />
) : ( ) : (
<div <div
@ -135,7 +135,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
value={comment.comment_html} value={comment.comment_html}
editable={false} editable={false}
noBorder noBorder
customClassName="text-xs border border-custom-border-100 bg-custom-background-100" customClassName="text-xs border border-custom-border-300 bg-custom-background-100"
ref={showEditorRef} ref={showEditorRef}
/> />
</div> </div>

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

@ -180,7 +180,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl 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">

2
apps/app/components/issues/form.tsx
View File

@ -529,7 +529,7 @@ export const IssueForm: FC<IssueFormProps> = ({
</div> </div>
</div> </div>
</div> </div>
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5"> <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-300 px-5 pt-5">
<div <div
className="flex cursor-pointer items-center gap-1" className="flex cursor-pointer items-center gap-1"
onClick={() => setCreateMore((prevData) => !prevData)} onClick={() => setCreateMore((prevData) => !prevData)}

2
apps/app/components/issues/modal.tsx
View File

@ -343,7 +343,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
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 border border-custom-border-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<IssueForm <IssueForm
issues={issues ?? []} issues={issues ?? []}
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}

12
apps/app/components/issues/my-issues-list-item.tsx
View File

@ -87,7 +87,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
const isNotAllowed = false; const isNotAllowed = false;
return ( return (
<div className="border-b border-custom-border-100 bg-custom-background-100 px-4 py-2.5 last:border-b-0"> <div className="border-b border-custom-border-300 bg-custom-background-100 px-4 py-2.5 last:border-b-0">
<div key={issue.id} className="flex items-center justify-between gap-2"> <div key={issue.id} className="flex items-center justify-between gap-2">
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}> <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="group relative flex items-center gap-2"> <a className="group relative flex items-center gap-2">
@ -139,7 +139,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
{issue.label_details.map((label) => ( {issue.label_details.map((label) => (
<span <span
key={label.id} key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200" className="group flex items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200"
> >
<span <span
className="h-1.5 w-1.5 rounded-full" className="h-1.5 w-1.5 rounded-full"
@ -155,7 +155,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
"" ""
)} )}
{properties.assignee && ( {properties.assignee && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm">
<Tooltip <Tooltip
position="top-right" position="top-right"
tooltipHeading="Assignees" tooltipHeading="Assignees"
@ -176,7 +176,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
</div> </div>
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}> <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LayerDiagonalIcon className="h-3.5 w-3.5" /> <LayerDiagonalIcon className="h-3.5 w-3.5" />
@ -186,7 +186,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
</div> </div>
)} )}
{properties.link && ( {properties.link && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}> <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<LinkIcon className="h-3.5 w-3.5 text-custom-text-200" /> <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />
@ -196,7 +196,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
</div> </div>
)} )}
{properties.attachment_count && ( {properties.attachment_count && (
<div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm"> <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm">
<Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}> <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center gap-1 text-custom-text-200">
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-custom-text-200" /> <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-custom-text-200" />

2
apps/app/components/issues/parent-issues-list-modal.tsx
View File

@ -108,7 +108,7 @@ export const ParentIssuesListModal: React.FC<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-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
<Combobox value={value} onChange={onChange}> <Combobox value={value} onChange={onChange}>
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <MagnifyingGlassIcon

2
apps/app/components/issues/select/date.tsx
View File

@ -16,7 +16,7 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
<Popover className="relative flex items-center justify-center rounded-lg"> <Popover className="relative flex items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-200"> <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-300 text-xs shadow-sm duration-200">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200"> <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
{value ? ( {value ? (
<> <>

6
apps/app/components/issues/select/label.tsx
View File

@ -59,7 +59,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
{({ open }: any) => ( {({ open }: any) => (
<> <>
<Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-200 hover:bg-custom-background-80"> <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-300 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
{value && value.length > 0 ? ( {value && value.length > 0 ? (
<span className="flex items-center justify-center gap-2 px-3 py-1 text-xs"> <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
<IssueLabelsList <IssueLabelsList
@ -90,7 +90,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`} bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
> >
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-100 bg-custom-background-90 px-2"> <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-300 bg-custom-background-90 px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" /> <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
<Combobox.Input <Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
@ -141,7 +141,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
); );
} else } else
return ( return (
<div className="border-y border-custom-border-100"> <div className="border-y border-custom-border-300">
<div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100"> <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
<RectangleGroupIcon className="h-3 w-3" /> {label.name} <RectangleGroupIcon className="h-3 w-3" /> {label.name}
</div> </div>

4
apps/app/components/issues/sidebar-select/blocked.tsx
View File

@ -92,7 +92,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
? watch("blocked_issues").map((issue) => ( ? watch("blocked_issues").map((issue) => (
<div <div
key={issue.blocked_issue_detail?.id} key={issue.blocked_issue_detail?.id}
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20" className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
> >
<Link <Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocked_issue_detail?.id}`} href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocked_issue_detail?.id}`}
@ -126,7 +126,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
type="button" type="button"
className={`flex w-full text-custom-text-200 ${ className={`flex w-full text-custom-text-200 ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
} items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`} } items-center justify-between gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
onClick={() => setIsBlockedModalOpen(true)} onClick={() => setIsBlockedModalOpen(true)}
disabled={isNotAllowed} disabled={isNotAllowed}
> >

4
apps/app/components/issues/sidebar-select/blocker.tsx
View File

@ -92,7 +92,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
? watch("blocker_issues").map((issue) => ( ? watch("blocker_issues").map((issue) => (
<div <div
key={issue.blocker_issue_detail?.id} key={issue.blocker_issue_detail?.id}
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20" className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
> >
<Link <Link
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocker_issue_detail?.id}`} href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocker_issue_detail?.id}`}
@ -128,7 +128,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
type="button" type="button"
className={`flex w-full text-custom-text-200 ${ className={`flex w-full text-custom-text-200 ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
} items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`} } items-center justify-between gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
onClick={() => setIsBlockerModalOpen(true)} onClick={() => setIsBlockerModalOpen(true)}
disabled={isNotAllowed} disabled={isNotAllowed}
> >

2
apps/app/components/issues/sidebar-select/parent.tsx
View File

@ -78,7 +78,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
type="button" type="button"
className={`flex w-full ${ className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
} items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`} } items-center justify-between gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
onClick={() => setIsParentModalOpen(true)} onClick={() => setIsParentModalOpen(true)}
disabled={isNotAllowed} disabled={isNotAllowed}
> >

16
apps/app/components/issues/sidebar.tsx
View File

@ -283,7 +283,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
data={issueDetail ?? null} data={issueDetail ?? null}
user={user} user={user}
/> />
<div className="sticky top-5 w-full divide-y-2 divide-custom-border-100"> <div className="sticky top-5 w-full divide-y-2 divide-custom-border-300">
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<h4 className="text-sm font-medium"> <h4 className="text-sm font-medium">
{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id} {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@ -292,7 +292,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
{(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && ( {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
<button <button
type="button" type="button"
className="rounded-md border border-custom-border-100 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary" className="rounded-md border border-custom-border-300 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
onClick={handleCopyText} onClick={handleCopyText}
> >
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
@ -310,7 +310,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className={`divide-y-2 divide-custom-border-100 ${uneditable ? "opacity-60" : ""}`}> <div className={`divide-y-2 divide-custom-border-300 ${uneditable ? "opacity-60" : ""}`}>
{showFirstSection && ( {showFirstSection && (
<div className="py-1"> <div className="py-1">
{(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && ( {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
@ -483,7 +483,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
return ( return (
<span <span
key={label.id} key={label.id}
className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20" className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
onClick={() => { onClick={() => {
const updatedLabels = watchIssue("labels_list")?.filter( const updatedLabels = watchIssue("labels_list")?.filter(
(l) => l !== labelId (l) => l !== labelId
@ -524,7 +524,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
isNotAllowed || uneditable isNotAllowed || uneditable
? "cursor-not-allowed" ? "cursor-not-allowed"
: "cursor-pointer hover:bg-custom-background-90" : "cursor-pointer hover:bg-custom-background-90"
} items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`} } items-center gap-2 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
> >
Select Label Select Label
</Listbox.Button> </Listbox.Button>
@ -536,7 +536,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none"> <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-300 focus:outline-none">
<div className="py-1"> <div className="py-1">
{issueLabels ? ( {issueLabels ? (
issueLabels.length > 0 ? ( issueLabels.length > 0 ? (
@ -575,7 +575,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
); );
} else } else
return ( return (
<div className="border-y border-custom-border-100 bg-custom-background-90"> <div className="border-y border-custom-border-300 bg-custom-background-90">
<div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100"> <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
<RectangleGroupIcon className="h-3 w-3" /> <RectangleGroupIcon className="h-3 w-3" />
{label.name} {label.name}
@ -629,7 +629,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
isNotAllowed || uneditable isNotAllowed || uneditable
? "cursor-not-allowed" ? "cursor-not-allowed"
: "cursor-pointer hover:bg-custom-background-90" : "cursor-pointer hover:bg-custom-background-90"
} items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`} } items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
onClick={() => setCreateLabelForm((prevData) => !prevData)} onClick={() => setCreateLabelForm((prevData) => !prevData)}
disabled={uneditable} disabled={uneditable}
> >

2
apps/app/components/issues/view-select/label.tsx
View File

@ -95,7 +95,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
return ( return (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}> <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span <span
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100`} className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-300`}
style={{ style={{
backgroundColor: label?.color ?? "#000000", backgroundColor: label?.color ?? "#000000",
}} }}

2
apps/app/components/issues/view-select/priority.tsx
View File

@ -74,7 +74,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
? "border-yellow-500/20 bg-yellow-500/20" ? "border-yellow-500/20 bg-yellow-500/20"
: issue.priority === "low" : issue.priority === "low"
? "border-green-500/20 bg-green-500/20" ? "border-green-500/20 bg-green-500/20"
: "border-custom-border-100 bg-custom-background-80" : "border-custom-border-300 bg-custom-background-80"
} items-center`} } items-center`}
> >
<Tooltip <Tooltip

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

@ -115,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
return ( return (
<div <div
className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5 ${ className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5 ${
labelForm ? "" : "hidden" labelForm ? "" : "hidden"
}`} }`}
ref={ref} ref={ref}

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

@ -91,7 +91,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
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-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="px-4 pt-5 pb-4 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">

2
apps/app/components/labels/labels-list-modal.tsx
View File

@ -96,7 +96,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
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-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all"> <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
<Combobox> <Combobox>
<div className="relative m-1"> <div className="relative m-1">
<MagnifyingGlassIcon <MagnifyingGlassIcon

4
apps/app/components/labels/single-label-group.tsx
View File

@ -76,7 +76,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
return ( return (
<Disclosure <Disclosure
as="div" as="div"
className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5 text-custom-text-100" className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5 text-custom-text-100"
defaultOpen defaultOpen
> >
{({ open }) => ( {({ open }) => (
@ -132,7 +132,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
{labelChildren.map((child) => ( {labelChildren.map((child) => (
<div <div
key={child.id} key={child.id}
className="group flex items-center justify-between rounded-md border border-custom-border-100 p-2 text-sm" className="group flex items-center justify-between rounded-md border border-custom-border-300 p-2 text-sm"
> >
<h5 className="flex items-center gap-3"> <h5 className="flex items-center gap-3">
<span <span

2
apps/app/components/labels/single-label.tsx
View File

@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
editLabel, editLabel,
handleLabelDelete, handleLabelDelete,
}) => ( }) => (
<div className="gap-2 space-y-3 divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5"> <div className="gap-2 space-y-3 divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span <span

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

@ -92,7 +92,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
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 border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="px-4 pt-5 pb-4 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-500/20 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-500/20 sm:mx-0 sm:h-10 sm:w-10">

2
apps/app/components/modules/form.tsx
View File

@ -164,7 +164,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
</div> </div>
</div> </div>
</div> </div>
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-100 px-5 pt-5"> <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-300 px-5 pt-5">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}> <PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
{status {status

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