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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/app/components/onboarding/invite-members.tsx
View File

@ -4,8 +4,7 @@ import useToast from "hooks/use-toast";
import workspaceService from "services/workspace.service";
import { IUser } from "types";
// ui components
import { MultiInput, PrimaryButton, SecondaryButton } from "components/ui";
import { MultiInput, PrimaryButton, SecondaryButton } from "components/ui";
type Props = {
setStep: React.Dispatch<React.SetStateAction<number>>;

19
apps/app/components/onboarding/workspace.tsx
View File

@ -17,7 +17,6 @@ import { CreateWorkspaceForm } from "components/workspace";
// ui
import { PrimaryButton } from "components/ui";
type Props = {
setStep: React.Dispatch<React.SetStateAction<number>>;
setWorkspace: React.Dispatch<React.SetStateAction<any>>;
@ -64,15 +63,15 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
<div className="grid w-full place-items-center">
<Tab.Group
as="div"
className="flex w-full max-w-xl flex-col rounded-[10px] bg-white shadow-md"
className="flex w-full max-w-xl flex-col rounded-[10px] bg-white shadow-md"
>
<Tab.List
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
className={({ selected }) =>
`rounded-3xl border px-5 py-2 outline-none ${
`rounded-3xl border px-4 py-2 outline-none ${
selected
? "border-theme bg-theme text-white"
: "border-gray-300 bg-white hover:bg-hover-gray"
@ -103,8 +102,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
/>
</Tab.Panel>
<Tab.Panel>
<div className="mt-6" >
<div className="divide-y py-8">
<div className="mt-6">
<div className="divide-y pb-8 px-4">
{invitations && invitations.length > 0 ? (
invitations.map((invitation) => (
<div key={invitation.id}>
@ -163,14 +162,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
</div>
)}
</div>
<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
type="submit"
className={`flex w-1/2 items-center justify-center text-center text-sm ${
isJoiningWorkspaces || invitationsRespond.length === 0
? "cursor-not-allowed opacity-80"
: ""
}`}
className="w-1/2 text-center"
size="md"
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
type={type}
className={`${className} border border-red-500 font-medium duration-300 ${
className={`${className} border font-medium duration-300 ${
size === "sm"
? "rounded px-3 py-2 text-xs"
: size === "md"
@ -22,12 +22,12 @@ export const DangerButton: React.FC<ButtonProps> = ({
} ${
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"
: ""
: "border-red-500"
} ${
outline
? "bg-transparent hover:bg-red-500 hover:text-white"
: "bg-red-500 text-white hover:border-opacity-90 hover:bg-opacity-90"
} ${loading ? "cursor-wait" : ""}`}
: "bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
} ${!disabled && !outline ? "text-white" : ""} ${loading ? "cursor-wait" : ""}`}
onClick={onClick}
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
type={type}
className={`${className} border border-theme font-medium duration-300 ${
className={`${className} border font-medium duration-300 ${
size === "sm"
? "rounded px-3 py-2 text-xs"
: size === "md"
@ -22,12 +22,12 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
} ${
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"
: ""
: "border-theme"
} ${
outline
? "bg-transparent hover:bg-theme hover:text-white"
: "bg-theme text-white hover:border-opacity-90 hover:bg-opacity-90"
} ${loading ? "cursor-wait" : ""}`}
: "bg-theme hover:border-opacity-90 hover:bg-opacity-90"
} ${!disabled && !outline ? "text-white" : ""} ${loading ? "cursor-wait" : ""}`}
onClick={onClick}
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
type={type}
className={`${className} border border-gray-300 font-medium duration-300 ${
className={`${className} border font-medium duration-300 ${
size === "sm"
? "rounded px-3 py-2 text-xs"
: size === "md"

14
apps/app/components/workspace/create-workspace-form.tsx
View File

@ -17,7 +17,6 @@ import { USER_WORKSPACES } from "constants/fetch-keys";
// constants
import { COMPANY_SIZE } from "constants/workspace";
type Props = {
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 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">
<span>Workspace name</span>
<Input
@ -97,13 +96,14 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
validations={{
required: "Workspace name is required",
}}
placeholder="e.g. My Workspace"
error={errors.name}
/>
</div>
<div className="flex flex-col items-start justify-center gap-2.5">
<span>Workspace URL</span>
<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
mode="trueTransparent"
autoComplete="off"
@ -118,7 +118,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
</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>
<div className="w-full">
<Controller
@ -142,12 +142,12 @@ export const CreateWorkspaceForm: React.FC<Props> = ({ onSubmit }) => {
)}
/>
{errors.company_size && (
<span className="text-sm text-red-500">{errors.company_size.message}</span>
)}
<span className="text-sm text-red-500">{errors.company_size.message}</span>
)}
</div>
</div>
<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
type="submit"
className="flex w-1/2 items-center justify-center text-center"

5
apps/app/constants/workspace.ts
View File

@ -32,8 +32,7 @@ export const ONBOARDING_CARDS = {
imgURL: Welcome,
step: "1/5",
title: "Welcome to Plane",
description:
"Plane helps you plan your issues, cycles, and product modules to ship faster.",
description: "Plane helps you plan your issues, cycles, and product modules to ship faster.",
},
issue: {
imgURL: Issue,
@ -54,7 +53,7 @@ export const ONBOARDING_CARDS = {
step: "4/5",
title: "Break into Modules ",
description:
"Modules break your big think into Projects or Features , to help you organize better.",
"Modules break your big think into Projects or Features, to help you organize better.",
},
commandMenu: {
imgURL: CommandMenu,