chore: format all files in monorepo (#3054)
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
sriram veeraghanta
parent
e5ae139178
commit
5b0066140f
721 changed files with 3739 additions and 4660 deletions
6
web/.prettierignore
Normal file
6
web/.prettierignore
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.next
|
||||
.vercel
|
||||
.tubro
|
||||
out/
|
||||
dis/
|
||||
build/
|
||||
|
|
@ -88,17 +88,17 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
|
|||
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 text-left shadow-custom-shadow-md 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 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="">
|
||||
<div className="flex items-start gap-x-4">
|
||||
<div className="grid place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<Dialog.Title as="h3" className="text-2xl my-4 font-medium leading-6 text-custom-text-100">
|
||||
<Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
|
||||
Deactivate your account?
|
||||
</Dialog.Title>
|
||||
<p className="pr-4 mt-6 text-custom-text-200 list-disc font-normal text-base">
|
||||
<p className="mt-6 list-disc pr-4 text-base font-normal text-custom-text-200">
|
||||
Once deactivated, you can{"'"}t be assigned issues and be billed for your workspace.To
|
||||
reactivate your account, you will need an invite to a workspace at this email address.
|
||||
</p>
|
||||
|
|
@ -106,7 +106,7 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 p-4 mb-2 sm:px-6">
|
||||
<div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
|
||||
<Button variant="neutral-primary" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
|
||||
<form className="mx-auto mt-10 w-full space-y-4 sm:w-[360px]" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="space-y-1">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -58,7 +58,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="Enter your email address..."
|
||||
className="border-custom-border-300 h-[46px] w-full"
|
||||
className="h-[46px] w-full border-custom-border-300"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -80,7 +80,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Enter your password..."
|
||||
className="border-custom-border-300 h-[46px] w-full"
|
||||
className="h-[46px] w-full border-custom-border-300"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -107,7 +107,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.confirm_password)}
|
||||
placeholder="Confirm your password..."
|
||||
className="border-custom-border-300 h-[46px] w-full"
|
||||
className="h-[46px] w-full border-custom-border-300"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -43,8 +43,8 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
|
|||
href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
|
||||
>
|
||||
<button
|
||||
className={`flex w-full items-center justify-center gap-2 hover:bg-onboarding-background-300 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 h-[42px] ${
|
||||
resolvedTheme === "dark" ? "bg-[#2F3135] border-[#43484F]" : "border-[#D9E4FF]"
|
||||
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
|
||||
resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
|
|||
return (
|
||||
<>
|
||||
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
|
||||
<div className="overflow-hidden rounded w-full" id="googleSignInButton" ref={googleSignInButton} />
|
||||
<div className="w-full overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -81,10 +81,10 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(handleCreatePassword)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||
<form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-11 space-y-4 sm:w-96">
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
|
|
@ -102,7 +102,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
|
|
@ -121,7 +121,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Choose password"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
minLength={8}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -74,14 +74,14 @@ export const EmailForm: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-2.5">
|
||||
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
|
||||
Create or join a workspace. Start with your e-mail.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-8 sm:w-96 mx-auto space-y-4">
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-8 space-y-4 sm:w-96">
|
||||
<div className="space-y-1">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -91,7 +91,7 @@ export const EmailForm: React.FC<Props> = (props) => {
|
|||
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
|
|
@ -101,11 +101,11 @@ export const EmailForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => onChange("")}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -68,12 +68,12 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex sm:w-96 items-center mt-4 mx-auto">
|
||||
<hr className="border-onboarding-border-100 w-full" />
|
||||
<p className="text-center text-sm text-onboarding-text-400 mx-3 flex-shrink-0">Or continue with</p>
|
||||
<hr className="border-onboarding-border-100 w-full" />
|
||||
<div className="mx-auto mt-4 flex items-center sm:w-96">
|
||||
<hr className="w-full border-onboarding-border-100" />
|
||||
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
|
||||
<hr className="w-full border-onboarding-border-100" />
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-center gap-2 pt-7 sm:w-96 mx-auto overflow-hidden">
|
||||
<div className="mx-auto flex flex-col items-center gap-2 overflow-hidden pt-7 sm:w-96 sm:flex-row">
|
||||
{envConfig?.google_client_id && (
|
||||
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Set a password</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-2.5">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Set a password</h1>
|
||||
<p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
|
||||
If you{"'"}d like to do away with codes, set a password here.
|
||||
</p>
|
||||
|
||||
<form className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||
<form className="mx-auto mt-5 space-y-4 sm:w-96">
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
|
|
@ -62,7 +62,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -134,10 +134,10 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-semibold text-onboarding-text-100">
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-11 space-y-4 sm:w-96">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -147,7 +147,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
|||
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
|
|
@ -156,11 +156,11 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => onChange("")}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -182,7 +182,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Enter password"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -199,7 +199,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-2.5">
|
||||
<div className="grid gap-2.5 sm:grid-cols-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSendUniqueCode}
|
||||
|
|
|
|||
|
|
@ -76,10 +76,10 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-semibold text-onboarding-text-100">
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-11 space-y-4 sm:w-96">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -89,7 +89,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
|
|||
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
|
|
@ -98,11 +98,11 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => onChange("")}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -124,7 +124,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Enter password"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -62,15 +62,15 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-2.5">
|
||||
<p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
|
||||
We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
|
||||
password
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(handleSendNewLink)} className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||
<form onSubmit={handleSubmit(handleSendNewLink)} className="mx-auto mt-5 space-y-4 sm:w-96">
|
||||
<div className="space-y-1">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -88,7 +88,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -152,14 +152,14 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||
}, [setFocus]);
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-2.5">
|
||||
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
|
||||
Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -169,7 +169,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
|
|
@ -182,11 +182,11 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => onChange("")}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -196,7 +196,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||
{hasEmailChanged && (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-xs text-onboarding-text-300 mt-1.5 flex items-center gap-1 outline-none bg-transparent border-none"
|
||||
className="mt-1.5 flex items-center gap-1 border-none bg-transparent text-xs text-onboarding-text-300 outline-none"
|
||||
>
|
||||
Hit <CornerDownLeft className="h-2.5 w-2.5" /> or <span className="italic">Tab</span> to get a new code
|
||||
</button>
|
||||
|
|
@ -215,7 +215,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.token)}
|
||||
placeholder="gets-sets-flys"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -233,8 +233,8 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||
{resendTimerCode > 0
|
||||
? `Request new code in ${resendTimerCode}s`
|
||||
: isRequestingNewCode
|
||||
? "Requesting new code"
|
||||
: "Request new code"}
|
||||
? "Requesting new code"
|
||||
: "Request new code"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
|
|||
const isProjectLevel = projectId ? true : false;
|
||||
|
||||
return (
|
||||
<div className={`overflow-hidden flex flex-col-reverse ${fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""}`}>
|
||||
<div className="col-span-3 flex flex-col h-full overflow-hidden">
|
||||
<div className={`flex flex-col-reverse overflow-hidden ${fullScreen ? "md:grid md:h-full md:grid-cols-4" : ""}`}>
|
||||
<div className="col-span-3 flex h-full flex-col overflow-hidden">
|
||||
<CustomAnalyticsSelectBar
|
||||
control={control}
|
||||
setValue={setValue}
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
|
|||
? "capitalize"
|
||||
: ""
|
||||
: params.x_axis === "priority" || params.x_axis === "state__group"
|
||||
? "capitalize"
|
||||
: ""
|
||||
? "capitalize"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{params.segment === "assignees__id" ? renderAssigneeName(tooltipValue.toString()) : tooltipValue}:
|
||||
|
|
|
|||
|
|
@ -101,8 +101,8 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
|
|||
? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
|
||||
: "?"
|
||||
: datum.value && datum.value !== "None"
|
||||
? `${datum.value}`.toUpperCase()[0]
|
||||
: "?"}
|
||||
? `${datum.value}`.toUpperCase()[0]
|
||||
: "?"}
|
||||
</text>
|
||||
</g>
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
|
|||
return (
|
||||
<div
|
||||
className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-3" : "grid-cols-2"} ${
|
||||
fullScreen ? "lg:grid-cols-4 md:py-5" : ""
|
||||
fullScreen ? "md:py-5 lg:grid-cols-4" : ""
|
||||
}`}
|
||||
>
|
||||
{!isProjectLevel && (
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
|
|||
query: project.name + project.identifier,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-custom-text-200 text-[0.65rem]">{project.identifier}</span>
|
||||
<span className="text-[0.65rem] text-custom-text-200">{project.identifier}</span>
|
||||
{project.name}
|
||||
</div>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -16,25 +16,25 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = (props) => {
|
|||
return (
|
||||
<div className="hidden h-full overflow-hidden md:flex md:flex-col">
|
||||
<h4 className="font-medium">Selected Projects</h4>
|
||||
<div className="space-y-6 mt-4 h-full overflow-y-auto">
|
||||
<div className="mt-4 h-full space-y-6 overflow-y-auto">
|
||||
{projects.map((project) => (
|
||||
<div key={project.id} className="w-full">
|
||||
<div className="text-sm flex items-center gap-1">
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
{project.emoji ? (
|
||||
<span className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.emoji)}</span>
|
||||
) : project.icon_prop ? (
|
||||
<div className="h-6 w-6 grid place-items-center flex-shrink-0">{renderEmoji(project.icon_prop)}</div>
|
||||
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.icon_prop)}</div>
|
||||
) : (
|
||||
<span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
<h5 className="flex items-center gap-1">
|
||||
<p className="break-words">{truncateText(project.name, 20)}</p>
|
||||
<span className="text-custom-text-200 text-xs ml-1">({project.identifier})</span>
|
||||
<span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3 pl-2 w-full">
|
||||
<div className="mt-4 w-full space-y-3 pl-2">
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="text-custom-text-200" size={14} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
|
|||
<>
|
||||
{projectId ? (
|
||||
cycleDetails ? (
|
||||
<div className="hidden md:block h-full overflow-y-auto">
|
||||
<h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
|
||||
<div className="space-y-4 mt-4">
|
||||
<div className="hidden h-full overflow-y-auto md:block">
|
||||
<h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<h6 className="text-custom-text-200">Lead</h6>
|
||||
<span>{cycleDetails.owned_by?.display_name}</span>
|
||||
|
|
@ -52,9 +52,9 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
|
|||
</div>
|
||||
</div>
|
||||
) : moduleDetails ? (
|
||||
<div className="hidden md:block h-full overflow-y-auto">
|
||||
<h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
|
||||
<div className="space-y-4 mt-4">
|
||||
<div className="hidden h-full overflow-y-auto md:block">
|
||||
<h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<h6 className="text-custom-text-200">Lead</h6>
|
||||
<span>{moduleDetails.lead_detail?.display_name}</span>
|
||||
|
|
@ -78,22 +78,22 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden md:flex md:flex-col h-full overflow-y-auto">
|
||||
<div className="hidden h-full overflow-y-auto md:flex md:flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
{projectDetails?.emoji ? (
|
||||
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</div>
|
||||
) : projectDetails?.icon_prop ? (
|
||||
<div className="h-6 w-6 grid place-items-center flex-shrink-0">
|
||||
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">
|
||||
{renderEmoji(projectDetails.icon_prop)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{projectDetails?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
<h4 className="font-medium break-words">{projectDetails?.name}</h4>
|
||||
<h4 className="break-words font-medium">{projectDetails?.name}</h4>
|
||||
</div>
|
||||
<div className="space-y-4 mt-4">
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<h6 className="text-custom-text-200">Network</h6>
|
||||
<span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
|
||||
|
|
|
|||
|
|
@ -142,26 +142,26 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
|
||||
className={`flex items-center justify-between space-y-2 px-5 py-2.5 ${
|
||||
fullScreen
|
||||
? "border-l border-custom-border-200 md:h-full md:border-l md:border-custom-border-200 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
|
||||
? "overflow-hidden border-l border-custom-border-200 md:h-full md:flex-col md:items-start md:space-y-4 md:border-l md:border-custom-border-200 md:py-5"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
|
||||
<LayersIcon height={14} width={14} />
|
||||
{analytics ? analytics.total : "..."} Issues
|
||||
</div>
|
||||
{isProjectLevel && (
|
||||
<div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
|
||||
<div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
{renderShortDate(
|
||||
(cycleId
|
||||
? cycleDetails?.created_at
|
||||
: moduleId
|
||||
? moduleDetails?.created_at
|
||||
: projectDetails?.created_at) ?? ""
|
||||
? moduleDetails?.created_at
|
||||
: projectDetails?.created_at) ?? ""
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -178,7 +178,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
|
|||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap justify-self-end">
|
||||
<div className="flex flex-wrap items-center gap-2 justify-self-end">
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
|
|||
<table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
|
||||
<thead className="bg-custom-background-80">
|
||||
<tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
|
||||
<th scope="col" className="py-3 px-2.5 text-left font-medium">
|
||||
<th scope="col" className="px-2.5 py-3 text-left font-medium">
|
||||
{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
|
||||
</th>
|
||||
{params.segment ? (
|
||||
|
|
@ -54,7 +54,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
|
|||
</th>
|
||||
))
|
||||
) : (
|
||||
<th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
|
||||
<th scope="col" className="px-2.5 py-3 text-left font-medium sm:pr-0">
|
||||
{ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
|
||||
</th>
|
||||
)}
|
||||
|
|
@ -64,7 +64,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
|
|||
{barGraphData.data.map((item, index) => (
|
||||
<tr key={`table-row-${index}`} className="divide-x divide-custom-border-200 text-xs text-custom-text-200">
|
||||
<td
|
||||
className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
|
||||
className={`flex items-center gap-2 whitespace-nowrap px-2.5 py-2 font-medium ${
|
||||
params.x_axis === "priority" || params.x_axis === "state__group" ? "capitalize" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
@ -82,12 +82,12 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
|
|||
</td>
|
||||
{params.segment ? (
|
||||
barGraphData.xAxisKeys.map((key, index) => (
|
||||
<td key={`segment-value-${index}`} className="whitespace-nowrap py-2 px-2.5 sm:pr-0">
|
||||
<td key={`segment-value-${index}`} className="whitespace-nowrap px-2.5 py-2 sm:pr-0">
|
||||
{item[key] ?? 0}
|
||||
</td>
|
||||
))
|
||||
) : (
|
||||
<td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
|
||||
<td className="whitespace-nowrap px-2.5 py-2 sm:pr-0">{item[yAxisKey]}</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
|
|||
>
|
||||
{/* TODO: fix full screen mode */}
|
||||
<Dialog.Panel
|
||||
className={`fixed z-20 bg-custom-background-100 top-0 right-0 h-full shadow-custom-shadow-md ${
|
||||
className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
|
||||
fullScreen ? "w-full p-2" : "w-1/2"
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
|
|||
<div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
|
||||
<h5 className="text-xs text-red-500">DEMAND</h5>
|
||||
<div>
|
||||
<h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4>
|
||||
<h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
|
||||
<h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
|
|
@ -39,7 +39,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
|
|||
</div>
|
||||
<div className="bar relative h-1 w-full rounded bg-custom-background-80">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1 rounded duration-300"
|
||||
className="absolute left-0 top-0 h-1 rounded duration-300"
|
||||
style={{
|
||||
width: `${percentage}%`,
|
||||
backgroundColor: STATE_GROUP_COLORS[group.state_group as TStateGroups],
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
|
||||
<div className="p-3 border border-custom-border-200 rounded-[10px]">
|
||||
<div className="rounded-[10px] border border-custom-border-200 p-3">
|
||||
<h6 className="text-base font-medium">{title}</h6>
|
||||
{users.length > 0 ? (
|
||||
<div className="mt-3 space-y-3">
|
||||
|
|
@ -32,15 +32,15 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
|
|||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{user && user.avatar && user.avatar !== "" ? (
|
||||
<div className="relative rounded-full h-4 w-4 flex-shrink-0">
|
||||
<div className="relative h-4 w-4 flex-shrink-0 rounded-full">
|
||||
<img
|
||||
src={user.avatar}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
|
||||
className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
|
||||
alt={user.display_name ?? "None"}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid place-items-center flex-shrink-0 rounded-full bg-gray-700 text-[11px] capitalize text-white h-4 w-4">
|
||||
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 text-[11px] capitalize text-white">
|
||||
{user.display_name !== "" ? user?.display_name?.[0] : "?"}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => (
|
||||
<div className="py-3 border border-custom-border-200 rounded-[10px]">
|
||||
<div className="rounded-[10px] border border-custom-border-200 py-3">
|
||||
<h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
|
||||
{defaultAnalytics.issue_completed_month_wise.length > 0 ? (
|
||||
<LineGraph
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
|
|||
be undone.
|
||||
</p>
|
||||
</span>
|
||||
<div className="flex justify-end mt-2 gap-2">
|
||||
<div className="mt-2 flex justify-end gap-2">
|
||||
<Button variant="neutral-primary" onClick={handleClose} size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center justify-center mx-auto rounded-sm border border-custom-border-200 bg-custom-background-90 py-10 px-16 w-full lg:w-3/4`}
|
||||
className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
|
||||
>
|
||||
<div className="text-center flex flex-col items-center w-full">
|
||||
<div className="flex w-full flex-col items-center text-center">
|
||||
<Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
|
||||
<h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">No API tokens</h6>
|
||||
<p className="text-custom-text-300 mb-7 sm:mb-8">
|
||||
<h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No API tokens</h6>
|
||||
<p className="mb-7 text-custom-text-300 sm:mb-8">
|
||||
Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
|
||||
</p>
|
||||
<Button className="flex items-center gap-1.5" onClick={onClick}>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
|
|||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="h-full w-full grid place-items-center text-center p-4">
|
||||
<div className="grid h-full w-full place-items-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
|
@ -112,7 +112,7 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all px-4 sm:w-full sm:max-w-2xl">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
|
||||
{generatedToken ? (
|
||||
<GeneratedTokenDetails handleClose={handleClose} tokenDetails={generatedToken} />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.label)}
|
||||
placeholder="Token title"
|
||||
className="text-sm font-medium w-full"
|
||||
className="w-full text-sm font-medium"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -151,7 +151,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors.description)}
|
||||
placeholder="Token description"
|
||||
className="text-sm h-24 w-full"
|
||||
className="h-24 w-full text-sm"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -167,7 +167,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
|||
<CustomSelect
|
||||
customButton={
|
||||
<div
|
||||
className={`flex items-center gap-2 border-[0.5px] border-custom-border-200 rounded py-1 px-2 ${
|
||||
className={`flex items-center gap-2 rounded border-[0.5px] border-custom-border-200 px-2 py-1 ${
|
||||
neverExpires ? "text-custom-text-400" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
@ -175,8 +175,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
|||
{value === "custom"
|
||||
? "Custom date"
|
||||
: selectedOption
|
||||
? selectedOption.label
|
||||
: "Set expiration date"}
|
||||
? selectedOption.label
|
||||
: "Set expiration date"}
|
||||
</div>
|
||||
}
|
||||
value={value}
|
||||
|
|
@ -200,9 +200,9 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
|||
minDate={tomorrow}
|
||||
customInput={
|
||||
<div
|
||||
className={`flex items-center gap-2 py-1 px-2 text-xs cursor-pointer !rounded border-[0.5px] border-custom-border-200 !shadow-none !duration-0 ${
|
||||
className={`flex cursor-pointer items-center gap-2 !rounded border-[0.5px] border-custom-border-200 px-2 py-1 text-xs !shadow-none !duration-0 ${
|
||||
customDate ? "w-[7.5rem]" : ""
|
||||
} ${neverExpires ? "text-custom-text-400 !cursor-not-allowed" : "hover:bg-custom-background-80"}`}
|
||||
} ${neverExpires ? "!cursor-not-allowed text-custom-text-400" : "hover:bg-custom-background-80"}`}
|
||||
>
|
||||
<Calendar className="h-3 w-3" />
|
||||
{customDate ? renderFormattedDate(customDate) : "Set date"}
|
||||
|
|
@ -219,8 +219,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
|||
? `Expires ${renderFormattedDate(customDate)}`
|
||||
: null
|
||||
: watch("expired_at")
|
||||
? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
|
||||
: null}
|
||||
? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
|
||||
: null}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => copyApiToken(tokenDetails.token ?? "")}
|
||||
className="mt-4 w-full border-[0.5px] border-custom-border-200 py-2 px-3 flex items-center justify-between font-medium rounded-md text-sm outline-none"
|
||||
className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
|
||||
>
|
||||
{tokenDetails.token}
|
||||
<Tooltip tooltipContent="Copy secret key">
|
||||
|
|
@ -49,7 +49,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
|
|||
</Tooltip>
|
||||
</button>
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<p className="text-custom-text-400 text-xs">
|
||||
<p className="text-xs text-custom-text-400">
|
||||
{tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
|
||||
</p>
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
|
|
|
|||
|
|
@ -21,30 +21,30 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
|
|||
return (
|
||||
<>
|
||||
<DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
|
||||
<div className="group relative border-b border-custom-border-200 flex flex-col justify-center py-3 px-4">
|
||||
<div className="group relative flex flex-col justify-center border-b border-custom-border-200 px-4 py-3">
|
||||
<Tooltip tooltipContent="Delete token">
|
||||
<button
|
||||
onClick={() => setDeleteModalOpen(true)}
|
||||
className="hidden group-hover:grid absolute right-4 place-items-center"
|
||||
className="absolute right-4 hidden place-items-center group-hover:grid"
|
||||
>
|
||||
<XCircle className="h-4 w-4 text-red-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<div className="flex items-center w-4/5">
|
||||
<h5 className="text-sm font-medium truncate">{token.label}</h5>
|
||||
<div className="flex w-4/5 items-center">
|
||||
<h5 className="truncate text-sm font-medium">{token.label}</h5>
|
||||
<span
|
||||
className={`${
|
||||
token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
|
||||
} flex items-center px-2 h-4 rounded-sm max-h-fit ml-2 text-xs font-medium`}
|
||||
} ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
|
||||
>
|
||||
{token.is_active ? "Active" : "Expired"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center w-full mt-1">
|
||||
<div className="mt-1 flex w-full flex-col justify-center">
|
||||
{token.description.trim() !== "" && (
|
||||
<p className="text-sm mb-1 break-words max-w-[70%]">{token.description}</p>
|
||||
<p className="mb-1 max-w-[70%] break-words text-sm">{token.description}</p>
|
||||
)}
|
||||
<p className="text-xs mb-1 leading-6 text-custom-text-400">
|
||||
<p className="mb-1 text-xs leading-6 text-custom-text-400">
|
||||
{token.is_active
|
||||
? token.expired_at
|
||||
? `Expires ${renderFormattedDate(token.expired_at!)}`
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
|
|||
<div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
|
||||
<ArchiveRestore className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
|
||||
<div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
|
||||
<ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
|
||||
</div>
|
||||
<div className="">
|
||||
<h4 className="text-sm font-medium">Auto-archive closed issues</h4>
|
||||
<p className="text-sm text-custom-text-200 tracking-tight">
|
||||
<p className="text-sm tracking-tight text-custom-text-200">
|
||||
Plane will auto archive issues that have been completed or cancelled.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
|
|||
{projectDetails ? (
|
||||
projectDetails.archive_in !== 0 && (
|
||||
<div className="ml-12">
|
||||
<div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
|
||||
<div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
|
||||
<div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
|
||||
<div className="w-1/2">
|
||||
<CustomSelect
|
||||
|
|
@ -88,7 +88,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
|
|||
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
|
||||
className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => setmonthModal(true)}
|
||||
>
|
||||
Customise Time Range
|
||||
|
|
|
|||
|
|
@ -68,12 +68,12 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
|
|||
<div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
|
||||
<ArchiveX className="h-4 w-4 text-red-500 flex-shrink-0" />
|
||||
<div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
|
||||
<ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" />
|
||||
</div>
|
||||
<div className="">
|
||||
<h4 className="text-sm font-medium">Auto-close issues</h4>
|
||||
<p className="text-sm text-custom-text-200 tracking-tight">
|
||||
<p className="text-sm tracking-tight text-custom-text-200">
|
||||
Plane will automatically close issue that haven{"'"}t been completed or cancelled.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -93,8 +93,8 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
|
|||
{projectDetails ? (
|
||||
projectDetails.close_in !== 0 && (
|
||||
<div className="ml-12">
|
||||
<div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200">
|
||||
<div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
|
||||
<div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
|
||||
<div className="flex w-full items-center justify-between gap-2 px-5 py-4">
|
||||
<div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
|
||||
<div className="w-1/2">
|
||||
<CustomSelect
|
||||
|
|
@ -125,7 +125,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
|
||||
<div className="flex w-full items-center justify-between gap-2 px-5 py-4">
|
||||
<div className="w-1/2 text-sm font-medium">Auto-close Status</div>
|
||||
<div className="w-1/2 ">
|
||||
<CustomSearchSelect
|
||||
|
|
|
|||
|
|
@ -68,14 +68,14 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
|
||||
Customise Time Range
|
||||
</Dialog.Title>
|
||||
<div className="mt-8 flex items-center gap-2">
|
||||
<div className="flex w-full flex-col gap-1 justify-center">
|
||||
<div className="flex w-full flex-col justify-center gap-1">
|
||||
{type === "auto-close" ? (
|
||||
<>
|
||||
<Controller
|
||||
|
|
@ -87,7 +87,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
|
|||
max: 12,
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="relative flex flex-col gap-1 justify-center w-full">
|
||||
<div className="relative flex w-full flex-col justify-center gap-1">
|
||||
<Input
|
||||
id="close_in"
|
||||
name="close_in"
|
||||
|
|
@ -97,15 +97,15 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.close_in)}
|
||||
placeholder="Enter Months"
|
||||
className="border-custom-border-200 w-full"
|
||||
className="w-full border-custom-border-200"
|
||||
/>
|
||||
<span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
|
||||
<span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.close_in && (
|
||||
<span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
|
||||
<span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -119,7 +119,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
|
|||
max: 12,
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="relative flex flex-col gap-1 justify-center w-full">
|
||||
<div className="relative flex w-full flex-col justify-center gap-1">
|
||||
<Input
|
||||
id="archive_in"
|
||||
name="archive_in"
|
||||
|
|
@ -129,14 +129,14 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.archive_in)}
|
||||
placeholder="Enter Months"
|
||||
className="border-custom-border-200 w-full"
|
||||
className="w-full border-custom-border-200"
|
||||
/>
|
||||
<span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
|
||||
<span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{errors.archive_in && (
|
||||
<span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
|
||||
<span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center flex-grow w-full whitespace-nowrap overflow-hidden overflow-ellipsis">
|
||||
<div className="flex w-full flex-grow items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
|
||||
|
|
@ -53,7 +53,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
|
|||
</span>
|
||||
</Link>
|
||||
) : (
|
||||
<div className={`px-3 text-sm truncate ${unshrinkTitle ? "flex-shrink-0" : ""}`}>
|
||||
<div className={`truncate px-3 text-sm ${unshrinkTitle ? "flex-shrink-0" : ""}`}>
|
||||
<p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
|
||||
{icon}
|
||||
<span className="break-words">{title}</span>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
|
|||
|
||||
const {
|
||||
commandPalette: { toggleCreateCycleModal, toggleCreateModuleModal, toggleCreatePageModal, toggleCreateViewModal },
|
||||
trackEvent: { setTrackElement }
|
||||
trackEvent: { setTrackElement },
|
||||
} = useMobxStore();
|
||||
|
||||
return (
|
||||
|
|
@ -23,7 +23,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
|
|||
<Command.Item
|
||||
onSelect={() => {
|
||||
closePalette();
|
||||
setTrackElement("COMMAND_PALETTE")
|
||||
setTrackElement("COMMAND_PALETTE");
|
||||
toggleCreateCycleModal(true);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export const CommandModal: React.FC = observer(() => {
|
|||
toggleCreateIssueModal,
|
||||
toggleCreateProjectModal,
|
||||
},
|
||||
trackEvent: { setTrackElement }
|
||||
trackEvent: { setTrackElement },
|
||||
} = useMobxStore();
|
||||
|
||||
// router
|
||||
|
|
@ -160,7 +160,7 @@ export const CommandModal: React.FC = observer(() => {
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex items-center justify-center w-full ">
|
||||
<Dialog.Panel className="relative flex w-full items-center justify-center ">
|
||||
<div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
|
||||
<Command
|
||||
filter={(value, search) => {
|
||||
|
|
@ -182,8 +182,8 @@ export const CommandModal: React.FC = observer(() => {
|
|||
}}
|
||||
>
|
||||
<div
|
||||
className={`flex sm:items-center gap-4 p-3 pb-0 ${
|
||||
issueDetails ? "flex-col sm:flex-row justify-between" : "justify-end"
|
||||
className={`flex gap-4 p-3 pb-0 sm:items-center ${
|
||||
issueDetails ? "flex-col justify-between sm:flex-row" : "justify-end"
|
||||
}`}
|
||||
>
|
||||
{issueDetails && (
|
||||
|
|
@ -193,7 +193,7 @@ export const CommandModal: React.FC = observer(() => {
|
|||
)}
|
||||
{projectId && (
|
||||
<Tooltip tooltipContent="Toggle workspace level search">
|
||||
<div className="flex-shrink-0 self-end sm:self-center flex items-center gap-1 text-xs cursor-pointer">
|
||||
<div className="flex flex-shrink-0 cursor-pointer items-center gap-1 self-end text-xs sm:self-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
|
||||
|
|
@ -211,12 +211,12 @@ export const CommandModal: React.FC = observer(() => {
|
|||
</div>
|
||||
<div className="relative">
|
||||
<Search
|
||||
className="pointer-events-none absolute top-1/2 -translate-y-1/2 left-4 h-4 w-4 text-custom-text-200"
|
||||
className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-custom-text-200"
|
||||
aria-hidden="true"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<Command.Input
|
||||
className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
|
||||
className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
|
||||
placeholder={placeholder}
|
||||
value={searchTerm}
|
||||
onValueChange={(e) => setSearchTerm(e)}
|
||||
|
|
@ -227,7 +227,7 @@ export const CommandModal: React.FC = observer(() => {
|
|||
|
||||
<Command.List className="max-h-96 overflow-scroll p-2">
|
||||
{searchTerm !== "" && (
|
||||
<h5 className="text-xs text-custom-text-100 mx-[3px] my-4">
|
||||
<h5 className="mx-[3px] my-4 text-xs text-custom-text-100">
|
||||
Search results for{" "}
|
||||
<span className="font-medium">
|
||||
{'"'}
|
||||
|
|
@ -239,7 +239,7 @@ export const CommandModal: React.FC = observer(() => {
|
|||
)}
|
||||
|
||||
{!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
|
||||
<div className="my-4 text-center text-custom-text-200 text-sm">No results found.</div>
|
||||
<div className="my-4 text-center text-sm text-custom-text-200">No results found.</div>
|
||||
)}
|
||||
|
||||
{(isLoading || isSearching) && (
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export const commandGroups: {
|
|||
icon: <ContrastIcon className="h-3 w-3" />,
|
||||
itemName: (cycle: IWorkspaceDefaultSearchResult) => (
|
||||
<h6>
|
||||
<span className="text-custom-text-300 text-xs">{cycle.project__identifier}</span> {cycle.name}
|
||||
<span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name}
|
||||
</h6>
|
||||
),
|
||||
path: (cycle: IWorkspaceDefaultSearchResult) =>
|
||||
|
|
@ -31,7 +31,7 @@ export const commandGroups: {
|
|||
icon: <LayersIcon className="h-3 w-3" />,
|
||||
itemName: (issue: IWorkspaceIssueSearchResult) => (
|
||||
<h6>
|
||||
<span className="text-custom-text-300 text-xs">
|
||||
<span className="text-xs text-custom-text-300">
|
||||
{issue.project__identifier}-{issue.sequence_id}
|
||||
</span>{" "}
|
||||
{issue.name}
|
||||
|
|
@ -45,7 +45,7 @@ export const commandGroups: {
|
|||
icon: <PhotoFilterIcon className="h-3 w-3" />,
|
||||
itemName: (view: IWorkspaceDefaultSearchResult) => (
|
||||
<h6>
|
||||
<span className="text-custom-text-300 text-xs">{view.project__identifier}</span> {view.name}
|
||||
<span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name}
|
||||
</h6>
|
||||
),
|
||||
path: (view: IWorkspaceDefaultSearchResult) =>
|
||||
|
|
@ -56,7 +56,7 @@ export const commandGroups: {
|
|||
icon: <DiceIcon className="h-3 w-3" />,
|
||||
itemName: (module: IWorkspaceDefaultSearchResult) => (
|
||||
<h6>
|
||||
<span className="text-custom-text-300 text-xs">{module.project__identifier}</span> {module.name}
|
||||
<span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name}
|
||||
</h6>
|
||||
),
|
||||
path: (module: IWorkspaceDefaultSearchResult) =>
|
||||
|
|
@ -67,7 +67,7 @@ export const commandGroups: {
|
|||
icon: <FileText className="h-3 w-3" />,
|
||||
itemName: (page: IWorkspaceDefaultSearchResult) => (
|
||||
<h6>
|
||||
<span className="text-custom-text-300 text-xs">{page.project__identifier}</span> {page.name}
|
||||
<span className="text-xs text-custom-text-300">{page.project__identifier}</span> {page.name}
|
||||
</h6>
|
||||
),
|
||||
path: (page: IWorkspaceDefaultSearchResult) =>
|
||||
|
|
|
|||
|
|
@ -65,11 +65,11 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
|
|||
{shortcut.keys.split(",").map((key) => (
|
||||
<div key={key} className="flex items-center gap-1">
|
||||
{key === "Ctrl" ? (
|
||||
<div className="grid place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 h-6 min-w-[1.5rem] px-1.5">
|
||||
<div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5">
|
||||
<Command className="h-2.5 w-2.5 text-custom-text-200" />
|
||||
</div>
|
||||
) : (
|
||||
<kbd className="grid place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 h-6 min-w-[1.5rem] px-1.5 text-[10px] text-custom-text-200">
|
||||
<kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
|
||||
{key}
|
||||
</kbd>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
|
|||
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed h-full w-full inset-0 z-20 overflow-y-auto">
|
||||
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
|
@ -47,8 +47,8 @@ export const ShortcutsModal: FC<Props> = (props) => {
|
|||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="h-full w-full">
|
||||
<div className="h-full w-full grid place-items-center p-5">
|
||||
<div className="flex flex-col rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all p-5 space-y-4 h-[61vh] w-full sm:w-[28rem] overflow-hidden">
|
||||
<div className="grid h-full w-full place-items-center p-5">
|
||||
<div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
|
||||
<Dialog.Title as="h3" className="flex justify-between">
|
||||
<span className="text-lg font-medium">Keyboard shortcuts</span>
|
||||
<button type="button" onClick={handleClose}>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ export const EmptyState: React.FC<Props> = ({
|
|||
secondaryButton,
|
||||
disabled = false,
|
||||
}) => (
|
||||
<div className={`flex items-center justify-center h-full w-full`}>
|
||||
<div className="text-center flex flex-col items-center w-full">
|
||||
<div className={`flex h-full w-full items-center justify-center`}>
|
||||
<div className="flex w-full flex-col items-center text-center">
|
||||
<Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
|
||||
<h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
|
||||
{description && <p className="text-custom-text-300 mb-7 sm:mb-8 px-5">{description}</p>}
|
||||
<h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
|
||||
{description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
|
||||
<div className="flex items-center gap-4">
|
||||
{primaryButton && (
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -11,21 +11,21 @@ export const LatestFeatureBlock = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16">
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className="text-sm text-left text-onboarding-text-100">
|
||||
<div className="mx-auto mt-16 flex rounded-[3.5px] border border-onboarding-border-200 bg-onboarding-background-100 py-2 sm:w-96">
|
||||
<Lightbulb className="mx-3 mr-2 h-7 w-7" />
|
||||
<p className="text-left text-sm text-onboarding-text-100">
|
||||
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
|
||||
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
|
||||
<span className="text-sm font-medium underline hover:cursor-pointer">Learn more</span>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
|
||||
<div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
|
||||
<div className="h-[90%]">
|
||||
<Image
|
||||
src={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`rounded-md h-full ml-10 -mt-2 ${
|
||||
className={`-mt-2 ml-10 h-full rounded-md ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -41,18 +41,18 @@ export const NewEmptyState: React.FC<Props> = ({
|
|||
setIsHovered(false);
|
||||
};
|
||||
return (
|
||||
<div className=" flex flex-col justify-center items-center h-full w-full ">
|
||||
<div className="border border-custom-border-200 rounded-xl px-10 py-7 flex flex-col gap-5 max-w-6xl m-5 md:m-16 shadow-sm">
|
||||
<h3 className="font-semibold text-2xl">{title}</h3>
|
||||
<div className=" flex h-full w-full flex-col items-center justify-center ">
|
||||
<div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
|
||||
<h3 className="text-2xl font-semibold">{title}</h3>
|
||||
{description && <p className=" text-lg">{description}</p>}
|
||||
<div className="relative w-full max-w-6xl">
|
||||
<Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-start relative">
|
||||
<div className="relative flex items-start justify-center">
|
||||
{primaryButton && (
|
||||
<Button
|
||||
className={`max-w-min m-3 relative !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
|
||||
className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
|
||||
size="lg"
|
||||
variant="primary"
|
||||
onClick={primaryButton.onClick}
|
||||
|
|
@ -62,12 +62,12 @@ export const NewEmptyState: React.FC<Props> = ({
|
|||
<div
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className={`bg-blue-300 absolute ${
|
||||
className={`absolute bg-blue-300 ${
|
||||
comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
|
||||
} h-2.5 w-2.5 z-10 rounded-full animate-ping`}
|
||||
} z-10 h-2.5 w-2.5 animate-ping rounded-full`}
|
||||
/>
|
||||
<div
|
||||
className={`bg-blue-400/40 absolute ${
|
||||
className={`absolute bg-blue-400/40 ${
|
||||
comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
|
||||
} h-1.5 w-1.5 rounded-full`}
|
||||
/>
|
||||
|
|
@ -77,29 +77,29 @@ export const NewEmptyState: React.FC<Props> = ({
|
|||
isHovered &&
|
||||
(comicBox.direction === "right" ? (
|
||||
<div
|
||||
className={`flex max-w-sm absolute top-0 left-1/2 ${
|
||||
className={`absolute left-1/2 top-0 flex max-w-sm ${
|
||||
comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
|
||||
} pb-5`}
|
||||
>
|
||||
<div className="relative w-0 h-0 border-t-[11px] mt-5 border-custom-border-200 border-b-[11px] border-r-[11px] border-y-transparent">
|
||||
<div className="absolute top-[-10px] right-[-12px] w-0 h-0 border-t-[10px] border-custom-background-100 border-b-[10px] border-r-[10px] border-y-transparent" />
|
||||
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
|
||||
<div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
|
||||
</div>
|
||||
<div className="border border-custom-border-200 rounded-md bg-custom-background-100">
|
||||
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
|
||||
<h1 className="p-5">
|
||||
<h3 className="font-semibold text-lg">{comicBox?.title}</h3>
|
||||
<h4 className="text-sm mt-1">{comicBox?.description}</h4>
|
||||
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
|
||||
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-row-reverse max-w-sm absolute top-0 right-1/2 mr-[90px] pb-5">
|
||||
<div className="relative w-0 h-0 border-t-[11px] mt-5 border-custom-border-200 border-b-[11px] border-l-[11px] border-y-transparent">
|
||||
<div className="absolute top-[-10px] left-[-12px] w-0 h-0 border-t-[10px] border-custom-background-100 border-b-[10px] border-l-[10px] border-y-transparent" />
|
||||
<div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
|
||||
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
|
||||
<div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
|
||||
</div>
|
||||
<div className="border border-custom-border-200 rounded-md bg-custom-background-100">
|
||||
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
|
||||
<h1 className="p-5">
|
||||
<h3 className="font-semibold text-lg">{comicBox?.title}</h3>
|
||||
<h4 className="text-sm mt-1">{comicBox?.description}</h4>
|
||||
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
|
||||
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 h-full w-full">
|
||||
<div className="grid place-items-center h-full w-full p-4">
|
||||
<div className="grid h-full w-full place-items-center p-4">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
|
@ -51,8 +51,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 shadow-custom-shadow-md min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
|
||||
<div className="flex flex-col p-4 max-h-[90vh] w-full">
|
||||
<Dialog.Panel className="relative min-w-[100%] overflow-hidden rounded-lg bg-custom-background-100 shadow-custom-shadow-md sm:min-w-[50%] sm:max-w-[50%]">
|
||||
<div className="flex max-h-[90vh] w-full flex-col p-4">
|
||||
<Dialog.Title as="h3" className="flex items-center justify-between text-lg font-semibold">
|
||||
<span>Product Updates</span>
|
||||
<span>
|
||||
|
|
@ -62,7 +62,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||
</span>
|
||||
</Dialog.Title>
|
||||
{updates && updates.length > 0 ? (
|
||||
<div className="h-full overflow-y-auto mt-4 space-y-4">
|
||||
<div className="mt-4 h-full space-y-4 overflow-y-auto">
|
||||
{updates.map((item, index) => (
|
||||
<React.Fragment key={item.id}>
|
||||
<div className="flex items-center gap-3 text-xs text-custom-text-200">
|
||||
|
|
@ -81,8 +81,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid place-items-center w-full mt-4">
|
||||
<Loader className="space-y-6 w-full">
|
||||
<div className="mt-4 grid w-full place-items-center">
|
||||
<Loader className="w-full space-y-6">
|
||||
<div className="space-y-3">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="20px" width="80%" />
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
|
|||
}`}
|
||||
target={activity.issue === null ? "_self" : "_blank"}
|
||||
rel={activity.issue === null ? "" : "noopener noreferrer"}
|
||||
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
{activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
|
||||
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
|
||||
|
|
@ -66,7 +66,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
|
|||
}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center hover:underline"
|
||||
className="inline-flex items-center font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
{activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
|
||||
</a>
|
||||
|
|
@ -86,7 +86,7 @@ const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; works
|
|||
|
||||
return (
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full flex-shrink-0"
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: workspaceLabels?.find((l) => l.id === labelId)?.color ?? "#000000",
|
||||
}}
|
||||
|
|
@ -160,7 +160,7 @@ const activityDetails: {
|
|||
href={`${activity.new_value}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
attachment
|
||||
<RocketIcon size={12} color="#6b7280" />
|
||||
|
|
@ -236,7 +236,7 @@ const activityDetails: {
|
|||
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
|
||||
|
|
@ -251,7 +251,7 @@ const activityDetails: {
|
|||
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
|
||||
|
|
@ -266,7 +266,7 @@ const activityDetails: {
|
|||
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.old_value}</span>
|
||||
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
|
||||
|
|
@ -354,9 +354,9 @@ const activityDetails: {
|
|||
return (
|
||||
<>
|
||||
added a new label{" "}
|
||||
<span className="inline-flex truncate items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs w-min whitespace-nowrap">
|
||||
<span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
|
||||
<LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
|
||||
<span className="font-medium flex-shrink truncate text-custom-text-100">{activity.new_value}</span>
|
||||
<span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span>
|
||||
</span>
|
||||
{showIssue && (
|
||||
<span>
|
||||
|
|
@ -370,9 +370,9 @@ const activityDetails: {
|
|||
return (
|
||||
<>
|
||||
removed the label{" "}
|
||||
<span className="inline-flex truncate items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs w-min whitespace-nowrap">
|
||||
<span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
|
||||
<LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
|
||||
<span className="font-medium flex-shrink truncate text-custom-text-100">{activity.old_value}</span>
|
||||
<span className="flex-shrink truncate font-medium text-custom-text-100">{activity.old_value}</span>
|
||||
</span>
|
||||
{showIssue && (
|
||||
<span>
|
||||
|
|
@ -395,7 +395,7 @@ const activityDetails: {
|
|||
href={`${activity.new_value}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
link
|
||||
<RocketIcon size={12} color="#6b7280" />
|
||||
|
|
@ -417,7 +417,7 @@ const activityDetails: {
|
|||
href={`${activity.old_value}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
link
|
||||
<RocketIcon size={12} color="#6b7280" />
|
||||
|
|
@ -439,7 +439,7 @@ const activityDetails: {
|
|||
href={`${activity.old_value}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
link
|
||||
<RocketIcon size={12} color="#6b7280" />
|
||||
|
|
@ -466,7 +466,7 @@ const activityDetails: {
|
|||
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
|
||||
|
|
@ -481,7 +481,7 @@ const activityDetails: {
|
|||
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
|
||||
|
|
@ -496,7 +496,7 @@ const activityDetails: {
|
|||
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.old_value}</span>
|
||||
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
|
||||
|
|
|
|||
|
|
@ -119,10 +119,10 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
|
|||
)}
|
||||
</div>
|
||||
{watch("filterType") === "range" && (
|
||||
<h6 className="text-xs flex items-center gap-1">
|
||||
<h6 className="flex items-center gap-1 text-xs">
|
||||
<span className="text-custom-text-200">After:</span>
|
||||
<span>{renderShortDateWithYearFormat(watch("date1"))}</span>
|
||||
<span className="text-custom-text-200 ml-1">Before:</span>
|
||||
<span className="ml-1 text-custom-text-200">Before:</span>
|
||||
{!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
|
||||
</h6>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm">
|
||||
<div
|
||||
ref={imagePickerRef}
|
||||
className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl"
|
||||
className="flex h-96 w-80 flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
|
||||
>
|
||||
<Tab.Group>
|
||||
<Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
|
||||
|
|
@ -164,7 +164,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
<Tab
|
||||
key={tab.key}
|
||||
className={({ selected }) =>
|
||||
`rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
|
||||
`rounded px-4 py-1 text-center text-sm outline-none transition-colors ${
|
||||
selected ? "bg-custom-primary text-white" : "text-custom-text-100"
|
||||
}`
|
||||
}
|
||||
|
|
@ -176,7 +176,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
</Tab.List>
|
||||
<Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
|
||||
{(unsplashImages || !unsplashError) && (
|
||||
<Tab.Panel className="h-full w-full space-y-4 mt-4">
|
||||
<Tab.Panel className="mt-4 h-full w-full space-y-4">
|
||||
<div className="flex gap-x-2">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -190,7 +190,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
onChange={(e) => setFormData({ ...formData, search: e.target.value })}
|
||||
ref={ref}
|
||||
placeholder="Search for images"
|
||||
className="text-sm w-full"
|
||||
className="w-full text-sm"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -213,13 +213,13 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
<img
|
||||
src={image.urls.small}
|
||||
alt={image.alt_description}
|
||||
className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
|
||||
className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
|
||||
<p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="grid grid-cols-4 gap-4">
|
||||
|
|
@ -236,7 +236,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
</Tab.Panel>
|
||||
)}
|
||||
{(!projectCoverImages || projectCoverImages.length !== 0) && (
|
||||
<Tab.Panel className="h-full w-full space-y-4 mt-4">
|
||||
<Tab.Panel className="mt-4 h-full w-full space-y-4">
|
||||
{projectCoverImages ? (
|
||||
projectCoverImages.length > 0 ? (
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
|
|
@ -252,13 +252,13 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
<img
|
||||
src={image}
|
||||
alt={`Default project cover image- ${index}`}
|
||||
className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
|
||||
className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
|
||||
<p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="grid grid-cols-4 gap-4 pt-4">
|
||||
|
|
@ -274,9 +274,9 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</Tab.Panel>
|
||||
)}
|
||||
<Tab.Panel className="h-full w-full mt-4">
|
||||
<div className="w-full h-full flex flex-col gap-y-2">
|
||||
<div className="flex items-center gap-3 w-full flex-1">
|
||||
<Tab.Panel className="mt-4 h-full w-full">
|
||||
<div className="flex h-full w-full flex-col gap-y-2">
|
||||
<div className="flex w-full flex-1 items-center gap-3">
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
|
||||
|
|
@ -287,7 +287,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 right-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
|
||||
className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
|
|
@ -320,11 +320,11 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
|||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-custom-text-200 text-sm">
|
||||
<p className="text-sm text-custom-text-200">
|
||||
File formats supported- .jpeg, .jpg, .png, .webp, .svg
|
||||
</p>
|
||||
|
||||
<div className="flex items-start h-12 justify-end gap-2">
|
||||
<div className="flex h-12 items-start justify-end gap-2">
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
|
|||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<div className="fixed inset-0 bg-custom-backdrop transition-opacity z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto bg-custom-backdrop p-4 transition-opacity sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
|
@ -121,7 +121,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
|
|||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex items-center justify-center w-full ">
|
||||
<Dialog.Panel className="relative flex w-full items-center justify-center ">
|
||||
<div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
|
||||
<form>
|
||||
<Combobox
|
||||
|
|
@ -137,7 +137,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
|
|||
>
|
||||
<div className="relative m-1">
|
||||
<Search
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
|
|
@ -155,7 +155,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
|
|||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
|
||||
<h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">
|
||||
Select issues to delete
|
||||
</h2>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -126,24 +126,24 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
|||
>
|
||||
<div className="relative m-1">
|
||||
<Search
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 text-sm placeholder:text-custom-text-400"
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
|
||||
placeholder="Type to search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-4 text-custom-text-200 text-[0.825rem] p-2">
|
||||
<div className="flex flex-col-reverse gap-4 p-2 text-[0.825rem] text-custom-text-200 sm:flex-row sm:items-center sm:justify-between">
|
||||
{selectedIssues.length > 0 ? (
|
||||
<div className="flex items-center gap-2 flex-wrap mt-1">
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
{selectedIssues.map((issue) => (
|
||||
<div
|
||||
key={issue.id}
|
||||
className="flex items-center gap-1 text-xs border border-custom-border-200 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
|
||||
className="flex items-center gap-1 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 py-1 pl-2 text-xs text-custom-text-100"
|
||||
>
|
||||
{issue.project__identifier}-{issue.sequence_id}
|
||||
<button
|
||||
|
|
@ -157,14 +157,14 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-min text-xs border border-custom-border-200 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
|
||||
<div className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
|
||||
No issues selected
|
||||
</div>
|
||||
)}
|
||||
{workspaceLevelToggle && (
|
||||
<Tooltip tooltipContent="Toggle workspace level search">
|
||||
<div
|
||||
className={`flex-shrink-0 flex items-center gap-1 text-xs cursor-pointer ${
|
||||
className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
|
||||
isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -186,7 +186,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
|||
|
||||
<Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
|
||||
{searchTerm !== "" && (
|
||||
<h5 className="text-[0.825rem] text-custom-text-200 mx-2">
|
||||
<h5 className="mx-2 text-[0.825rem] text-custom-text-200">
|
||||
Search results for{" "}
|
||||
<span className="text-custom-text-100">
|
||||
{'"'}
|
||||
|
|
@ -226,7 +226,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
|||
htmlFor={`issue-${issue.id}`}
|
||||
value={issue}
|
||||
className={({ active }) =>
|
||||
`group flex items-center justify-between gap-2 w-full cursor-pointer select-none rounded-md px-3 py-2 text-custom-text-200 ${
|
||||
`group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
|
||||
active ? "bg-custom-background-80 text-custom-text-100" : ""
|
||||
} ${selected ? "text-custom-text-100" : ""}`
|
||||
}
|
||||
|
|
@ -247,7 +247,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
|||
<a
|
||||
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
|
||||
target="_blank"
|
||||
className="group-hover:block hidden relative z-1 text-custom-text-200 hover:text-custom-text-100"
|
||||
className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -117,11 +117,11 @@ export const GptAssistantModal: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`absolute ${inset} z-20 w-full flex flex-col space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow overflow-hidden ${
|
||||
className={`absolute ${inset} z-20 flex w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
|
||||
isOpen ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<div className="max-h-72 overflow-y-auto space-y-4 vertical-scroll-enable">
|
||||
<div className="vertical-scroll-enable max-h-72 space-y-4 overflow-y-auto">
|
||||
{((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
|
||||
<div className="text-sm">
|
||||
Content:
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export const LinkModal: FC<Props> = (props) => {
|
|||
</Dialog.Title>
|
||||
<div className="mt-2 space-y-3">
|
||||
<div>
|
||||
<label htmlFor="url" className="text-custom-text-200 mb-2">
|
||||
<label htmlFor="url" className="mb-2 text-custom-text-200">
|
||||
URL
|
||||
</label>
|
||||
<Controller
|
||||
|
|
@ -124,7 +124,7 @@ export const LinkModal: FC<Props> = (props) => {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="title" className="text-custom-text-200 mb-2">
|
||||
<label htmlFor="title" className="mb-2 text-custom-text-200">
|
||||
{`Title (optional)`}
|
||||
</label>
|
||||
<Controller
|
||||
|
|
@ -158,8 +158,8 @@ export const LinkModal: FC<Props> = (props) => {
|
|||
? "Updating Link..."
|
||||
: "Update Link"
|
||||
: isSubmitting
|
||||
? "Adding Link..."
|
||||
: "Add Link"}
|
||||
? "Adding Link..."
|
||||
: "Add Link"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -130,14 +130,14 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
|
|||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
|
||||
className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<img
|
||||
src={image ? URL.createObjectURL(image) : value ? value : ""}
|
||||
alt="image"
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
|
||||
className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -161,7 +161,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="my-4 text-custom-text-200 text-sm">
|
||||
<p className="my-4 text-sm text-custom-text-200">
|
||||
File formats supported- .jpeg, .jpg, .png, .webp, .svg
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
|
|||
|
|
@ -137,14 +137,14 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
|
|||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
|
||||
className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<img
|
||||
src={image ? URL.createObjectURL(image) : value ? value : ""}
|
||||
alt="image"
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
|
||||
className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -168,7 +168,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="my-4 text-custom-text-200 text-sm">
|
||||
<p className="my-4 text-sm text-custom-text-200">
|
||||
File formats supported- .jpeg, .jpg, .png, .webp, .svg
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ export const ReactionSelector: React.FC<Props> = (props) => {
|
|||
} group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
|
||||
>
|
||||
<span
|
||||
className={`flex justify-center items-center rounded-md px-2 ${
|
||||
size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
|
||||
className={`flex items-center justify-center rounded-md px-2 ${
|
||||
size === "sm" ? "h-6 w-6" : size === "md" ? "h-7 w-7" : "h-8 w-8"
|
||||
}`}
|
||||
>
|
||||
<SmilePlus className="text-custom-text-100 h-3.5 w-3.5" />
|
||||
<SmilePlus className="h-3.5 w-3.5 text-custom-text-100" />
|
||||
</span>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
|
|
@ -44,11 +44,11 @@ export const ReactionSelector: React.FC<Props> = (props) => {
|
|||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel
|
||||
className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
|
||||
className={`absolute -left-2 z-10 bg-custom-sidebar-background-100 ${
|
||||
position === "top" ? "-top-12" : "-bottom-12"
|
||||
}`}
|
||||
>
|
||||
<div className="bg-custom-sidebar-background-100 border border-custom-border-200 shadow-custom-shadow-sm rounded-md p-1">
|
||||
<div className="rounded-md border border-custom-border-200 bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
|
||||
<div className="flex gap-x-1">
|
||||
{reactionEmojis.map((emoji) => (
|
||||
<button
|
||||
|
|
@ -58,7 +58,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
|
|||
onSelect(emoji);
|
||||
closePopover();
|
||||
}}
|
||||
className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
|
||||
className="flex select-none items-center justify-between rounded-md p-1 text-sm hover:bg-custom-sidebar-background-90"
|
||||
>
|
||||
{renderEmoji(emoji)}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -35,14 +35,14 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
|
|||
<>
|
||||
{links.map((link) => (
|
||||
<div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
|
||||
<div className="flex items-start justify-between gap-2 w-full">
|
||||
<div className="flex items-start truncate gap-2">
|
||||
<div className="flex w-full items-start justify-between gap-2">
|
||||
<div className="flex items-start gap-2 truncate">
|
||||
<span className="py-1">
|
||||
<LinkIcon className="h-3 w-3 flex-shrink-0" />
|
||||
</span>
|
||||
<Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url}>
|
||||
<span
|
||||
className="text-xs truncate cursor-pointer"
|
||||
className="cursor-pointer truncate text-xs"
|
||||
onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
|
||||
>
|
||||
{link.title && link.title !== "" ? link.title : link.url}
|
||||
|
|
@ -51,7 +51,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
|
|||
</div>
|
||||
|
||||
{!isNotAllowed && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0 z-[1]">
|
||||
<div className="z-[1] flex flex-shrink-0 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
|
||||
|
|
@ -61,7 +61,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
|
|||
handleEditLink(link);
|
||||
}}
|
||||
>
|
||||
<Pencil className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
|
||||
<Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
|
||||
</button>
|
||||
<a
|
||||
href={link.url}
|
||||
|
|
@ -69,7 +69,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
|
|||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
|
||||
>
|
||||
<ExternalLinkIcon className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
|
||||
<ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -86,7 +86,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
|
|||
)}
|
||||
</div>
|
||||
<div className="px-5">
|
||||
<p className="text-xs mt-0.5 text-custom-text-300 stroke-[1.5]">
|
||||
<p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
|
||||
Added {timeAgo(link.created_at)}
|
||||
<br />
|
||||
by{" "}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<div className="flex w-full items-center justify-center">
|
||||
<LineGraph
|
||||
animate
|
||||
curve="monotoneX"
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
className={`flex w-full items-center gap-2 justify-between rounded-md ${
|
||||
className={`flex w-full items-center justify-between gap-2 rounded-md ${
|
||||
noBackground ? "" : "bg-custom-background-90"
|
||||
} p-0.5
|
||||
${module ? "text-xs" : "text-sm"}`}
|
||||
|
|
@ -125,7 +125,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
|
||||
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
|
||||
<Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
|
||||
{distribution.assignees.length > 0 ? (
|
||||
distribution.assignees.map((assignee, index) => {
|
||||
if (assignee.assignee_id)
|
||||
|
|
@ -174,15 +174,15 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||
);
|
||||
})
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-2 h-full">
|
||||
<div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
|
||||
<div className="flex h-full flex-col items-center justify-center gap-2">
|
||||
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
|
||||
<Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
|
||||
</div>
|
||||
<h6 className="text-base text-custom-text-300">No assignees yet</h6>
|
||||
</div>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
|
||||
<Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
|
||||
{distribution.labels.length > 0 ? (
|
||||
distribution.labels.map((label, index) => (
|
||||
<SingleProgressStats
|
||||
|
|
@ -214,15 +214,15 @@ export const SidebarProgressStats: React.FC<Props> = ({
|
|||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-2 h-full">
|
||||
<div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
|
||||
<div className="flex h-full flex-col items-center justify-center gap-2">
|
||||
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
|
||||
<Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
|
||||
</div>
|
||||
<h6 className="text-base text-custom-text-300">No labels yet</h6>
|
||||
</div>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
|
||||
<Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
|
||||
{Object.keys(groupedIssues).map((group, index) => (
|
||||
<SingleProgressStats
|
||||
key={index}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
|
|||
selected = false,
|
||||
}) => (
|
||||
<div
|
||||
className={`flex w-full items-center gap-4 justify-between rounded-sm p-1 text-xs ${
|
||||
className={`flex w-full items-center justify-between gap-4 rounded-sm p-1 text-xs ${
|
||||
onClick ? "cursor-pointer hover:bg-custom-background-90" : ""
|
||||
} ${selected ? "bg-custom-background-90" : ""}`}
|
||||
onClick={onClick}
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.background && <p className="text-xs text-red-500 mt-1">{errors.background.message}</p>}
|
||||
{errors.background && <p className="mt-1 text-xs text-red-500">{errors.background.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,7 +127,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.text && <p className="text-xs text-red-500 mt-1">{errors.text.message}</p>}
|
||||
{errors.text && <p className="mt-1 text-xs text-red-500">{errors.text.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.primary && <p className="text-xs text-red-500 mt-1">{errors.primary.message}</p>}
|
||||
{errors.primary && <p className="mt-1 text-xs text-red-500">{errors.primary.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -180,7 +180,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
|||
)}
|
||||
/>
|
||||
{errors.sidebarBackground && (
|
||||
<p className="text-xs text-red-500 mt-1">{errors.sidebarBackground.message}</p>
|
||||
<p className="mt-1 text-xs text-red-500">{errors.sidebarBackground.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -207,7 +207,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.sidebarText && <p className="text-xs text-red-500 mt-1">{errors.sidebarText.message}</p>}
|
||||
{errors.sidebarText && <p className="mt-1 text-xs text-red-500">{errors.sidebarText.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
|
||||
if (!cycle)
|
||||
return (
|
||||
<div className="h-full grid place-items-center text-center">
|
||||
<div className="grid h-full place-items-center text-center">
|
||||
<div className="space-y-2">
|
||||
<div className="mx-auto flex justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
|
||||
|
|
@ -117,7 +117,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
<h4 className="text-sm text-custom-text-200">No active cycle</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-sm outline-none"
|
||||
className="text-sm text-custom-primary-100 outline-none"
|
||||
onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
|
||||
>
|
||||
Create a new cycle
|
||||
|
|
@ -173,11 +173,11 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
}));
|
||||
|
||||
return (
|
||||
<div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-200">
|
||||
<div className="grid grid-cols-1 divide-y border-custom-border-200 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
|
||||
<div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
|
||||
<div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
|
||||
<div className="flex flex-col text-xs">
|
||||
<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 justify-between gap-5 rounded-b-[10px] p-4">
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="h-5 w-5">
|
||||
|
|
@ -187,12 +187,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
cycleStatus === "current"
|
||||
? "#09A953"
|
||||
: cycleStatus === "upcoming"
|
||||
? "#F7AE59"
|
||||
: cycleStatus === "completed"
|
||||
? "#3F76FF"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
: ""
|
||||
? "#F7AE59"
|
||||
: cycleStatus === "completed"
|
||||
? "#3F76FF"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -207,12 +207,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
cycleStatus === "current"
|
||||
? "bg-green-600/5 text-green-600"
|
||||
: cycleStatus === "upcoming"
|
||||
? "bg-orange-300/5 text-orange-300"
|
||||
: cycleStatus === "completed"
|
||||
? "bg-blue-500/5 text-blue-500"
|
||||
: cycleStatus === "draft"
|
||||
? "bg-neutral-400/5 text-neutral-400"
|
||||
: ""
|
||||
? "bg-orange-300/5 text-orange-300"
|
||||
: cycleStatus === "completed"
|
||||
? "bg-blue-500/5 text-blue-500"
|
||||
: cycleStatus === "draft"
|
||||
? "bg-neutral-400/5 text-neutral-400"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{cycleStatus === "current" ? (
|
||||
|
|
@ -250,7 +250,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
handleRemoveFromFavorites(e);
|
||||
}}
|
||||
>
|
||||
<Star className="h-4 w-4 text-orange-400 fill-orange-400" />
|
||||
<Star className="h-4 w-4 fill-orange-400 text-orange-400" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
|
|
@ -317,21 +317,21 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
</div>
|
||||
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
|
||||
<span className="bg-custom-primary text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-custom-primary/90">
|
||||
<span className="w-full rounded-md bg-custom-primary px-4 py-2 text-center text-sm font-medium text-white hover:bg-custom-primary/90">
|
||||
View Cycle
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-200 md:divide-y-0 md:divide-x md:grid-cols-2">
|
||||
<div className="col-span-2 grid grid-cols-1 divide-y border-custom-border-200 md:grid-cols-2 md:divide-x md:divide-y-0">
|
||||
<div className="flex h-60 flex-col border-custom-border-200">
|
||||
<div className="flex h-full w-full flex-col text-custom-text-200 p-4">
|
||||
<div className="flex h-full w-full flex-col p-4 text-custom-text-200">
|
||||
<div className="flex w-full items-center gap-2 py-1">
|
||||
<span>Progress</span>
|
||||
<LinearProgressIndicator data={progressIndicatorData} />
|
||||
</div>
|
||||
<div className="flex flex-col mt-2 gap-1 items-center">
|
||||
<div className="mt-2 flex flex-col items-center gap-1">
|
||||
{Object.keys(groupedIssues).map((group, index) => (
|
||||
<SingleProgressStats
|
||||
key={index}
|
||||
|
|
@ -353,12 +353,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-custom-border-200 h-60 overflow-y-scroll">
|
||||
<div className="h-60 overflow-y-scroll border-custom-border-200">
|
||||
<ActiveCycleProgressStats cycle={cycle} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 divide-y border-custom-border-200 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
|
||||
<div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
|
||||
<div className="flex flex-col justify-between p-4">
|
||||
<div>
|
||||
<div className="text-custom-primary">High Priority Issues</div>
|
||||
|
|
@ -369,7 +369,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
<div
|
||||
key={issue.id}
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)}
|
||||
className="flex flex-wrap cursor-pointer rounded-md items-center justify-between gap-2 border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
|
||||
className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div>
|
||||
|
|
@ -388,7 +388,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className={`grid h-6 w-6 place-items-center items-center rounded border shadow-sm flex-shrink-0 ${
|
||||
className={`grid h-6 w-6 flex-shrink-0 place-items-center items-center rounded border shadow-sm ${
|
||||
issue.priority === "urgent"
|
||||
? "border-red-500/20 bg-red-500/20 text-red-500"
|
||||
: "border-orange-500/20 bg-orange-500/20 text-orange-500"
|
||||
|
|
@ -414,7 +414,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
|||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="grid place-items-center text-custom-text-200 text-sm text-center">
|
||||
<div className="grid place-items-center text-center text-sm text-custom-text-200">
|
||||
No issues present in the cycle.
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
|
|||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
className="flex sticky top-0 z-10 bg-custom-background-100 w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
|
||||
className="sticky top-0 z-10 flex w-full flex-wrap items-center justify-start gap-4 bg-custom-background-100 px-4 pb-1 pt-4 text-sm"
|
||||
>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-200 ${
|
||||
`rounded-3xl border border-custom-border-200 px-3 py-1 text-custom-text-100 ${
|
||||
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
|
||||
}`
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
|
|||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-200 ${
|
||||
`rounded-3xl border border-custom-border-200 px-3 py-1 text-custom-text-100 ${
|
||||
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
|
||||
}`
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
|
|||
</Tab.List>
|
||||
{cycle && cycle.total_issues > 0 ? (
|
||||
<Tab.Panels as={Fragment}>
|
||||
<Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
|
||||
<Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-custom-text-200">
|
||||
{cycle.distribution?.assignees?.map((assignee, index) => {
|
||||
if (assignee.assignee_id)
|
||||
return (
|
||||
|
|
@ -104,7 +104,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
|
|||
);
|
||||
})}
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
|
||||
<Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-custom-text-200">
|
||||
{cycle.distribution?.labels?.map((label, index) => (
|
||||
<SingleProgressStats
|
||||
key={label.label_id ?? `no-label-${index}`}
|
||||
|
|
@ -126,7 +126,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
|
|||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
) : (
|
||||
<div className="grid place-items-center text-custom-text-200 text-sm text-center mt-4">
|
||||
<div className="mt-4 grid place-items-center text-center text-sm text-custom-text-200">
|
||||
No issues present in the cycle.
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
|
|||
{peekCycle && (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex flex-col gap-3.5 h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
|
||||
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
|
||||
style={{
|
||||
boxShadow:
|
||||
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
|
|||
? cycleTotalIssues === 0
|
||||
? "0 Issue"
|
||||
: cycleTotalIssues === cycle.completed_issues
|
||||
? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
|
||||
: `${cycle.completed_issues}/${cycleTotalIssues} Issues`
|
||||
? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
|
||||
: `${cycle.completed_issues}/${cycleTotalIssues} Issues`
|
||||
: "0 Issue";
|
||||
|
||||
const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
|
|||
<>
|
||||
{cycles.length > 0 ? (
|
||||
<div className="h-full w-full">
|
||||
<div className="flex justify-between h-full w-full">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div
|
||||
className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
|
||||
className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
|
||||
peekCycle
|
||||
? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
|
||||
: "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
|
||||
|
|
@ -43,7 +43,7 @@ export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full grid place-items-center text-center">
|
||||
<div className="grid h-full place-items-center text-center">
|
||||
<div className="space-y-2">
|
||||
<div className="mx-auto flex justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
|
||||
|
|
@ -57,7 +57,7 @@ export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
|
|||
<h4 className="text-sm text-custom-text-200">{filter === "all" ? "No cycles" : `No ${filter} cycles`}</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-sm outline-none"
|
||||
className="text-sm text-custom-primary-100 outline-none"
|
||||
onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
|
||||
>
|
||||
Create a new cycle
|
||||
|
|
|
|||
|
|
@ -153,19 +153,19 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
|||
projectId={projectId}
|
||||
/>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
|
||||
<div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="flex items-center gap-3 w-full truncate">
|
||||
<div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
|
||||
<div className="flex w-full items-center gap-3 truncate">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="flex-shrink-0">
|
||||
<CircularProgressIndicator size={38} percentage={progress}>
|
||||
{isCompleted ? (
|
||||
progress === 100 ? (
|
||||
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
) : (
|
||||
<span className="text-sm text-custom-primary-100">{`!`}</span>
|
||||
)
|
||||
) : progress === 100 ? (
|
||||
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
) : (
|
||||
<span className="text-xs text-custom-text-300">{`${progress}%`}</span>
|
||||
)}
|
||||
|
|
@ -177,20 +177,20 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
|||
<CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
|
||||
</span>
|
||||
<Tooltip tooltipContent={cycle.name} position="top">
|
||||
<span className="text-base font-medium truncate">{cycle.name}</span>
|
||||
<span className="truncate text-base font-medium">{cycle.name}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={openCycleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
|
||||
<button onClick={openCycleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
|
||||
<Info className="h-4 w-4 text-custom-text-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
|
||||
<div className="flex w-full items-center justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
|
||||
<div className="flex items-center justify-center">
|
||||
{currentCycle && (
|
||||
<span
|
||||
className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
|
||||
className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
|
||||
style={{
|
||||
color: currentCycle.color,
|
||||
backgroundColor: `${currentCycle.color}20`,
|
||||
|
|
@ -204,7 +204,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
|||
</div>
|
||||
|
||||
{renderDate && (
|
||||
<span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
|
||||
<span className="flex w-28 items-center justify-center gap-2 text-xs text-custom-text-300">
|
||||
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
|
||||
{" - "}
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
|
|
@ -212,7 +212,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
|||
)}
|
||||
|
||||
<Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
|
||||
<div className="flex items-center justify-center gap-1 cursor-default w-16">
|
||||
<div className="flex w-16 cursor-default items-center justify-center gap-1">
|
||||
{cycle.assignees.length > 0 ? (
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{cycle.assignees.map((assignee) => (
|
||||
|
|
@ -220,7 +220,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
|||
))}
|
||||
</AvatarGroup>
|
||||
) : (
|
||||
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
|
||||
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
|
||||
<User2 className="h-4 w-4 text-custom-text-400" />
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -229,7 +229,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
|||
|
||||
{cycle.is_favorite ? (
|
||||
<button type="button" onClick={handleRemoveFromFavorites}>
|
||||
<Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
|
||||
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={handleAddToFavorites}>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,10 @@ export interface ICyclesList {
|
|||
export const CyclesList: FC<ICyclesList> = observer((props) => {
|
||||
const { cycles, filter, workspaceSlug, projectId } = props;
|
||||
|
||||
const { commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
trackEvent: { setTrackElement },
|
||||
} = useMobxStore();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -27,8 +30,8 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
|
|||
<>
|
||||
{cycles.length > 0 ? (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="flex justify-between h-full w-full">
|
||||
<div className="flex flex-col h-full w-full overflow-y-auto">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
{cycles.map((cycle) => (
|
||||
<CyclesListItem cycle={cycle} workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
))}
|
||||
|
|
@ -40,7 +43,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full grid place-items-center text-center">
|
||||
<div className="grid h-full place-items-center text-center">
|
||||
<div className="space-y-2">
|
||||
<div className="mx-auto flex justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
|
||||
|
|
@ -56,12 +59,11 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
|
|||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-sm outline-none"
|
||||
className="text-sm text-custom-primary-100 outline-none"
|
||||
onClick={() => {
|
||||
setTrackElement("CYCLES_PAGE_EMPTY-STATE");
|
||||
commandPaletteStore.toggleCreateCycleModal(true)
|
||||
}
|
||||
}
|
||||
commandPaletteStore.toggleCreateCycleModal(true);
|
||||
}}
|
||||
>
|
||||
Create a new cycle
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -34,10 +34,10 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
|
|||
filter === "completed"
|
||||
? cycleStore.projectCompletedCycles
|
||||
: filter === "draft"
|
||||
? cycleStore.projectDraftCycles
|
||||
: filter === "upcoming"
|
||||
? cycleStore.projectUpcomingCycles
|
||||
: cycleStore.projectCycles;
|
||||
? cycleStore.projectDraftCycles
|
||||
: filter === "upcoming"
|
||||
? cycleStore.projectUpcomingCycles
|
||||
: cycleStore.projectCycles;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -66,7 +66,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
|
|||
peekCycle={peekCycle}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3 p-8">
|
||||
<Loader className="grid grid-cols-1 gap-9 p-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Loader.Item height="200px" />
|
||||
<Loader.Item height="200px" />
|
||||
<Loader.Item height="200px" />
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
|
|||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-4">
|
||||
<div className="flex-shrink-0 flex justify-center items-center rounded-full bg-red-500/20 w-12 h-12">
|
||||
<div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20">
|
||||
<AlertTriangle width={16} strokeWidth={2} className="text-red-600" />
|
||||
</div>
|
||||
<div className="text-xl font-medium 2xl:text-2xl">Delete Cycle</div>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export const CycleForm: React.FC<Props> = (props) => {
|
|||
name="name"
|
||||
type="text"
|
||||
placeholder="Cycle Title"
|
||||
className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
|
||||
className="w-full resize-none placeholder:text-sm placeholder:font-medium focus:border-blue-400"
|
||||
value={value}
|
||||
inputSize="md"
|
||||
onChange={onChange}
|
||||
|
|
@ -135,7 +135,7 @@ export const CycleForm: React.FC<Props> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-100 ">
|
||||
<div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
@ -145,8 +145,8 @@ export const CycleForm: React.FC<Props> = (props) => {
|
|||
? "Updating Cycle..."
|
||||
: "Update Cycle"
|
||||
: isSubmitting
|
||||
? "Creating Cycle..."
|
||||
: "Create Cycle"}
|
||||
? "Creating Cycle..."
|
||||
: "Create Cycle"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -15,22 +15,22 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center relative h-full w-full rounded"
|
||||
className="relative flex h-full w-full items-center rounded"
|
||||
style={{
|
||||
backgroundColor:
|
||||
cycleStatus === "current"
|
||||
? "#09a953"
|
||||
: cycleStatus === "upcoming"
|
||||
? "#f7ae59"
|
||||
: cycleStatus === "completed"
|
||||
? "#3f76ff"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
: "",
|
||||
? "#f7ae59"
|
||||
: cycleStatus === "completed"
|
||||
? "#3f76ff"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
: "",
|
||||
}}
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
|
||||
<div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
|
||||
<Tooltip
|
||||
tooltipContent={
|
||||
<div className="space-y-1">
|
||||
|
|
@ -42,7 +42,7 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
|
|||
}
|
||||
position="top-left"
|
||||
>
|
||||
<div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
|
||||
<div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -56,7 +56,7 @@ export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="relative w-full flex items-center gap-2 h-full"
|
||||
className="relative flex h-full w-full items-center gap-2"
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
|
||||
>
|
||||
<ContrastIcon
|
||||
|
|
@ -65,15 +65,15 @@ export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
|
|||
cycleStatus === "current"
|
||||
? "#09a953"
|
||||
: cycleStatus === "upcoming"
|
||||
? "#f7ae59"
|
||||
: cycleStatus === "completed"
|
||||
? "#3f76ff"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
: ""
|
||||
? "#f7ae59"
|
||||
: cycleStatus === "completed"
|
||||
? "#3f76ff"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
<h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
|
||||
<h6 className="flex-grow truncate text-sm font-medium">{data?.name}</h6>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
|
|||
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full overflow-y-auto">
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<GanttChartRoot
|
||||
title="Cycles"
|
||||
loaderTitle="Cycles"
|
||||
|
|
|
|||
|
|
@ -24,7 +24,10 @@ const cycleService = new CycleService();
|
|||
export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
|
||||
const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
|
||||
// store
|
||||
const { cycle: cycleStore, trackEvent: { postHogEventTracker } } = useMobxStore();
|
||||
const {
|
||||
cycle: cycleStore,
|
||||
trackEvent: { postHogEventTracker },
|
||||
} = useMobxStore();
|
||||
// states
|
||||
const [activeProject, setActiveProject] = useState<string>(projectId);
|
||||
// toast
|
||||
|
|
@ -41,13 +44,10 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
|
|||
title: "Success!",
|
||||
message: "Cycle created successfully.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"CYCLE_CREATE",
|
||||
{
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
}
|
||||
);
|
||||
postHogEventTracker("CYCLE_CREATE", {
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
|
|
@ -55,12 +55,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
|
|||
title: "Error!",
|
||||
message: "Error in creating cycle. Please try again.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"CYCLE_CREATE",
|
||||
{
|
||||
state: "FAILED",
|
||||
}
|
||||
);
|
||||
postHogEventTracker("CYCLE_CREATE", {
|
||||
state: "FAILED",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -281,10 +281,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
cycleDetails.total_issues === 0
|
||||
? "0 Issue"
|
||||
: cycleDetails.total_issues === cycleDetails.completed_issues
|
||||
? cycleDetails.total_issues > 1
|
||||
? `${cycleDetails.total_issues}`
|
||||
: `${cycleDetails.total_issues}`
|
||||
: `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
|
||||
? cycleDetails.total_issues > 1
|
||||
? `${cycleDetails.total_issues}`
|
||||
: `${cycleDetails.total_issues}`
|
||||
: `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -299,13 +299,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
|
||||
<>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div>
|
||||
<button
|
||||
className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
|
||||
onClick={() => handleClose()}
|
||||
>
|
||||
<ChevronRight className="h-3 w-3 text-white stroke-2" />
|
||||
<ChevronRight className="h-3 w-3 stroke-2 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3.5">
|
||||
|
|
@ -331,11 +331,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{cycleDetails.name}</h4>
|
||||
<h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{cycleDetails.name}</h4>
|
||||
<div className="flex items-center gap-5">
|
||||
{currentCycle && (
|
||||
<span
|
||||
className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
|
||||
className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
|
||||
style={{
|
||||
color: currentCycle.color,
|
||||
backgroundColor: `${currentCycle.color}20`,
|
||||
|
|
@ -350,7 +350,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className="text-sm text-custom-text-300 font-medium cursor-default"
|
||||
className="cursor-default text-sm font-medium text-custom-text-300"
|
||||
>
|
||||
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
|
||||
</Popover.Button>
|
||||
|
|
@ -364,7 +364,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<Popover.Panel className="absolute -right-5 top-10 z-20 transform overflow-hidden">
|
||||
<CustomRangeDatePicker
|
||||
value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
|
||||
onChange={(val) => {
|
||||
|
|
@ -386,7 +386,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className="text-sm text-custom-text-300 font-medium cursor-default"
|
||||
className="cursor-default text-sm font-medium text-custom-text-300"
|
||||
>
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
</Popover.Button>
|
||||
|
|
@ -400,7 +400,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<Popover.Panel className="absolute -right-5 top-10 z-20 transform overflow-hidden">
|
||||
<CustomRangeDatePicker
|
||||
value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
|
||||
onChange={(val) => {
|
||||
|
|
@ -423,18 +423,18 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
|
||||
{cycleDetails.description && (
|
||||
<span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
|
||||
<span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
|
||||
{cycleDetails.description}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-5 pt-2.5 pb-6">
|
||||
<div className="flex flex-col gap-5 pb-6 pt-2.5">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||
<UserCircle2 className="h-4 w-4" />
|
||||
<span className="text-base">Lead</span>
|
||||
</div>
|
||||
<div className="flex items-center w-1/2 rounded-sm">
|
||||
<div className="flex w-1/2 items-center rounded-sm">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
|
||||
<span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
|
||||
|
|
@ -447,14 +447,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<LayersIcon className="h-4 w-4" />
|
||||
<span className="text-base">Issues</span>
|
||||
</div>
|
||||
<div className="flex items-center w-1/2">
|
||||
<span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
|
||||
<div className="flex w-1/2 items-center">
|
||||
<span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
|
||||
<Disclosure defaultOpen>
|
||||
{({ open }) => (
|
||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||
|
|
@ -468,7 +468,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
|
||||
<div className="flex items-center gap-2.5">
|
||||
{progressPercentage ? (
|
||||
<span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
|
||||
<span className="flex h-5 w-9 items-center justify-center rounded bg-amber-50 text-xs font-medium text-amber-500">
|
||||
{progressPercentage ? `${progressPercentage}%` : ""}
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -516,7 +516,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
""
|
||||
)}
|
||||
{cycleDetails.total_issues > 0 && cycleDetails.distribution && (
|
||||
<div className="h-full w-full pt-5 border-t border-custom-border-200">
|
||||
<div className="h-full w-full border-t border-custom-border-200 pt-5">
|
||||
<SidebarProgressStats
|
||||
distribution={cycleDetails.distribution}
|
||||
groupedIssues={{
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
|
|||
</div>
|
||||
<div>
|
||||
<TwitterPicker
|
||||
className={`!absolute top-4 left-4 z-10 m-2 ${openColorPicker ? "block" : "hidden"}`}
|
||||
className={`!absolute left-4 top-4 z-10 m-2 ${openColorPicker ? "block" : "hidden"}`}
|
||||
color={activeColor}
|
||||
onChange={(color) => {
|
||||
setActiveColor(color.hex);
|
||||
|
|
@ -173,7 +173,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
<hr className="mb-1 h-[1px] w-full border-custom-border-200" />
|
||||
<div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
|
||||
<div className="ml-1 mt-1 grid grid-cols-8 gap-x-2 gap-y-3">
|
||||
{icons.material_rounded.map((icon, index) => (
|
||||
<button
|
||||
key={`${icon.name}-${index}`}
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Title"
|
||||
className="resize-none text-xl w-full"
|
||||
className="w-full resize-none text-xl"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -278,7 +278,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
|
|||
id={`value${i + 1}`}
|
||||
name={`value${i + 1}`}
|
||||
placeholder={`Point ${i + 1}`}
|
||||
className="rounded-l-none w-full"
|
||||
className="w-full rounded-l-none"
|
||||
hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -299,8 +299,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
|
|||
? "Updating Estimate..."
|
||||
: "Update Estimate"
|
||||
: isSubmitting
|
||||
? "Creating Estimate..."
|
||||
: "Create Estimate"}
|
||||
? "Creating Estimate..."
|
||||
: "Create Estimate"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="gap-2 p-4 border-b border-custom-border-100">
|
||||
<div className="gap-2 border-b border-custom-border-100 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export const EstimateSelect: React.FC<Props> = (props) => {
|
|||
const selectedEstimate = estimatePoints?.find((e) => e.key === value);
|
||||
const label = (
|
||||
<Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
|
||||
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
|
||||
<div className="flex w-full cursor-pointer items-center gap-2 text-custom-text-200">
|
||||
<Triangle className="h-3 w-3" strokeWidth={2} />
|
||||
<span className="truncate">{selectedEstimate?.value ?? "None"}</span>
|
||||
</div>
|
||||
|
|
@ -98,7 +98,7 @@ export const EstimateSelect: React.FC<Props> = (props) => {
|
|||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
|
||||
className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs duration-300 focus:outline-none ${
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
>
|
||||
|
|
@ -108,7 +108,7 @@ export const EstimateSelect: React.FC<Props> = (props) => {
|
|||
</Combobox.Button>
|
||||
<Combobox.Options className="fixed z-10">
|
||||
<div
|
||||
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
|
||||
className={`my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
|
|
@ -116,14 +116,14 @@ export const EstimateSelect: React.FC<Props> = (props) => {
|
|||
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
|
||||
<Search className="h-3.5 w-3.5 text-custom-text-300" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
|
||||
<div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
|
|
@ -131,7 +131,7 @@ export const EstimateSelect: React.FC<Props> = (props) => {
|
|||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
|
||||
active ? "bg-custom-background-80" : ""
|
||||
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export const EstimatesList: React.FC = observer(() => {
|
|||
data={getProjectEstimateById(estimateToDelete!)}
|
||||
/>
|
||||
|
||||
<section className="flex items-center justify-between py-3.5 border-b border-custom-border-100">
|
||||
<section className="flex items-center justify-between border-b border-custom-border-100 py-3.5">
|
||||
<h3 className="text-xl font-medium">Estimates</h3>
|
||||
<div className="col-span-12 space-y-5 sm:col-span-7">
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -98,7 +98,7 @@ export const EstimatesList: React.FC = observer(() => {
|
|||
|
||||
{estimatesList ? (
|
||||
estimatesList.length > 0 ? (
|
||||
<section className="h-full bg-custom-background-100 overflow-y-auto">
|
||||
<section className="h-full overflow-y-auto bg-custom-background-100">
|
||||
{estimatesList.map((estimate) => (
|
||||
<EstimateListItem
|
||||
key={estimate.id}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
|
|||
query: project.name + project.identifier,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-custom-text-200 text-[0.65rem]">{project.identifier}</span>
|
||||
<span className="text-[0.65rem] text-custom-text-200">{project.identifier}</span>
|
||||
{project.name}
|
||||
</div>
|
||||
),
|
||||
|
|
@ -144,10 +144,10 @@ export const Exporter: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
<div
|
||||
onClick={() => setMultiple(!multiple)}
|
||||
className="flex items-center gap-2 max-w-min cursor-pointer"
|
||||
className="flex max-w-min cursor-pointer items-center gap-2"
|
||||
>
|
||||
<input type="checkbox" checked={multiple} onChange={() => setMultiple(!multiple)} />
|
||||
<div className="text-sm whitespace-nowrap">Export the data into separate files</div>
|
||||
<div className="whitespace-nowrap text-sm">Export the data into separate files</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
|
|
|
|||
|
|
@ -55,14 +55,14 @@ const IntegrationGuide = () => {
|
|||
key={service.provider}
|
||||
className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4 w-full">
|
||||
<div className="flex item-center gap-2.5">
|
||||
<div className="flex w-full items-start justify-between gap-4">
|
||||
<div className="item-center flex gap-2.5">
|
||||
<div className="relative h-10 w-10 flex-shrink-0">
|
||||
<Image src={service.logo} layout="fill" objectFit="cover" alt={`${service.title} Logo`} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
|
||||
<p className="text-sm text-custom-text-200 tracking-tight">{service.description}</p>
|
||||
<p className="text-sm tracking-tight text-custom-text-200">{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
|
|
@ -79,13 +79,13 @@ const IntegrationGuide = () => {
|
|||
))}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-100">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5 pt-7">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
|
||||
className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs outline-none"
|
||||
onClick={() => {
|
||||
setRefreshing(true);
|
||||
mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)).then(() =>
|
||||
|
|
@ -97,11 +97,11 @@ const IntegrationGuide = () => {
|
|||
{refreshing ? "Refreshing..." : "Refresh status"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center text-xs">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
disabled={!exporterServices?.prev_page_results}
|
||||
onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
|
||||
className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
|
||||
className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
|
||||
exporterServices?.prev_page_results
|
||||
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
|
||||
: "cursor-not-allowed opacity-75"
|
||||
|
|
@ -113,7 +113,7 @@ const IntegrationGuide = () => {
|
|||
<button
|
||||
disabled={!exporterServices?.next_page_results}
|
||||
onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
|
||||
className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
|
||||
className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
|
||||
exporterServices?.next_page_results
|
||||
? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
|
||||
: "cursor-not-allowed opacity-75"
|
||||
|
|
@ -135,7 +135,7 @@ const IntegrationGuide = () => {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-custom-text-200 px-4 py-6">No previous export available.</p>
|
||||
<p className="px-4 py-6 text-sm text-custom-text-200">No previous export available.</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="mt-6 grid grid-cols-1 gap-3">
|
||||
|
|
|
|||
|
|
@ -38,12 +38,12 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
|
|||
service.status === "completed"
|
||||
? "bg-green-500/20 text-green-500"
|
||||
: service.status === "processing"
|
||||
? "bg-yellow-500/20 text-yellow-500"
|
||||
: service.status === "failed"
|
||||
? "bg-red-500/20 text-red-500"
|
||||
: service.status === "expired"
|
||||
? "bg-orange-500/20 text-orange-500"
|
||||
: ""
|
||||
? "bg-yellow-500/20 text-yellow-500"
|
||||
: service.status === "failed"
|
||||
? "bg-red-500/20 text-red-500"
|
||||
: service.status === "expired"
|
||||
? "bg-orange-500/20 text-orange-500"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{refreshing ? "Refreshing..." : service.status}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { renderDateFormat } from "helpers/date-time.helper";
|
|||
// types
|
||||
import { IBlockUpdateData, IGanttBlock } from "../types";
|
||||
|
||||
export const GanttChartBlocks: FC<{
|
||||
export type GanttChartBlocksProps = {
|
||||
itemsContainerWidth: number;
|
||||
blocks: IGanttBlock[] | null;
|
||||
blockToRender: (data: any) => React.ReactNode;
|
||||
|
|
@ -16,15 +16,19 @@ export const GanttChartBlocks: FC<{
|
|||
enableBlockLeftResize: boolean;
|
||||
enableBlockRightResize: boolean;
|
||||
enableBlockMove: boolean;
|
||||
}> = ({
|
||||
itemsContainerWidth,
|
||||
blocks,
|
||||
blockToRender,
|
||||
blockUpdateHandler,
|
||||
enableBlockLeftResize,
|
||||
enableBlockRightResize,
|
||||
enableBlockMove,
|
||||
}) => {
|
||||
};
|
||||
|
||||
export const GanttChartBlocks: FC<GanttChartBlocksProps> = (props) => {
|
||||
const {
|
||||
itemsContainerWidth,
|
||||
blocks,
|
||||
blockToRender,
|
||||
blockUpdateHandler,
|
||||
enableBlockLeftResize,
|
||||
enableBlockRightResize,
|
||||
enableBlockMove,
|
||||
} = props;
|
||||
|
||||
const { activeBlock, dispatch } = useChart();
|
||||
|
||||
// update the active block on hover
|
||||
|
|
|
|||
|
|
@ -29,18 +29,18 @@ export const BiWeekChartView: FC<any> = () => {
|
|||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div
|
||||
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-200`
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
</div>
|
||||
<div
|
||||
className={`relative h-full w-full flex-1 flex justify-center ${
|
||||
className={`relative flex h-full w-full flex-1 justify-center ${
|
||||
["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-custom-background-80` : ``
|
||||
}`}
|
||||
>
|
||||
{_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
|
||||
{_item?.today && <div className="absolute bottom-0 top-0 border border-red-500"> </div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -29,18 +29,18 @@ export const DayChartView: FC<any> = () => {
|
|||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div
|
||||
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-200`
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
</div>
|
||||
<div
|
||||
className={`relative h-full w-full flex-1 flex justify-center ${
|
||||
className={`relative flex h-full w-full flex-1 justify-center ${
|
||||
["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-gray-100` : ``
|
||||
}`}
|
||||
>
|
||||
{_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
|
||||
{_item?.today && <div className="absolute bottom-0 top-0 border border-red-500"> </div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -29,18 +29,18 @@ export const HourChartView: FC<any> = () => {
|
|||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div
|
||||
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-200`
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
</div>
|
||||
<div
|
||||
className={`relative h-full w-full flex-1 flex justify-center ${
|
||||
className={`relative flex h-full w-full flex-1 justify-center ${
|
||||
["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-gray-100` : ``
|
||||
}`}
|
||||
>
|
||||
{_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
|
||||
{_item?.today && <div className="absolute bottom-0 top-0 border border-red-500"> </div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -213,15 +213,15 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
|
|||
return (
|
||||
<div
|
||||
className={`${
|
||||
fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100` : `relative`
|
||||
fullScreenMode ? `fixed bottom-0 left-0 right-0 top-0 z-[999999] bg-custom-background-100` : `relative`
|
||||
} ${
|
||||
border ? `border border-custom-border-200` : ``
|
||||
} flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
|
||||
} flex h-full select-none flex-col rounded-sm bg-custom-background-100 shadow`}
|
||||
>
|
||||
{/* chart header */}
|
||||
<div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
|
||||
{title && (
|
||||
<div className="text-lg font-medium flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2 text-lg font-medium">
|
||||
<div>{title}</div>
|
||||
{/* <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
|
||||
Gantt View Beta
|
||||
|
|
@ -231,9 +231,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
|
|||
|
||||
<div className="ml-auto">
|
||||
{blocks === null ? (
|
||||
<div className="text-sm font-medium ml-auto">Loading...</div>
|
||||
<div className="ml-auto text-sm font-medium">Loading...</div>
|
||||
) : (
|
||||
<div className="text-sm font-medium ml-auto">
|
||||
<div className="ml-auto text-sm font-medium">
|
||||
{blocks.length} {loaderTitle}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -266,7 +266,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
|
|||
</div>
|
||||
|
||||
<div
|
||||
className="transition-all border border-custom-border-200 p-1 flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
|
||||
className="flex cursor-pointer items-center justify-center rounded-sm border border-custom-border-200 p-1 transition-all hover:bg-custom-background-80"
|
||||
onClick={() => setFullScreenMode((prevData) => !prevData)}
|
||||
>
|
||||
{fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
|
||||
|
|
@ -280,8 +280,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
|
|||
bottomSpacing ? "mb-8" : ""
|
||||
}`}
|
||||
>
|
||||
<div id="gantt-sidebar" className="h-full w-1/4 flex flex-col border-r border-custom-border-200">
|
||||
<div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0 flex items-end justify-between gap-2 text-sm text-custom-text-300 font-medium pb-2 pl-10 pr-4">
|
||||
<div id="gantt-sidebar" className="flex h-full w-1/4 flex-col border-r border-custom-border-200">
|
||||
<div className="box-border flex h-[60px] flex-shrink-0 items-end justify-between gap-2 border-b border-custom-border-200 pb-2 pl-10 pr-4 text-sm font-medium text-custom-text-300">
|
||||
<h6>{title}</h6>
|
||||
<h6>Duration</h6>
|
||||
</div>
|
||||
|
|
@ -289,7 +289,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
|
|||
{sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
|
||||
</div>
|
||||
<div
|
||||
className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
|
||||
className="horizontal-scroll-enable relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
|
||||
id="scroll-container"
|
||||
onScroll={onScroll}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -24,18 +24,18 @@ export const MonthChartView: FC<any> = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full h-[30px]">
|
||||
<div className="flex h-[30px] w-full">
|
||||
{block?.children &&
|
||||
block?.children.length > 0 &&
|
||||
block?.children.map((monthDay, _idx) => (
|
||||
<div
|
||||
key={`sub-title-${_idxRoot}-${_idx}`}
|
||||
className="flex-shrink-0 border-b py-1 text-center capitalize border-custom-border-200"
|
||||
className="flex-shrink-0 border-b border-custom-border-200 py-1 text-center capitalize"
|
||||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div className="text-xs space-x-1">
|
||||
<div className="space-x-1 text-xs">
|
||||
<span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
|
||||
<span className={monthDay.today ? "bg-custom-primary-100 text-white px-1 rounded-full" : ""}>
|
||||
<span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}>
|
||||
{monthDay.day}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -54,7 +54,7 @@ export const MonthChartView: FC<any> = () => {
|
|||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div
|
||||
className={`relative h-full w-full flex-1 flex justify-center ${
|
||||
className={`relative flex h-full w-full flex-1 justify-center ${
|
||||
["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "") ? `bg-custom-background-90` : ``
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,14 +29,14 @@ export const QuarterChartView: FC<any> = () => {
|
|||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div
|
||||
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-200`
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
</div>
|
||||
<div className={`relative h-full w-full flex-1 flex justify-center`}>
|
||||
{_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
|
||||
<div className={`relative flex h-full w-full flex-1 justify-center`}>
|
||||
{_item?.today && <div className="absolute bottom-0 top-0 border border-red-500"> </div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -29,18 +29,18 @@ export const WeekChartView: FC<any> = () => {
|
|||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div
|
||||
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-200`
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
</div>
|
||||
<div
|
||||
className={`relative h-full w-full flex-1 flex justify-center ${
|
||||
className={`relative flex h-full w-full flex-1 justify-center ${
|
||||
["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-custom-background-80` : ``
|
||||
}`}
|
||||
>
|
||||
{_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
|
||||
{_item?.today && <div className="absolute bottom-0 top-0 border border-red-500"> </div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -29,14 +29,14 @@ export const YearChartView: FC<any> = () => {
|
|||
style={{ width: `${currentViewData?.data.width}px` }}
|
||||
>
|
||||
<div
|
||||
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-200`
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
</div>
|
||||
<div className={`relative h-full w-full flex-1 flex justify-center`}>
|
||||
{_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
|
||||
<div className={`relative flex h-full w-full flex-1 justify-center`}>
|
||||
{_item?.today && <div className="absolute bottom-0 top-0 border border-red-500"> </div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ export const ChartDraggable: React.FC<Props> = ({
|
|||
{/* move to left side hidden block button */}
|
||||
{isBlockHiddenOnLeft && (
|
||||
<div
|
||||
className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
|
||||
className="fixed z-[1] ml-1 mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
|
||||
onClick={handleScrollToBlock}
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
|
|
@ -251,7 +251,7 @@ export const ChartDraggable: React.FC<Props> = ({
|
|||
{/* move to right side hidden block button */}
|
||||
{isBlockHiddenOnRight && (
|
||||
<div
|
||||
className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
|
||||
className="fixed right-1 z-[1] mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
|
||||
onClick={handleScrollToBlock}
|
||||
>
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
|
|
@ -260,7 +260,7 @@ export const ChartDraggable: React.FC<Props> = ({
|
|||
<div
|
||||
id={`block-${block.id}`}
|
||||
ref={resizableRef}
|
||||
className="relative group cursor-pointer font-medium h-full inline-flex items-center transition-all"
|
||||
className="group relative inline-flex h-full cursor-pointer items-center font-medium transition-all"
|
||||
style={{
|
||||
marginLeft: `${block.position?.marginLeft}px`,
|
||||
width: `${block.position?.width}px`,
|
||||
|
|
@ -273,17 +273,17 @@ export const ChartDraggable: React.FC<Props> = ({
|
|||
onMouseDown={handleBlockLeftResize}
|
||||
onMouseEnter={() => setIsLeftResizing(true)}
|
||||
onMouseLeave={() => setIsLeftResizing(false)}
|
||||
className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[3] w-6 h-full rounded-md cursor-col-resize"
|
||||
className="absolute -left-2.5 top-1/2 z-[3] h-full w-6 -translate-y-1/2 cursor-col-resize rounded-md"
|
||||
/>
|
||||
<div
|
||||
className={`absolute top-1/2 -translate-y-1/2 w-1 h-7 rounded-sm bg-custom-background-100 transition-all duration-300 ${
|
||||
className={`absolute top-1/2 h-7 w-1 -translate-y-1/2 rounded-sm bg-custom-background-100 transition-all duration-300 ${
|
||||
isLeftResizing ? "-left-2.5" : "left-1"
|
||||
}`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className={`relative z-[2] rounded h-8 w-full flex items-center ${isMoving ? "pointer-events-none" : ""}`}
|
||||
className={`relative z-[2] flex h-8 w-full items-center rounded ${isMoving ? "pointer-events-none" : ""}`}
|
||||
onMouseDown={handleBlockMove}
|
||||
>
|
||||
{blockToRender(block.data)}
|
||||
|
|
@ -295,10 +295,10 @@ export const ChartDraggable: React.FC<Props> = ({
|
|||
onMouseDown={handleBlockRightResize}
|
||||
onMouseEnter={() => setIsRightResizing(true)}
|
||||
onMouseLeave={() => setIsRightResizing(false)}
|
||||
className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[2] w-6 h-full rounded-md cursor-col-resize"
|
||||
className="absolute -right-2.5 top-1/2 z-[2] h-full w-6 -translate-y-1/2 cursor-col-resize rounded-md"
|
||||
/>
|
||||
<div
|
||||
className={`absolute top-1/2 -translate-y-1/2 w-1 h-7 rounded-sm bg-custom-background-100 transition-all duration-300 ${
|
||||
className={`absolute top-1/2 h-7 w-1 -translate-y-1/2 rounded-sm bg-custom-background-100 transition-all duration-300 ${
|
||||
isRightResizing ? "-right-2.5" : "right-1"
|
||||
}`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
|||
{(droppableProvided) => (
|
||||
<div
|
||||
id={`gantt-sidebar-${cycleId}`}
|
||||
className="max-h-full overflow-y-auto pl-2.5 mt-3"
|
||||
className="mt-3 max-h-full overflow-y-auto pl-2.5"
|
||||
ref={droppableProvided.innerRef}
|
||||
{...droppableProvided.droppableProps}
|
||||
>
|
||||
|
|
@ -105,7 +105,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
|
||||
className={`h-11 ${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
|
||||
onMouseEnter={() => updateActiveBlock(block)}
|
||||
onMouseLeave={() => updateActiveBlock(null)}
|
||||
ref={provided.innerRef}
|
||||
|
|
@ -113,21 +113,21 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
<div
|
||||
id={`sidebar-block-${block.id}`}
|
||||
className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
activeBlock?.id === block.id ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
>
|
||||
{enableReorder && (
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
|
||||
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<MoreVertical className="h-3.5 w-3.5" />
|
||||
<MoreVertical className="h-3.5 w-3.5 -ml-5" />
|
||||
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<div className="flex-grow truncate h-full flex items-center justify-between gap-2">
|
||||
<div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
|
||||
<div className="flex-grow truncate">
|
||||
<CycleGanttSidebarBlock data={block.data} />
|
||||
</div>
|
||||
|
|
@ -142,7 +142,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
|||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="pr-2 space-y-3">
|
||||
<Loader className="space-y-3 pr-2">
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
|||
{(droppableProvided) => (
|
||||
<div
|
||||
id={`gantt-sidebar-${cycleId}`}
|
||||
className="max-h-full overflow-y-auto pl-2.5 mt-3"
|
||||
className="mt-3 max-h-full overflow-y-auto pl-2.5"
|
||||
ref={droppableProvided.innerRef}
|
||||
{...droppableProvided.droppableProps}
|
||||
>
|
||||
|
|
@ -105,7 +105,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
|
||||
className={`h-11 ${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
|
||||
onMouseEnter={() => updateActiveBlock(block)}
|
||||
onMouseLeave={() => updateActiveBlock(null)}
|
||||
ref={provided.innerRef}
|
||||
|
|
@ -113,21 +113,21 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
<div
|
||||
id={`sidebar-block-${block.id}`}
|
||||
className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
activeBlock?.id === block.id ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
>
|
||||
{enableReorder && (
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
|
||||
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<MoreVertical className="h-3.5 w-3.5" />
|
||||
<MoreVertical className="h-3.5 w-3.5 -ml-5" />
|
||||
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<div className="flex-grow truncate h-full flex items-center justify-between gap-2">
|
||||
<div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
|
||||
<div className="flex-grow truncate">
|
||||
<ModuleGanttSidebarBlock data={block.data} />
|
||||
</div>
|
||||
|
|
@ -142,7 +142,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
|||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="pr-2 space-y-3">
|
||||
<Loader className="space-y-3 pr-2">
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
|
|||
{(droppableProvided) => (
|
||||
<div
|
||||
id={`gantt-sidebar-${cycleId}`}
|
||||
className="max-h-full overflow-y-auto pl-2.5 mt-3"
|
||||
className="mt-3 max-h-full overflow-y-auto pl-2.5"
|
||||
ref={droppableProvided.innerRef}
|
||||
{...droppableProvided.droppableProps}
|
||||
>
|
||||
|
|
@ -106,7 +106,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
|
||||
className={`h-11 ${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
|
||||
onMouseEnter={() => updateActiveBlock(block)}
|
||||
onMouseLeave={() => updateActiveBlock(null)}
|
||||
ref={provided.innerRef}
|
||||
|
|
@ -114,21 +114,21 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
<div
|
||||
id={`sidebar-block-${block.id}`}
|
||||
className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
activeBlock?.id === block.id ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
>
|
||||
{enableReorder && (
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
|
||||
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<MoreVertical className="h-3.5 w-3.5" />
|
||||
<MoreVertical className="h-3.5 w-3.5 -ml-5" />
|
||||
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<div className="flex-grow truncate h-full flex items-center justify-between gap-2">
|
||||
<div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
|
||||
<div className="flex-grow truncate">
|
||||
<IssueGanttSidebarBlock data={block.data} />
|
||||
</div>
|
||||
|
|
@ -143,7 +143,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
|
|||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="pr-2 space-y-3">
|
||||
<Loader className="space-y-3 pr-2">
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
|||
{(droppableProvided) => (
|
||||
<div
|
||||
id={`gantt-sidebar-${cycleId}`}
|
||||
className="max-h-full overflow-y-auto pl-2.5 mt-3"
|
||||
className="mt-3 max-h-full overflow-y-auto pl-2.5"
|
||||
ref={droppableProvided.innerRef}
|
||||
{...droppableProvided.droppableProps}
|
||||
>
|
||||
|
|
@ -114,7 +114,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
|
||||
className={`h-11 ${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
|
||||
onMouseEnter={() => updateActiveBlock(block)}
|
||||
onMouseLeave={() => updateActiveBlock(null)}
|
||||
ref={provided.innerRef}
|
||||
|
|
@ -122,21 +122,21 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
|||
>
|
||||
<div
|
||||
id={`sidebar-block-${block.id}`}
|
||||
className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
|
||||
activeBlock?.id === block.id ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
>
|
||||
{enableReorder && (
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
|
||||
className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<MoreVertical className="h-3.5 w-3.5" />
|
||||
<MoreVertical className="h-3.5 w-3.5 -ml-5" />
|
||||
<MoreVertical className="-ml-5 h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<div className="flex-grow truncate h-full flex items-center justify-between gap-2">
|
||||
<div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
|
||||
<div className="flex-grow truncate">
|
||||
<IssueGanttSidebarBlock data={block.data} />
|
||||
</div>
|
||||
|
|
@ -151,7 +151,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
|||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="pr-2 space-y-3">
|
||||
<Loader className="space-y-3 pr-2">
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
<Loader.Item height="34px" />
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
|
|||
onClose={() => setAnalyticsModal(false)}
|
||||
cycleDetails={cycleDetails ?? undefined}
|
||||
/>
|
||||
<div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
|
|
@ -117,7 +117,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
|
|||
) : currentProjectDetails?.icon_prop ? (
|
||||
renderEmoji(currentProjectDetails.icon_prop)
|
||||
) : (
|
||||
<span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
|
||||
<span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
|
||||
{currentProjectDetails?.name.charAt(0)}
|
||||
</span>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -14,11 +14,15 @@ export const CyclesHeader: FC = observer(() => {
|
|||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// store
|
||||
const { project: projectStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
|
||||
const {
|
||||
project: projectStore,
|
||||
commandPalette: commandPaletteStore,
|
||||
trackEvent: { setTrackElement },
|
||||
} = useMobxStore();
|
||||
const { currentProjectDetails } = projectStore;
|
||||
|
||||
return (
|
||||
<div className="relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between h-[3.75rem] gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
|
||||
<div>
|
||||
<Breadcrumbs>
|
||||
|
|
@ -31,7 +35,7 @@ export const CyclesHeader: FC = observer(() => {
|
|||
) : currentProjectDetails?.icon_prop ? (
|
||||
renderEmoji(currentProjectDetails.icon_prop)
|
||||
) : (
|
||||
<span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
|
||||
<span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
|
||||
{currentProjectDetails?.name.charAt(0)}
|
||||
</span>
|
||||
)
|
||||
|
|
@ -54,8 +58,7 @@ export const CyclesHeader: FC = observer(() => {
|
|||
onClick={() => {
|
||||
setTrackElement("CYCLES_PAGE_HEADER");
|
||||
commandPaletteStore.toggleCreateCycleModal(true);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
Add Cycle
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
|||
return (
|
||||
<>
|
||||
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
|
||||
<div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div>
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
|
|
@ -97,13 +97,13 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
|||
</Breadcrumbs>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
|
||||
<div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
|
||||
{GLOBAL_VIEW_LAYOUTS.map((layout) => (
|
||||
<Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
|
||||
<span>
|
||||
<Tooltip tooltipContent={layout.title}>
|
||||
<div
|
||||
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
|
||||
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
|
||||
activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
|
|||
onClose={() => setAnalyticsModal(false)}
|
||||
moduleDetails={moduleDetails ?? undefined}
|
||||
/>
|
||||
<div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue