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
|
|
@ -1,2 +1,6 @@
|
|||
.next
|
||||
.vercel
|
||||
.vercel
|
||||
.tubro
|
||||
out/
|
||||
dis/
|
||||
build/
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
{
|
||||
"printWidth": 120,
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": false,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
|
|||
className="w-full"
|
||||
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 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
|
||||
<button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80">
|
||||
<Image
|
||||
src={theme === "dark" ? githubWhiteImage : githubBlackImage}
|
||||
height={20}
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -77,14 +77,14 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
|||
|
||||
return (
|
||||
<form
|
||||
className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
|
||||
className="h-full w-full space-y-7 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center sm:space-y-10"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="relative sm:text-lg">
|
||||
<div className="text-gray-800 absolute -top-1 -left-3">{'"'}</div>
|
||||
<div className="absolute -left-3 -top-1 text-gray-800">{'"'}</div>
|
||||
<h5>Hey there 👋🏻</h5>
|
||||
<h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
|
||||
<h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
|
||||
<h5 className="mb-6 mt-5">Let{"'"}s get you onboard!</h5>
|
||||
<h4 className="text-xl font-semibold sm:text-2xl">Set up your Plane profile.</h4>
|
||||
</div>
|
||||
|
||||
<div className="space-y-7 sm:w-3/4 md:w-2/5">
|
||||
|
|
@ -125,7 +125,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
|||
<Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
|
||||
<Listbox.Button
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none px-3 py-2 text-sm`}
|
||||
className={`flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-300 px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
|
||||
>
|
||||
<span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
|
||||
<ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
|
||||
|
|
@ -141,7 +141,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
|||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={`absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none w-full max-h-36 left-0 origin-top-left`}
|
||||
className={`absolute left-0 z-10 mt-1 max-h-36 w-full origin-top-left overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none`}
|
||||
>
|
||||
<div className="space-y-1 p-2">
|
||||
{USER_ROLES.map((role) => (
|
||||
|
|
|
|||
|
|
@ -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
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -153,14 +153,14 @@ export const UniqueCodeForm: 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">
|
||||
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}
|
||||
|
|
@ -170,7 +170,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"
|
||||
|
|
@ -183,11 +183,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("")}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -197,7 +197,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>
|
||||
|
|
@ -216,7 +216,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"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -234,8 +234,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>
|
||||
|
|
|
|||
|
|
@ -13,19 +13,19 @@ export const UserLoggedIn = () => {
|
|||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className="h-screen w-screen flex flex-col">
|
||||
<div className="px-6 py-5 relative w-full flex items-center justify-between gap-4 border-b border-custom-border-200">
|
||||
<div className="flex h-screen w-screen flex-col">
|
||||
<div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
|
||||
<div>
|
||||
<Image src={PlaneLogo} alt="User already logged in" />
|
||||
</div>
|
||||
<div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
|
||||
<div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
|
||||
{user.avatar && user.avatar !== "" ? (
|
||||
<div className="h-5 w-5 rounded-full">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
|
||||
<div className="grid h-5 w-5 place-items-center rounded-full bg-custom-background-80 text-[10px] capitalize">
|
||||
{(user.display_name ?? "U")[0]}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -33,14 +33,14 @@ export const UserLoggedIn = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-full w-full grid place-items-center p-6">
|
||||
<div className="grid h-full w-full place-items-center p-6">
|
||||
<div className="text-center">
|
||||
<div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
|
||||
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
|
||||
<div className="h-32 w-32">
|
||||
<Image src={UserLoggedInImage} alt="User already logged in" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-semibold mt-12">Logged in Successfully!</h1>
|
||||
<h1 className="mt-12 text-3xl font-semibold">Logged in Successfully!</h1>
|
||||
<p className="mt-4">
|
||||
You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
} `}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
"use client";
|
||||
|
||||
export const IssueBlockDownVotes = ({ number }: { number: number }) => (
|
||||
<div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
|
||||
<span className="material-symbols-rounded text-base !p-0 !m-0 rotate-180 text-custom-text-300">
|
||||
<div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs text-custom-text-300">
|
||||
<span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-custom-text-300">
|
||||
arrow_upward_alt
|
||||
</span>
|
||||
{number}
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@ export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group
|
|||
const iconDetails = dueDateIconDetails(due_date, group);
|
||||
|
||||
return (
|
||||
<div className="rounded flex px-2.5 py-1 items-center border-[0.5px] border-custom-border-300 gap-1 text-custom-text-100 text-xs">
|
||||
<span className={`material-symbols-rounded text-sm -my-0.5 ${iconDetails.className}`}>
|
||||
<div className="flex items-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs text-custom-text-100">
|
||||
<span className={`material-symbols-rounded -my-0.5 text-sm ${iconDetails.className}`}>
|
||||
{iconDetails.iconName}
|
||||
</span>
|
||||
{renderFullDate(due_date)}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
|
||||
export const IssueBlockLabels = ({ labels }: any) => (
|
||||
<div className="relative flex items-center flex-wrap gap-1">
|
||||
<div className="relative flex flex-wrap items-center gap-1">
|
||||
{labels &&
|
||||
labels.length > 0 &&
|
||||
labels.map((_label: any) => (
|
||||
<div
|
||||
key={_label?.id}
|
||||
className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
|
||||
className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
|
||||
>
|
||||
<div className="flex items-center gap-1.5 text-custom-text-200">
|
||||
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
|
||||
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
|
||||
<div className="text-xs">{_label?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const IssueBlockPriority = ({ priority }: { priority: TIssuePriorityKey |
|
|||
if (priority_detail === null) return <></>;
|
||||
|
||||
return (
|
||||
<div className={`h-6 w-6 rounded grid place-items-center border-[0.5px] ${priority_detail?.className}`}>
|
||||
<div className={`grid h-6 w-6 place-items-center rounded border-[0.5px] ${priority_detail?.className}`}>
|
||||
<span className="material-symbols-rounded text-sm">{priority_detail?.icon}</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ export const IssueBlockState = ({ state }: any) => {
|
|||
|
||||
if (stateGroup === null) return <></>;
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs">
|
||||
<div className="flex items-center w-full gap-1.5 text-custom-text-200">
|
||||
<div 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 shadow-sm duration-300 focus:outline-none">
|
||||
<div className="flex w-full items-center gap-1.5 text-custom-text-200">
|
||||
<StateGroupIcon stateGroup={state.group} color={state.color} />
|
||||
<div className="text-xs">{state?.name}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
"use client";
|
||||
|
||||
export const IssueBlockUpVotes = ({ number }: { number: number }) => (
|
||||
<div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
|
||||
<span className="material-symbols-rounded text-base !p-0 !m-0 text-custom-text-300">arrow_upward_alt</span>
|
||||
<div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs text-custom-text-300">
|
||||
<span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">arrow_upward_alt</span>
|
||||
{number}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="py-2 px-3 flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border-[0.5px] border-custom-border-200 space-y-2 text-sm">
|
||||
<div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
|
||||
{/* id */}
|
||||
<div className="text-xs text-custom-text-300 break-words">
|
||||
<div className="break-words text-xs text-custom-text-300">
|
||||
{projectStore?.project?.identifier}-{issue?.sequence_id}
|
||||
</div>
|
||||
|
||||
|
|
@ -54,12 +54,12 @@ export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
|
|||
<h6
|
||||
onClick={handleBlockClick}
|
||||
role="button"
|
||||
className="text-sm font-medium break-words line-clamp-2 cursor-pointer"
|
||||
className="line-clamp-2 cursor-pointer break-words text-sm font-medium"
|
||||
>
|
||||
{issue.name}
|
||||
</h6>
|
||||
|
||||
<div className="relative flex-grow flex items-end gap-2 w-full overflow-x-scroll hide-horizontal-scrollbar">
|
||||
<div className="hide-horizontal-scrollbar relative flex w-full flex-grow items-end gap-2 overflow-x-scroll">
|
||||
{/* priority */}
|
||||
{issue?.priority && (
|
||||
<div className="flex-shrink-0">
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
|
|||
if (stateGroup === null) return <></>;
|
||||
|
||||
return (
|
||||
<div className="pb-2 px-2 flex items-center gap-2">
|
||||
<div className="w-3.5 h-3.5 flex justify-center items-center flex-shrink-0">
|
||||
<div className="flex items-center gap-2 px-2 pb-2">
|
||||
<div className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
|
||||
<StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
|
||||
</div>
|
||||
<div className="font-semibold text-custom-text-200 capitalize mr-1 truncate">{state?.name}</div>
|
||||
<span className="text-custom-text-300 rounded-full flex-shrink-0">
|
||||
<div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
|
||||
<span className="flex-shrink-0 rounded-full text-custom-text-300">
|
||||
{store.issue.getCountOfIssuesByState(state.id)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,24 +17,24 @@ export const IssueKanbanView = observer(() => {
|
|||
const store: RootStore = useMobxStore();
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full overflow-hidden overflow-x-auto flex gap-3">
|
||||
<div className="relative flex h-full w-full gap-3 overflow-hidden overflow-x-auto">
|
||||
{store?.issue?.states &&
|
||||
store?.issue?.states.length > 0 &&
|
||||
store?.issue?.states.map((_state: IIssueState) => (
|
||||
<div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
|
||||
<div key={_state.id} className="relative flex h-full w-[340px] flex-shrink-0 flex-col">
|
||||
<div className="flex-shrink-0">
|
||||
<IssueKanBanHeader state={_state} />
|
||||
</div>
|
||||
<div className="w-full h-full overflow-hidden overflow-y-auto hide-vertical-scrollbar">
|
||||
<div className="hide-vertical-scrollbar h-full w-full overflow-hidden overflow-y-auto">
|
||||
{store.issue.getFilteredIssuesByState(_state.id) &&
|
||||
store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
|
||||
<div className="space-y-3 pb-2 px-2">
|
||||
<div className="space-y-3 px-2 pb-2">
|
||||
{store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
|
||||
<IssueKanBanBlock key={_issue.id} issue={_issue} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center items-center gap-2 pt-10 text-center text-sm text-custom-text-200 font-medium">
|
||||
<div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-custom-text-200">
|
||||
<Icon iconName="stack" />
|
||||
No issues in this state
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,14 +46,14 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center p-3 relative gap-10 bg-custom-background-100">
|
||||
<div className="relative flex items-center gap-3 w-full flex-grow overflow-hidden">
|
||||
<div className="relative flex items-center gap-10 bg-custom-background-100 p-3">
|
||||
<div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
|
||||
{/* id */}
|
||||
<div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
|
||||
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
|
||||
{projectStore?.project?.identifier}-{issue?.sequence_id}
|
||||
</div>
|
||||
{/* name */}
|
||||
<div onClick={handleBlockClick} className="font-medium text-sm truncate flex-grow cursor-pointer">
|
||||
<div onClick={handleBlockClick} className="flex-grow cursor-pointer truncate text-sm font-medium">
|
||||
{issue.name}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
|
|||
if (stateGroup === null) return <></>;
|
||||
|
||||
return (
|
||||
<div className="p-3 flex items-center gap-2">
|
||||
<div className="w-3.5 h-3.5 flex justify-center items-center">
|
||||
<div className="flex items-center gap-2 p-3">
|
||||
<div className="flex h-3.5 w-3.5 items-center justify-center">
|
||||
<StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
|
||||
</div>
|
||||
<div className="font-medium capitalize mr-1">{state?.name}</div>
|
||||
<div className="text-custom-text-200 text-sm font-medium">{store.issue.getCountOfIssuesByState(state.id)}</div>
|
||||
<div className="mr-1 font-medium capitalize">{state?.name}</div>
|
||||
<div className="text-sm font-medium text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const IssueListView = observer(() => {
|
|||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-3 text-sm text-custom-text-400 bg-custom-background-100">No issues.</div>
|
||||
<div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues.</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
|
|||
const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, states } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
|
||||
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
|
||||
{Object.entries(appliedFilters).map(([key, value]) => {
|
||||
const filterKey = key as keyof IIssueFilterOptions;
|
||||
|
||||
|
|
@ -31,10 +31,10 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
|
|||
return (
|
||||
<div
|
||||
key={filterKey}
|
||||
className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
|
||||
className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
|
||||
>
|
||||
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{filterKey === "priority" && (
|
||||
<AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
|
||||
)}
|
||||
|
|
@ -69,7 +69,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={handleRemoveAllFilters}
|
||||
className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
|
||||
className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
|
||||
>
|
||||
Clear all
|
||||
<X size={12} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
|
|||
if (!labelDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={labelId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full"
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
|
|||
{values &&
|
||||
values.length > 0 &&
|
||||
values.map((priority) => (
|
||||
<div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<PriorityIcon priority={priority as any} className={`h-3 w-3`} />
|
||||
{priority}
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export const IssueAppliedFilters: FC = observer(() => {
|
|||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="p-5 py-3 border-b border-custom-border-200">
|
||||
<div className="border-b border-custom-border-200 p-5 py-3">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={appliedFilters || {}}
|
||||
handleRemoveFilter={handleRemoveFilter}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export const AppliedStateFilters: React.FC<Props> = (props) => {
|
|||
if (!stateDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
|
||||
{stateDetails.name}
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -46,12 +46,12 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
|
|||
>
|
||||
<Popover.Panel>
|
||||
<div
|
||||
className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
|
||||
className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
|
||||
<div className="flex max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ interface IFilterHeader {
|
|||
}
|
||||
|
||||
export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
|
||||
<div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
|
||||
<div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
|
||||
<div className="sticky top-0 flex items-center justify-between gap-2 bg-custom-background-100">
|
||||
<div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-shrink-0 w-5 h-5 grid place-items-center rounded hover:bg-custom-background-80"
|
||||
className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
|
||||
onClick={handleIsPreviewEnabled}
|
||||
>
|
||||
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@ export const FilterOption: React.FC<Props> = (props) => {
|
|||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded hover:bg-custom-background-80 w-full p-1.5"
|
||||
className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-custom-background-80"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 w-3 h-3 grid place-items-center bg-custom-background-90 border ${
|
||||
isChecked ? "bg-custom-primary-100 border-custom-primary-100 text-white" : "border-custom-border-300"
|
||||
className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
|
||||
isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
|
||||
} ${multiple ? "rounded-sm" : "rounded-full"}`}
|
||||
>
|
||||
{isChecked && <Check size={10} strokeWidth={3} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
{icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
|
||||
<div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
|
||||
{icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
|
||||
<div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { Loader } from "@plane/ui";
|
|||
import { IIssueLabel } from "types/issue";
|
||||
|
||||
const LabelIcons = ({ color }: { color: string }) => (
|
||||
<span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
|
||||
<span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
|
||||
);
|
||||
|
||||
type Props = {
|
||||
|
|
@ -59,7 +59,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -67,7 +67,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
|
|||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export const IssueFiltersDropdown: FC = observer(() => {
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col z-10">
|
||||
<div className="z-10 flex h-full w-full flex-col">
|
||||
<FiltersDropdown title="Filters" placement="bottom-end">
|
||||
<FilterSelection
|
||||
filters={issueFilters?.filters ?? {}}
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
|
|||
const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="p-2.5 pb-0 bg-custom-background-100">
|
||||
<div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="bg-custom-background-100 p-2.5 pb-0">
|
||||
<div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
|
||||
<Search className="text-custom-text-400" size={12} strokeWidth={2} />
|
||||
<input
|
||||
type="text"
|
||||
className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
|
||||
className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
|
||||
placeholder="Search"
|
||||
value={filtersSearchQuery}
|
||||
onChange={(e) => setFiltersSearchQuery(e.target.value)}
|
||||
|
|
@ -45,7 +45,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
|
||||
<div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
|
||||
{/* priority */}
|
||||
{isFilterEnabled("priority") && (
|
||||
<div className="py-2">
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const FilterState: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -62,7 +62,7 @@ export const FilterState: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ const IssueNavbar = observer(() => {
|
|||
{renderEmoji(projectStore.project.emoji)}
|
||||
</span>
|
||||
) : projectStore.project?.icon_prop ? (
|
||||
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
|
||||
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">
|
||||
{renderEmoji(projectStore.project.icon_prop)}
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const NavbarTheme = observer(() => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={handleTheme}
|
||||
className="relative w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
|
||||
className="relative grid h-7 w-7 place-items-center rounded bg-custom-background-100 text-custom-text-100 hover:bg-custom-background-80"
|
||||
>
|
||||
<span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
|||
<Menu.Button
|
||||
type="button"
|
||||
onClick={() => {}}
|
||||
className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
|
||||
className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
|
||||
</Menu.Button>
|
||||
|
|
@ -166,7 +166,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-md max-h-36 border right-0 origin-top-right mt-1 overflow-auto min-w-[8rem] border-custom-border-300 p-1 text-xs shadow-lg focus:outline-none bg-custom-background-90">
|
||||
<Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<div className="py-1">
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex gap-1.5 items-center mt-2">
|
||||
<div className="mt-2 flex items-center gap-1.5">
|
||||
<ReactionSelector
|
||||
onSelect={(value) => {
|
||||
userStore.requiredLogin(() => {
|
||||
|
|
@ -103,7 +103,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
|
|||
handleReactionClick(reaction);
|
||||
});
|
||||
}}
|
||||
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
|
||||
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
|
||||
commentReactions?.some(
|
||||
(r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
|
||||
)
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{issueDetailStore.peekMode === "side" && (
|
||||
<button type="button" onClick={handleClose}>
|
||||
|
|
@ -88,7 +88,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none left-0 origin-top-left min-w-[8rem] whitespace-nowrap">
|
||||
<Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[8rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
|
||||
<div className="space-y-1 p-2">
|
||||
{peekModes.map((mode) => (
|
||||
<Listbox.Option
|
||||
|
|
@ -106,7 +106,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
|
|||
<div className="flex items-center gap-1.5">
|
||||
<Icon
|
||||
iconName={mode.icon}
|
||||
className={`!text-base flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`}
|
||||
className={`-my-1 flex-shrink-0 !text-base ${mode.key === "full" ? "rotate-45" : ""}`}
|
||||
/>
|
||||
{mode.label}
|
||||
</div>
|
||||
|
|
@ -122,7 +122,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
|
|||
</Listbox>
|
||||
</div>
|
||||
{(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
<button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
|
||||
<Icon iconName="link" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
|
|||
selected={userReactions?.map((r) => r.reaction)}
|
||||
size="md"
|
||||
/>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{Object.keys(groupedReactions || {}).map((reaction) => {
|
||||
const reactions = groupedReactions?.[reaction] ?? [];
|
||||
const REACTIONS_LIMIT = 1000;
|
||||
|
|
@ -84,7 +84,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
|
|||
handleReactionClick(reaction);
|
||||
});
|
||||
}}
|
||||
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
|
||||
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
|
||||
reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
|
||||
? "bg-custom-primary-100/10"
|
||||
: "bg-custom-background-80"
|
||||
|
|
|
|||
|
|
@ -57,13 +57,13 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
|
|||
)}
|
||||
<div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
|
||||
<div className="flex w-1/4 flex-shrink-0 items-center gap-2 font-medium">
|
||||
<Icon iconName="radio_button_checked" className="flex-shrink-0 !text-base" />
|
||||
<span className="flex-grow truncate">State</span>
|
||||
</div>
|
||||
<div className="w-3/4">
|
||||
{stateGroup && (
|
||||
<div className="inline-flex bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
|
||||
<div className="inline-flex rounded bg-custom-background-80 px-2.5 py-0.5 text-sm">
|
||||
<div className="flex items-center gap-1.5 text-left text-custom-text-100">
|
||||
<StateGroupIcon stateGroup={state.group} color={state.color} />
|
||||
{addSpaceIfCamelCase(state?.name ?? "")}
|
||||
|
|
@ -74,26 +74,26 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
|
|||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
|
||||
<div className="flex w-1/4 flex-shrink-0 items-center gap-2 font-medium">
|
||||
<Icon iconName="signal_cellular_alt" className="flex-shrink-0 !text-base" />
|
||||
<span className="flex-grow truncate">Priority</span>
|
||||
</div>
|
||||
<div className="w-3/4">
|
||||
<div
|
||||
className={`inline-flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
|
||||
className={`inline-flex items-center gap-1.5 rounded px-2.5 py-0.5 text-left text-sm capitalize ${
|
||||
priority?.key === "urgent"
|
||||
? "border-red-500/20 bg-red-500/20 text-red-500"
|
||||
: priority?.key === "high"
|
||||
? "border-orange-500/20 bg-orange-500/20 text-orange-500"
|
||||
: priority?.key === "medium"
|
||||
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
|
||||
: priority?.key === "low"
|
||||
? "border-green-500/20 bg-green-500/20 text-green-500"
|
||||
: "bg-custom-background-80 border-custom-border-200"
|
||||
? "border-orange-500/20 bg-orange-500/20 text-orange-500"
|
||||
: priority?.key === "medium"
|
||||
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
|
||||
: priority?.key === "low"
|
||||
? "border-green-500/20 bg-green-500/20 text-green-500"
|
||||
: "border-custom-border-200 bg-custom-background-80"
|
||||
}`}
|
||||
>
|
||||
{priority && (
|
||||
<span className="grid place-items-center -my-1">
|
||||
<span className="-my-1 grid place-items-center">
|
||||
<Icon iconName={priority?.icon!} />
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -102,14 +102,14 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
|
||||
<Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
|
||||
<div className="flex w-1/4 flex-shrink-0 items-center gap-2 font-medium">
|
||||
<Icon iconName="calendar_today" className="flex-shrink-0 !text-base" />
|
||||
<span className="flex-grow truncate">Due date</span>
|
||||
</div>
|
||||
<div>
|
||||
{issueDetails.target_date ? (
|
||||
<div className="h-6 rounded flex items-center gap-1 px-2.5 py-1 border border-custom-border-100 text-custom-text-100 text-xs bg-custom-background-80">
|
||||
<span className={`material-symbols-rounded text-sm -my-0.5 ${dueDateIcon.className}`}>
|
||||
<div className="flex h-6 items-center gap-1 rounded border border-custom-border-100 bg-custom-background-80 px-2.5 py-1 text-xs text-custom-text-100">
|
||||
<span className={`material-symbols-rounded -my-0.5 text-sm ${dueDateIcon.className}`}>
|
||||
{dueDateIcon.iconName}
|
||||
</span>
|
||||
{renderFullDate(issueDetails.target_date)}
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@ export const IssueReactions: React.FC = () => {
|
|||
const { project: projectStore } = useMobxStore();
|
||||
|
||||
return (
|
||||
<div className="flex gap-3 items-center mt-4">
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
{projectStore?.deploySettings?.votes && (
|
||||
<>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<IssueVotes />
|
||||
</div>
|
||||
<div className="w-0.5 h-8 bg-custom-background-200" />
|
||||
<div className="h-8 w-0.5 bg-custom-background-200" />
|
||||
</>
|
||||
)}
|
||||
{projectStore?.deploySettings?.reactions && (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<IssueEmojiReactions />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export const IssueVotes: React.FC = observer(() => {
|
|||
const VOTES_LIMIT = 1000;
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* upvote button 👇 */}
|
||||
<Tooltip
|
||||
tooltipContent={
|
||||
|
|
@ -82,11 +82,11 @@ export const IssueVotes: React.FC = observer(() => {
|
|||
handleVote(e, 1);
|
||||
});
|
||||
}}
|
||||
className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
|
||||
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
|
||||
isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
|
||||
}`}
|
||||
>
|
||||
<span className="material-symbols-rounded text-base !p-0 !m-0">arrow_upward_alt</span>
|
||||
<span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_upward_alt</span>
|
||||
<span className="text-sm font-normal transition-opacity ease-in-out">{allUpVotes.length}</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
|
@ -117,11 +117,11 @@ export const IssueVotes: React.FC = observer(() => {
|
|||
handleVote(e, -1);
|
||||
});
|
||||
}}
|
||||
className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
|
||||
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
|
||||
isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
|
||||
}`}
|
||||
>
|
||||
<span className="material-symbols-rounded text-base !p-0 !m-0">arrow_downward_alt</span>
|
||||
<span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_downward_alt</span>
|
||||
<span className="text-sm font-normal transition-opacity ease-in-out">{allDownVotes.length}</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(() => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity z-20" />
|
||||
<div className="fixed inset-0 z-20 bg-custom-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
|
|
|
|||
|
|
@ -19,22 +19,22 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
|
|||
const { handleClose, issueDetails } = props;
|
||||
|
||||
return (
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="w-full p-5">
|
||||
<PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
|
||||
</div>
|
||||
{issueDetails ? (
|
||||
<div className="h-full w-full px-6 overflow-y-auto">
|
||||
<div className="h-full w-full overflow-y-auto px-6">
|
||||
{/* issue title and description */}
|
||||
<div className="w-full">
|
||||
<PeekOverviewIssueDetails issueDetails={issueDetails} />
|
||||
</div>
|
||||
{/* issue properties */}
|
||||
<div className="w-full mt-6">
|
||||
<div className="mt-6 w-full">
|
||||
<PeekOverviewIssueProperties issueDetails={issueDetails} />
|
||||
</div>
|
||||
{/* divider */}
|
||||
<div className="h-[1] w-full border-t border-custom-border-200 my-5" />
|
||||
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity issueDetails={issueDetails} />
|
||||
|
|
@ -43,7 +43,7 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
|
|||
) : (
|
||||
<Loader className="px-6">
|
||||
<Loader.Item height="30px" />
|
||||
<div className="space-y-2 mt-3">
|
||||
<div className="mt-3 space-y-2">
|
||||
<Loader.Item height="20px" width="70%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@ const DropdownList: React.FC<DropDownListProps> = (props) => {
|
|||
>
|
||||
<Popover.Panel
|
||||
ref={ref}
|
||||
className="absolute left-1/2 -translate-x-full z-10 mt-1 max-w-[9rem] origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none"
|
||||
className="absolute left-1/2 z-10 mt-1 max-w-[9rem] origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none"
|
||||
>
|
||||
<div className="w-full text-sm rounded-md shadow-lg">
|
||||
<div className="w-full rounded-md text-sm shadow-lg">
|
||||
{items.map((item, index) => (
|
||||
<DropdownItem key={index} item={item} />
|
||||
))}
|
||||
|
|
@ -72,7 +72,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
|
|||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="w-full group relative flex gap-x-6 rounded-lg p-1">
|
||||
<div className="group relative flex w-full gap-x-6 rounded-lg p-1">
|
||||
{(!as_ || as_ === "button" || as_ === "div") && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -83,11 +83,11 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
|
|||
}
|
||||
setOpen((prev) => !prev);
|
||||
}}
|
||||
className={`w-full flex items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80 ${
|
||||
className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80 ${
|
||||
isSelected ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
>
|
||||
{children && <ChevronLeft className="h-4 w-4 transition-transform transform" strokeWidth={2} />}
|
||||
{children && <ChevronLeft className="h-4 w-4 transform transition-transform" strokeWidth={2} />}
|
||||
{!children && <span />}
|
||||
<span className="truncate text-xs">{display}</span>
|
||||
<Check className={`h-3 w-3 opacity-0 ${isSelected ? "opacity-100" : ""}`} strokeWidth={2} />
|
||||
|
|
@ -109,7 +109,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
|
|||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
|
||||
open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -125,7 +125,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
|
|||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute left-full -translate-x-full z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none">
|
||||
<Popover.Panel className="absolute left-full z-10 mt-1 w-36 origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
|
||||
<div className="w-full">
|
||||
{items.map((item, index) => (
|
||||
<DropdownItem key={index} item={item} />
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@ type Props = {
|
|||
};
|
||||
|
||||
export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
|
||||
<span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>{iconName}</span>
|
||||
<span className={`material-symbols-rounded text-sm font-light leading-5 ${className}`}>{iconName}</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -31,11 +31,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"
|
||||
}`}
|
||||
>
|
||||
<Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
|
||||
<Icon iconName="add_reaction" className="scale-125 text-custom-text-100" />
|
||||
</span>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
|
|
@ -48,11 +48,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
|
||||
|
|
@ -62,7 +62,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
|
|||
onSelect(emoji);
|
||||
closePopover();
|
||||
}}
|
||||
className={`grid place-items-center select-none rounded-md text-sm p-1 ${
|
||||
className={`grid select-none place-items-center rounded-md p-1 text-sm ${
|
||||
selected.includes(emoji) ? "bg-custom-primary-100/10" : "hover:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ const ToastAlerts = () => {
|
|||
if (!alerts) return null;
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
|
||||
<div className="pointer-events-none fixed right-5 top-5 z-50 h-full w-80 space-y-5 overflow-hidden">
|
||||
{alerts.map((alert) => (
|
||||
<div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
|
||||
<div className="absolute top-1 right-1">
|
||||
<div className="absolute right-1 top-1">
|
||||
<button
|
||||
type="button"
|
||||
className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
|
|
@ -28,10 +28,10 @@ const ToastAlerts = () => {
|
|||
alert.type === "success"
|
||||
? "bg-[#06d6a0]"
|
||||
: alert.type === "error"
|
||||
? "bg-[#ef476f]"
|
||||
: alert.type === "warning"
|
||||
? "bg-[#e98601]"
|
||||
: "bg-[#1B9aaa]"
|
||||
? "bg-[#ef476f]"
|
||||
: alert.type === "warning"
|
||||
? "bg-[#e98601]"
|
||||
: "bg-[#1B9aaa]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-x-3">
|
||||
|
|
|
|||
|
|
@ -24,25 +24,25 @@ export const LoginView = observer(() => {
|
|||
{currentUser ? (
|
||||
<UserLoggedIn />
|
||||
) : (
|
||||
<div className={`bg-onboarding-gradient-100 h-full w-full`}>
|
||||
<div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
|
||||
<div className="flex gap-x-2 py-10 items-center">
|
||||
<div className={`h-full w-full bg-onboarding-gradient-100`}>
|
||||
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28 ">
|
||||
<div className="flex items-center gap-x-2 py-10">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
|
||||
<span className="font-semibold text-2xl sm:text-3xl">Plane</span>
|
||||
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
|
||||
<div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
|
||||
<div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
|
||||
<div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
|
||||
{!true ? (
|
||||
<div className="pt-10 mx-auto flex justify-center">
|
||||
<div className="mx-auto flex justify-center pt-10">
|
||||
<div>
|
||||
<Loader className="space-y-4 w-full pb-4 mx-auto">
|
||||
<Loader className="mx-auto w-full space-y-4 pb-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
|
||||
<Loader className="space-y-4 w-full pt-4 mx-auto">
|
||||
<Loader className="mx-auto w-full space-y-4 pt-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export const ProjectDetailsView = observer(() => {
|
|||
</div>
|
||||
) : (
|
||||
projectStore?.activeBoard && (
|
||||
<div className="relative w-full h-full overflow-hidden flex flex-col">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
{/* applied filters */}
|
||||
<IssueAppliedFilters />
|
||||
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@ import { twMerge } from "tailwind-merge";
|
|||
|
||||
export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
|
||||
|
||||
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
|
||||
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
|
||||
|
|
|
|||
|
|
@ -7,20 +7,20 @@ import planeLogo from "public/plane-logo.svg";
|
|||
import IssueNavbar from "components/issues/navbar";
|
||||
|
||||
const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
|
||||
<div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
|
||||
<div className="flex-shrink-0 h-[60px] border-b border-custom-border-300 relative flex items-center bg-custom-sidebar-background-100 select-none">
|
||||
<div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
|
||||
<div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
|
||||
<IssueNavbar />
|
||||
</div>
|
||||
<div className="w-full h-full relative bg-custom-background-90 overflow-hidden">{children}</div>
|
||||
<div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
|
||||
|
||||
<a
|
||||
href="https://plane.so"
|
||||
className="fixed !z-[999999] bottom-2.5 right-5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border border-custom-border-200 py-1 px-2 flex items-center gap-1"
|
||||
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<div className="w-6 h-6 relative grid place-items-center">
|
||||
<Image src={planeLogo} alt="Plane logo" className="w-6 h-6" height="24" width="24" />
|
||||
<div className="relative grid h-6 w-6 place-items-center">
|
||||
<Image src={planeLogo} alt="Plane logo" className="h-6 w-6" height="24" width="24" />
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
Powered by <span className="font-semibold">Plane Deploy</span>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import Image from "next/image";
|
|||
import notFoundImage from "public/404.svg";
|
||||
|
||||
const Custom404Error = () => (
|
||||
<div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
|
||||
<div className="relative flex h-full min-h-screen w-screen items-center justify-center py-5">
|
||||
<div className="max-w-[700px] space-y-5">
|
||||
<div className="flex items-center flex-col gap-3 text-center">
|
||||
<div className="relative w-[240px] h-[240px]">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<div className="relative h-[240px] w-[240px]">
|
||||
<Image src={notFoundImage} layout="fill" alt="404- Page not found" />
|
||||
</div>
|
||||
<div className="text-xl font-medium">Oops! Something went wrong.</div>
|
||||
|
|
@ -16,10 +16,10 @@ const Custom404Error = () => (
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center flex justify-center items-center">
|
||||
<div className="flex items-center justify-center text-center">
|
||||
<a
|
||||
href={`https://app.plane.so/`}
|
||||
className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
|
||||
className="cursor-pointer select-none rounded-sm border border-gray-200 bg-gray-50 p-1.5 px-2.5 text-sm font-medium text-gray-700 transition-all hover:scale-105 hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
Go to your Workspace
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const WorkspaceProjectPage = () => (
|
||||
<div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Workspace Space</div>
|
||||
<div className="relative flex h-screen w-screen items-center justify-center text-5xl">Plane Workspace Space</div>
|
||||
);
|
||||
|
||||
export default WorkspaceProjectPage;
|
||||
|
|
|
|||
|
|
@ -73,21 +73,21 @@ const HomePage: NextPage = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="bg-onboarding-gradient-100 h-full w-full">
|
||||
<div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
|
||||
<div className="flex gap-x-2 py-10 items-center">
|
||||
<div className="h-full w-full bg-onboarding-gradient-100">
|
||||
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28 ">
|
||||
<div className="flex items-center gap-x-2 py-10">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
|
||||
<span className="font-semibold text-2xl sm:text-3xl">Plane</span>
|
||||
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
|
||||
<div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
|
||||
<div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
<div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
|
||||
<div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
|
||||
<div className="mx-auto flex flex-col divide-y divide-custom-border-200 sm:w-96">
|
||||
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
|
||||
Let{"'"}s get a new password
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(handleResetPassword)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||
<form onSubmit={handleSubmit(handleResetPassword)} className="mx-auto mt-11 space-y-4 sm:w-96">
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
|
|
@ -105,7 +105,7 @@ const HomePage: NextPage = () => {
|
|||
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
|
||||
/>
|
||||
)}
|
||||
|
|
@ -124,12 +124,12 @@ const HomePage: NextPage = () => {
|
|||
onChange={onChange}
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-onboarding-text-200 mt-3">
|
||||
<p className="mt-3 text-xs text-onboarding-text-200">
|
||||
Whatever you choose now will be your account{"'"}s password until you change it.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -151,21 +151,21 @@ const HomePage: NextPage = () => {
|
|||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<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">
|
||||
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
|
||||
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-medium text-sm underline hover:cursor-pointer">See new features</span>
|
||||
<span className="text-sm font-medium underline hover:cursor-pointer">See new features</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-8 -mt-2 ${
|
||||
className={`-mt-2 ml-8 h-full rounded-md ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -22,19 +22,19 @@ const OnBoardingPage = () => {
|
|||
|
||||
return (
|
||||
<div className="h-screen w-full overflow-hidden bg-custom-background-100">
|
||||
<div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
|
||||
<div className="flex h-full w-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
|
||||
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
|
||||
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
|
||||
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
|
||||
<div className="absolute left-0 top-1/2 z-10 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
|
||||
<div className="absolute left-2 top-1/2 z-10 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 py-5 sm:left-1/2 sm:top-12 sm:-translate-x-1/2 sm:translate-y-0 sm:px-0 md:left-1/3">
|
||||
<div className="h-[30px] w-[30px]">
|
||||
<img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
|
||||
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm font-medium text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
|
||||
{user?.email}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
|
||||
<div className="relative flex h-full justify-center overflow-hidden px-8 pb-0 sm:w-10/12 sm:items-center sm:px-0 sm:py-12 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
|
||||
<OnBoardingForm user={user} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import Image from "next/image";
|
|||
import projectNotPublishedImage from "public/project-not-published.svg";
|
||||
|
||||
const CustomProjectNotPublishedError = () => (
|
||||
<div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
|
||||
<div className="relative flex h-full min-h-screen w-screen items-center justify-center py-5">
|
||||
<div className="max-w-[700px] space-y-5">
|
||||
<div className="flex items-center flex-col gap-3 text-center">
|
||||
<div className="relative w-[240px] h-[240px]">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<div className="relative h-[240px] w-[240px]">
|
||||
<Image src={projectNotPublishedImage} layout="fill" alt="404- Page not found" />
|
||||
</div>
|
||||
<div className="text-xl font-medium">
|
||||
|
|
@ -17,10 +17,10 @@ const CustomProjectNotPublishedError = () => (
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center flex justify-center items-center">
|
||||
<div className="flex items-center justify-center text-center">
|
||||
<a
|
||||
href={`https://app.plane.so/`}
|
||||
className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
|
||||
className="cursor-pointer select-none rounded-sm border border-gray-200 bg-gray-50 p-1.5 px-2.5 text-sm font-medium text-gray-700 transition-all hover:scale-105 hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
Go to your Workspace
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue