[WEB-4542] feat: god mode auth revamp and code refactor (#7563)

* chore: auth color updated and remove unused tokens

* chore: god-mode brand revamp

* fix: space app spinner logo

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import Link from "next/link";
+import { PlaneLockup } from "@plane/ui";
+
+export const AuthHeader = () => (
+  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <Link href="/">
+      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+    </Link>
+  </div>
+);

apps/admin/app/(all)/(home)/layout.tsx

@@ -1,35 +1,9 @@
 "use client";
 
-import Image from "next/image";
-import Link from "next/link";
-import { useTheme } from "next-themes";
-// logo assets
-import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
-import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
-import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
-
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const { resolvedTheme } = useTheme();
-
-  const patternBackground = resolvedTheme === "light" ? PlaneBackgroundPattern : PlaneBackgroundPatternDark;
-  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
-
   return (
-    <div className="relative">
-      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-        <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
-          <div className="flex items-center gap-x-2 py-10">
-            <Link href={`/`} className="h-[30px] w-[133px]">
-              <Image src={logo} alt="Plane logo" />
-            </Link>
-          </div>
-        </div>
-        <div className="absolute inset-0 z-0">
-          <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
-        </div>
-        <div className="relative z-10 flex-grow">{children}</div>
-      </div>
+    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+      {children}
     </div>
   );
 }

apps/admin/app/(all)/(home)/page.tsx

@@ -2,8 +2,8 @@
 
 import { observer } from "mobx-react";
 // components
+import { LogoSpinner } from "@/components/common/logo-spinner";
 import { InstanceFailureView } from "@/components/instance/failure";
-import { InstanceLoading } from "@/components/instance/loading";
 import { InstanceSetupForm } from "@/components/instance/setup-form";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -17,46 +17,24 @@ const HomePage = () => {
   // if instance is not fetched, show loading
   if (!instance && !error) {
     return (
-      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-        <InstanceLoading />
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
       </div>
     );
   }
 
   // if instance fetch fails, show failure view
   if (error) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-        <InstanceFailureView />
-      </div>
-    );
+    return <InstanceFailureView />;
   }
 
   // if instance is fetched and setup is not done, show setup form
   if (instance && !instance?.is_setup_done) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-        <InstanceSetupForm />
-      </div>
-    );
+    return <InstanceSetupForm />;
   }
 
   // if instance is fetched and setup is done, show sign in form
-  return (
-    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Manage your Plane instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Configure instance-wide settings to secure your instance
-          </p>
-        </div>
-        <InstanceSignInForm />
-      </div>
-    </div>
-  );
+  return <InstanceSignInForm />;
 };
 
 export default observer(HomePage);

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -10,7 +10,9 @@ import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common/banner";
 // local components
+import { FormHeader } from "../../../core/components/instance/form-header";
 import { AuthBanner } from "./auth-banner";
+import { AuthHeader } from "./auth-header";
 import { authErrorHandler } from "./auth-helpers";
 
 // service initialization
@@ -101,78 +103,91 @@ export const InstanceSignInForm: FC = () => {
   }, [errorCode]);
 
   return (
-    <form
-      className="space-y-4"
-      method="POST"
-      action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
-      onSubmit={() => setIsSubmitting(true)}
-      onError={() => setIsSubmitting(false)}
-    >
-      {errorData.type && errorData?.message ? (
-        <Banner type="error" message={errorData?.message} />
-      ) : (
-        <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
-      )}
-      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-
-      <div className="w-full space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-          Email <span className="text-red-500">*</span>
-        </label>
-        <Input
-          className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-          id="email"
-          name="email"
-          type="email"
-          inputSize="md"
-          placeholder="name@company.com"
-          value={formData.email}
-          onChange={(e) => handleFormChange("email", e.target.value)}
-          autoComplete="on"
-          autoFocus
-        />
-      </div>
-
-      <div className="w-full space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-          Password <span className="text-red-500">*</span>
-        </label>
-        <div className="relative">
-          <Input
-            className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-            id="password"
-            name="password"
-            type={showPassword ? "text" : "password"}
-            inputSize="md"
-            placeholder="Enter your password"
-            value={formData.password}
-            onChange={(e) => handleFormChange("password", e.target.value)}
-            autoComplete="on"
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <FormHeader
+            heading="Manage your Plane instance"
+            subHeading="Configure instance-wide settings to secure your instance"
           />
-          {showPassword ? (
-            <button
-              type="button"
-              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-              onClick={() => setShowPassword(false)}
-            >
-              <EyeOff className="h-4 w-4" />
-            </button>
-          ) : (
-            <button
-              type="button"
-              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-              onClick={() => setShowPassword(true)}
-            >
-              <Eye className="h-4 w-4" />
-            </button>
-          )}
+          <form
+            className="space-y-4"
+            method="POST"
+            action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+            onSubmit={() => setIsSubmitting(true)}
+            onError={() => setIsSubmitting(false)}
+          >
+            {errorData.type && errorData?.message ? (
+              <Banner type="error" message={errorData?.message} />
+            ) : (
+              <>
+                {errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}
+              </>
+            )}
+            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+                Email <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="email"
+                name="email"
+                type="email"
+                inputSize="md"
+                placeholder="name@company.com"
+                value={formData.email}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                autoComplete="on"
+                autoFocus
+              />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                Password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="password"
+                  name="password"
+                  type={showPassword ? "text" : "password"}
+                  inputSize="md"
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  autoComplete="on"
+                />
+                {showPassword ? (
+                  <button
+                    type="button"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => setShowPassword(false)}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => setShowPassword(true)}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="py-2">
+              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
+              </Button>
+            </div>
+          </form>
         </div>
       </div>
-      <div className="py-2">
-        <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
-        </Button>
-      </div>
-    </form>
+    </>
   );
 };

apps/admin/core/components/common/logo-spinner.tsx

@@ -7,11 +7,11 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 export const LogoSpinner = () => {
   const { resolvedTheme } = useTheme();
 
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/admin/core/components/instance/failure.tsx

@@ -1,13 +1,15 @@
 "use client";
 import { FC } from "react";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/ui";
 // assets
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
 import InstanceFailureImage from "@/public/instance/instance-failure.svg";
 
-export const InstanceFailureView: FC = () => {
+export const InstanceFailureView: FC = observer(() => {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -17,22 +19,24 @@ export const InstanceFailureView: FC = () => {
   };
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={instanceImage} alt="Plane Logo" />
-          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
-          <p className="font-medium text-base text-center">
-            We were unable to fetch the details of the instance. <br />
-            Fret not, it might just be a connectivity issue.
-          </p>
-        </div>
-        <div className="flex justify-center">
-          <Button size="md" onClick={handleRetry}>
-            Retry
-          </Button>
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <div className="relative flex flex-col justify-center items-center space-y-4">
+            <Image src={instanceImage} alt="Plane Logo" />
+            <h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
+            <p className="font-medium text-base text-center">
+              We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
+            </p>
+          </div>
+          <div className="flex justify-center">
+            <Button size="md" onClick={handleRetry}>
+              Retry
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
-};
+});

apps/admin/core/components/instance/form-header.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => (
+  <div className="flex flex-col gap-1">
+    <span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
+    <span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
+  </div>
+);

apps/admin/core/components/instance/instance-not-ready.tsx

@@ -13,7 +13,7 @@ export const InstanceNotReady: FC = () => (
       <div className="relative flex flex-col justify-center items-center space-y-4">
         <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
         <Image src={PlaneTakeOffImage} alt="Plane Logo" />
-        <p className="font-medium text-base text-onboarding-text-400">
+        <p className="font-medium text-base text-custom-text-400">
           Get started by setting up your instance and workspace
         </p>
       </div>

apps/admin/core/components/instance/loading.tsx

@@ -6,16 +6,12 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 
 export const InstanceLoading = () => {
   const { resolvedTheme } = useTheme();
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
-          <h3 className="font-medium text-2xl text-white ">Fetching instance details...</h3>
-        </div>
-      </div>
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/admin/core/components/instance/setup-form.tsx

@@ -10,7 +10,9 @@ import { AuthService } from "@plane/services";
 import { Button, Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import { Banner } from "@/components/common/banner";
+import { FormHeader } from "@/components/instance/form-header";
 
 // service initialization
 const authService = new AuthService();
@@ -131,227 +133,221 @@ export const InstanceSetupForm: FC = (props) => {
   const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
 
   return (
-    <div className="max-w-lg lg:max-w-md w-full">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Setup your Plane Instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Post setup you will be able to manage this Plane instance.
-          </p>
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <FormHeader
+            heading="Setup your Plane Instance"
+            subHeading="Post setup you will be able to manage this Plane instance."
+          />
+          {errorData.type &&
+            errorData?.message &&
+            ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
+              <Banner type="error" message={errorData?.message} />
+            )}
+          <form
+            className="space-y-4"
+            method="POST"
+            action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
+            onSubmit={() => setIsSubmitting(true)}
+            onError={() => setIsSubmitting(false)}
+          >
+            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+            <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
+
+            <div className="flex flex-col sm:flex-row items-center gap-4">
+              <div className="w-full space-y-1">
+                <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
+                  First name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="first_name"
+                  name="first_name"
+                  type="text"
+                  inputSize="md"
+                  placeholder="Wilber"
+                  value={formData.first_name}
+                  onChange={(e) => handleFormChange("first_name", e.target.value)}
+                  autoComplete="on"
+                  autoFocus
+                />
+              </div>
+              <div className="w-full space-y-1">
+                <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
+                  Last name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="last_name"
+                  name="last_name"
+                  type="text"
+                  inputSize="md"
+                  placeholder="Wright"
+                  value={formData.last_name}
+                  onChange={(e) => handleFormChange("last_name", e.target.value)}
+                  autoComplete="on"
+                />
+              </div>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+                Email <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="email"
+                name="email"
+                type="email"
+                inputSize="md"
+                placeholder="name@company.com"
+                value={formData.email}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+                autoComplete="on"
+              />
+              {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
+                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+              )}
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
+                Company name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="company_name"
+                name="company_name"
+                type="text"
+                inputSize="md"
+                placeholder="Company name"
+                value={formData.company_name}
+                onChange={(e) => handleFormChange("company_name", e.target.value)}
+              />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                Set a password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="password"
+                  name="password"
+                  type={showPassword.password ? "text" : "password"}
+                  inputSize="md"
+                  placeholder="New password..."
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                  onFocus={() => setIsPasswordInputFocused(true)}
+                  onBlur={() => setIsPasswordInputFocused(false)}
+                  autoComplete="on"
+                />
+                {showPassword.password ? (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
+                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+              )}
+              <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+                Confirm password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  type={showPassword.retypePassword ? "text" : "password"}
+                  id="confirm_password"
+                  name="confirm_password"
+                  inputSize="md"
+                  value={formData.confirm_password}
+                  onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+                  placeholder="Confirm password"
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                  onFocus={() => setIsRetryPasswordInputFocused(true)}
+                  onBlur={() => setIsRetryPasswordInputFocused(false)}
+                />
+                {showPassword.retypePassword ? (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              {!!formData.confirm_password &&
+                formData.password !== formData.confirm_password &&
+                renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+            </div>
+
+            <div className="relative flex gap-2">
+              <div>
+                <Checkbox
+                  className="w-4 h-4"
+                  iconClassName="w-3 h-3"
+                  id="is_telemetry_enabled"
+                  onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
+                  checked={formData.is_telemetry_enabled}
+                />
+              </div>
+              <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+                Allow Plane to anonymously collect usage events.{" "}
+                <a
+                  tabIndex={-1}
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                >
+                  See More
+                </a>
+              </label>
+            </div>
+
+            <div className="py-2">
+              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+              </Button>
+            </div>
+          </form>
         </div>
-
-        {errorData.type &&
-          errorData?.message &&
-          ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
-            <Banner type="error" message={errorData?.message} />
-          )}
-
-        <form
-          className="space-y-4"
-          method="POST"
-          action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
-          onSubmit={() => setIsSubmitting(true)}
-          onError={() => setIsSubmitting(false)}
-        >
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
-
-          <div className="flex flex-col sm:flex-row items-center gap-4">
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
-                First name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="first_name"
-                name="first_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wilber"
-                value={formData.first_name}
-                onChange={(e) => handleFormChange("first_name", e.target.value)}
-                autoComplete="on"
-                autoFocus
-              />
-            </div>
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
-                Last name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="last_name"
-                name="last_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wright"
-                value={formData.last_name}
-                onChange={(e) => handleFormChange("last_name", e.target.value)}
-                autoComplete="on"
-              />
-            </div>
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-              Email <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="email"
-              name="email"
-              type="email"
-              inputSize="md"
-              placeholder="name@company.com"
-              value={formData.email}
-              onChange={(e) => handleFormChange("email", e.target.value)}
-              hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
-              autoComplete="on"
-            />
-            {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
-              Company name <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="company_name"
-              name="company_name"
-              type="text"
-              inputSize="md"
-              placeholder="Company name"
-              value={formData.company_name}
-              onChange={(e) => handleFormChange("company_name", e.target.value)}
-            />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-              Set a password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="password"
-                name="password"
-                type={showPassword.password ? "text" : "password"}
-                inputSize="md"
-                placeholder="New password..."
-                value={formData.password}
-                onChange={(e) => handleFormChange("password", e.target.value)}
-                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
-                onFocus={() => setIsPasswordInputFocused(true)}
-                onBlur={() => setIsPasswordInputFocused(false)}
-                autoComplete="on"
-              />
-              {showPassword.password ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-            <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-              Confirm password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                type={showPassword.retypePassword ? "text" : "password"}
-                id="confirm_password"
-                name="confirm_password"
-                inputSize="md"
-                value={formData.confirm_password}
-                onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                placeholder="Confirm password"
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                onFocus={() => setIsRetryPasswordInputFocused(true)}
-                onBlur={() => setIsRetryPasswordInputFocused(false)}
-              />
-              {showPassword.retypePassword ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {!!formData.confirm_password &&
-              formData.password !== formData.confirm_password &&
-              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
-          </div>
-
-          <div className="relative flex items-center pt-2 gap-2">
-            <div>
-              <Checkbox
-                className="w-4 h-4"
-                iconClassName="w-3 h-3"
-                id="is_telemetry_enabled"
-                onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
-                checked={formData.is_telemetry_enabled}
-              />
-            </div>
-            <label
-              className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
-              htmlFor="is_telemetry_enabled"
-            >
-              Allow Plane to anonymously collect usage events.
-            </label>
-            <a
-              tabIndex={-1}
-              href="https://developers.plane.so/self-hosting/telemetry"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-blue-500 hover:text-blue-600"
-            >
-              See More
-            </a>
-          </div>
-
-          <div className="py-2">
-            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-            </Button>
-          </div>
-        </form>
       </div>
-    </div>
+    </>
   );
 };

apps/admin/styles/globals.css

@@ -135,28 +135,6 @@
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
-    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 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;
-    --color-onboarding-border-300: 229, 229, 229, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
-
     /* toast theme */
     --color-toast-success-text: 62, 155, 79;
     --color-toast-error-text: 220, 62, 66;
@@ -244,27 +222,6 @@
     --color-border-300: 46, 46, 46; /* strong border- 1 */
     --color-border-400: 58, 58, 58; /* strong border- 2 */
 
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
-
-    --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;
-    --color-onboarding-border-300: 34, 35, 38, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
-
     /* toast theme */
     --color-toast-success-text: 178, 221, 181;
     --color-toast-error-text: 206, 44, 49;

apps/space/core/components/common/logo-spinner.tsx

@@ -8,7 +8,7 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 export const LogoSpinner = () => {
   const { resolvedTheme } = useTheme();
 
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
 
   return (
     <div className="flex items-center justify-center">