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

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} />
)}