style: onboarding light version

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

@@ -0,0 +1,112 @@
+// 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";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  heading: string;
+};
+
+const authService = new AuthService();
+
+const DeleteAccountModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose, heading } = 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 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-custom-background-100 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-custom-text-100">
+                        {heading}
+                      </Dialog.Title>
+                    </div>
+
+                    <div className="mt-6 px-4">
+                      <p className="text-custom-text-400 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>
+                      </p>
+                    </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 variant="outline-danger" size="sm" tabIndex={1} loading={isDeleteLoading}>
+                    {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,8 @@ 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";
 
 // types
 type EmailCodeFormValues = {
@@ -23,6 +25,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 +55,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     await authService
       .emailCode({ email })
       .then((res) => {
+        console.log(res);
+        setSentEmail(email);
         setValue("key", res.key);
         setCodeSent(true);
       })
@@ -99,29 +104,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-custom-text-100 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>below.</span>
+          </div>
+        </>
+      ) : (
+        <>
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+            Let’s get you prepped!
+          </h1>
+          <p className="text-center text-sm text-custom-text-100 mt-3">
+            This whole thing will take less than two minutes.
+          </p>
+          <p className="text-center text-sm text-custom-text-100 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,23 +164,46 @@ 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-white">
-                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-custom-text-400/50 border-custom-border-200 pr-12"
+                ></Input>
+                {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 && (
           <>
+            <div>
+              {codeResent && sentEmail === getValues("email") ? (
+                <div className="text-sm my-2.5 text-custom-text-400 m-0">
+                  You got a new code at <span className="font-semibold text-custom-primary-80">{sentEmail}</span>.
+                </div>
+              ) : sentEmail != getValues("email") && getValues("email").length > 0 ? (
+                <div className="text-sm my-2.5 text-custom-text-400 m-0">
+                  Hit enter
+                  <span> ↵ </span>or <span className="italic">Tab</span> to get a new code
+                </div>
+              ) : (
+                <div className="my-4" />
+              )}
+            </div>
+
             <Controller
               control={control}
               name="token"
@@ -166,54 +219,45 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
                   onChange={onChange}
                   ref={ref}
                   hasError={Boolean(errors.token)}
-                  placeholder="Enter code..."
+                  placeholder="get-set-fly"
-                  className="border-custom-border-300 h-[46px] w-full"
+                  className="border-custom-border-300 bg-white 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>
-              )}
-            </button>
           </>
         )}
         {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-custom-text-200">
+                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 +267,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,7 +43,7 @@ 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 rounded border border-custom-primary-20 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
           <Image
             src={theme === "dark" ? githubWhiteImage : githubBlackImage}
             height={20}

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,267 @@
+import React 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 } 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>;
+};
+var timer: number = 0;
+var lastWorkspaceName: string = "";
+const DummySidebar: React.FC<Props> = (props) => {
+  const { workspaceName, showProject, control, setValue } = 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);
+        }
+        timer--;
+      }, 1000);
+    }
+  };
+
+  console.log("CALLED");
+  return (
+    <div className="border-r 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-custom-background-100 w-full max-w-screen-sm flex items-center ml-6 border-8 border-custom-primary-20 rounded-md">
+                  <div className="bg-slate-200 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-custom-text-300 ml-2 truncate">{value}</span>
+                  </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={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-custom-border-200"
+            `}
+          >
+            <Search className="h-4 w-4 text-custom-sidebar-text-300" />
+          </div>
+        </div>
+        {workspaceLinks.map((link) => {
+          return (
+            <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>
+
+      {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) => {
+              return (
+                <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,23 @@
+import React from "react";
+
+const OnboardingStepIndicator = ({ step }: { step: number }) => {
+  return (
+    <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-custom-primary-20"}`} />
+      <div
+        className={` z-10 -ml-1 rounded-full ${
+          step >= 2 ? "bg-custom-primary-100 h-4 w-4" : " h-3 w-3 bg-custom-primary-20"
+        }`}
+      />
+      <div className={`h-1 w-14 -ml-1 ${step >= 3 ? "bg-custom-primary-100" : "bg-custom-primary-20"}`} />
+      <div
+        className={`rounded-full -ml-1 z-10 ${
+          step >= 3 ? "bg-custom-primary-100 h-4 w-4" : "h-3 w-3 bg-custom-primary-20"
+        }`}
+      />
+    </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,115 @@
+// react
+import React, { useState } from "react";
+// components
+import { Button } 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 } from "lucide-react";
+
+type Props = {
+  handleNextStep: () => void;
+  updateLastWorkspace: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+const Invitations: React.FC<Props> = (props) => {
+  const { handleNextStep, updateLastWorkspace } = props;
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+
+  const { workspace: workspaceStore } = useMobxStore();
+
+  const { data: invitations, mutate: mutateInvitations } = 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 submitInvitations = async () => {
+    if (invitationsRespond.length <= 0) return;
+
+    setIsJoiningWorkspaces(true);
+
+    await workspaceService
+      .joinWorkspaces({ invitations: invitationsRespond })
+      .then(async () => {
+        await mutateInvitations();
+        await workspaceStore.fetchWorkspaces();
+        await mutate(USER_WORKSPACES);
+        await updateLastWorkspace();
+        await handleNextStep();
+      })
+      .finally(() => setIsJoiningWorkspaces(false));
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="font-semibold pb-2 text-xl sm:text-2xl">Choose a workspace to join </p>
+      <div>
+        {invitations &&
+          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-custom-border-200 hover:bg-custom-primary-10"
+                }`}
+                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>
+  );
+};
+
+export default Invitations;

web/components/onboarding/invite-members.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // react-hook-form
@@ -13,11 +12,12 @@ import { Button, Input } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // icons
-import { Check, ChevronDown, Plus, X } from "lucide-react";
+import { Check, ChevronDown, Plus, X, XCircle } from "lucide-react";
 // types
 import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
 // constants
 import { ROLE } from "constants/workspace";
+import OnboardingStepIndicator from "components/account/step-indicator";
 
 type Props = {
   finishOnboarding: () => Promise<void>;
@@ -80,7 +80,7 @@ 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-11 placeholder:text-custom-text-400/50"
             />
           )}
         />
@@ -104,10 +104,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 border border-custom-border-200 duration-300"
               >
                 <span className="text-xs sm:text-sm">{ROLE[value]}</span>
-                <ChevronDown className="h-3 w-3" aria-hidden="true" />
+
+                <ChevronDown className="h-4 w-4" />
               </Listbox.Button>
 
               <Transition
@@ -122,7 +123,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-custom-border-200 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none max-h-48"
                 >
                   <div className="space-y-1 p-2">
                     {Object.entries(ROLE).map(([key, value]) => (
@@ -153,10 +154,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 +183,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 +223,86 @@ 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 className="hidden lg:block w-1/4 p-3 ml-auto rounded bg-gradient-to-b from-white to-custom-primary-10/30 border border-custom-border-100">
-      onSubmit={handleSubmit(onSubmit)}
+        <p className="text-base text-custom-text-400 font-semibold">Members</p>
-      onKeyDown={(e) => {
+
-        if (e.code === "Enter") e.preventDefault();
+        {Array.from({ length: 4 }).map(() => (
-      }}
+          <div className="flex items-center gap-2 mt-4">
-    >
+            <div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10"></div>
-      <h2 className="text-xl sm:text-2xl font-semibold">Invite people to collaborate</h2>
+            <div className="w-full">
-      <div className="md:w-3/5 text-sm h-full max-h-[40vh] flex flex-col overflow-hidden">
+              <div className="rounded-md h-2.5 my-2 bg-custom-primary-30 w-2/3" />
-        <div className="grid grid-cols-11 gap-x-4 mb-1 text-sm">
+              <div className="rounded-md h-2 bg-custom-primary-20 w-1/2" />
-          <h6 className="col-span-7">Co-workers Email</h6>
+            </div>
-          <h6 className="col-span-4">Role</h6>
+          </div>
+        ))}
+
+        <div className="relative mt-20 h-32">
+          <div className="flex absolute bg-custom-background-100 p-2 rounded-full gap-x-2 border border-custom-border-200 w-full mt-1 -left-1/2">
+            <div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10"></div>
+            <div>
+              <p className="text-sm font-medium">Murphy cooper</p>
+              <p className="text-custom-text-400 text-sm">murphy@plane.so</p>
+            </div>
+          </div>
+
+          <div className="flex absolute bg-custom-background-100 p-2 rounded-full gap-x-2 border border-custom-border-200 -left-1/3 mt-14 w-full">
+            <div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10"></div>
+            <div>
+              <p className="text-sm font-medium">Else Thompson</p>
+              <p className="text-custom-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-custom-text-400/50 hover:cursor-pointer" onClick={nextStep}>
+            Do this later
+          </span>
+        </div>
+      </form>
+    </div>
   );
 };

web/components/onboarding/join-workspaces.tsx

@@ -1,135 +1,238 @@
 import React, { useState } 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 { Button, Input } from "@plane/ui";
-import { truncateText } from "helpers/string.helper";
+// hooks
+import useToast from "hooks/use-toast";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
 // types
-import { IWorkspaceMemberInvitation, TOnboardingSteps } from "types";
+import { IWorkspace, TOnboardingSteps } from "types";
-// fetch-keys
-import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 // constants
-import { ROLE } from "constants/workspace";
+import { RESTRICTED_URLS, ROLE } from "constants/workspace";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// icons
+import { Search } from "lucide-react";
 
 type Props = {
   finishOnboarding: () => Promise<void>;
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
   updateLastWorkspace: () => Promise<void>;
+  setTryDiffAccount: () => void;
 };
 
 // services
 const workspaceService = new WorkspaceService();
 
-export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
+export const JoinWorkspaces: React.FC<Props> = ({ stepChange, updateLastWorkspace, setTryDiffAccount }) => {
-  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [slugError, setSlugError] = useState(false);
-  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  const [invalidSlug, setInvalidSlug] = useState(false);
-
   const { user } = useUser();
-
+  const { workspace: workspaceStore } = useMobxStore();
-  const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+  const { setToastAlert } = useToast();
-    workspaceService.userWorkspaceInvitations()
+  const {
-  );
+    handleSubmit,
-
+    control,
-  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    setValue,
-    if (action === "accepted") {
+    watch,
-      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    formState: { errors, isSubmitting, isValid },
-    } else if (action === "withdraw") {
+  } = useForm<IWorkspace>({
-      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    defaultValues: {
-    }
+      name: "",
-  };
+      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 () => {
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
-    if (invitationsRespond.length <= 0) return;
+    const slug = formData.slug.split("/");
-
+    formData.slug = slug[slug.length - 1];
-    setIsJoiningWorkspaces(true);
+    // TODO: remove this after adding organization size in backend
-
+    formData.organization_size = "Just myself";
+    console.log(formData.slug);
     await workspaceService
-      .joinWorkspaces({ invitations: invitationsRespond })
+      .workspaceSlugCheck(formData.slug)
-      .then(async () => {
+      .then(async (res) => {
-        await mutateInvitations();
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
-        await mutate(USER_WORKSPACES);
+          setSlugError(false);
-        await updateLastWorkspace();
 
-        await handleNextStep();
+          await workspaceStore
+            .createWorkspace(formData)
+            .then(async (res) => {
+              setToastAlert({
+                type: "success",
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+
+              const payload: Partial<TOnboardingSteps> = {
+                workspace_create: true,
+                workspace_join: true,
+              };
+              await updateLastWorkspace();
+              await stepChange(payload);
+            })
+            .catch(() =>
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Workspace could not be created. Please try again.",
+              })
+            );
+        } else setSlugError(true);
       })
-      .finally(() => setIsJoiningWorkspaces(false));
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
   };
 
   return (
-    <div className="w-full space-y-7 sm:space-y-10">
+    <div className="flex h-full w-full overflow-y-auto">
-      <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, ref } }) => (
-            const isSelected = invitationsRespond.includes(invitation.id);
+            <DummySidebar
-
+              setValue={setValue}
-            return (
+              control={control}
-              <div
+              showProject={false}
-                key={invitation.id}
+              workspaceName={value.length > 0 ? value : "New Workspace"}
-                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"
+          )}
-                }`}
+        />
-                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="lg:w-3/5 md:w-4/5 md:px-0 px-7 w-full my-16 mx-auto">
-          variant="primary"
+        <div className="flex justify-between items-center">
-          type="submit"
+          <p className="font-semibold text-xl sm:text-2xl">What will your workspace </p>
-          size="md"
+          <OnboardingStepIndicator step={1} />
-          onClick={submitInvitations}
+        </div>
-          disabled={invitationsRespond.length === 0}
+        <form className="mt-5 md:w-2/3" onSubmit={handleSubmit(handleCreateWorkspace)}>
-          loading={isJoiningWorkspaces}
+          <div className="mb-5">
-        >
+            <p className="text-base text-custom-text-400 mb-1">Name it.</p>
-          Accept & Join
+            <Controller
-        </Button>
+              control={control}
-        <Button variant="neutral-primary" size="md" onClick={handleNextStep}>
+              name="name"
-          Skip for now
+              rules={{
-        </Button>
+                required: "Workspace name is required",
+                validate: (value) =>
+                  /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
+                maxLength: {
+                  value: 80,
+                  message: "Workspace name should not exceed 80 characters",
+                },
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <div className="flex items-center relative rounded-md bg-white">
+                  <Input
+                    id="name"
+                    name="name"
+                    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-custom-border-200"
+                  ></Input>
+                </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-white">
+                  <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-custom-border-300"
+                  ></Input>
+                </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>
+          <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+            Make it live
+          </Button>
+        </form>
+
+        <div className="flex md:w-4/5 items-center my-5">
+          <hr className="border-custom-border-200 w-full" />
+          <p className="text-center text-sm text-custom-text-400 mx-3 flex-shrink-0">Or</p>
+          <hr className="border-custom-border-200 w-full" />
+        </div>
+        <div className="md:w-2/3 w-full">
+          <Invitations handleNextStep={handleNextStep} updateLastWorkspace={updateLastWorkspace} />
+        </div>
+
+        <div className="py-3 px-4 mt-8 bg-custom-primary-10 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't see your workspace?</span>
+          </div>
+
+          <div>
+            <div
+              className="bg-white 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>
     </div>
   );

web/components/onboarding/user-details.tsx

@@ -1,22 +1,28 @@
-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: "",
 };
 
 type Props = {
@@ -31,13 +37,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 +57,8 @@ 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],
       onboarding_step: {
         ...user.onboarding_step,
         profile_complete: true,
@@ -57,136 +68,123 @@ 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);
+          // handleSubmit(onSubmit)();
+          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-custom-primary-20">
+                  <div className="h-6 w-6 flex justify-center items-center bottom-1 border border-custom-primary-10 -right-1 bg-custom-background-100 rounded-full absolute">
+                    <Camera className="h-4 w-4 stroke-custom-primary-40" />
+                  </div>
+                  <User2 className="h-10 w-10 stroke-custom-primary-20 fill-custom-primary-40" />
+                </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-custom-background-100 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"
+                  />
+                )}
               />
-            )}
+            </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, onChange } }) => (
+              render={({ field: { value } }) => (
-                <CustomSelect
+                <p className="font-medium  text-xl sm:text-2xl  p-0">And how will you use Plane, {value} ?</p>
-                  value={value}
+              )}
-                  onChange={(val: any) => onChange(val)}
+            />
-                  label={value ? value.toString() : <span className="text-custom-text-400">Select your role...</span>}
+
-                  input
+            <p className="font-medium text-sm my-3">Choose just one</p>
-                  width="w-full"
+
+            <div className="flex flex-wrap break-all overflow-auto">
+              {useCases.map((useCase, index) => (
+                <div
+                  className={`border mb-3 hover:cursor-pointer hover:bg-custom-primary-10 flex-shrink-0 ${
+                    selectedUsecase === index ? "border-custom-primary-100" : "border-custom-primary-40"
+                  } mr-3 rounded-sm p-3 text-sm font-medium`}
+                  onClick={() => setSelectedUsecase(index)}
                 >
-                  {USER_ROLES.map((item) => (
+                  {useCase}
-                    <CustomSelect.Option key={item.value} value={item.value}>
+                </div>
-                      {item.label}
+              ))}
-                    </CustomSelect.Option>
+            </div>
-                  ))}
-                </CustomSelect>
-              )}
-            />
-            {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/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/sign-in.svg";
 // types
 import { IUser, IUserSettings } from "types";
+// icons
+import { Lightbulb } from "lucide-react";
 
 const authService = new AuthService();
 
@@ -180,71 +183,74 @@ export const SignInView = observer(() => {
           <Spinner />
         </div>
       ) : (
-        <>
+        <div className="bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/80 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=" bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/30 p-4">
+              <div className="bg-gradient-to-br px-7 sm:px-0 from-white/40 to-white/80 h-full pt-32 pb-20 rounded-md">
+                {!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-2">
+                            <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                          </div>
+                        </div>
+                      )}
+                      <div className="flex sm:w-[360px] items-center mt-4 mx-auto">
+                        <hr className="border-custom-border-200 w-full" />
+                        <p className="text-center text-sm text-custom-text-400 mx-3  flex-shrink-0">Or continue with</p>
+                        <hr className="border-custom-border-200 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-custom-primary-10 mx-auto rounded-sm border border-custom-primary-20 sm:w-96 mt-16">
+                      <Lightbulb className="h-7 w-7 mr-2 mx-3" />
+                      <p className=" text-sm text-left">
+                        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-6 mx-auto rounded-md ">
+                      <Image src={signInIssues} alt="Plane Logo" className="sm:w-96 sm:h-64" />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
       )}
     </>
   );

web/components/workspace/sidebar-dropdown.tsx

@@ -247,7 +247,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,7 +15,7 @@ import { UserAuthWrapper } from "layouts/auth-layout";
 // components
 import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
 // ui
-import { Spinner } from "@plane/ui";
+import { Avatar, CustomMenu, 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";
@@ -23,12 +23,17 @@ import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-l
 // 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";
 
 // services
 const workspaceService = new WorkspaceService();
 
 const OnboardingPage: NextPageWithLayout = observer(() => {
   const [step, setStep] = useState<number | null>(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [tryDiffAccount, setTryDiffAccount] = useState(false);
 
   const {
     user: { currentUser, updateCurrentUser, updateUserOnBoard },
@@ -37,9 +42,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
   const user = currentUser ?? undefined;
   const workspaces = workspaceStore.workspaces;
-  const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser;
 
-  const { theme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
   const {} = useUserAuth("onboarding");
 
@@ -49,6 +53,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
   // update last active workspace details
   const updateLastWorkspace = async () => {
+    console.log("Workspaces", workspaces);
     if (!workspaces) return;
 
     await updateCurrentUser({
@@ -69,7 +74,6 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
     await updateCurrentUser(payload);
   };
-
   // complete onboarding
   const finishOnboarding = async () => {
     if (!user) return;
@@ -87,17 +91,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 +110,92 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
   return (
     <>
+      <DeleteAccountModal
+        heading={tryDiffAccount ? "Try Different Email" : "Delete Account"}
+        isOpen={showDeleteModal || tryDiffAccount}
+        onClose={() => {
+          setShowDeleteModal(false);
+          setTryDiffAccount(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-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/80 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}</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 bg-slate-600 translate-x-full"}>
+                        <Menu.Item>
+                          <div
+                            className="absolute pr-28 hover:cursor-pointer bg-custom-background-100 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-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/30 p-4">
+              <div className="bg-gradient-to-br from-white/40 to-white/80 h-full rounded-md">
+                {step === 1 ? (
+                  <JoinWorkspaces
+                    setTryDiffAccount={() => {
+                      setTryDiffAccount(true);
+                    }}
+                    finishOnboarding={finishOnboarding}
+                    stepChange={stepChange}
+                    updateLastWorkspace={updateLastWorkspace}
+                  />
+                ) : 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/workspace.service.ts

@@ -85,7 +85,7 @@ export class WorkspaceService extends APIService {
     data: IWorkspaceBulkInviteFormData,
     user: IUser | undefined
   ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data)
+    return this.post(`/api/workspaces/${workspaceSlug}/invitations/`, data)
       .then((response) => {
         trackEventService.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE", user as IUser);
         return response?.data;
@@ -109,7 +109,7 @@ export class WorkspaceService extends APIService {
   }
 
   async joinWorkspaces(data: any): Promise<any> {
-    return this.post("/api/users/me/invitations/workspaces/", data)
+    return this.post("/api/users/me/workspaces/invitations/", data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -125,7 +125,7 @@ export class WorkspaceService extends APIService {
   }
 
   async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
-    return this.get("/api/users/me/invitations/workspaces/")
+    return this.get("/api/users/me/workspaces/invitations/")
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;