mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: onboarding UI updates and dark mode fixes.
This commit is contained in:
Prateek Shourya
parent
c389c6b440
commit
e2ede25f57
@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Image from "next/image";
|
||||
// icons
|
||||
import { Sparkles } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
// types
|
||||
import { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
|
||||
// ui
|
||||
@ -12,7 +12,8 @@ import { Invitations, OnboardingHeader, SwitchOrDeleteAccountDropdown, CreateWor
|
||||
// hooks
|
||||
import { useUser } from "@/hooks/store";
|
||||
// assets
|
||||
import createJoinWorkspace from "public/onboarding/create-join-workspace.png";
|
||||
import CreateJoinWorkspaceDark from "public/onboarding/create-join-workspace-dark.svg";
|
||||
import CreateJoinWorkspace from "public/onboarding/create-join-workspace.svg";
|
||||
|
||||
export enum ECreateOrJoinWorkspaceViews {
|
||||
WORKSPACE_CREATE = "WORKSPACE_CREATE",
|
||||
@ -31,6 +32,8 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
|
||||
const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
|
||||
// store hooks
|
||||
const { data: user } = useUser();
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
if (invitations.length > 0) {
|
||||
@ -47,7 +50,7 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full">
|
||||
<div className="w-full lg:w-3/5 h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex items-center justify-between">
|
||||
<OnboardingHeader currentStep={2} totalSteps={totalSteps} />
|
||||
<div className="shrink-0 lg:hidden">
|
||||
@ -74,14 +77,14 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block relative w-2/5 px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28 bg-onboarding-gradient-100">
|
||||
<div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<SwitchOrDeleteAccountDropdown />
|
||||
<div className="absolute right-0 bottom-0 flex flex-col items-start justify-end w-2/3 ">
|
||||
<div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium self-end">
|
||||
<Sparkles className="h-6 w-6" />
|
||||
Workspace is the hub for all work happening in your company.
|
||||
</div>
|
||||
<Image src={createJoinWorkspace} alt="create-join-workspace" />
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? CreateJoinWorkspaceDark : CreateJoinWorkspace}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="Profile setup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,6 @@ export * from "./create-or-join-workspaces";
|
||||
export * from "./profile-setup";
|
||||
export * from "./create-workspace";
|
||||
export * from "./invitations";
|
||||
export * from "./onboarding-sidebar";
|
||||
export * from "./step-indicator";
|
||||
export * from "./switch-or-delete-account-dropdown";
|
||||
export * from "./switch-delete-account-modal";
|
||||
|
||||
@ -30,10 +30,8 @@ import useDynamicDropdownPosition from "@/hooks/use-dynamic-dropdown";
|
||||
// services
|
||||
import { WorkspaceService } from "@/services/workspace.service";
|
||||
// assets
|
||||
import userDark from "public/onboarding/user-dark.svg";
|
||||
import userLight from "public/onboarding/user-light.svg";
|
||||
import user1 from "public/users/user-1.png";
|
||||
import user2 from "public/users/user-2.png";
|
||||
import InviteMembersDark from "public/onboarding/invite-members-dark.svg";
|
||||
import InviteMembersLight from "public/onboarding/invite-members-light.svg";
|
||||
// components
|
||||
import { OnboardingHeader } from "./header";
|
||||
import { SwitchOrDeleteAccountDropdown } from "./switch-or-delete-account-dropdown";
|
||||
@ -365,7 +363,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<div className="flex w-full h-full">
|
||||
<div className="w-full lg:w-3/5 h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Since this will always be the last step */}
|
||||
<OnboardingHeader currentStep={totalSteps} totalSteps={totalSteps} />
|
||||
@ -437,46 +435,14 @@ export const InviteMembers: React.FC<Props> = (props) => {
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block w-2/5 px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28 bg-onboarding-gradient-100">
|
||||
<div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<SwitchOrDeleteAccountDropdown />
|
||||
<div
|
||||
className={`fixed mt-16 ml-16 hidden h-fit w-1/5 rounded border-x border-t border-onboarding-border-300 border-opacity-10 bg-onboarding-gradient-300 p-4 pb-40 lg:block`}
|
||||
>
|
||||
<p className="text-base font-semibold text-onboarding-text-400">Members</p>
|
||||
|
||||
{Array.from({ length: 4 }).map((i, index) => (
|
||||
<div key={index} className="mt-6 flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full">
|
||||
<Image src={resolvedTheme === "dark" ? userDark : userLight} alt="user" className="object-cover" />
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="my-2 h-2.5 w-1/2 rounded-md bg-onboarding-background-400" />
|
||||
<div className="h-2 w-1/3 rounded-md bg-onboarding-background-100" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="relative mt-20">
|
||||
<div className="absolute right-24 mt-1 flex w-full gap-x-2 rounded-full border border-onboarding-border-100 bg-onboarding-background-200 p-2 shadow-onboarding-shadow-sm">
|
||||
<div className="h-10 w-10 flex-shrink-0 rounded-full bg-custom-primary-10">
|
||||
<Image src={user2} alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Murphy cooper</p>
|
||||
<p className="text-sm text-onboarding-text-400">murphy@plane.so</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute right-12 mt-16 flex w-full gap-x-2 rounded-full border border-onboarding-border-100 bg-onboarding-background-200 p-2 shadow-onboarding-shadow-sm">
|
||||
<div className="h-10 w-10 flex-shrink-0 rounded-full bg-custom-primary-10">
|
||||
<Image src={user1} alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Else Thompson</p>
|
||||
<p className="text-sm text-onboarding-text-400">Elsa@plane.so</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? InviteMembersDark : InviteMembersLight}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="Profile setup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,291 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Control, Controller, UseFormSetValue, UseFormWatch } from "react-hook-form";
|
||||
import {
|
||||
BarChart2,
|
||||
Bell,
|
||||
Briefcase,
|
||||
CheckCircle,
|
||||
ChevronDown,
|
||||
ContrastIcon,
|
||||
FileText,
|
||||
Home,
|
||||
LayersIcon,
|
||||
PenSquare,
|
||||
Search,
|
||||
Settings,
|
||||
} from "lucide-react";
|
||||
import { IWorkspace } from "@plane/types";
|
||||
import { Avatar, DiceIcon, PhotoFilterIcon } from "@plane/ui";
|
||||
// hooks
|
||||
import { useUser, useWorkspace } from "@/hooks/store";
|
||||
// types
|
||||
import projectEmoji from "public/emoji/project-emoji.svg";
|
||||
// assets
|
||||
|
||||
const workspaceLinks = [
|
||||
{
|
||||
Icon: Home,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
Icon: BarChart2,
|
||||
name: "Analytics",
|
||||
},
|
||||
{
|
||||
Icon: Briefcase,
|
||||
name: "Projects",
|
||||
},
|
||||
{
|
||||
Icon: CheckCircle,
|
||||
name: "All Issues",
|
||||
},
|
||||
{
|
||||
Icon: Bell,
|
||||
name: "Notifications",
|
||||
},
|
||||
];
|
||||
|
||||
const projectLinks = [
|
||||
{
|
||||
name: "Issues",
|
||||
Icon: LayersIcon,
|
||||
},
|
||||
{
|
||||
name: "Cycles",
|
||||
|
||||
Icon: ContrastIcon,
|
||||
},
|
||||
{
|
||||
name: "Modules",
|
||||
Icon: DiceIcon,
|
||||
},
|
||||
{
|
||||
name: "Views",
|
||||
|
||||
Icon: PhotoFilterIcon,
|
||||
},
|
||||
{
|
||||
name: "Pages",
|
||||
|
||||
Icon: FileText,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
|
||||
Icon: Settings,
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
workspaceName: string;
|
||||
showProject: boolean;
|
||||
control?: Control<IWorkspace, any>;
|
||||
setValue?: UseFormSetValue<IWorkspace>;
|
||||
watch?: UseFormWatch<IWorkspace>;
|
||||
userFullName?: string;
|
||||
};
|
||||
|
||||
let timer: number = 0;
|
||||
let lastWorkspaceName: string = "";
|
||||
|
||||
export const OnboardingSidebar: React.FC<Props> = (props) => {
|
||||
const { workspaceName, showProject, control, setValue, watch, userFullName } = props;
|
||||
// store hooks
|
||||
const { data: currentUser } = useUser();
|
||||
const { workspaces } = useWorkspace();
|
||||
const workspaceDetails = Object.values(workspaces ?? {})?.[0];
|
||||
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const handleZoomWorkspace = (value: string) => {
|
||||
if (lastWorkspaceName === value) return;
|
||||
lastWorkspaceName = value;
|
||||
if (timer > 0) {
|
||||
timer += 2;
|
||||
timer = Math.min(timer, 2);
|
||||
} else {
|
||||
timer = 2;
|
||||
timer = Math.min(timer, 2);
|
||||
const interval = setInterval(() => {
|
||||
if (timer < 0) {
|
||||
setValue!("name", lastWorkspaceName);
|
||||
clearInterval(interval);
|
||||
}
|
||||
timer--;
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (watch) {
|
||||
watch("name");
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative h-full border-r border-onboarding-border-100 ">
|
||||
<div>
|
||||
{control && setValue ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field: { value } }) => {
|
||||
if (value.length > 0) {
|
||||
handleZoomWorkspace(value);
|
||||
} else {
|
||||
lastWorkspaceName = "";
|
||||
}
|
||||
return timer > 0 ? (
|
||||
<div
|
||||
className={`top-3 ml-6 mt-4 flex w-full max-w-screen-sm items-center border-[6px] bg-onboarding-background-200 transition-all ${
|
||||
resolvedTheme == "dark" ? "border-onboarding-background-100" : "border-custom-primary-20"
|
||||
} rounded-xl`}
|
||||
>
|
||||
<div className="w-full rounded-lg border border-onboarding-background-400 py-6 pl-4">
|
||||
<div
|
||||
className={`${
|
||||
resolvedTheme == "light" ? "bg-[#F5F5F5]" : "bg-[#363A40]"
|
||||
} flex w-full items-center p-1`}
|
||||
>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={value.length > 0 ? value : "New Workspace"}
|
||||
src={""}
|
||||
size={30}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="black"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="ml-2 truncate text-xl font-medium text-onboarding-text-100">{value}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex w-full items-center gap-y-2 truncate border border-transparent px-4 pt-6 transition-all">
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={value.length > 0 ? value : workspaceDetails ? workspaceDetails.name : "New Workspace"}
|
||||
src={""}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="black"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-2 flex w-full flex-shrink items-center justify-between truncate">
|
||||
<h4 className="truncate text-base font-medium text-custom-text-100">{workspaceName}</h4>
|
||||
<ChevronDown className={`mx-1 h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
|
||||
</div>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={currentUser?.email}
|
||||
src={currentUser?.avatar || undefined}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex w-full items-center gap-y-2 truncate px-4 pt-6 transition-all">
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={workspaceDetails ? workspaceDetails.name : "New Workspace"}
|
||||
src={""}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="black"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-2 flex w-full flex-shrink items-center justify-between truncate">
|
||||
<h4 className="truncate text-base font-medium text-custom-text-100">{workspaceName}</h4>
|
||||
<ChevronDown className={`mx-1 h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
|
||||
</div>
|
||||
<div className="flex flex-shrink-0">
|
||||
<Avatar
|
||||
name={userFullName ?? currentUser?.email}
|
||||
src={currentUser?.avatar || undefined}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`space-y-1 p-4`}>
|
||||
<div className={`mb-3 mt-4 flex w-full items-center justify-between gap-2 px-1 `}>
|
||||
<div
|
||||
className={`group relative flex w-full items-center justify-between gap-1 rounded border border-onboarding-border-100 px-3 shadow-custom-shadow-2xs`}
|
||||
>
|
||||
<div className={`relative flex flex-shrink-0 flex-grow items-center gap-2 rounded py-1.5 outline-none`}>
|
||||
<PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
|
||||
{<span className="text-sm font-medium">New Issue</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex flex-shrink-0 items-center justify-center rounded border border-onboarding-border-100
|
||||
p-2 shadow-custom-shadow-2xs outline-none
|
||||
`}
|
||||
>
|
||||
<Search className="h-4 w-4 text-onboarding-text-200" />
|
||||
</div>
|
||||
</div>
|
||||
{workspaceLinks.map((link) => (
|
||||
<a className="block w-full" key={link.name}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium text-onboarding-text-200
|
||||
outline-none focus:bg-custom-sidebar-background-80
|
||||
`}
|
||||
>
|
||||
{<link.Icon className="h-4 w-4" />}
|
||||
{link.name}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{showProject && (
|
||||
<div className="px-4 pt-4">
|
||||
<p className="pb-4 text-base font-semibold text-custom-text-300">Projects</p>
|
||||
|
||||
<div className="px-3">
|
||||
{" "}
|
||||
<div className="mb-3 flex w-4/5 items-center justify-between text-base font-medium text-custom-text-200">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Image src={projectEmoji} alt="Plane Logo" className="h-4 w-4" />
|
||||
<span> Plane</span>
|
||||
</div>
|
||||
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</div>
|
||||
{projectLinks.map((link) => (
|
||||
<a className="ml-6 block w-full" key={link.name}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium text-custom-sidebar-text-200
|
||||
outline-none focus:bg-custom-sidebar-background-80
|
||||
`}
|
||||
>
|
||||
{<link.Icon className="h-4 w-4" />}
|
||||
{link.name}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Eye, EyeOff, Sparkles } from "lucide-react";
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
// types
|
||||
import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
|
||||
// ui
|
||||
@ -21,7 +22,8 @@ import { useEventTracker, useUser, useUserProfile } from "@/hooks/store";
|
||||
import { AuthService } from "@/services/auth.service";
|
||||
import { FileService } from "@/services/file.service";
|
||||
// assets
|
||||
import profileSetup from "public/onboarding/profile-setup.png";
|
||||
import ProfileSetupDark from "public/onboarding/profile-setup-dark.svg";
|
||||
import ProfileSetupLight from "public/onboarding/profile-setup-light.svg";
|
||||
|
||||
type TProfileSetupFormValues = {
|
||||
first_name: string;
|
||||
@ -69,6 +71,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
|
||||
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
const { updateCurrentUser } = useUser();
|
||||
const { updateUserProfile } = useUserProfile();
|
||||
@ -185,7 +189,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full">
|
||||
<div className="w-full lg:w-3/5 h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex items-center justify-between">
|
||||
<OnboardingHeader currentStep={1} totalSteps={totalSteps} />
|
||||
<div className="shrink-0 lg:hidden">
|
||||
@ -432,14 +436,14 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block relative w-2/5 px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28 bg-onboarding-gradient-100">
|
||||
<div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
|
||||
<div className="absolute right-0 bottom-0 flex flex-col items-start justify-end w-3/4 ">
|
||||
<div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium w-3/4 self-end">
|
||||
<Sparkles className="h-6 w-6" />
|
||||
Let your team assign, mention and discuss how your work is progressing.
|
||||
</div>
|
||||
<Image src={profileSetup} alt="profile-setup" />
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetupLight}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="Profile setup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
|
||||
return (
|
||||
<div className="flex w-full shrink-0 justify-end">
|
||||
<SwitchOrDeleteAccountModal isOpen={showDeleteAccountModal} onClose={() => setShowDeleteAccountModal(false)} />
|
||||
<div className="flex items-center gap-x-2 pr-4">
|
||||
<div className="flex items-center gap-x-2 pr-4 z-10">
|
||||
{user?.avatar && (
|
||||
<Avatar
|
||||
name={
|
||||
@ -42,7 +42,7 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
|
||||
)}
|
||||
<div>
|
||||
<Menu>
|
||||
<Menu.Button className={"flex items-center gap-x-1"}>
|
||||
<Menu.Button className={"flex items-center gap-x-1 z-10"}>
|
||||
<span className="text-sm font-medium">
|
||||
<p className="text-sm font-medium text-custom-text-200">
|
||||
{user?.first_name
|
||||
|
||||
@ -143,7 +143,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
return (
|
||||
<>
|
||||
<PageHead title="Onboarding" />
|
||||
{user && totalSteps && step !== null ? (
|
||||
{user && totalSteps && step !== null && invitations ? (
|
||||
<div className={`flex h-full w-full flex-col`}>
|
||||
{step === EOnboardingSteps.PROFILE_SETUP ? (
|
||||
<ProfileSetup
|
||||
@ -152,7 +152,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
stepChange={stepChange}
|
||||
finishOnboarding={finishOnboarding}
|
||||
/>
|
||||
) : step === EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN && invitations ? (
|
||||
) : step === EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN ? (
|
||||
<CreateOrJoinWorkspaces invitations={invitations} totalSteps={totalSteps} stepChange={stepChange} />
|
||||
) : step === EOnboardingSteps.WORKSPACE_INVITE ? (
|
||||
<InviteMembers
|
||||
|
||||
278
web/public/onboarding/create-join-workspace-dark.svg
Normal file
278
web/public/onboarding/create-join-workspace-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 458 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
331
web/public/onboarding/create-join-workspace.svg
Normal file
331
web/public/onboarding/create-join-workspace.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 464 KiB |
224
web/public/onboarding/invite-members-dark.svg
Normal file
224
web/public/onboarding/invite-members-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 284 KiB |
240
web/public/onboarding/invite-members-light.svg
Normal file
240
web/public/onboarding/invite-members-light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 285 KiB |
381
web/public/onboarding/profile-setup-dark.svg
Normal file
381
web/public/onboarding/profile-setup-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 949 KiB |
395
web/public/onboarding/profile-setup-light.svg
Normal file
395
web/public/onboarding/profile-setup-light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 948 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
@ -1,14 +0,0 @@
|
||||
<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_422_19191)">
|
||||
<rect width="30" height="29" rx="14.5" fill="#5B6069"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658" fill="#43484F"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658C6.80126 28.8931 22.7194 29.9478 24.6255 24.1658Z" stroke="#43484F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24.5002 23.2546C24.799 24.4372 23.5063 25.9588 21.7371 26.9349C19.9679 27.911 17.8578 28.3064 15.3558 28.3064C12.8538 28.3064 10.4543 27.758 8.68516 26.7819C6.85637 26.0934 5.00781 24.3616 5.92208 23.1016L15.3558 23.1016L24.5002 23.2546Z" fill="#43484F"/>
|
||||
<path d="M15.0029 14.9375C18.1095 14.9375 20.6279 12.4191 20.6279 9.3125C20.6279 6.2059 18.1095 3.6875 15.0029 3.6875C11.8963 3.6875 9.37793 6.2059 9.37793 9.3125C9.37793 12.4191 11.8963 14.9375 15.0029 14.9375Z" fill="#43484F"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_422_19191">
|
||||
<rect width="30" height="29" rx="14.5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,14 +0,0 @@
|
||||
<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_11_12473)">
|
||||
<rect width="30" height="29" rx="14.5" fill="#ECF1FF"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658" fill="#C2D0F2"/>
|
||||
<path d="M24.6255 24.1658C24.6255 21.8239 23.4282 19.578 21.6591 17.9221C19.8899 16.2662 17.4904 15.3359 14.9884 15.3359C12.4864 15.3359 10.0869 16.2662 8.31776 17.9221C6.5486 19.578 5.55469 21.8239 5.55469 24.1658C6.80126 28.8931 22.7194 29.9478 24.6255 24.1658Z" stroke="#C2D0F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24.5002 23.2546C24.799 24.4372 23.5063 25.9588 21.7371 26.9349C19.9679 27.911 17.8578 28.3064 15.3558 28.3064C12.8538 28.3064 10.4543 27.758 8.68516 26.7819C6.85637 26.0934 5.00781 24.3616 5.92208 23.1016L15.3558 23.1016L24.5002 23.2546Z" fill="#C2D0F2"/>
|
||||
<path d="M15.0029 14.9375C18.1095 14.9375 20.6279 12.4191 20.6279 9.3125C20.6279 6.2059 18.1095 3.6875 15.0029 3.6875C11.8963 3.6875 9.37793 6.2059 9.37793 9.3125C9.37793 12.4191 11.8963 14.9375 15.0029 14.9375Z" fill="#CAD9FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_11_12473">
|
||||
<rect width="30" height="29" rx="14.5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue
Block a user