thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: onboarding invitations overflow (#1575)

Browse Source 
* fix: onboarding invitations overflow

* fix: user avatar in the notification card

* style: update graph grid color
This commit is contained in:
Aaryan Khandelwal 2023-07-19 17:09:53 +05:30 committed by GitHub
parent b38898753f
commit 124c2f772e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 102 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,7 +120,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
Please check your inbox at <span className="font-medium">{watch("email")}</span> Please check your inbox at <span className="font-medium">{watch("email")}</span>
</p> </p>
)} )}
<form className="space-y-4 mt-10"> <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
<div className="space-y-1"> <div className="space-y-1">
<Input <Input
id="email" id="email"

16
apps/app/components/notifications/notification-card.tsx
View File

@ -90,13 +90,15 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
<div className="relative w-12 h-12 rounded-full"> <div className="relative w-12 h-12 rounded-full">
{notification.triggered_by_details.avatar && {notification.triggered_by_details.avatar &&
notification.triggered_by_details.avatar !== "" ? ( notification.triggered_by_details.avatar !== "" ? (
<Image <div className="h-12 w-12 rounded-full">
src={notification.triggered_by_details.avatar} <Image
alt="profile image" src={notification.triggered_by_details.avatar}
layout="fill" alt="Profile Image"
objectFit="cover" layout="fill"
className="rounded-full" objectFit="cover"
/> className="rounded-full"
/>
</div>
) : ( ) : (
<div className="w-12 h-12 bg-custom-background-100 rounded-full flex justify-center items-center"> <div className="w-12 h-12 bg-custom-background-100 rounded-full flex justify-center items-center">
<span className="text-custom-text-100 font-medium text-lg"> <span className="text-custom-text-100 font-medium text-lg">

8
apps/app/components/onboarding/join-workspaces.tsx
View File

@ -88,7 +88,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
<div className="w-full space-y-7 sm:space-y-10"> <div className="w-full space-y-7 sm:space-y-10">
<h5 className="sm:text-lg">We see that someone has invited you to</h5> <h5 className="sm:text-lg">We see that someone has invited you to</h5>
<h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4> <h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
<div className="md:w-3/5 space-y-4"> <div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
{invitations && {invitations &&
invitations.map((invitation) => { invitations.map((invitation) => {
const isSelected = invitationsRespond.includes(invitation.id); const isSelected = invitationsRespond.includes(invitation.id);
@ -146,7 +146,11 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
> >
Accept & Join Accept & Join
</PrimaryButton> </PrimaryButton>
<SecondaryButton className="border border-none bg-transparent" size="md" onClick={finishOnboarding} > <SecondaryButton
className="border border-none bg-transparent"
size="md"
onClick={finishOnboarding}
>
Skip for now Skip for now
</SecondaryButton> </SecondaryButton>
</div> </div>

4
apps/app/constants/graph.ts
View File

@ -17,12 +17,12 @@ export const CHARTS_THEME: Theme = {
background: "rgb(var(--color-background-80))", background: "rgb(var(--color-background-80))",
color: "rgb(var(--color-text-200))", color: "rgb(var(--color-text-200))",
fontSize: "0.8rem", fontSize: "0.8rem",
border: "1px solid rgb(var(--color-background-80))", border: "1px solid rgb(var(--color-border-300))",
}, },
}, },
grid: { grid: {
line: { line: {
stroke: "rgb(var(--color-background-80))", stroke: "rgb(var(--color-border-100))",
}, },
}, },
}; };

4
apps/app/pages/index.tsx
View File

@ -145,11 +145,11 @@ const HomePage: NextPage = () => {
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100"> <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane Sign in to Plane
</h1> </h1>
<div className="flex flex-col divide-y divide-custom-border-200 sm:w-[360px] mx-auto"> <div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7"> <div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} /> <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div> </div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 overflow-hidden"> <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} /> <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
<GithubLoginButton handleSignIn={handleGitHubSignIn} /> <GithubLoginButton handleSignIn={handleGitHubSignIn} />
</div> </div>

162
apps/app/pages/invitations.tsx
View File

@ -105,91 +105,93 @@ const OnBoard: NextPage = () => {
{user?.email} {user?.email}
</div> </div>
</div> </div>
{invitations && invitations.length > 0 ? ( {invitations ? (
<div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5"> invitations.length > 0 ? (
<div className="w-full space-y-10"> <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
<h5 className="text-lg">We see that someone has invited you to</h5> <div className="w-full space-y-10">
<h4 className="text-2xl font-semibold">Join a workspace</h4> <h5 className="text-lg">We see that someone has invited you to</h5>
<div className="md:w-3/5 space-y-4"> <h4 className="text-2xl font-semibold">Join a workspace</h4>
{invitations.map((invitation) => { <div className="max-h-[37vh] md:w-3/5 space-y-4 overflow-y-auto">
const isSelected = invitationsRespond.includes(invitation.id); {invitations.map((invitation) => {
const isSelected = invitationsRespond.includes(invitation.id);
return ( return (
<div <div
key={invitation.id} key={invitation.id}
className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${ className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
isSelected isSelected
? "border-custom-primary-100" ? "border-custom-primary-100"
: "border-custom-border-200 hover:bg-custom-background-80" : "border-custom-border-200 hover:bg-custom-background-80"
}`}
onClick={() =>
handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
}
>
<div className="flex-shrink-0">
<div className="grid place-items-center h-9 w-9 rounded">
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
<img
src={invitation.workspace.logo}
height="100%"
width="100%"
className="rounded"
alt={invitation.workspace.name}
/>
) : (
<span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
{invitation.workspace.name[0]}
</span>
)}
</div>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium">
{truncateText(invitation.workspace.name, 30)}
</div>
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
</div>
<span
className={`flex-shrink-0 ${
isSelected ? "text-custom-primary-100" : "text-custom-text-200"
}`} }`}
onClick={() =>
handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
}
> >
<CheckCircleIcon className="h-5 w-5" /> <div className="flex-shrink-0">
</span> <div className="grid place-items-center h-9 w-9 rounded">
</div> {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
); <img
})} src={invitation.workspace.logo}
</div> height="100%"
<div className="flex items-center gap-3"> width="100%"
<PrimaryButton className="rounded"
type="submit" alt={invitation.workspace.name}
size="md" />
onClick={submitInvitations} ) : (
disabled={isJoiningWorkspaces || invitationsRespond.length === 0} <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
> {invitation.workspace.name[0]}
Accept & Join </span>
</PrimaryButton> )}
<Link href="/"> </div>
<a> </div>
<SecondaryButton size="md" outline> <div className="min-w-0 flex-1">
Go Home <div className="text-sm font-medium">
</SecondaryButton> {truncateText(invitation.workspace.name, 30)}
</a> </div>
</Link> <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
</div>
<span
className={`flex-shrink-0 ${
isSelected ? "text-custom-primary-100" : "text-custom-text-200"
}`}
>
<CheckCircleIcon className="h-5 w-5" />
</span>
</div>
);
})}
</div>
<div className="flex items-center gap-3">
<PrimaryButton
type="submit"
size="md"
onClick={submitInvitations}
disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
>
Accept & Join
</PrimaryButton>
<Link href="/">
<a>
<SecondaryButton size="md" outline>
Go Home
</SecondaryButton>
</a>
</Link>
</div>
</div> </div>
</div> </div>
</div> ) : (
) : ( <div className="fixed top-0 left-0 h-full w-full grid place-items-center">
<div className="fixed top-0 left-0 h-full w-full grid place-items-center"> <EmptyState
<EmptyState title="No pending invites"
title="No pending invites" description="You can see here if someone invites you to a workspace."
description="You can see here if someone invites you to a workspace." image={emptyInvitation}
image={emptyInvitation} buttonText="Back to Dashboard"
buttonText="Back to Dashboard" onClick={() => router.push("/")}
onClick={() => router.push("/")} />
/> </div>
</div> )
)} ) : null}
</div> </div>
</DefaultLayout> </DefaultLayout>
</UserAuthorizationLayout> </UserAuthorizationLayout>