Merge branch 'chore/auth-onboarding-improvement' of gurusainath:makeplane/plane into chore-admin-file-structure

space/components/accounts/auth-forms/password.tsx

@@ -180,7 +180,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
             )}
           </div>
           {!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && (
-            <span className="text-sm text-red-500">Password doesn{"'"}t match</span>
+            <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
           )}
         </div>
       )}

space/components/accounts/onboarding-form.tsx

@@ -210,7 +210,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
         disabled={isButtonDisabled}
         loading={isSubmitting}
       >
-        {isSubmitting ? "Updating..." : "Continue"}
+        Continue
       </Button>
     </form>
   );

space/pages/accounts/reset-password.tsx

@@ -181,7 +181,7 @@ const ResetPasswordPage: NextPage = () => {
                       )}
                     </div>
                     {!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
-                      <span className="text-sm text-red-500">Password doesn{"'"}t match</span>
+                      <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
                     )}
                   </div>
                 )}

web/components/account/auth-forms/password.tsx

@@ -181,7 +181,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
               )}
             </div>
             {!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && (
-              <span className="text-sm text-red-500">Password doesn{"'"}t match</span>
+              <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
             )}
           </div>
         )}

web/components/onboarding/create-or-join-workspaces.tsx

@@ -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="absolute inset-0 z-0">
-          <div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium self-end">
+          <Image
-            <Sparkles className="h-6 w-6" />
+            src={resolvedTheme === "dark" ? CreateJoinWorkspaceDark : CreateJoinWorkspace}
-            Workspace is the hub for all work happening in your company.
+            className="h-screen w-auto float-end object-cover"
-          </div>
+            alt="Profile setup"
-          <Image src={createJoinWorkspace} alt="create-join-workspace" />
+          />
         </div>
       </div>
     </div>

web/components/onboarding/create-workspace.tsx

@@ -141,7 +141,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
       <div className="text-center space-y-1 py-4 mx-auto">
         <h3 className="text-3xl font-bold text-onboarding-text-100">Create a workspace</h3>
         <p className="font-medium text-onboarding-text-400">
-          To start using plane, you need to create or join a workspace
+          To start using Plane, you need to create or join a workspace.
         </p>
       </div>
       <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
@@ -162,7 +162,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
               },
             }}
             render={({ field: { value, ref, onChange } }) => (
-              <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+              <div className="relative flex items-center rounded-md">
                 <Input
                   id="name"
                   name="name"
@@ -176,7 +176,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
                   placeholder="Enter workspace name..."
                   ref={ref}
                   hasError={Boolean(errors.name)}
-                  className="w-full border-onboarding-border-100 text-base placeholder:text-base placeholder:text-custom-text-400/50"
+                  className="w-full border-onboarding-border-100 placeholder:text-custom-text-400"
                 />
               </div>
             )}
@@ -185,16 +185,16 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
         </div>
         <div className="space-y-1">
           <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug">
-            Workspace url
+            Workspace URL
           </label>
           <Controller
             control={control}
             name="slug"
             render={({ field: { value, ref, onChange } }) => (
               <div
-                className={`relative flex items-center rounded-md border bg-onboarding-background-200 px-3 ${
+                className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
                   invalidSlug ? "border-red-500" : "border-onboarding-border-100"
-                } `}
+                }`}
               >
                 <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
                 <Input
@@ -213,7 +213,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
               </div>
             )}
           />
-          <p className="text-sm text-onboarding-text-300">You can only edit the slug of the url</p>
+          <p className="text-sm text-onboarding-text-300">You can only edit the slug of the URL</p>
           {slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>}
           {invalidSlug && (
             <span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span>
@@ -238,7 +238,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
                       <span className="text-custom-text-400">Select organization size</span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  buttonClassName="!border-[0.5px] !border-onboarding-border-100 !shadow-none !rounded-md"
                   input
                   optionsClassName="w-full"
                 >

web/components/onboarding/index.ts

@@ -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";

web/components/onboarding/invite-members.tsx

@@ -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 InviteMembersDark from "public/onboarding/invite-members-dark.svg";
-import userLight from "public/onboarding/user-light.svg";
+import InviteMembersLight from "public/onboarding/invite-members-light.svg";
-import user1 from "public/users/user-1.png";
-import user2 from "public/users/user-2.png";
 // components
 import { OnboardingHeader } from "./header";
 import { SwitchOrDeleteAccountDropdown } from "./switch-or-delete-account-dropdown";
@@ -136,7 +134,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
   return (
     <div>
       <div className="group relative grid grid-cols-10 gap-4">
-        <div className="col-span-6 ml-8 rounded-md bg-onboarding-background-200">
+        <div className="col-span-6 ml-8">
           <Controller
             control={control}
             name={`emails.${index}.email`}
@@ -164,7 +162,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
             )}
           />
         </div>
-        <div className="col-span-4 mr-8 flex items-center rounded-md border border-onboarding-border-100 bg-onboarding-background-200">
+        <div className="col-span-4 mr-8">
           <Controller
             control={control}
             name={`emails.${index}.role`}
@@ -184,10 +182,10 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
                   type="button"
                   ref={buttonRef}
                   onClick={() => setIsDropdownOpen((prev) => !prev)}
-                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-xs duration-300"
+                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-onboarding-border-100"
                 >
                   <span
-                    className={`text-xs ${
+                    className={`text-sm ${
                       !getValues(`emails.${index}.role_active`)
                         ? "text-onboarding-text-400"
                         : "text-onboarding-text-100"
@@ -197,7 +195,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
                   </span>
 
                   <ChevronDown
-                    className={`h-4 w-4 ${
+                    className={`size-3 ${
                       !getValues(`emails.${index}.role_active`)
                         ? "stroke-onboarding-text-400"
                         : "stroke-onboarding-text-100"
@@ -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
+        <div className="absolute inset-0 z-0">
-          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`}
+          <Image
-        >
+            src={resolvedTheme === "dark" ? InviteMembersDark : InviteMembersLight}
-          <p className="text-base font-semibold text-onboarding-text-400">Members</p>
+            className="h-screen w-auto float-end object-cover"
-
+            alt="Profile setup"
-          {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>
       </div>
     </div>

web/components/onboarding/onboarding-sidebar.tsx

@@ -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>
-  );
-};

web/components/onboarding/profile-setup.tsx

@@ -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,10 @@ 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";
+import UserPersonalizationDark from "public/onboarding/user-personalization-dark.svg";
+import UserPersonalizationLight from "public/onboarding/user-personalization-light.svg";
 
 type TProfileSetupFormValues = {
   first_name: string;
@@ -29,6 +33,7 @@ type TProfileSetupFormValues = {
   avatar?: string | null;
   password?: string;
   confirm_password?: string;
+  role?: string;
   use_case?: string;
 };
 
@@ -38,6 +43,7 @@ const defaultValues: Partial<TProfileSetupFormValues> = {
   avatar: "",
   password: undefined,
   confirm_password: undefined,
+  role: undefined,
   use_case: undefined,
 };
 
@@ -48,15 +54,25 @@ type Props = {
   finishOnboarding: () => Promise<void>;
 };
 
-const USE_CASES = [
+enum EProfileSetupSteps {
-  "Build Products",
+  ALL = "ALL",
-  "Manage Feedbacks",
+  USER_DETAILS = "USER_DETAILS",
-  "Service delivery",
+  USER_PERSONALIZATION = "USER_PERSONALIZATION",
-  "Field force management",
+}
-  "Code Repository Integration",
+
-  "Bug Tracking",
+const USER_ROLE = ["Individual contributor", "Senior Leader", "Manager", "Executive", "Freelancer", "Student"];
-  "Test Case Management",
+
-  "Resource allocation",
+const USER_DOMAIN = [
+  "Engineering",
+  "Product",
+  "Marketing",
+  "Sales",
+  "Operations",
+  "Legal",
+  "Finance",
+  "Human Resources",
+  "Project",
+  "Other",
 ];
 
 const fileService = new FileService();
@@ -65,10 +81,15 @@ const authService = new AuthService();
 export const ProfileSetup: React.FC<Props> = observer((props) => {
   const { user, totalSteps, stepChange, finishOnboarding } = props;
   // states
+  const [profileSetupStep, setProfileSetupStep] = useState<EProfileSetupSteps>(
+    user?.is_password_autoset ? EProfileSetupSteps.USER_DETAILS : EProfileSetupSteps.ALL
+  );
   const [isRemoving, setIsRemoving] = useState(false);
   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();
@@ -91,37 +112,25 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     mode: "onChange",
   });
 
-  const handleUserDetailUpdate = async (data: Partial<IUser>) => {
-    await updateCurrentUser(data);
-  };
-
-  const handleUserProfileUpdate = async (data: Partial<TUserProfile>) => {
-    await updateUserProfile(data);
-  };
-
   const handleSetPassword = async (password: string) => {
     const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
     await authService.setPassword(token, { password });
   };
 
-  const onSubmit = async (formData: TProfileSetupFormValues) => {
+  const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
-    if (!user) return;
-
     const userDetailsPayload: Partial<IUser> = {
       first_name: formData.first_name,
       last_name: formData.last_name,
       avatar: formData.avatar,
     };
-
     const profileUpdatePayload: Partial<TUserProfile> = {
       use_case: formData.use_case,
+      role: formData.role,
     };
-
     try {
       await Promise.all([
-        handleUserDetailUpdate(userDetailsPayload),
+        updateCurrentUser(userDetailsPayload),
-        handleUserProfileUpdate(profileUpdatePayload),
+        updateUserProfile(profileUpdatePayload),
-        formData.password ? handleSetPassword(formData.password) : Promise.resolve(),
         stepChange({ profile_complete: true }),
       ]).then(() => {
         captureEvent(USER_DETAILS, {
@@ -133,7 +142,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
           title: "Success",
           message: "Profile setup completed!",
         });
-        if (totalSteps === 1) {
+        // For Invited Users, they will skip all other steps and finish onboarding.
+        if (totalSteps <= 2) {
           finishOnboarding();
         }
       });
@@ -150,6 +160,71 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     }
   };
 
+  const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar: formData.avatar,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        formData.password ? handleSetPassword(formData.password) : Promise.resolve(),
+      ]).then(() => setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION));
+    } catch {
+      captureEvent(USER_DETAILS, {
+        state: "FAILED",
+        element: "Onboarding",
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "User details update failed. Please try again!",
+      });
+    }
+  };
+
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case,
+      role: formData.role,
+    };
+    try {
+      await Promise.all([updateUserProfile(profileUpdatePayload), stepChange({ profile_complete: true })]).then(() => {
+        captureEvent(USER_DETAILS, {
+          state: "SUCCESS",
+          element: "Onboarding",
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Profile setup completed!",
+        });
+        // For Invited Users, they will skip all other steps and finish onboarding.
+        if (totalSteps <= 2) {
+          finishOnboarding();
+        }
+      });
+    } catch {
+      captureEvent(USER_DETAILS, {
+        state: "FAILED",
+        element: "Onboarding",
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    if (profileSetupStep === EProfileSetupSteps.ALL) await handleSubmitProfileSetup(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_DETAILS) await handleSubmitUserDetail(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION) await handleSubmitUserPersonalization(formData);
+  };
+
   const handleDelete = (url: string | null | undefined) => {
     if (!url) return;
 
@@ -168,6 +243,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
   const isValidPassword = (password: string, confirmPassword?: string) =>
     getPasswordStrength(password) >= 3 && password === confirmPassword;
 
+  // Check for all available fields validation and if password field is available, then checks for password validation (strength + confirmation).
+  // Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
   const isButtonDisabled = useMemo(
     () =>
       isValid &&
@@ -183,242 +260,286 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     [isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
   );
 
+  const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
+
   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} />
+          <OnboardingHeader currentStep={isCurrentStepUserPersonalization ? 2 : 1} totalSteps={totalSteps} />
           <div className="shrink-0 lg:hidden">
             <SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
           </div>
         </div>
         <div className="flex flex-col w-full items-center justify-center p-8 mt-6">
           <div className="text-center space-y-1 py-4 mx-auto">
-            <h3 className="text-3xl font-bold text-onboarding-text-100">Welcome to Plane!</h3>
+            <h3 className="text-3xl font-bold text-onboarding-text-100">
+              {isCurrentStepUserPersonalization
+                ? `Looking good${user?.first_name && `, ${user.first_name}`}!`
+                : "Welcome to Plane!"}
+            </h3>
             <p className="font-medium text-onboarding-text-400">
-              Let’s setup your profile, tell us a bit about yourself.
+              {isCurrentStepUserPersonalization
+                ? "Let’s personalize Plane for you."
+                : "Let’s setup your profile, tell us a bit about yourself."}
             </p>
           </div>
           <form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
-            <Controller
+            {profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
-              control={control}
+              <>
-              name="avatar"
-              render={({ field: { onChange, value } }) => (
-                <UserImageUploadModal
-                  isOpen={isImageUploadModalOpen}
-                  onClose={() => setIsImageUploadModalOpen(false)}
-                  isRemoving={isRemoving}
-                  handleDelete={() => handleDelete(getValues("avatar"))}
-                  onSuccess={(url) => {
-                    onChange(url);
-                    setIsImageUploadModalOpen(false);
-                  }}
-                  value={value && value.trim() !== "" ? value : null}
-                />
-              )}
-            />
-            <div className="space-y-1 flex items-center justify-center">
-              <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
-                {!watch("avatar") || watch("avatar") === "" ? (
-                  <div className="flex flex-col items-center justify-between">
-                    <div className="relative h-14 w-14 overflow-hidden">
-                      <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
-                        {watch("first_name")[0] ?? "R"}
-                      </div>
-                    </div>
-                    <div className="pt-1 text-sm font-medium text-custom-primary-300 hover:text-custom-primary-400">
-                      Choose image
-                    </div>
-                  </div>
-                ) : (
-                  <div className="relative mr-3 h-16 w-16 overflow-hidden">
-                    <img
-                      src={watch("avatar") || undefined}
-                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
-                      onClick={() => setIsImageUploadModalOpen(true)}
-                      alt={user?.display_name}
-                    />
-                  </div>
-                )}
-              </button>
-            </div>
-            <div className="flex gap-4">
-              <div className="space-y-1">
-                <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
-                  First name
-                </label>
                 <Controller
                   control={control}
-                  name="first_name"
+                  name="avatar"
-                  rules={{
+                  render={({ field: { onChange, value } }) => (
-                    required: "First name is required",
+                    <UserImageUploadModal
-                    maxLength: {
+                      isOpen={isImageUploadModalOpen}
-                      value: 24,
+                      onClose={() => setIsImageUploadModalOpen(false)}
-                      message: "First name must be within 24 characters.",
+                      isRemoving={isRemoving}
-                    },
+                      handleDelete={() => handleDelete(getValues("avatar"))}
-                  }}
+                      onSuccess={(url) => {
-                  render={({ field: { value, onChange, ref } }) => (
+                        onChange(url);
-                    <Input
+                        setIsImageUploadModalOpen(false);
-                      id="first_name"
+                      }}
+                      value={value && value.trim() !== "" ? value : null}
+                    />
+                  )}
+                />
+                <div className="space-y-1 flex items-center justify-center">
+                  <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                    {!watch("avatar") || watch("avatar") === "" ? (
+                      <div className="flex flex-col items-center justify-between">
+                        <div className="relative h-14 w-14 overflow-hidden">
+                          <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
+                            {watch("first_name")[0] ?? "R"}
+                          </div>
+                        </div>
+                        <div className="pt-1 text-sm font-medium text-custom-primary-300 hover:text-custom-primary-400">
+                          Choose image
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="relative mr-3 h-16 w-16 overflow-hidden">
+                        <img
+                          src={watch("avatar") || undefined}
+                          className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                          onClick={() => setIsImageUploadModalOpen(true)}
+                          alt={user?.display_name}
+                        />
+                      </div>
+                    )}
+                  </button>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-1">
+                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
+                      First name
+                    </label>
+                    <Controller
+                      control={control}
                       name="first_name"
-                      type="text"
+                      rules={{
-                      value={value}
+                        required: "First name is required",
-                      autoFocus
+                        maxLength: {
-                      onChange={onChange}
+                          value: 24,
-                      ref={ref}
+                          message: "First name must be within 24 characters.",
-                      hasError={Boolean(errors.first_name)}
+                        },
-                      placeholder="RWilbur"
+                      }}
-                      className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id="first_name"
+                          name="first_name"
+                          type="text"
+                          value={value}
+                          autoFocus
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.first_name)}
+                          placeholder="RWilbur"
+                          className="w-full border-onboarding-border-100"
+                        />
+                      )}
                     />
-                  )}
+                    {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
-                />
+                  </div>
-                {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
+                  <div className="space-y-1">
-              </div>
+                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
-              <div className="space-y-1">
+                      Last name
-                <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
+                    </label>
-                  Last name
+                    <Controller
-                </label>
+                      control={control}
-                <Controller
-                  control={control}
-                  name="last_name"
-                  rules={{
-                    required: "Last name is required",
-                    maxLength: {
-                      value: 24,
-                      message: "Last name must be within 24 characters.",
-                    },
-                  }}
-                  render={({ field: { value, onChange, ref } }) => (
-                    <Input
-                      id="last_name"
                       name="last_name"
-                      type="text"
+                      rules={{
-                      value={value}
+                        required: "Last name is required",
-                      onChange={onChange}
+                        maxLength: {
-                      ref={ref}
+                          value: 24,
-                      hasError={Boolean(errors.last_name)}
+                          message: "Last name must be within 24 characters.",
-                      placeholder="Wright"
+                        },
-                      className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id="last_name"
+                          name="last_name"
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.last_name)}
+                          placeholder="Wright"
+                          className="w-full border-onboarding-border-100"
+                        />
+                      )}
                     />
-                  )}
+                    {errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
-                />
+                  </div>
-                {errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
+                </div>
-              </div>
+                {!isPasswordAlreadySetup && (
-            </div>
+                  <div className="space-y-1">
-            {!isPasswordAlreadySetup && (
+                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-              <div className="space-y-1">
+                      Set a password{" "}
-                <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+                      {!isSignUpUsingMagicCode && <span className="text-onboarding-text-400">(optional)</span>}
-                  Set a password{" "}
+                    </label>
-                  {!isSignUpUsingMagicCode && <span className="text-onboarding-text-400">(optional)</span>}
+                    <Controller
-                </label>
+                      control={control}
-                <Controller
+                      name="password"
-                  control={control}
+                      rules={{
-                  name="password"
+                        required: isSignUpUsingMagicCode ? "Password is required" : false,
-                  rules={{
+                      }}
-                    required: isSignUpUsingMagicCode ? "Password is required" : false,
+                      render={({ field: { value, onChange, ref } }) => (
-                  }}
+                        <div className="relative flex items-center rounded-md">
-                  render={({ field: { value, onChange, ref } }) => (
+                          <Input
-                    <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+                            type={showPassword ? "text" : "password"}
-                      <Input
+                            name="password"
-                        type={showPassword ? "text" : "password"}
+                            value={value}
-                        name="password"
+                            onChange={onChange}
-                        value={value}
+                            ref={ref}
-                        onChange={onChange}
+                            hasError={Boolean(errors.password)}
-                        ref={ref}
+                            placeholder="New password..."
-                        hasError={Boolean(errors.password)}
+                            className="w-full border-[0.5px] border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
-                        placeholder="New password..."
+                            onFocus={() => setIsPasswordInputFocused(true)}
-                        className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                            onBlur={() => setIsPasswordInputFocused(false)}
-                        onFocus={() => setIsPasswordInputFocused(true)}
+                          />
-                        onBlur={() => setIsPasswordInputFocused(false)}
+                          {showPassword ? (
-                      />
+                            <EyeOff
-                      {showPassword ? (
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                        <EyeOff
+                              onClick={() => setShowPassword(false)}
-                          className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                            />
-                          onClick={() => setShowPassword(false)}
+                          ) : (
-                        />
+                            <Eye
-                      ) : (
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                        <Eye
+                              onClick={() => setShowPassword(true)}
-                          className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                            />
-                          onClick={() => setShowPassword(true)}
+                          )}
-                        />
+                        </div>
                       )}
-                    </div>
+                    />
-                  )}
+                    {isPasswordInputFocused && <PasswordStrengthMeter password={watch("password") ?? ""} />}
-                />
+                    {errors.password && <span className="text-sm text-red-500">{errors.password.message}</span>}
-                {isPasswordInputFocused && <PasswordStrengthMeter password={watch("password") ?? ""} />}
-                {errors.password && <span className="text-sm text-red-500">{errors.password.message}</span>}
-              </div>
-            )}
-            {!isPasswordAlreadySetup && password && getPasswordStrength(password) >= 3 && (
-              <div className="space-y-1">
-                <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-                  Confirm password
-                </label>
-                <Controller
-                  control={control}
-                  name="confirm_password"
-                  rules={{
-                    validate: (value) => value === password || "Password doesn't match",
-                  }}
-                  render={({ field: { value, onChange, ref } }) => (
-                    <div className="relative flex items-center rounded-md bg-onboarding-background-200">
-                      <Input
-                        type={showPassword ? "text" : "password"}
-                        name="confirm_password"
-                        value={value}
-                        onChange={onChange}
-                        ref={ref}
-                        hasError={Boolean(errors.password)}
-                        placeholder="Confirm password..."
-                        className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                      />
-                      {showPassword ? (
-                        <EyeOff
-                          className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(false)}
-                        />
-                      ) : (
-                        <Eye
-                          className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(true)}
-                        />
-                      )}
-                    </div>
-                  )}
-                />
-                {errors.confirm_password && (
-                  <span className="text-sm text-red-500">{errors.confirm_password.message}</span>
-                )}
-              </div>
-            )}
-            <div className="space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="use_case">
-                How will you use Plane? Choose one.
-              </label>
-              <Controller
-                control={control}
-                name="use_case"
-                rules={{
-                  required: "This field is required",
-                }}
-                render={({ field: { value, onChange } }) => (
-                  <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
-                    {USE_CASES.map((useCase) => (
-                      <div
-                        key={useCase}
-                        className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
-                          value === useCase ? "border-custom-primary-100" : "border-onboarding-border-100"
-                        } rounded px-3 py-1.5 text-sm font-medium`}
-                        onClick={() => onChange(useCase)}
-                      >
-                        {useCase}
-                      </div>
-                    ))}
                   </div>
                 )}
-              />
+                {!isPasswordAlreadySetup && password && getPasswordStrength(password) >= 3 && (
-              {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
+                  <div className="space-y-1">
-            </div>
+                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
+                      Confirm password
+                    </label>
+                    <Controller
+                      control={control}
+                      name="confirm_password"
+                      rules={{
+                        validate: (value) => value === password || "Passwords don't match",
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <div className="relative flex items-center rounded-md">
+                          <Input
+                            type={showPassword ? "text" : "password"}
+                            name="confirm_password"
+                            value={value}
+                            onChange={onChange}
+                            ref={ref}
+                            hasError={Boolean(errors.password)}
+                            placeholder="Confirm password..."
+                            className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                          />
+                          {showPassword ? (
+                            <EyeOff
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              onClick={() => setShowPassword(false)}
+                            />
+                          ) : (
+                            <Eye
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              onClick={() => setShowPassword(true)}
+                            />
+                          )}
+                        </div>
+                      )}
+                    />
+                    {errors.confirm_password && (
+                      <span className="text-sm text-red-500">{errors.confirm_password.message}</span>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+            {profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
+              <>
+                <div className="space-y-1">
+                  <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="role">
+                    What role are you working on? Choose one.
+                  </label>
+                  <Controller
+                    control={control}
+                    name="role"
+                    rules={{
+                      required: "This field is required",
+                    }}
+                    render={({ field: { value, onChange } }) => (
+                      <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                        {USER_ROLE.map((userRole) => (
+                          <div
+                            key={userRole}
+                            className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
+                              value === userRole ? "border-custom-primary-100" : "border-onboarding-border-100"
+                            } rounded px-3 py-1.5 text-sm font-medium`}
+                            onClick={() => onChange(userRole)}
+                          >
+                            {userRole}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  />
+                  {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+                </div>
+                <div className="space-y-1">
+                  <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="use_case">
+                    What is your domain expertise? Choose one.
+                  </label>
+                  <Controller
+                    control={control}
+                    name="use_case"
+                    rules={{
+                      required: "This field is required",
+                    }}
+                    render={({ field: { value, onChange } }) => (
+                      <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                        {USER_DOMAIN.map((userDomain) => (
+                          <div
+                            key={userDomain}
+                            className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
+                              value === userDomain ? "border-custom-primary-100" : "border-onboarding-border-100"
+                            } rounded px-3 py-1.5 text-sm font-medium`}
+                            onClick={() => onChange(userDomain)}
+                          >
+                            {userDomain}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  />
+                  {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
+                </div>
+              </>
+            )}
             <Button
               variant="primary"
               type="submit"
@@ -427,19 +548,27 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
               disabled={isButtonDisabled}
               loading={isSubmitting}
             >
-              {isSubmitting ? "Updating..." : "Continue"}
+              Continue
             </Button>
           </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="absolute inset-0 z-0">
-          <div className="flex gap-2 pb-1 pr-2 text-base text-custom-primary-300 font-medium w-3/4 self-end">
+          {profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION ? (
-            <Sparkles className="h-6 w-6" />
+            <Image
-            Let your team assign, mention and discuss how your work is progressing.
+              src={resolvedTheme === "dark" ? UserPersonalizationDark : UserPersonalizationLight}
-          </div>
+              className="h-screen w-auto float-end object-cover"
-          <Image src={profileSetup} alt="profile-setup" />
+              alt="User Personalization"
+            />
+          ) : (
+            <Image
+              src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetupLight}
+              className="h-screen w-auto float-end object-cover"
+              alt="Profile setup"
+            />
+          )}
         </div>
       </div>
     </div>

web/components/onboarding/switch-or-delete-account-dropdown.tsx

@@ -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

web/components/project/projects-mobile-header.tsx

@@ -5,7 +5,7 @@ import { ChevronDown, ListFilter } from "lucide-react";
 // types
 import { TProjectFilters } from "@plane/types";
 // hooks
-import { useApplication, useMember, useProjectFilter } from "@/hooks/store";
+import { useAppRouter, useMember, useProjectFilter } from "@/hooks/store";
 // components
 import { FiltersDropdown } from "../issues";
 import { ProjectFiltersSelection, ProjectOrderByDropdown } from "./dropdowns";
@@ -18,9 +18,7 @@ const ProjectsMobileHeader = observer(() => {
     updateFilters,
   } = useProjectFilter();
 
-  const {
+  const { workspaceSlug } = useAppRouter();
-    router: { workspaceSlug },
-  } = useApplication();
 
   const {
     workspace: { workspaceMemberIds },

web/layouts/settings-layout/profile/preferences/layout.tsx

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 // layout
 import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header";
-import { useApplication } from "@/hooks/store";
+import { useAppTheme } from "@/hooks/store";
 import { ProfileSettingsLayout } from "@/layouts/settings-layout";
 // local components
 import { ProfilePreferenceSettingsSidebar } from "./sidebar";
@@ -14,13 +14,13 @@ interface IProfilePreferenceSettingsLayout {
 
 export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
   const { children, header } = props;
-  const { theme: themeStore } = useApplication();
+  const { toggleSidebar } = useAppTheme();
 
   return (
     <ProfileSettingsLayout
       header={
         <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
-          <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
+          <SidebarHamburgerToggle onClick={toggleSidebar} />
         </div>
       }
     >

web/pages/accounts/reset-password.tsx

@@ -195,7 +195,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                       )}
                     </div>
                     {!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
-                      <span className="text-sm text-red-500">Password doesn{"'"}t match</span>
+                      <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
                     )}
                   </div>
                 )}
@@ -216,5 +216,3 @@ ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
 };
 
 export default ResetPasswordPage;
-
-

web/pages/accounts/set-password.tsx

@@ -211,7 +211,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                     </div>
                     {!!passwordFormData.confirm_password &&
                       passwordFormData.password !== passwordFormData.confirm_password && (
-                        <span className="text-sm text-red-500">Password doesn{"'"}t match</span>
+                        <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
                       )}
                   </div>
                 )}

web/pages/onboarding/index.tsx

@@ -91,8 +91,16 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
   };
 
   useEffect(() => {
-    if (workspacesList && workspacesList?.length > 0) setTotalSteps(1);
+    // If user is already invited to a workspace, only show profile setup steps.
-    else setTotalSteps(3);
+    if (workspacesList && workspacesList?.length > 0) {
+      // If password is auto set then show two different steps for profile setup, else merge them.
+      if (user?.is_password_autoset) setTotalSteps(2);
+      else setTotalSteps(1);
+    } else {
+      // If password is auto set then total steps will increase to 4 due to extra step at profile setup stage.
+      if (user?.is_password_autoset) setTotalSteps(4);
+      else setTotalSteps(3);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -122,7 +130,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
       }
 
       // For Invited Users, they will skip all other steps.
-      if (totalSteps && totalSteps === 1) return;
+      if (totalSteps && totalSteps <= 2) return;
 
       if (onboardingStep.profile_complete && !(onboardingStep.workspace_join || onboardingStep.workspace_create)) {
         setStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
@@ -143,7 +151,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 +160,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

web/public/onboarding/user-dark.svg

@@ -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>

web/public/onboarding/user-light.svg

@@ -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>