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

fix: minor bugs in the onboarding screens (#603)

Browse source
This commit is contained in:
Aaryan Khandelwal 2023-03-30 13:55:50 +05:30 • committed by GitHub
parent 63b7c1ee47
commit a94e38c093
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 26 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,6 @@ import { IUser } from "types";
// ui components // ui components
import { MultiInput, PrimaryButton, SecondaryButton } from "components/ui"; import { MultiInput, PrimaryButton, SecondaryButton } from "components/ui";
type Props = { type Props = {
setStep: React.Dispatch<React.SetStateAction<number>>; setStep: React.Dispatch<React.SetStateAction<number>>;
workspace: any; workspace: any;

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

@ -17,7 +17,6 @@ import { CreateWorkspaceForm } from "components/workspace";
// ui // ui
import { PrimaryButton } from "components/ui"; import { PrimaryButton } from "components/ui";
type Props = { type Props = {
setStep: React.Dispatch<React.SetStateAction<number>>; setStep: React.Dispatch<React.SetStateAction<number>>;
setWorkspace: React.Dispatch<React.SetStateAction<any>>; setWorkspace: React.Dispatch<React.SetStateAction<any>>;
@ -68,11 +67,11 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
> >
<Tab.List <Tab.List
as="div" as="div"
className="text-gray-8 flex items-center justify-start gap-3 px-10 pt-7 text-base" className="text-gray-8 flex items-center justify-start gap-3 px-4 pt-4 text-sm"
> >
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`rounded-3xl border px-5 py-2 outline-none ${ `rounded-3xl border px-4 py-2 outline-none ${
selected selected
? "border-theme bg-theme text-white" ? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray" : "border-gray-300 bg-white hover:bg-hover-gray"
@ -104,7 +103,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
</Tab.Panel> </Tab.Panel>
<Tab.Panel> <Tab.Panel>
<div className="mt-6"> <div className="mt-6">
<div className="divide-y py-8"> <div className="divide-y pb-8 px-4">
{invitations && invitations.length > 0 ? ( {invitations && invitations.length > 0 ? (
invitations.map((invitation) => ( invitations.map((invitation) => (
<div key={invitation.id}> <div key={invitation.id}>
@ -166,11 +165,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
<div className="flex w-full items-center justify-center rounded-b-[10px] py-7"> <div className="flex w-full items-center justify-center rounded-b-[10px] py-7">
<PrimaryButton <PrimaryButton
type="submit" type="submit"
className={`flex w-1/2 items-center justify-center text-center text-sm ${ className="w-1/2 text-center"
isJoiningWorkspaces || invitationsRespond.length === 0
? "cursor-not-allowed opacity-80"
: ""
}`}
size="md" size="md"
disabled={isJoiningWorkspaces || invitationsRespond.length === 0} disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
> >

8
apps/app/components/ui/buttons/danger-button.tsx
View file

@ -13,7 +13,7 @@ export const DangerButton: React.FC<ButtonProps> = ({
}) => ( }) => (
<button <button
type={type} type={type}
className={`${className} border border-red-500 font-medium duration-300 ${ className={`${className} border font-medium duration-300 ${
size === "sm" size === "sm"
? "rounded px-3 py-2 text-xs" ? "rounded px-3 py-2 text-xs"
: size === "md" : size === "md"
@ -22,12 +22,12 @@ export const DangerButton: React.FC<ButtonProps> = ({
} ${ } ${
disabled disabled
? "cursor-not-allowed border-gray-300 bg-gray-300 text-black hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100 hover:text-black" ? "cursor-not-allowed border-gray-300 bg-gray-300 text-black hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100 hover:text-black"
: "" : "border-red-500"
} ${ } ${
outline outline
? "bg-transparent hover:bg-red-500 hover:text-white" ? "bg-transparent hover:bg-red-500 hover:text-white"
: "bg-red-500 text-white hover:border-opacity-90 hover:bg-opacity-90" : "bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
} ${loading ? "cursor-wait" : ""}`} } ${!disabled && !outline ? "text-white" : ""} ${loading ? "cursor-wait" : ""}`}
onClick={onClick} onClick={onClick}
disabled={disabled || loading} disabled={disabled || loading}
> >

8
apps/app/components/ui/buttons/primary-button.tsx
View file

@ -13,7 +13,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
}) => ( }) => (
<button <button
type={type} type={type}
className={`${className} border border-theme font-medium duration-300 ${ className={`${className} border font-medium duration-300 ${
size === "sm" size === "sm"
? "rounded px-3 py-2 text-xs" ? "rounded px-3 py-2 text-xs"
: size === "md" : size === "md"
@ -22,12 +22,12 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
} ${ } ${
disabled disabled
? "cursor-not-allowed border-gray-300 bg-gray-300 text-black hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100 hover:text-black" ? "cursor-not-allowed border-gray-300 bg-gray-300 text-black hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100 hover:text-black"
: "" : "border-theme"
} ${ } ${
outline outline
? "bg-transparent hover:bg-theme hover:text-white" ? "bg-transparent hover:bg-theme hover:text-white"
: "bg-theme text-white hover:border-opacity-90 hover:bg-opacity-90" : "bg-theme hover:border-opacity-90 hover:bg-opacity-90"
} ${loading ? "cursor-wait" : ""}`} } ${!disabled && !outline ? "text-white" : ""} ${loading ? "cursor-wait" : ""}`}
onClick={onClick} onClick={onClick}
disabled={disabled || loading} disabled={disabled || loading}
> >

2
apps/app/components/ui/buttons/secondary-button.tsx
View file

@ -13,7 +13,7 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
}) => ( }) => (
<button <button
type={type} type={type}
className={`${className} border border-gray-300 font-medium duration-300 ${ className={`${className} border font-medium duration-300 ${
size === "sm" size === "sm"
? "rounded px-3 py-2 text-xs" ? "rounded px-3 py-2 text-xs"
: size === "md" : size === "md"

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

@ -17,7 +17,6 @@ import { USER_WORKSPACES } from "constants/fetch-keys";
// constants // constants
import { COMPANY_SIZE } from "constants/workspace"; import { COMPANY_SIZE } from "constants/workspace";
type Props = { type Props = {
onSubmit: (res: IWorkspace) => void; onSubmit: (res: IWorkspace) => void;
}; };
@ -84,7 +83,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
> >
<div className="flex w-full max-w-xl flex-col"> <div className="flex w-full max-w-xl flex-col">
<div className="flex flex-col rounded-[10px] bg-white shadow-md"> <div className="flex flex-col rounded-[10px] bg-white shadow-md">
<div className="flex flex-col justify-between gap-3 px-10 py-7"> <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"> <div className="flex flex-col items-start justify-center gap-2.5">
<span>Workspace name</span> <span>Workspace name</span>
<Input <Input
@ -97,13 +96,14 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
validations={{ validations={{
required: "Workspace name is required", required: "Workspace name is required",
}} }}
placeholder="e.g. My Workspace"
error={errors.name} error={errors.name}
/> />
</div> </div>
<div className="flex flex-col items-start justify-center gap-2.5"> <div className="flex flex-col items-start justify-center gap-2.5">
<span>Workspace URL</span> <span>Workspace URL</span>
<div className="flex w-full items-center rounded-md border border-gray-300 px-3"> <div className="flex w-full items-center rounded-md border border-gray-300 px-3">
<span className="text-sm text-slate-600">{"https://app.plane.so/"}</span> <span className="text-sm text-slate-600">https://app.plane.so/</span>
<Input <Input
mode="trueTransparent" mode="trueTransparent"
autoComplete="off" autoComplete="off"
@ -118,7 +118,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
</div> </div>
</div> </div>
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-10 py-7"> <div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-4 py-7">
<span>How large is your company</span> <span>How large is your company</span>
<div className="w-full"> <div className="w-full">
<Controller <Controller

3
apps/app/constants/workspace.ts
View file

@ -32,8 +32,7 @@ export const ONBOARDING_CARDS = {
imgURL: Welcome, imgURL: Welcome,
step: "1/5", step: "1/5",
title: "Welcome to Plane", title: "Welcome to Plane",
description: description: "Plane helps you plan your issues, cycles, and product modules to ship faster.",
"Plane helps you plan your issues, cycles, and product modules to ship faster.",
}, },
issue: { issue: {
imgURL: Issue, imgURL: Issue,