chore: onboarding (#2790)

* style: onboarding light version

* style: dark mode

* fix: onboarding gradient

* refactor: imports

* chore: add use case field in users api

* feat: delete account

* fix: delete modal points alignment

* feat: usecase in profile

* fix: build error

* fix: typos & hardcoded strings

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>

apiserver/plane/app/serializers/user.py

@@ -59,6 +59,7 @@ class UserMeSerializer(BaseSerializer):
             "username",
             "theme",
             "last_workspace_id",
+            "use_case",
         ]
         read_only_fields = fields
 

packages/tailwind-config-custom/tailwind.config.js

@@ -176,6 +176,24 @@ module.exports = {
           },
           backdrop: "rgba(0, 0, 0, 0.25)",
         },
+        onboarding: {
+          background: {
+            100: convertToRGB("--color-onboarding-background-100"),
+            200: convertToRGB("--color-onboarding-background-200"),
+            300: convertToRGB("--color-onboarding-background-300"),
+            400: convertToRGB("--color-onboarding-background-400"),
+          },
+          text: {
+            100: convertToRGB("--color-onboarding-text-100"),
+            200: convertToRGB("--color-onboarding-text-200"),
+            300: convertToRGB("--color-onboarding-text-300"),
+            400: convertToRGB("--color-onboarding-text-400"),
+          },
+          border: {
+            100: convertToRGB("--color-onboarding-border-100"),
+            200: convertToRGB("--color-onboarding-border-200"),
+          },
+        },
       },
       keyframes: {
         leftToaster: {
@@ -353,6 +371,10 @@ module.exports = {
         80: "18rem",
         96: "21.6rem",
       },
+      backgroundImage: {
+        "onboarding-gradient-primary": "var( --gradient-onboarding-primary)",
+        "onboarding-gradient-secondary": "var( --gradient-onboarding-secondary)",
+      },
     },
     fontFamily: {
       custom: ["Inter", "sans-serif"],

web/components/account/delete-account-modal.tsx

@@ -0,0 +1,138 @@
+// react
+import React, { useState } from "react";
+// next
+import { useRouter } from "next/router";
+// components
+import { Button } from "@plane/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { AuthService } from "services/auth.service";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { AlertTriangle } from "lucide-react";
+import { UserService } from "services/user.service";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const authService = new AuthService();
+const userService = new UserService();
+
+const DeleteAccountModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose } = props;
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const router = useRouter();
+  const { setToastAlert } = useToast();
+
+  const handleSignOut = async () => {
+    await authService
+      .signOut()
+      .then(() => {
+        router.push("/");
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      );
+  };
+
+  const handleDeleteAccount = async () => {
+    setIsDeleteLoading(true);
+    await userService
+      .deleteAccount()
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Account deleted successfully.",
+        });
+        router.push("/");
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.data?.error,
+        })
+      );
+    setIsDeleteLoading(false);
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-onboarding-background-200 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="">
+                    <div className="flex items-center gap-x-4">
+                      <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                        <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      </div>
+                      <Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-onboarding-text-100">
+                        Not the right workspace?
+                      </Dialog.Title>
+                    </div>
+
+                    <div className="mt-6 px-4">
+                      <ul className="text-onboarding-text-300 list-disc font-normal text-base">
+                        <li>Delete this account if you have another and won’t use this account.</li>
+                        <li>Switch to another account if you’d like to come back to this account another time.</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-end gap-4 p-4 mb-2 sm:px-6">
+                  <span className="text-sm font-medium hover:cursor-pointer" onClick={handleSignOut}>
+                    Switch account
+                  </span>
+                  <button
+                    className="py-1.5 px-3 font-medium rounded-sm text-red-500 border border-red-500 text-sm "
+                    onClick={handleDeleteAccount}
+                  >
+                    {isDeleteLoading ? "Deleting..." : "Delete account"}
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default DeleteAccountModal;

web/components/account/email-code-form.tsx

@@ -7,6 +7,9 @@ import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
+// icons
+import { XCircle } from "lucide-react";
+import { useTheme } from "next-themes";
 
 // types
 type EmailCodeFormValues = {
@@ -23,6 +26,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
   const [isCodeResending, setIsCodeResending] = useState(false);
   const [errorResendingCode, setErrorResendingCode] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [sentEmail, setSentEmail] = useState<string>("");
 
   const { setToastAlert } = useToast();
   const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
@@ -52,6 +56,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     await authService
       .emailCode({ email })
       .then((res) => {
+        console.log(res);
+        setSentEmail(email);
         setValue("key", res.key);
         setCodeSent(true);
       })
@@ -88,10 +94,6 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
 
   const emailOld = getValues("email");
 
-  useEffect(() => {
-    setErrorResendingCode(false);
-  }, [emailOld]);
-
   useEffect(() => {
     const submitForm = (e: KeyboardEvent) => {
       if (!codeSent && e.key === "Enter") {
@@ -99,29 +101,54 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
         handleSubmit(onSubmit)().then(() => {
           setResendCodeTimer(30);
         });
+      } else if (
+        codeSent &&
+        sentEmail != getValues("email") &&
+        getValues("email").length > 0 &&
+        (e.key === "Enter" || e.key === "Tab")
+      ) {
+        e.preventDefault();
+        console.log("resend");
+        onSubmit({ email: getValues("email") }).then(() => {
+          setCodeResent(true);
+        });
       }
     };
 
-    if (!codeSent) {
+    window.addEventListener("keydown", submitForm);
-      window.addEventListener("keydown", submitForm);
-    }
 
     return () => {
       window.removeEventListener("keydown", submitForm);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handleSubmit, codeSent]);
+  }, [handleSubmit, codeSent, sentEmail]);
 
   return (
     <>
-      {(codeSent || codeResent) && (
+      {codeSent || codeResent ? (
-        <p className="text-center mt-4">
+        <>
-          We have sent the sign in code.
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-          <br />
+            Moving to the runway
-          Please check your inbox at <span className="font-medium">{watch("email")}</span>
+          </h1>
-        </p>
+          <div className="text-center text-sm text-onboarding-text-200 mt-3">
+            <p>Paste the code you got at </p>
+            <span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{sentEmail} </span>
+            <span className="text-onboarding-text-200">below.</span>
+          </div>
+        </>
+      ) : (
+        <>
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+            Let’s get you prepped!
+          </h1>
+          <p className="text-center text-sm text-onboarding-text-200 mt-3">
+            This whole thing will take less than two minutes.
+          </p>
+          <p className="text-center text-sm text-onboarding-text-200 mt-1">Promise!</p>
+        </>
       )}
-      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
+
+      <form className="mt-5 sm:w-96 mx-auto">
         <div className="space-y-1">
           <Controller
             control={control}
@@ -134,86 +161,101 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
                 ) || "Email address is not valid",
             }}
             render={({ field: { value, onChange, ref } }) => (
-              <Input
+              <div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
-                id="email"
+                <Input
-                name="email"
+                  id="email"
-                type="email"
+                  name="email"
-                value={value}
+                  type="email"
-                onChange={onChange}
+                  value={value}
-                ref={ref}
+                  onChange={onChange}
-                hasError={Boolean(errors.email)}
+                  ref={ref}
-                placeholder="Enter your email address..."
+                  hasError={Boolean(errors.email)}
-                className="border-custom-border-300 h-[46px] w-full"
+                  placeholder="orville.wright@firstflight.com"
-              />
+                  className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
+                />
+                {value.length > 0 && (
+                  <XCircle
+                    className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
+                    onClick={() => setValue("email", "")}
+                  />
+                )}
+              </div>
             )}
           />
         </div>
 
         {codeSent && (
           <>
-            <Controller
+            <div>
-              control={control}
+              {codeResent && sentEmail === getValues("email") ? (
-              name="token"
+                <div className="text-sm my-2.5 text-onboarding-text-300 m-0">
-              rules={{
+                  You got a new code at <span className="font-semibold text-custom-primary-80">{sentEmail}</span>.
-                required: "Code is required",
+                </div>
-              }}
+              ) : sentEmail != getValues("email") && getValues("email").length > 0 ? (
-              render={({ field: { value, onChange, ref } }) => (
+                <div className="text-sm my-2.5 text-onboarding-text-300 m-0">
-                <Input
+                  Hit enter
-                  id="token"
+                  <span> ↵ </span>or <span className="italic">Tab</span> to get a new code
-                  name="token"
+                </div>
-                  type="token"
-                  value={value ?? ""}
-                  onChange={onChange}
-                  ref={ref}
-                  hasError={Boolean(errors.token)}
-                  placeholder="Enter code..."
-                  className="border-custom-border-300 h-[46px] w-full"
-                />
-              )}
-            />
-            <button
-              type="button"
-              className={`flex w-full justify-end text-xs outline-none ${
-                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
-              } `}
-              onClick={() => {
-                setIsCodeResending(true);
-                onSubmit({ email: getValues("email") }).then(() => {
-                  setCodeResent(true);
-                  setIsCodeResending(false);
-                  setResendCodeTimer(30);
-                });
-              }}
-              disabled={isResendDisabled}
-            >
-              {resendCodeTimer > 0 ? (
-                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
-              ) : isCodeResending ? (
-                "Sending new code..."
-              ) : errorResendingCode ? (
-                "Please try again later"
               ) : (
-                <span className="font-medium">Resend code</span>
+                <div className="my-4" />
               )}
-            </button>
+            </div>
+            <div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
+              <Controller
+                control={control}
+                name="token"
+                rules={{
+                  required: "Code is required",
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="token"
+                    name="token"
+                    type="token"
+                    value={value ?? ""}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.token)}
+                    placeholder="get-set-fly"
+                    className="border-onboarding-border-100 h-[46px] w-full"
+                  />
+                )}
+              />
+            </div>
           </>
         )}
         {codeSent ? (
-          <Button
+          <div className="my-4">
-            variant="primary"
+            {" "}
-            type="submit"
+            <Button
-            className="w-full"
+              variant="primary"
-            size="xl"
+              type="submit"
-            onClick={handleSubmit(handleSignin)}
+              className="w-full"
-            disabled={!isValid && isDirty}
+              size="xl"
-            loading={isLoading}
+              onClick={handleSubmit(handleSignin)}
-          >
+              disabled={!isValid && isDirty}
-            {isLoading ? "Signing in..." : "Sign in"}
+              loading={isLoading}
-          </Button>
+            >
+              {isLoading ? "Signing in..." : "Next step"}
+            </Button>
+            <div className="w-[70%] my-4 mx-auto">
+              <p className="text-xs text-onboarding-text-300">
+                When you click the button above, you agree with our{" "}
+                <a
+                  href="https://plane.so/terms-and-conditions"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium underline"
+                >
+                  terms and conditions of service.
+                </a>{" "}
+              </p>
+            </div>
+          </div>
         ) : (
           <Button
             variant="primary"
-            className="w-full"
+            className="w-full mt-4"
             size="xl"
             onClick={() => {
               handleSubmit(onSubmit)().then(() => {
@@ -223,7 +265,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
-            {isSubmitting ? "Sending code..." : "Send sign in code"}
+            {isSubmitting ? "Sending code..." : "Send unique code"}
           </Button>
         )}
       </form>

web/components/account/github-login-button.tsx

@@ -1,4 +1,6 @@
+// react
 import { useEffect, useState, FC } from "react";
+// next
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -41,14 +43,16 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
+        <button
+          className={`flex w-full items-center justify-center gap-2 hover:bg-onboarding-background-300 rounded border border-onboarding-border-200 p-2 text-sm font-medium text-custom-text-100 duration-300 h-[46px]`}
+        >
           <Image
             src={theme === "dark" ? githubWhiteImage : githubBlackImage}
             height={20}
             width={20}
             alt="GitHub Logo"
           />
-          <span>Sign in with GitHub</span>
+          <span className="text-onboarding-text-200">Sign in with GitHub</span>
         </button>
       </Link>
     </div>

web/components/account/google-login.tsx

@@ -29,7 +29,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
           theme: "outline",
           size: "large",
           logo_alignment: "center",
-          width: 360,
+          width: 384,
           text: "signin_with",
         } as GsiButtonConfiguration // customization attributes
       );

web/components/account/sidebar.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect } from "react";
+import { Avatar, DiceIcon, PhotoFilterIcon } from "@plane/ui";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// react-hook-form
+import { Control, Controller, UseFormSetValue, UseFormWatch } from "react-hook-form";
+// types
+import { IWorkspace } from "types";
+// icons
+import {
+  BarChart2,
+  Briefcase,
+  CheckCircle,
+  ChevronDown,
+  ContrastIcon,
+  FileText,
+  LayersIcon,
+  LayoutGrid,
+  PenSquare,
+  Search,
+  Settings,
+} from "lucide-react";
+
+const workspaceLinks = [
+  {
+    Icon: LayoutGrid,
+    name: "Dashboard",
+  },
+  {
+    Icon: BarChart2,
+    name: "Analytics",
+  },
+  {
+    Icon: Briefcase,
+    name: "Projects",
+  },
+  {
+    Icon: CheckCircle,
+    name: "All Issues",
+  },
+  {
+    Icon: CheckCircle,
+    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>;
+};
+var timer: number = 0;
+var lastWorkspaceName: string = "";
+const DummySidebar: React.FC<Props> = (props) => {
+  const { workspaceName, showProject, control, setValue, watch } = props;
+  const { workspace: workspaceStore, user: userStore } = useMobxStore();
+  const workspace = workspaceStore.workspaces ? workspaceStore.workspaces[0] : null;
+
+  const handleZoomWorkspace = (value: string) => {
+    // console.log(lastWorkspaceName,value);
+    if (lastWorkspaceName === value) return;
+    lastWorkspaceName = value;
+    if (timer > 0) {
+      timer += 2;
+      timer = Math.min(timer, 4);
+    } else {
+      timer = 2;
+      timer = Math.min(timer, 4);
+      const interval = setInterval(() => {
+        if (timer < 0) {
+          setValue!("name", lastWorkspaceName);
+          clearInterval(interval);
+        }
+        console.log("timer", timer);
+        timer--;
+      }, 1000);
+    }
+  };
+
+  useEffect(() => {
+    if (watch) {
+      watch();
+    }
+  });
+
+  return (
+    <div className="border-r h-full border-onboarding-border-100 relative ">
+      <div>
+        {control && setValue ? (
+          <Controller
+            control={control}
+            name="name"
+            render={({ field: { value } }) => {
+              if (value.length > 0) {
+                handleZoomWorkspace(value);
+              }
+              return timer > 0 ? (
+                <div className="py-6 pl-4 top-3 mt-4 transition-all bg-onboarding-background-200 w-full max-w-screen-sm flex items-center ml-6 border-8 border-onboarding-background-100 rounded-md">
+                  <div className="bg-onboarding-background-100 w-full p-1 flex items-center">
+                    <div className="flex flex-shrink-0">
+                      <Avatar
+                        name={value.length > 0 ? value[0].toLocaleUpperCase() : "N"}
+                        src={""}
+                        size={30}
+                        shape="square"
+                        fallbackBackgroundColor="black"
+                        className="!text-base"
+                      />
+                    </div>
+
+                    <span className="text-xl font-medium text-onboarding-text-100 ml-2 truncate">{value}</span>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex transition-all w-full border border-transparent items-center gap-y-2 px-4 pt-6 truncate">
+                  <div className="flex flex-shrink-0">
+                    <Avatar
+                      name={value.length > 0 ? value : workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
+                      src={""}
+                      size={24}
+                      shape="square"
+                      className="!text-base"
+                    />
+                  </div>
+                  <div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
+                    <h4 className="text-custom-text-100 font-medium text-base truncate">{workspaceName}</h4>
+                    <ChevronDown className={`h-4 w-4 mx-1 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
+                  </div>
+                  <div className="flex flex-shrink-0">
+                    <Avatar
+                      name={"N"}
+                      src={workspace && workspace.logo ? workspace.logo : ""}
+                      size={24}
+                      shape="square"
+                      fallbackBackgroundColor="#FCBE1D"
+                      className="!text-base"
+                    />
+                  </div>
+                </div>
+              );
+            }}
+          />
+        ) : (
+          <div className="flex transition-all w-full items-center gap-y-2 px-4 pt-6 truncate">
+            <div className="flex flex-shrink-0">
+              <Avatar
+                name={workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
+                src={""}
+                size={24}
+                shape="square"
+                className="!text-base"
+              />
+            </div>
+            <div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
+              <h4 className="text-custom-text-100 font-medium text-base truncate">{workspaceName}</h4>
+              <ChevronDown className={`h-4 w-4 mx-1 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
+            </div>
+            <div className="flex flex-shrink-0">
+              <Avatar
+                name={"N"}
+                src={workspace && workspace.logo ? workspace.logo : ""}
+                size={24}
+                shape="square"
+                fallbackBackgroundColor="#FCBE1D"
+                className="!text-base"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className={`space-y-1 p-4`}>
+        <div className={`flex items-center justify-between w-full px-1 mb-3 gap-2 mt-4 `}>
+          <div
+            className={`relative flex items-center justify-between w-full rounded gap-1 group
+             px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200
+          `}
+          >
+            <div className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 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 items-center justify-center rounded flex-shrink-0 p-2 outline-none
+             shadow-custom-sidebar-shadow-2xs border-[0.5px] border-onboarding-border-200
+            `}
+          >
+            <Search className="h-4 w-4 text-onboarding-text-200" />
+          </div>
+        </div>
+        {workspaceLinks.map((link) => (
+          <a className="block w-full">
+            <div
+              className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium outline-none 
+                text-onboarding-text-200  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="text-base pb-4 font-semibold text-custom-text-300">Projects</p>
+
+          <div className="px-3">
+            {" "}
+            <div className="w-4/5 flex items-center text-base font-medium text-custom-text-200 mb-3 justify-between">
+              <span> Plane web</span>
+              <ChevronDown className="h-4 w-4" />
+            </div>
+            {projectLinks.map((link) => (
+              <a className="block w-full">
+                <div
+                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium outline-none 
+                    text-custom-sidebar-text-200  focus:bg-custom-sidebar-background-80
+                `}
+                >
+                  {<link.Icon className="h-4 w-4" />}
+                  {link.name}
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DummySidebar;

web/components/account/step-indicator.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const OnboardingStepIndicator = ({ step }: { step: number }) => (
+  <div className="flex items-center justify-center">
+    <div className="h-4 w-4 rounded-full bg-custom-primary-100 z-10" />
+    <div className={`h-1 w-14 -ml-1 ${step >= 2 ? "bg-custom-primary-100" : "bg-onboarding-background-100"}`} />
+    <div
+      className={` z-10 -ml-1 rounded-full ${
+        step >= 2 ? "bg-custom-primary-100 h-4 w-4" : " h-3 w-3 bg-onboarding-background-100"
+      }`}
+    />
+    <div className={`h-1 w-14 -ml-1 ${step >= 3 ? "bg-custom-primary-100" : "bg-onboarding-background-100"}`} />
+    <div
+      className={`rounded-full -ml-1 z-10 ${
+        step >= 3 ? "bg-custom-primary-100 h-4 w-4" : "h-3 w-3 bg-onboarding-background-100"
+      }`}
+    />
+  </div>
+);
+
+export default OnboardingStepIndicator;

web/components/core/modals/image-upload-modal.tsx

@@ -50,10 +50,8 @@ export const ImageUploadModal: React.FC<Props> = observer((props) => {
   });
 
   const handleSubmit = async () => {
+    if (!image || (!workspaceSlug && router.pathname != "/onboarding")) return;
     setIsImageUploading(true);
-
-    if (!image || !workspaceSlug) return;
-
     const formData = new FormData();
     formData.append("asset", image);
     formData.append("attributes", JSON.stringify({}));
@@ -183,7 +181,13 @@ export const ImageUploadModal: React.FC<Props> = observer((props) => {
                     <Button variant="neutral-primary" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
-                    <Button variant="primary" size="sm" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      onClick={handleSubmit}
+                      disabled={!image}
+                      loading={isImageUploading}
+                    >
                       {isImageUploading ? "Uploading..." : "Upload & Save"}
                     </Button>
                   </div>

web/components/onboarding/invitations.tsx

@@ -0,0 +1,172 @@
+// react
+import React, { useState } from "react";
+// components
+import { Button, Loader } from "@plane/ui";
+
+// helpers
+import { truncateText } from "helpers/string.helper";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// swr
+import useSWR, { mutate } from "swr";
+// contants
+import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+import { ROLE } from "constants/workspace";
+// types
+import { IWorkspaceMemberInvitation } from "types";
+// icons
+import { CheckCircle2, Search } from "lucide-react";
+import { trackEvent } from "helpers/event-tracker.helper";
+
+type Props = {
+  handleNextStep: () => void;
+  setTryDiffAccount: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+const Invitations: React.FC<Props> = (props) => {
+  const { handleNextStep, setTryDiffAccount } = props;
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+
+  const {
+    workspace: workspaceStore,
+    user: { currentUser, updateCurrentUser },
+  } = useMobxStore();
+
+  const {
+    data: invitations,
+    mutate: mutateInvitations,
+    isLoading,
+  } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations());
+
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    }
+  };
+
+  const updateLastWorkspace = async () => {
+    if (!workspaceStore.workspaces) return;
+    await updateCurrentUser({
+      last_workspace_id: workspaceStore.workspaces[0].id,
+    });
+  };
+
+  const submitInvitations = async () => {
+    if (invitationsRespond.length <= 0) return;
+
+    setIsJoiningWorkspaces(true);
+
+    await workspaceService
+      .joinWorkspaces({ invitations: invitationsRespond })
+      .then(async (res) => {
+        trackEvent("WORKSPACE_USER_INVITE_ACCEPT", res);
+        await mutateInvitations();
+        await workspaceStore.fetchWorkspaces();
+        await mutate(USER_WORKSPACES);
+        await updateLastWorkspace();
+        await handleNextStep();
+      })
+      .finally(() => setIsJoiningWorkspaces(false));
+  };
+
+  return invitations && invitations.length > 0 ? (
+    <div>
+      <div className="space-y-4 md:w-2/3 ">
+        <p className="font-semibold pb-2 text-xl sm:text-2xl">Choose a workspace to join </p>
+        <div>
+          {invitations &&
+            invitations.length > 0 &&
+            invitations.map((invitation) => {
+              const isSelected = invitationsRespond.includes(invitation.id);
+              return (
+                <div
+                  key={invitation.id}
+                  className={`flex cursor-pointer items-center gap-2 border p-3.5 rounded ${
+                    isSelected
+                      ? "border-custom-primary-100"
+                      : "border-onboarding-border-200 hover:bg-onboarding-background-300/30"
+                  }`}
+                  onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+                >
+                  <div className="flex-shrink-0">
+                    <div className="grid place-items-center h-9 w-9 rounded">
+                      {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                        <img
+                          src={invitation.workspace.logo}
+                          height="100%"
+                          width="100%"
+                          className="rounded"
+                          alt={invitation.workspace.name}
+                        />
+                      ) : (
+                        <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
+                          {invitation.workspace.name[0]}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
+                    <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                  </div>
+                  <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
+                    <CheckCircle2 className="h-5 w-5" />
+                  </span>
+                </div>
+              );
+            })}
+        </div>
+
+        <Button variant="primary" onClick={submitInvitations}>
+          {isJoiningWorkspaces ? "Joining..." : "Join your team"}
+        </Button>
+      </div>
+      <div className="py-3 px-4 mt-8 bg-onboarding-background-300/30 rounded-sm flex justify-between items-center">
+        <div className="flex items-center">
+          <Search className="h-4 w-4  mr-2" />
+          <span className="text-sm text-custom-text-200">Don&apos;t see your workspace?</span>
+        </div>
+
+        <div>
+          <div
+            className="bg-onboarding-background-200 py-3 text-center hover:cursor-pointer text-custom-text-200 rounded-md text-sm font-medium border border-custom-border-200"
+            onClick={setTryDiffAccount}
+          >
+            Try a different email address
+          </div>
+          <p className="text-xs mt-2 text-custom-text-300">
+            Your right e-mail address could be from a Google or GitHub login.
+          </p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <EmptyInvitation email={currentUser!.email} />
+  );
+};
+
+const EmptyInvitation = ({ email }: { email: string }) => (
+  <div className="items-center md:w-4/5 bg-onboarding-background-300/30 my-16 border-onboarding-border-200 py-5 px-10 rounded border justify-center ">
+    <p className="text-lg text-onboarding-text-300 text-center font-semibold">Is your team already on Plane?</p>
+    <p className="text-sm text-onboarding-text-300 mt-6 text-center">
+      We couldn’t find any existing workspaces for the email address {email}
+    </p>
+    <div
+      className="bg-onboarding-background-200 mt-6 py-3 text-center hover:cursor-pointer text-custom-text-200 rounded-md text-sm font-medium border border-custom-border-200"
+      onClick={() => {}}
+    >
+      Try a different email address
+    </div>
+    <p className="text-xs mt-2 text-center text-custom-text-300">
+      Your right e-mail address could be from a Google or GitHub login.
+    </p>
+  </div>
+);
+
+export default Invitations;

web/components/onboarding/invite-members.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
-
+// next
+import Image from "next/image";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // react-hook-form
@@ -10,14 +11,19 @@ import { WorkspaceService } from "services/workspace.service";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, Input } from "@plane/ui";
+// components
+import OnboardingStepIndicator from "components/account/step-indicator";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // icons
-import { Check, ChevronDown, Plus, X } from "lucide-react";
+import { Check, ChevronDown, Plus, User2, X, XCircle } from "lucide-react";
 // types
 import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
 // constants
 import { ROLE } from "constants/workspace";
+// assets
+import user1 from "public/users/user-1.png";
+import user2 from "public/users/user-2.png";
 
 type Props = {
   finishOnboarding: () => Promise<void>;
@@ -59,7 +65,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
 
   return (
     <div className="group relative grid grid-cols-11 gap-4">
-      <div className="col-span-7">
+      <div className="col-span-7 bg-onboarding-background-200 rounded-md">
         <Controller
           control={control}
           name={`emails.${index}.email`}
@@ -80,12 +86,12 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
               ref={ref}
               hasError={Boolean(errors.emails?.[index]?.email)}
               placeholder="Enter their email..."
-              className="text-xs sm:text-sm w-full"
+              className="text-xs sm:text-sm w-full h-12 placeholder:text-onboarding-text-400 border-onboarding-border-100"
             />
           )}
         />
       </div>
-      <div className="col-span-3">
+      <div className="col-span-3 bg-onboarding-background-200 rounded-md border items-center flex border-onboarding-border-100">
         <Controller
           control={control}
           name={`emails.${index}.role`}
@@ -104,10 +110,11 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
                 type="button"
                 ref={buttonRef}
                 onClick={() => setIsDropdownOpen((prev) => !prev)}
-                className="flex items-center px-2.5 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none"
+                className="flex items-center px-2.5 h-11 py-2 text-xs justify-between gap-1 w-full rounded-md duration-300"
               >
-                <span className="text-xs sm:text-sm">{ROLE[value]}</span>
+                <span className="text-xs text-onboarding-text-400 sm:text-sm">{ROLE[value]}</span>
-                <ChevronDown className="h-3 w-3" aria-hidden="true" />
+
+                <ChevronDown className="h-4 w-4 stroke-onboarding-text-400" />
               </Listbox.Button>
 
               <Transition
@@ -122,7 +129,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
               >
                 <Listbox.Options
                   ref={dropdownRef}
-                  className="fixed w-36 z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none max-h-48"
+                  className="fixed w-36 z-10 border border-onboarding-border-100 mt-1 overflow-y-auto rounded-md bg-onboarding-background-200 text-xs shadow-lg focus:outline-none max-h-48"
                 >
                   <div className="space-y-1 p-2">
                     {Object.entries(ROLE).map(([key, value]) => (
@@ -131,8 +138,8 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
                         value={parseInt(key)}
                         className={({ active, selected }) =>
                           `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                            active || selected ? "bg-custom-background-80" : ""
+                            active || selected ? "bg-onboarding-background-400/40" : ""
-                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                          } ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
                         }
                       >
                         {({ selected }) => (
@@ -153,10 +160,10 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
       {fields.length > 1 && (
         <button
           type="button"
-          className="hidden group-hover:grid self-center place-items-center rounded -ml-3"
+          className="hidden group-hover:grid self-center place-items-center rounded ml-3"
           onClick={() => remove(index)}
         >
-          <X className="h-3.5 w-3.5 text-custom-text-200" />
+          <XCircle className="h-3.5 w-3.5 text-custom-text-400" />
         </button>
       )}
     </div>
@@ -182,7 +189,6 @@ export const InviteMembers: React.FC<Props> = (props) => {
   const nextStep = async () => {
     const payload: Partial<TOnboardingSteps> = {
       workspace_invite: true,
-      workspace_join: true,
     };
 
     await stepChange(payload);
@@ -223,49 +229,94 @@ export const InviteMembers: React.FC<Props> = (props) => {
   }, [fields, append]);
 
   return (
-    <form
+    <div className="flex py-14">
-      className="w-full space-y-7 sm:space-y-10 overflow-hidden flex flex-col"
+      <div
-      onSubmit={handleSubmit(onSubmit)}
+        className={`hidden lg:block w-1/4 p-3 ml-auto rounded bg-onboarding-gradient-secondary border border-onboarding-border-100 border-opacity-10`}
-      onKeyDown={(e) => {
+      >
-        if (e.code === "Enter") e.preventDefault();
+        <p className="text-base text-onboarding-text-400 font-semibold">Members</p>
-      }}
+
-    >
+        {Array.from({ length: 4 }).map(() => (
-      <h2 className="text-xl sm:text-2xl font-semibold">Invite people to collaborate</h2>
+          <div className="flex items-center gap-2 mt-4">
-      <div className="md:w-3/5 text-sm h-full max-h-[40vh] flex flex-col overflow-hidden">
+            <div className="w-8 h-8 flex justify-center items-center flex-shrink-0 rounded-full bg-onboarding-background-400">
-        <div className="grid grid-cols-11 gap-x-4 mb-1 text-sm">
+              <User2 className="h-4 w-4 stroke-onboarding-background-300 fill-onboarding-background-400" />
-          <h6 className="col-span-7">Co-workers Email</h6>
+            </div>
-          <h6 className="col-span-4">Role</h6>
+            <div className="w-full">
+              <div className="rounded-md h-2.5 my-2 bg-onboarding-background-100 w-2/3" />
+              <div className="rounded-md h-2 bg-onboarding-background-400 w-1/2" />
+            </div>
+          </div>
+        ))}
+
+        <div className="relative mt-20 h-32">
+          <div className="flex absolute bg-onboarding-background-200 p-2 rounded-full gap-x-2 border border-onboarding-border-100 w-full mt-1 -left-1/2">
+            <div className="w-8 h-8 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-onboarding-text-400 text-sm">murphy@plane.so</p>
+            </div>
+          </div>
+
+          <div className="flex absolute bg-onboarding-background-200 p-2 rounded-full gap-x-2 border border-onboarding-border-100 -left-1/3 mt-14 w-full">
+            <div className="w-8 h-8 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-onboarding-text-400 text-sm">Elsa@plane.so</p>
+            </div>
+          </div>
         </div>
-        <div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto">
+      </div>
-          {fields.map((field, index) => (
+      <form
-            <InviteMemberForm
+        className="px-7 sm:px-0 md:w-4/5 lg:w-1/2  mx-auto space-y-7 sm:space-y-10 overflow-hidden flex flex-col"
-              control={control}
+        onSubmit={handleSubmit(onSubmit)}
-              errors={errors}
+        onKeyDown={(e) => {
-              field={field}
+          if (e.code === "Enter") e.preventDefault();
-              fields={fields}
+        }}
-              index={index}
+      >
-              remove={remove}
+        <div className="flex justify-between items-center">
-              key={field.id}
+          <h2 className="text-xl sm:text-2xl font-semibold">Invite your team to work with you</h2>
-            />
+          <OnboardingStepIndicator step={2} />
-          ))}
         </div>
-        <button
+
-          type="button"
+        <div className="md:w-4/5 text-sm flex flex-col overflow-hidden">
-          className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-xs font-medium py-2 pr-3"
+          <div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto">
-          onClick={appendField}
+            {fields.map((field, index) => (
-        >
+              <InviteMemberForm
-          <Plus className="h-3 w-3" />
+                control={control}
-          Add another
+                errors={errors}
-        </button>
+                field={field}
-      </div>
+                fields={fields}
-      <div className="flex items-center gap-4">
+                index={index}
-        <Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
+                remove={remove}
-          {isSubmitting ? "Sending..." : "Send Invite"}
+                key={field.id}
-        </Button>
+              />
-        <Button variant="neutral-primary" size="md" onClick={nextStep}>
+            ))}
-          Skip this step
+          </div>
-        </Button>
+          <button
-      </div>
+            type="button"
-    </form>
+            className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-sm font-semibold py-2 pr-3"
+            onClick={appendField}
+          >
+            <Plus className="h-3 w-3" />
+            Add another
+          </button>
+        </div>
+        <div className="flex items-center gap-4">
+          <Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
+            {isSubmitting ? "Sending..." : "Send Invite"}
+          </Button>
+          {/* <Button variant="outline-primary" size="md" onClick={nextStep}>
+            Copy invite link
+          </Button> */}
+
+          <span className="text-sm text-onboarding-text-400 hover:cursor-pointer" onClick={nextStep}>
+            Do this later
+          </span>
+        </div>
+      </form>
+    </div>
   );
 };

web/components/onboarding/join-workspaces.tsx

@@ -1,139 +1,83 @@
-import React, { useState } from "react";
+import React from "react";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useUser from "hooks/use-user";
-// ui
+// components
-import { Button } from "@plane/ui";
+import Invitations from "./invitations";
-// icons
+import DummySidebar from "components/account/sidebar";
-import { CheckCircle } from "lucide-react";
+import OnboardingStepIndicator from "components/account/step-indicator";
-// helpers
+import { Workspace } from "./workspace";
-import { truncateText } from "helpers/string.helper";
 // types
-import { IWorkspaceMemberInvitation, TOnboardingSteps } from "types";
+import { IWorkspace, TOnboardingSteps } from "types";
-// fetch-keys
+// react-hook-form
-import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+import { Controller, useForm } from "react-hook-form";
-// constants
-import { ROLE } from "constants/workspace";
-import { trackEvent } from "helpers/event-tracker.helper";
 
 type Props = {
   finishOnboarding: () => Promise<void>;
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
-  updateLastWorkspace: () => Promise<void>;
+  setTryDiffAccount: () => void;
 };
 
-// services
+export const JoinWorkspaces: React.FC<Props> = ({ stepChange, setTryDiffAccount }) => {
-const workspaceService = new WorkspaceService();
-
-export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
-  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
-  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
-
   const { user } = useUser();
-
+  const {
-  const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+    handleSubmit,
-    workspaceService.userWorkspaceInvitations()
+    control,
-  );
+    setValue,
-
+    watch,
-  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    formState: { errors, isSubmitting, isValid },
-    if (action === "accepted") {
+  } = useForm<IWorkspace>({
-      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    defaultValues: {
-    } else if (action === "withdraw") {
+      name: "",
-      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+      slug: `${window.location.host}/`,
-    }
+    },
-  };
+    mode: "onChange",
+  });
 
   const handleNextStep = async () => {
     if (!user) return;
-
+    await stepChange({ workspace_join: true, workspace_create: true });
-    await stepChange({ workspace_join: true });
-
-    if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite) await finishOnboarding();
-  };
-
-  const submitInvitations = async () => {
-    if (invitationsRespond.length <= 0) return;
-
-    setIsJoiningWorkspaces(true);
-
-    await workspaceService
-      .joinWorkspaces({ invitations: invitationsRespond })
-      .then(async (res) => {
-        trackEvent(
-          'WORKSPACE_USER_INVITE_ACCEPT',
-          res
-        )
-        await mutateInvitations();
-        await mutate(USER_WORKSPACES);
-        await updateLastWorkspace();
-
-        await handleNextStep();
-      })
-      .finally(() => setIsJoiningWorkspaces(false));
   };
 
   return (
-    <div className="w-full space-y-7 sm:space-y-10">
+    <div className="flex h-full w-full">
-      <h5 className="sm:text-lg">We see that someone has invited you to</h5>
+      <div className="hidden lg:block w-3/12">
-      <h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
+        <Controller
-      <div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
+          control={control}
-        {invitations &&
+          name="name"
-          invitations.map((invitation) => {
+          render={({ field: { value } }) => (
-            const isSelected = invitationsRespond.includes(invitation.id);
+            <DummySidebar
-
+              watch={watch}
-            return (
+              setValue={setValue}
-              <div
+              control={control}
-                key={invitation.id}
+              showProject={false}
-                className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${isSelected ? "border-custom-primary-100" : "border-custom-border-200 hover:bg-custom-background-80"
+              workspaceName={value.length > 0 ? value : "New Workspace"}
-                  }`}
+            />
-                onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+          )}
-              >
+        />
-                <div className="flex-shrink-0">
-                  <div className="grid place-items-center h-9 w-9 rounded">
-                    {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
-                      <img
-                        src={invitation.workspace.logo}
-                        height="100%"
-                        width="100%"
-                        className="rounded"
-                        alt={invitation.workspace.name}
-                      />
-                    ) : (
-                      <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
-                        {invitation.workspace.name[0]}
-                      </span>
-                    )}
-                  </div>
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
-                  <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
-                </div>
-                <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
-                  <CheckCircle className="h-5 w-5" />
-                </span>
-              </div>
-            );
-          })}
       </div>
-      <div className="flex items-center gap-3">
+
-        <Button
+      <div className="w-full lg:w-1/2 md:w-4/5 md:px-0 px-7  my-16 mx-auto">
-          variant="primary"
+        <div className="flex justify-between items-center">
-          type="submit"
+          <p className="font-semibold text-onboarding-text-200 text-xl sm:text-2xl">What will your workspace be?</p>
-          size="md"
+          <OnboardingStepIndicator step={1} />
-          onClick={submitInvitations}
+        </div>
-          disabled={invitationsRespond.length === 0}
+        <Workspace
-          loading={isJoiningWorkspaces}
+          stepChange={stepChange}
-        >
+          user={user}
-          Accept & Join
+          control={control}
-        </Button>
+          handleSubmit={handleSubmit}
-        <Button variant="neutral-primary" size="md" onClick={handleNextStep}>
+          setValue={setValue}
-          Skip for now
+          errors={errors}
-        </Button>
+          isSubmitting={isSubmitting}
+        />
+        <div className="flex  md:w-4/5 items-center my-8">
+          <hr className="border-onboarding-border-100 w-full" />
+          <p className="text-center text-sm text-custom-text-400 mx-3 flex-shrink-0">Or</p>
+          <hr className="border-onboarding-border-100 w-full" />
+        </div>
+        <div className="w-full">
+          <Invitations setTryDiffAccount={setTryDiffAccount} handleNextStep={handleNextStep} />
+        </div>
       </div>
     </div>
   );

web/components/onboarding/user-details.tsx

@@ -1,22 +1,29 @@
-import { useEffect } from "react";
+// react
+import React, { useState } from "react";
+// next
+import Image from "next/image";
 import { Controller, useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-// ui
+// components
-import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
+import DummySidebar from "components/account/sidebar";
+import OnboardingStepIndicator from "components/account/step-indicator";
 // types
 import { IUser } from "types";
-// helpers
-import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
 // constants
-import { USER_ROLES } from "constants/workspace";
 import { TIME_ZONES } from "constants/timezones";
+// assets
+import IssuesSvg from "public/onboarding/onboarding-issues.svg";
+import { ImageUploadModal } from "components/core";
+// icons
+import { Camera, User2 } from "lucide-react";
 
 const defaultValues: Partial<IUser> = {
   first_name: "",
-  last_name: "",
+  avatar: "",
-  role: "",
+  use_case: undefined,
 };
 
 type Props = {
@@ -31,13 +38,16 @@ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
 
 export const UserDetails: React.FC<Props> = observer((props) => {
   const { user } = props;
-
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [selectedUsecase, setSelectedUsecase] = useState<number | null>();
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   const { user: userStore } = useMobxStore();
 
   const {
     handleSubmit,
     control,
-    reset,
+    watch,
+    setValue,
     formState: { errors, isSubmitting, isValid },
   } = useForm<IUser>({
     defaultValues,
@@ -48,6 +58,9 @@ export const UserDetails: React.FC<Props> = observer((props) => {
 
     const payload: Partial<IUser> = {
       ...formData,
+      first_name: formData.first_name.split(" ")[0],
+      last_name: formData.first_name.split(" ")[1],
+      use_case: formData.use_case,
       onboarding_step: {
         ...user.onboarding_step,
         profile_complete: true,
@@ -57,136 +70,130 @@ export const UserDetails: React.FC<Props> = observer((props) => {
     await userStore.updateCurrentUser(payload);
   };
 
-  useEffect(() => {
+  const useCases = [
-    if (user) {
+    "Build Products",
-      reset({
+    "Manage Feedbacks",
-        first_name: user.first_name,
+    "Service delivery",
-        last_name: user.last_name,
+    "Field force management",
-        role: user.role,
+    "Code Repository Integration",
-        user_timezone: getUserTimeZoneFromWindow(),
+    "Bug Tracking",
-      });
+    "Test Case Management",
-    }
+    "Rescource allocation",
-  }, [user, reset]);
+  ];
 
   return (
-    <form
+    <div className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto flex ">
-      className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
+      <div className="hidden lg:block w-3/12">
-      onSubmit={handleSubmit(onSubmit)}
+        <DummySidebar showProject workspaceName="New Workspace" />
-    >
-      <div className="relative sm:text-lg">
-        <div className="text-custom-primary-100 absolute -top-1 -left-3">{'"'}</div>
-        <h5>Hey there 👋🏻</h5>
-        <h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
-        <h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
       </div>
+      <ImageUploadModal
+        isOpen={isImageUploadModalOpen}
+        onClose={() => setIsImageUploadModalOpen(false)}
+        isRemoving={isRemoving}
+        handleDelete={() => {}}
+        onSuccess={(url) => {
+          setValue("avatar", url);
+          setIsImageUploadModalOpen(false);
+        }}
+        value={watch("avatar") !== "" ? watch("avatar") : undefined}
+        userImage
+      />
+      <div className="flex lg:w-3/5 md:w-4/5 md:px-0 px-7 mx-auto flex-col">
+        <form onSubmit={handleSubmit(onSubmit)} className="md:w-11/12 mx-auto">
+          <div className="flex justify-between items-center">
+            <p className="font-semibold text-xl sm:text-2xl">What do we call you? </p>
+            <OnboardingStepIndicator step={2} />
+          </div>
+          <div className="flex mt-5 w-full ">
+            <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+              {!watch("avatar") || watch("avatar") === "" ? (
+                <div className="h-16 hover:cursor-pointer justify-center items-center flex w-16 rounded-full flex-shrink-0 mr-3 relative bg-onboarding-background-300">
+                  <div className="h-6 w-6 flex justify-center items-center bottom-1 border border-onboarding-border-100 -right-1 bg-onboarding-background-100 rounded-full absolute">
+                    <Camera className="h-4 w-4 stroke-onboarding-background-400" />
+                  </div>
+                  <User2 className="h-10 w-10 stroke-onboarding-background-300 fill-onboarding-background-400" />
+                </div>
+              ) : (
+                <div className="relative h-16 w-16 overflow-hidden mr-3">
+                  <img
+                    src={watch("avatar")}
+                    className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
+                    onClick={() => setIsImageUploadModalOpen(true)}
+                    alt={user?.display_name}
+                  />
+                </div>
+              )}
+            </button>
 
-      <div className="space-y-7 sm:w-3/4 md:w-2/5">
+            <div className="my-2 bg-onboarding-background-200 w-full mr-10 rounded-md flex text-sm">
-        <div className="space-y-1 text-sm">
+              <Controller
-          <label htmlFor="firstName">First Name</label>
+                control={control}
-          <Controller
-            control={control}
-            name="first_name"
-            rules={{
-              required: "First name is required",
-              maxLength: {
-                value: 24,
-                message: "First name cannot exceed the limit of 24 characters",
-              },
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="first_name"
                 name="first_name"
-                type="text"
+                rules={{
-                value={value}
+                  required: "First name is required",
-                onChange={onChange}
+                  maxLength: {
-                ref={ref}
+                    value: 24,
-                hasError={Boolean(errors.first_name)}
+                    message: "First name cannot exceed the limit of 24 characters",
-                placeholder="Enter your first name..."
+                  },
-                className="w-full"
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="first_name"
+                    name="first_name"
+                    type="text"
+                    value={value}
+                    autoFocus={true}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.first_name)}
+                    placeholder="Enter your full name..."
+                    className="w-full focus:border-custom-primary-100 border-onboarding-border-100"
+                  />
+                )}
               />
-            )}
+            </div>
-          />
+          </div>
-        </div>
+          <div className="mt-14 mb-10">
-        <div className="space-y-1 text-sm">
-          <label htmlFor="lastName">Last Name</label>
-          <Controller
-            control={control}
-            name="last_name"
-            rules={{
-              required: "Last name is required",
-              maxLength: {
-                value: 24,
-                message: "Last name cannot exceed the limit of 24 characters",
-              },
-            }}
-            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="Enter your last name..."
-                className="w-full"
-              />
-            )}
-          />
-        </div>
-        <div className="space-y-1 text-sm">
-          <span>What{"'"}s your role?</span>
-          <div className="w-full">
             <Controller
-              name="role"
               control={control}
-              rules={{ required: "This field is required" }}
+              name="first_name"
+              render={({ field: { value } }) => (
+                <p className="font-medium text-onboarding-text-200 text-xl sm:text-2xl p-0">
+                  And how will you use Plane{value.length>0?", ":""}{value}?
+                </p>
+              )}
+            />
+
+            <p className="font-medium text-onboarding-text-300 text-sm my-3">Choose just one</p>
+
+            <Controller
+              control={control}
+              name="use_case"
               render={({ field: { value, onChange } }) => (
-                <CustomSelect
+                <div className="flex flex-wrap break-all overflow-auto">
-                  value={value}
+                  {useCases.map((useCase) => (
-                  onChange={(val: any) => onChange(val)}
+                    <div
-                  label={value ? value.toString() : <span className="text-custom-text-400">Select your role...</span>}
+                      className={`border mb-3 hover:cursor-pointer hover:bg-onboarding-background-300/30 flex-shrink-0 ${
-                  input
+                        value === useCase ? "border-custom-primary-100" : "border-onboarding-border-100"
-                  width="w-full"
+                      } mr-3 rounded-sm p-3 text-sm font-medium`}
-                >
+                      onClick={() => onChange(useCase)}
-                  {USER_ROLES.map((item) => (
+                    >
-                    <CustomSelect.Option key={item.value} value={item.value}>
+                      {useCase}
-                      {item.label}
+                    </div>
-                    </CustomSelect.Option>
                   ))}
-                </CustomSelect>
+                </div>
               )}
             />
-            {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
-          </div>
-        </div>
-        <div className="space-y-1 text-sm">
-          <span>What time zone are you in? </span>
-          <div className="w-full">
-            <Controller
-              name="user_timezone"
-              control={control}
-              rules={{ required: "This field is required" }}
-              render={({ field: { value, onChange } }) => (
-                <CustomSearchSelect
-                  value={value}
-                  label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
-                  options={timeZoneOptions}
-                  onChange={onChange}
-                  optionsClassName="w-full"
-                  input
-                />
-              )}
-            />
-            {errors?.user_timezone && <span className="text-sm text-red-500">{errors.user_timezone.message}</span>}
           </div>
+
+          <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+            {isSubmitting ? "Updating..." : "Continue"}
+          </Button>
+        </form>
+        <div className="mt-3 flex ml-auto">
+          <Image src={IssuesSvg} className="w-2/3 h-[w-2/3] object-cover" />
         </div>
       </div>
-
+    </div>
-      <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
-        {isSubmitting ? "Updating..." : "Continue"}
-      </Button>
-    </form>
   );
 });

web/components/onboarding/workspace.tsx

@@ -1,67 +1,172 @@
 import { useState } from "react";
 // ui
-import { Button } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { IUser, IWorkspace, TOnboardingSteps } from "types";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
 // constants
-import { CreateWorkspaceForm } from "components/workspace";
+import { RESTRICTED_URLS } from "constants/workspace";
+// react-hook-form
+import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue } from "react-hook-form";
 
 type Props = {
-  finishOnboarding: () => Promise<void>;
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
-  updateLastWorkspace: () => Promise<void>;
   user: IUser | undefined;
-  workspaces: IWorkspace[] | undefined;
+  control: Control<IWorkspace, any>;
+  handleSubmit: UseFormHandleSubmit<IWorkspace, undefined>;
+  errors: FieldErrors<IWorkspace>;
+  setValue: UseFormSetValue<IWorkspace>;
+  isSubmitting: boolean;
 };
 
-export const Workspace: React.FC<Props> = (props) => {
+// services
-  const { finishOnboarding, stepChange, updateLastWorkspace, user, workspaces } = props;
+const workspaceService = new WorkspaceService();
 
-  const [defaultValues, setDefaultValues] = useState({
+export const Workspace: React.FC<Props> = (props) => {
-    name: "",
+  const { stepChange, user, control, handleSubmit, setValue, errors, isSubmitting } = props;
-    slug: "",
+  const [slugError, setSlugError] = useState(false);
-    organization_size: "",
+  const [invalidSlug, setInvalidSlug] = useState(false);
-  });
+
+  const {
+    workspace: workspaceStore,
+    user: { updateCurrentUser },
+  } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    if (isSubmitting) return;
+    const slug = formData.slug.split("/");
+    formData.slug = slug[slug.length - 1];
+
+    await workspaceService
+      .workspaceSlugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+          setSlugError(false);
+
+          await workspaceStore
+            .createWorkspace(formData)
+            .then(async (res) => {
+              setToastAlert({
+                type: "success",
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+              await workspaceStore.fetchWorkspaces();
+              await completeStep();
+            })
+            .catch(() =>
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Workspace could not be created. Please try again.",
+              })
+            );
+        } else setSlugError(true);
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
+  };
 
   const completeStep = async () => {
-    if (!user) return;
+    if (!user || !workspaceStore.workspaces) return;
 
     const payload: Partial<TOnboardingSteps> = {
       workspace_create: true,
+      workspace_join: true,
     };
 
     await stepChange(payload);
-    await updateLastWorkspace();
+    await updateCurrentUser({
-  };
+      last_workspace_id: workspaceStore.workspaces[0]?.id,
-
+    });
-  const secondaryButtonAction = async () => {
-    if (workspaces && workspaces.length > 0) {
-      await stepChange({ workspace_create: true, workspace_invite: true, workspace_join: true });
-      await finishOnboarding();
-    } else await stepChange({ profile_complete: false, workspace_join: false });
   };
 
   return (
-    <div className="w-full space-y-7 sm:space-y-10">
+    <form className="mt-5 md:w-2/3" onSubmit={handleSubmit(handleCreateWorkspace)}>
-      <h4 className="text-xl sm:text-2xl font-semibold">Create your workspace</h4>
+      <div className="mb-5">
-      <div className="sm:w-3/4 md:w-2/5">
+        <p className="text-base text-custom-text-400 mb-1">Name it.</p>
-        <CreateWorkspaceForm
+        <Controller
-          onSubmit={completeStep}
+          control={control}
-          defaultValues={defaultValues}
+          name="name"
-          setDefaultValues={setDefaultValues}
+          rules={{
-          primaryButtonText={{
+            required: "Workspace name is required",
-            loading: "Creating...",
+            validate: (value) =>
-            default: "Continue",
+              /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
+            maxLength: {
+              value: 80,
+              message: "Workspace name should not exceed 80 characters",
+            },
           }}
-          secondaryButton={
+          render={({ field: { value, ref, onChange } }) => (
-            workspaces ? (
+            <div className="flex items-center relative rounded-md bg-onboarding-background-200">
-              <Button variant="neutral-primary" onClick={secondaryButtonAction}>
+              <Input
-                {workspaces.length > 0 ? "Skip & continue" : "Back"}
+                id="name"
-              </Button>
+                name="name"
-            ) : undefined
+                type="text"
-          }
+                value={value}
+                onChange={(event) => {
+                  onChange(event.target.value);
+                  setValue("name", event.target.value);
+                  if (window && window.location.host) {
+                    const host = window.location.host;
+                    const slug = event.currentTarget.value.split("/");
+                    setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
+                  }
+                }}
+                placeholder="Enter workspace name..."
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                className="w-full h-[46px] text-base placeholder:text-custom-text-400/50 placeholder:text-base border-onboarding-border-100"
+              />
+            </div>
+          )}
         />
+        {errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
+        <p className="text-base text-custom-text-400 mt-4 mb-1">You can edit the slug.</p>
+        <Controller
+          control={control}
+          name="slug"
+          render={({ field: { value, onChange, ref } }) => (
+            <div className="flex items-center relative rounded-md bg-onboarding-background-200">
+              <Input
+                id="slug"
+                name="slug"
+                type="text"
+                prefix="asdasdasdas"
+                value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                onChange={(e) => {
+                  const host = window.location.host;
+                  const slug = e.currentTarget.value.split("/");
+                  /^[a-zA-Z0-9_-]+$/.test(slug[slug.length - 1]) ? setInvalidSlug(false) : setInvalidSlug(true);
+                  setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
+                }}
+                ref={ref}
+                hasError={Boolean(errors.slug)}
+                className="w-full h-[46px] border-onboarding-border-100"
+              />
+            </div>
+          )}
+        />
+        {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>
+        )}
       </div>
-    </div>
+      <Button variant="primary" type="submit" size="md">
+        {isSubmitting ? "Creating..." : "Make it live"}
+      </Button>
+    </form>
   );
 };

web/components/page-views/signin.tsx

@@ -19,8 +19,11 @@ import {
 import { Loader, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+import signInIssues from "public/onboarding/onboarding-issues.svg";
 // types
 import { IUser, IUserSettings } from "types";
+// icons
+import { Lightbulb } from "lucide-react";
 
 const authService = new AuthService();
 
@@ -36,7 +39,8 @@ export const SignInView = observer(() => {
   const [isLoading, setLoading] = useState(false);
   // toast
   const { setToastAlert } = useToast();
-  // computed
+
+  // computed.
   const enableEmailPassword =
     envConfig &&
     (envConfig?.email_password_login ||
@@ -180,71 +184,82 @@ export const SignInView = observer(() => {
           <Spinner />
         </div>
       ) : (
-        <>
+        <div className={`bg-onboarding-gradient-primary h-full overflow-y-auto`}>
-          <>
+          <div className="sm:py-5 pl-8 pb-4 sm:pl-16 lg:pl-28 ">
-            <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+            <div className="flex text-3xl items-center mt-16 font-semibold">
-            <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+              <div className="h-[30px] w-[30px] mr-2">
-              <div className="grid place-items-center bg-custom-background-100">
+                <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
-                <div className="h-[30px] w-[30px]">
-                  <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
-                </div>
               </div>
-            </div>
+              Plane
-          </>
-          <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
-            <div>
-              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-                Sign in to Plane
-              </h1>
-
-              {!envConfig ? (
-                <div className="pt-10 w-ful">
-                  <Loader className="space-y-4 w-full pb-4">
-                    <Loader.Item height="46px" width="360px" />
-                    <Loader.Item height="46px" width="360px" />
-                  </Loader>
-
-                  <Loader className="space-y-4 w-full pt-4">
-                    <Loader.Item height="46px" width="360px" />
-                    <Loader.Item height="46px" width="360px" />
-                  </Loader>
-                </div>
-              ) : (
-                <>
-                  <>
-                    {enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
-                    {envConfig?.magic_login && (
-                      <div className="flex flex-col divide-y divide-custom-border-200">
-                        <div className="pb-7">
-                          <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                        </div>
-                      </div>
-                    )}
-                    <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
-                      {envConfig?.google_client_id && (
-                        <GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
-                      )}
-                      {envConfig?.github_client_id && (
-                        <GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
-                      )}
-                    </div>
-                  </>
-                  <p className="pt-16 text-custom-text-200 text-sm text-center">
-                    By signing up, you agree to the{" "}
-                    <a
-                      href="https://plane.so/terms-and-conditions"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="font-medium underline"
-                    >
-                      Terms & Conditions
-                    </a>
-                  </p>
-                </>
-              )}
             </div>
           </div>
-        </>
+
+          <div className="md:w-2/3 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
+            <div className={`p-4`}>
+              <div className={`px-7 sm:px-0 bg-onboarding-gradient-secondary h-full pt-32 pb-20 rounded-md`}>
+                {!envConfig ? (
+                  <div className="pt-10 mx-auto flex justify-center">
+                    <div>
+                      <Loader className="space-y-4 w-full pb-4 mx-auto">
+                        <Loader.Item height="46px" width="360px" />
+                        <Loader.Item height="46px" width="360px" />
+                      </Loader>
+
+                      <Loader className="space-y-4 w-full pt-4 mx-auto">
+                        <Loader.Item height="46px" width="360px" />
+                        <Loader.Item height="46px" width="360px" />
+                      </Loader>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <>
+                      {enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
+                      {envConfig?.magic_login && (
+                        <div className="flex flex-col divide-y divide-custom-border-200">
+                          <div className="pb-2">
+                            <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                          </div>
+                        </div>
+                      )}
+                      <div className="flex sm:w-96 items-center mt-4 mx-auto">
+                        <hr className={`border-onboarding-border-100 w-full`} />
+                        <p className="text-center text-sm text-onboarding-text-400 mx-3 flex-shrink-0">
+                          Or continue with
+                        </p>
+                        <hr className={`border-onboarding-border-100 w-full`} />
+                      </div>
+                      <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-96 mx-auto overflow-hidden">
+                        {envConfig?.google_client_id && (
+                          <GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
+                        )}
+                        {envConfig?.github_client_id && (
+                          <GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
+                        )}
+                      </div>
+                    </>
+                    <div className={`flex py-2 bg-onboarding-background-100 mx-auto rounded-sm sm:w-96 mt-16`}>
+                      <Lightbulb className="h-7 w-7 mr-2 mx-3" />
+                      <p className={`text-sm text-left text-onboarding-text-200`}>
+                        Try the latest features, like Tiptap editor, to write compelling responses.{" "}
+                        <span className="font-medium underline hover:cursor-pointer" onClick={() => {}}>
+                          See new features
+                        </span>
+                      </p>
+                    </div>
+                    <div className="flex justify-center sm:w-96 sm:h-64 object-cover mt-8 mx-auto rounded-md ">
+                      <Image
+                        src={signInIssues}
+                        alt="Plane Logo"
+                        className={`flex object-cover rounded-md bg-onboarding-background-100`}
+                      />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
       )}
     </>
   );

web/components/workspace/sidebar-dropdown.tsx

@@ -251,7 +251,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
       {!sidebarCollapsed && (
         <Menu as="div" className="relative flex-shrink-0">
           <Menu.Button className="grid place-items-center outline-none">
-            <Avatar
+          <Avatar
               name={currentUser?.display_name}
               src={currentUser?.avatar}
               size={24}

web/pages/onboarding/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, ReactElement } from "react";
+import { useEffect, useState, ReactElement, Fragment } from "react";
 import Image from "next/image";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -15,31 +15,34 @@ import { UserAuthWrapper } from "layouts/auth-layout";
 // components
 import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
 // ui
-import { Spinner } from "@plane/ui";
+import { Avatar, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
-import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
 // types
 import { IUser, TOnboardingSteps } from "types";
 import { NextPageWithLayout } from "types/app";
+import { ChevronDown } from "lucide-react";
+import { Menu, Popover, Transition } from "@headlessui/react";
+import DeleteAccountModal from "components/account/delete-account-modal";
+import { useRouter } from "next/router";
 
 // services
 const workspaceService = new WorkspaceService();
 
 const OnboardingPage: NextPageWithLayout = observer(() => {
   const [step, setStep] = useState<number | null>(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   const {
     user: { currentUser, updateCurrentUser, updateUserOnBoard },
     workspace: workspaceStore,
   } = useMobxStore();
+  const router = useRouter();
 
   const user = currentUser ?? undefined;
   const workspaces = workspaceStore.workspaces;
-  const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser;
 
-  const { theme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
   const {} = useUserAuth("onboarding");
 
@@ -47,15 +50,6 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
     workspaceService.userWorkspaceInvitations()
   );
 
-  // update last active workspace details
-  const updateLastWorkspace = async () => {
-    if (!workspaces) return;
-
-    await updateCurrentUser({
-      last_workspace_id: workspaces[0]?.id,
-    });
-  };
-
   // handle step change
   const stepChange = async (steps: Partial<TOnboardingSteps>) => {
     if (!user) return;
@@ -69,12 +63,13 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
     await updateCurrentUser(payload);
   };
-
   // complete onboarding
   const finishOnboarding = async () => {
-    if (!user) return;
+    if (!user || !workspaces) return;
 
     await updateUserOnBoard();
+
+    router.replace(`/${workspaces[0].slug}`);
   };
 
   useEffect(() => {
@@ -87,17 +82,14 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
       const onboardingStep = user.onboarding_step;
 
-      if (!onboardingStep.profile_complete && step !== 1) setStep(1);
+      if (!onboardingStep.workspace_join && !onboardingStep.workspace_create && step !== 1) setStep(1);
 
-      if (onboardingStep.profile_complete) {
+      if (onboardingStep.workspace_join || onboardingStep.workspace_create) {
-        if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4) setStep(4);
+        if (!onboardingStep.profile_complete && step !== 2) setStep(2);
-        else if (!onboardingStep.workspace_create && (step !== 4 || onboardingStep.workspace_join) && step !== 2)
-          setStep(2);
       }
-
       if (
         onboardingStep.profile_complete &&
-        onboardingStep.workspace_create &&
+        (onboardingStep.workspace_join || onboardingStep.workspace_create) &&
         !onboardingStep.workspace_invite &&
         step !== 3
       )
@@ -109,74 +101,93 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
   return (
     <>
+      <DeleteAccountModal
+        isOpen={showDeleteModal}
+        onClose={() => {
+          setShowDeleteModal(false);
+        }}
+      />
       {user && step !== null ? (
-        <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+        <div className={` bg-onboarding-gradient-primary h-full overflow-y-auto`}>
-          <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+          <div className="sm:py-14 py-10 px-4 sm:px-7 md:px-14 lg:pl-28 lg:pr-24 flex items-center">
-            <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
+            <div className="w-full flex items-center justify-between font-semibold ">
-            {step === 1 ? (
+              <div className="text-3xl flex items-center gap-x-1">
-              <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+                <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" height={30} width={30} />
-                <div className="h-[30px] w-[30px]">
+                Plane
-                  <Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
-                </div>
               </div>
-            ) : (
+
-              <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+              <div className="pr-4 flex gap-x-2 items-center">
-                <div className="h-[30px] w-[133px]">
+                {step != 1 && (
-                  {theme === "light" ? (
+                  <Avatar
-                    <Image src={BlackHorizontalLogo} alt="Plane black logo" />
+                    name={workspaces ? workspaces[0].name : "N"}
-                  ) : (
+                    size={35}
-                    <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
+                    shape="square"
-                  )}
+                    fallbackBackgroundColor="#FCBE1D"
-                </div>
+                    className="!text-base"
-              </div>
-            )}
-            <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
-              {user?.email}
-            </div>
-          </div>
-          <div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
-            {step === 1 ? (
-              <UserDetails user={user} />
-            ) : step === 2 ? (
-              <Workspace
-                finishOnboarding={finishOnboarding}
-                stepChange={stepChange}
-                updateLastWorkspace={updateLastWorkspace}
-                user={user}
-                workspaces={workspaces}
-              />
-            ) : step === 3 ? (
-              <InviteMembers
-                finishOnboarding={finishOnboarding}
-                stepChange={stepChange}
-                user={user}
-                workspace={userWorkspaces?.[0]}
-              />
-            ) : (
-              step === 4 && (
-                <JoinWorkspaces
-                  finishOnboarding={finishOnboarding}
-                  stepChange={stepChange}
-                  updateLastWorkspace={updateLastWorkspace}
-                />
-              )
-            )}
-          </div>
-          {step !== 4 && (
-            <div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
-              <div className="w-3/4 md:w-1/5 space-y-1">
-                <p className="text-xs text-custom-text-200">{step} of 3 steps</p>
-                <div className="relative h-1 w-full rounded bg-custom-background-80">
-                  <div
-                    className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
-                    style={{
-                      width: `${((step / 3) * 100).toFixed(0)}%`,
-                    }}
                   />
+                )}
+                <div>
+                  {step != 1 && (
+                    <p className="text-sm text-custom-text-200 font-medium">
+                      {currentUser?.first_name} {currentUser?.last_name}
+                    </p>
+                  )}
+
+                  <Menu>
+                    <Menu.Button className={"flex items-center gap-x-2"}>
+                      <span className="text-base font-medium">{user.email}</span>
+                      <ChevronDown className="h-4 w-4 text-custom-text-300" />
+                    </Menu.Button>
+                    <Transition
+                      enter="transition duration-100 ease-out"
+                      enterFrom="transform scale-95 opacity-0"
+                      enterTo="transform scale-100 opacity-100"
+                      leave="transition duration-75 ease-out"
+                      leaveFrom="transform scale-100 opacity-100"
+                      leaveTo="transform scale-95 opacity-0"
+                    >
+                      <Menu.Items className={"absolute translate-x-full"}>
+                        <Menu.Item>
+                          <div
+                            className="absolute pr-28 hover:cursor-pointer bg-onboarding-background-200 mr-auto mt-2 rounded-md text-custom-text-300 text-base font-normal p-3 shadow-sm border border-custom-border-200"
+                            onClick={() => {
+                              setShowDeleteModal(true);
+                            }}
+                          >
+                            Delete
+                          </div>
+                        </Menu.Item>
+                      </Menu.Items>
+                    </Transition>
+                  </Menu>
                 </div>
               </div>
             </div>
-          )}
+          </div>
+          <div className="w-full lg:w-4/5 xl:w-3/4 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
+            <div className={`bg-onboarding-gradient-primary p-4`}>
+              <div className={`bg-onboarding-gradient-secondary h-full rounded-md`}>
+                {step === 1 ? (
+                  <JoinWorkspaces
+                    setTryDiffAccount={() => {
+                      setShowDeleteModal(true);
+                    }}
+                    finishOnboarding={finishOnboarding}
+                    stepChange={stepChange}
+                  />
+                ) : step === 2 ? (
+                  <UserDetails user={user} />
+                ) : (
+                  <InviteMembers
+                    finishOnboarding={finishOnboarding}
+                    stepChange={stepChange}
+                    user={user}
+                    workspace={workspaces?.[0]}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
         </div>
       ) : (
         <div className="h-screen w-full grid place-items-center">

web/services/user.service.ts

@@ -184,4 +184,13 @@ export class UserService extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async deleteAccount(): Promise<void> {
+    return this.delete("/api/users/me/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
 }

web/services/workspace.service.ts

@@ -64,7 +64,7 @@ export class WorkspaceService extends APIService {
   }
 
   async inviteWorkspace(workspaceSlug: string, data: IWorkspaceBulkInviteFormData): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data)
+    return this.post(`/api/workspaces/${workspaceSlug}/invitations/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

web/styles/globals.css

@@ -125,6 +125,24 @@
     --color-border-200: 229, 229, 229; /* subtle border- 2 */
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    /* onboarding colors */
+    --gradient-onboarding-primary: linear-gradient(106deg, #F2F6FF 29.8%, #E1EAFF 99.34%);
+    --gradient-onboarding-secondary: linear-gradient(129deg, rgba(255, 255, 255, 0.00) -22.23%, rgba(255, 255, 255, 0.80) 62.98%);
+
+    --color-onboarding-text-100: 23, 23, 23;
+    --color-onboarding-text-200: 58, 58, 58;
+    --color-onboarding-text-300: 82, 82, 82;
+    --color-onboarding-text-400: 163, 163, 163;
+
+    --color-onboarding-background-100: 236, 241, 255;
+    --color-onboarding-background-200: 255, 255, 255;
+    --color-onboarding-background-300: 236, 241, 255;
+    --color-onboarding-background-400: 177, 206, 250; 
+
+    --color-onboarding-border-100: 229, 229, 229;
+    --color-onboarding-border-200: 217, 228, 255;
+    
   }
 
   [data-theme="light-contrast"] {
@@ -172,6 +190,25 @@
     --color-border-200: 38, 38, 38; /* subtle border- 2 */
     --color-border-300: 46, 46, 46; /* strong border- 1 */
     --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+
+
+    /* onboarding colors */
+    --gradient-onboarding-primary: linear-gradient(106deg, #18191B 25.17%, #18191B 99.34%);
+    --gradient-onboarding-secondary: linear-gradient(129deg, rgba(47, 49, 53, 0.80) -22.23%, rgba(33, 34, 37, 0.80) 62.98%);
+
+    --color-onboarding-text-100: 237, 238, 240;
+    --color-onboarding-text-200: 176, 180, 187;
+    --color-onboarding-text-300: 118, 123, 132;
+    --color-onboarding-text-400: 105, 110, 119;
+
+    --color-onboarding-background-100: 54, 58, 64; 
+    --color-onboarding-background-200: 40, 42, 45; 
+    --color-onboarding-background-300: 40, 42, 45; 
+    --color-onboarding-background-400: 67, 72, 79;
+
+    --color-onboarding-border-100: 54, 58, 64;
+    --color-onboarding-border-200: 54, 58, 64;
   }
 
   [data-theme="dark-contrast"] {

web/types/users.d.ts

@@ -27,6 +27,7 @@ export interface IUser {
   user_timezone: string;
   username: string;
   theme: IUserTheme;
+  use_case? :string;
 }
 
 export interface IInstanceAdminStatus {