binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: onboarding screens, invitations page

Browse source
This commit is contained in:
Aaryan Khandelwal 2023-04-28 20:46:07 +05:30
parent 93fb4fe1e9
commit 81d9c70026
8 changed files with 543 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

15
apps/app/components/onboarding/invite-members.tsx
View file

@ -34,7 +34,7 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
.catch((err) => console.log(err));
};
const checkEmail = watch("emails") && watch("emails").length > 0 ;
const checkEmail = watch("emails") && watch("emails").length > 0;
return (
<form
className="flex w-full items-center justify-center"
@ -44,9 +44,9 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
}}
>
<div className="flex w-full max-w-xl flex-col gap-12">
<div className="flex flex-col gap-6 rounded-[10px] bg-brand-surface-2 px-10 py-7 shadow-md">
<h2 className="text-2xl font-medium ">Invite your team to your workspace.</h2>
<div className="flex flex-col items-start justify-center gap-2.5 ">
<div className="flex flex-col gap-6 rounded-[10px] bg-brand-base p-7 shadow-md">
<h2 className="text-xl font-medium">Invite your team to your workspace.</h2>
<div className="flex flex-col items-start justify-center gap-2.5">
<div className="w-full">
<MultiInput
name="emails"
@ -59,11 +59,12 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
</div>
</div>
<div className="flex w-full flex-col items-center justify-center gap-3 ">
<div className="flex w-full flex-col items-center justify-center gap-3">
<PrimaryButton
type="submit"
className="flex w-1/2 items-center justify-center text-center"
disabled={isSubmitting || !checkEmail}
disabled={!checkEmail}
loading={isSubmitting}
size="md"
>
{isSubmitting ? "Inviting..." : "Continue"}
@ -71,7 +72,7 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
<SecondaryButton
type="button"
className="w-1/2 rounded-lg bg-transparent border-none"
className="w-1/2 rounded-lg border-none bg-transparent"
size="md"
outline
onClick={() => setStep(4)}

10
apps/app/components/onboarding/onboarding-card.tsx
View file

@ -15,15 +15,15 @@ type Props = {
export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
<div
className={`flex flex-col items-center justify-center gap-7 rounded-[10px] px-14 pt-10 text-center ${
gradient ? "bg-gradient-to-b from-[#2C8DFF]/50 to-transparent via-white" : "bg-white"
className={`flex flex-col items-center justify-center gap-7 rounded-[10px] px-14 pt-10 text-center ${
gradient ? "bg-gradient-to-b from-[#2C8DFF]/50 via-brand-base to-transparent" : ""
}`}
>
<div className="h-44 w-full">
<Image src={data.imgURL} height="180" width="450" alt={data.title} />
</div>
<h3 className="text-3xl font-medium">{data.title}</h3>
<p className="text-base text-gray-400">{data.description}</p>
<span className="text-base text-gray-400">{data.step}</span>
<h3 className="text-2xl font-medium">{data.title}</h3>
<p className="text-base text-brand-secondary">{data.description}</p>
<span className="text-base text-brand-secondary">{data.step}</span>
</div>
);

2
apps/app/components/onboarding/user-details.tsx
View file

@ -67,7 +67,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
return (
<form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
<div className="flex w-full max-w-xl flex-col gap-12">
<div className="flex flex-col rounded-[10px] bg-brand-surface-2 shadow-md">
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
<div className="flex flex-col justify-between gap-3 px-10 py-7 sm:flex-row">
<div className="flex flex-col items-start justify-center gap-2.5">
<span>First name</span>

10
apps/app/components/onboarding/workspace.tsx
View file

@ -68,7 +68,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
<div className="grid min-h-[490px] w-full place-items-center">
<Tab.Group
as="div"
className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-surface-2 shadow-md"
className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md"
>
<Tab.List
as="div"
@ -129,16 +129,14 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
alt={invitation.workspace.name}
/>
) : (
<span className="flex h-full w-full items-center justify-center rounded bg-gray-500 p-4 uppercase text-white">
<span className="flex h-full w-full items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
{invitation.workspace.name.charAt(0)}
</span>
)}
</span>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-brand-base">
{invitation.workspace.name}
</div>
<div className="text-sm font-medium">{invitation.workspace.name}</div>
<p className="text-sm text-brand-secondary">
Invited by {invitation.workspace.owner.first_name}
</p>
@ -165,7 +163,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
))
) : (
<div className="text-center">
<h3 className="text-gray-400">You have no invitations</h3>
<h3 className="text-brand-secondary">You have no invitations</h3>
</div>
)}
</div>

19
apps/app/components/workspace/create-workspace-form.tsx
View file

@ -37,6 +37,7 @@ const restrictedUrls = [
"onboarding",
"signin",
"workspace-member-invitation",
"404",
];
export const CreateWorkspaceForm: React.FC<Props> = ({
@ -103,10 +104,10 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
onSubmit={handleSubmit(handleCreateWorkspace)}
>
<div className="flex w-full max-w-xl flex-col">
<div className="flex flex-col rounded-[10px] bg-brand-surface-2">
<div className="flex flex-col rounded-[10px] bg-brand-base">
<div className="flex flex-col justify-between gap-3 px-4 py-7">
<div className="flex flex-col items-start justify-center gap-2.5">
<span>Workspace name</span>
<span className="text-sm">Workspace name</span>
<Input
name="name"
register={register}
@ -125,9 +126,9 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
/>
</div>
<div className="flex flex-col items-start justify-center gap-2.5">
<span>Workspace URL</span>
<span className="text-sm">Workspace URL</span>
<div className="flex w-full items-center rounded-md border border-brand-base px-3">
<span className="whitespace-nowrap text-sm text-slate-600">
<span className="whitespace-nowrap text-sm text-brand-secondary">
{typeof window !== "undefined" && window.location.origin}/
</span>
<Input
@ -156,7 +157,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
</div>
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-4 py-7">
<span>How large is your company?</span>
<span className="text-sm">How large is your company?</span>
<div className="w-full">
<Controller
name="company_size"
@ -166,7 +167,13 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
<CustomSelect
value={value}
onChange={onChange}
label={value ? value.toString() : "Select company size"}
label={
value ? (
value.toString()
) : (
<span className="text-brand-secondary">Select company size</span>
)
}
input
width="w-full"
>

27
apps/app/pages/invitations.tsx
View file

@ -89,7 +89,7 @@ const OnBoard: NextPage = () => {
>
<div className="flex min-h-full flex-col items-center justify-center p-4 sm:p-0">
{user && (
<div className="mb-10 w-96 rounded-lg bg-indigo-100 p-2 text-theme">
<div className="mb-10 w-96 rounded-lg bg-brand-accent/20 p-2 text-brand-accent">
<p className="text-center text-sm">logged in as {user.email}</p>
</div>
)}
@ -98,11 +98,14 @@ const OnBoard: NextPage = () => {
{invitations && workspaces ? (
invitations.length > 0 ? (
<div>
<h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
<p className="mt-1 text-sm text-gray-500">
<h2 className="text-lg font-medium">Workspace Invitations</h2>
<p className="mt-1 text-sm text-brand-secondary">
Select invites that you want to accept.
</p>
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
<ul
role="list"
className="mt-6 divide-y divide-brand-base border-t border-b border-brand-base"
>
{invitations.map((invitation) => (
<SingleInvitation
key={invitation.id}
@ -115,7 +118,7 @@ const OnBoard: NextPage = () => {
<div className="mt-6 flex items-center gap-2">
<Link href="/">
<a className="w-full">
<SecondaryButton className="w-full">Go to Home</SecondaryButton>
<SecondaryButton className="w-full">Go Home</SecondaryButton>
</a>
</Link>
<PrimaryButton className="w-full" onClick={submitInvitations}>
@ -124,18 +127,18 @@ const OnBoard: NextPage = () => {
</div>
</div>
) : workspaces && workspaces.length > 0 ? (
<div className="mt-3 flex flex-col gap-y-3">
<h2 className="mb-4 text-2xl font-medium">Your workspaces</h2>
<div className="flex flex-col gap-y-3">
<h2 className="mb-4 text-xl font-medium">Your workspaces</h2>
{workspaces.map((workspace) => (
<Link key={workspace.id} href={workspace.slug}>
<a>
<div className="mb-2 flex items-center justify-between rounded border px-4 py-2">
<div className="flex items-center gap-x-2">
<CubeIcon className="h-5 w-5 text-gray-400" />
<div className="mb-2 flex items-center justify-between rounded border border-brand-base px-4 py-2">
<div className="flex items-center gap-x-2 text-sm">
<CubeIcon className="h-5 w-5 text-brand-secondary" />
{workspace.name}
</div>
<div className="flex items-center gap-x-2">
<p className="text-sm">{workspace.owner.first_name}</p>
<div className="flex items-center gap-x-2 text-xs text-brand-secondary">
{workspace.owner.first_name}
</div>
</div>
</a>

10
apps/app/pages/onboarding.tsx
View file

@ -27,7 +27,7 @@ import { ICurrentUserResponse } from "types";
import { CURRENT_USER } from "constants/fetch-keys";
const Onboarding: NextPage = () => {
const [step, setStep] = useState(1);
const [step, setStep] = useState(2);
const [userRole, setUserRole] = useState<string | null>(null);
const [workspace, setWorkspace] = useState();
@ -42,7 +42,7 @@ const Onboarding: NextPage = () => {
<div className="grid h-full place-items-center p-5">
{step <= 3 ? (
<div className="w-full">
<div className="text-center mb-8">
<div className="mb-8 text-center">
<Image src={Logo} height="50" alt="Plane Logo" />
</div>
{step === 1 ? (
@ -55,15 +55,15 @@ const Onboarding: NextPage = () => {
</div>
) : (
<div className="flex w-full max-w-2xl flex-col gap-12">
<div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-white pb-10 text-center shadow-md">
<div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-10 text-center shadow-md">
{step === 4 ? (
<OnboardingCard data={ONBOARDING_CARDS.welcome} />
) : step === 5 ? (
<OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
) : step === 6 ? (
<OnboardingCard data={ONBOARDING_CARDS.cycle} gradient/>
<OnboardingCard data={ONBOARDING_CARDS.cycle} gradient />
) : step === 7 ? (
<OnboardingCard data={ONBOARDING_CARDS.module} gradient/>
<OnboardingCard data={ONBOARDING_CARDS.module} gradient />
) : (
<OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
)}