[WEB-1319] chore: instance not ready pages improvement (#4492)

* chore: instance not ready pages improvement

* fix: magic sign up

* chore: issue mutation spinner and command k spinner updated

* chore: forgot password email input disabled

* chore: forgot password email input disabled revert

* chore: unused asset removed

apiserver/plane/authentication/views/app/magic.py

@@ -188,7 +188,7 @@ class MagicSignUpEndpoint(View):
             return HttpResponseRedirect(url)
         # Existing user
         existing_user = User.objects.filter(email=email).first()
-        if not existing_user:
+        if existing_user:
             exc = AuthenticationException(
                 error_code=AUTHENTICATION_ERROR_CODES["USER_ALREADY_EXIST"],
                 error_message="USER_ALREADY_EXIST",

space/components/instance/not-ready-view.tsx

@@ -2,30 +2,56 @@
 
 import { FC } from "react";
 import Image from "next/image";
+import { useTheme } from "next-themes";
 // ui
 import { Button } from "@plane/ui";
 // helper
 import { GOD_MODE_URL } from "@/helpers/common.helper";
 // images
 import PlaneTakeOffImage from "@/public/instance/plane-takeoff.png";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
-export const InstanceNotReady: FC = () => (
-  <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center pt-12">
-    <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">
-        <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">
-          Get started by setting up your instance and workspace
-        </p>
-      </div>
-      <div>
-        <a href={GOD_MODE_URL}>
-          <Button size="lg" className="w-full">
-            Get started
-          </Button>
-        </a>
+export const InstanceNotReady: FC = () => {
+  const { resolvedTheme } = useTheme();
+  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
+
+  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">
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
+            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+          </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 mb-[110px] flex-grow">
+          <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">
+                <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">
+                  Get started by setting up your instance and workspace
+                </p>
+              </div>
+              <div>
+                <a href={GOD_MODE_URL}>
+                  <Button size="lg" className="w-full">
+                    Get started
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};

web/components/command-palette/actions/issue-actions/change-state.tsx

@@ -4,8 +4,7 @@ import { useRouter } from "next/router";
 // hooks
 import { Check } from "lucide-react";
 import { TIssue } from "@plane/types";
-import { StateGroupIcon } from "@plane/ui";
-import { LogoSpinner } from "@/components/common";
+import { Spinner, StateGroupIcon } from "@plane/ui";
 import { EIssuesStoreType } from "@/constants/issue";
 import { useProjectState, useIssues } from "@/hooks/store";
 // ui
@@ -59,7 +58,7 @@ export const ChangeIssueState: React.FC<Props> = observer((props) => {
           <div className="text-center">No states found</div>
         )
       ) : (
-        <LogoSpinner />
+        <Spinner />
       )}
     </>
   );

web/components/instance/not-ready-view.tsx

@@ -1,41 +1,55 @@
 import { FC } from "react";
 import Image from "next/image";
+import { useTheme } from "next-themes";
 import { Button } from "@plane/ui";
 // helpers
 import { GOD_MODE_URL } from "@/helpers/common.helper";
 // images
 import PlaneTakeOffImage from "@/public/plane-takeoff.png";
+// assets
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
-export const InstanceNotReady: FC = () => (
-  <div className="relative h-screen max-h-max w-full overflow-hidden overflow-y-auto flex flex-col">
-    <div className="flex-shrink-0 h-[100px]">
-      <div className="relative h-full container 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">
-          <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
-          <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
-        </div>
-      </div>
-    </div>
-    <div className="w-full flex-grow px-5 lg:px-0 mb-[100px]">
-      <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">
-            <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">
-              Get started by setting up your instance and workspace
-            </p>
+export const InstanceNotReady: FC = () => {
+  const { resolvedTheme } = useTheme();
+  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
+
+  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">
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
+            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
           </div>
-          <div>
-            <a href={GOD_MODE_URL}>
-              <Button size="lg" className="w-full">
-                Get started
-              </Button>
-            </a>
+        </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 mb-[110px] flex-grow">
+          <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">
+                <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">
+                  Get started by setting up your instance and workspace
+                </p>
+              </div>
+              <div>
+                <a href={GOD_MODE_URL}>
+                  <Button size="lg" className="w-full">
+                    Get started
+                  </Button>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
-import { LogoSpinner } from "@/components/common";
+import { Spinner } from "@plane/ui";
 import {
   ListLayout,
   CalendarLayout,
@@ -61,8 +61,8 @@ export const ProjectLayoutRoot: FC = observer(() => {
           <div className="relative h-full w-full overflow-auto bg-custom-background-90">
             {/* mutation loader */}
             {issues?.loader === "mutation" && (
-              <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
-                <LogoSpinner />
+              <div className="fixed w-[40px] h-[40px] z-50 right-[16px] top-[64px] flex justify-center items-center bg-custom-background-80 shadow-sm rounded">
+                <Spinner className="w-4 h-4" />
               </div>
             )}
             {activeLayout === "list" ? (