From 96d470dc632a802c0f10c46bfe2f47873a8a0870 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 1 Aug 2025 19:43:14 +0530
Subject: [PATCH] [WEB-4623] chore: upgrade modal improvement and code refactor
 (#3815)

* chore: space app auth screen oauth

* chore: product update modal logo

* chore: code refactor

* chore: code refactor
---
 .../core/components/account/auth-forms/auth-root.tsx      | 5 +++--
 apps/web/ce/components/global/product-updates-header.tsx  | 6 ++----
 .../web/core/components/global/product-updates/footer.tsx | 7 ++-----
 apps/web/core/layouts/auth-layout/workspace-wrapper.tsx   | 4 ++--
 apps/web/ee/components/global/product-updates-header.tsx  | 8 ++------
 5 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/apps/space/core/components/account/auth-forms/auth-root.tsx b/apps/space/core/components/account/auth-forms/auth-root.tsx
index 0480653282..653c97cc73 100644
--- a/apps/space/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-root.tsx
@@ -198,10 +198,12 @@ export const AuthRoot: FC = observer(() => {
   return (
     <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">
-        <AuthHeader authMode={authMode} />
         {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
           <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
         )}
+        <AuthHeader authMode={authMode} />
+        {isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
+
         {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
         {authStep === EAuthSteps.UNIQUE_CODE && (
           <AuthUniqueCodeForm
@@ -232,7 +234,6 @@ export const AuthRoot: FC = observer(() => {
             }}
           />
         )}
-        {isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
         <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP ? true : false} />
       </div>
     </div>
diff --git a/apps/web/ce/components/global/product-updates-header.tsx b/apps/web/ce/components/global/product-updates-header.tsx
index 776d9667dd..418a940a7e 100644
--- a/apps/web/ce/components/global/product-updates-header.tsx
+++ b/apps/web/ce/components/global/product-updates-header.tsx
@@ -1,10 +1,8 @@
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useTranslation } from "@plane/i18n";
+import { PlaneLogo } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
-// assets
-import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 // package.json
 import packageJson from "package.json";
 
@@ -23,7 +21,7 @@ export const ProductUpdatesHeader = observer(() => {
         </div>
       </div>
       <div className="flex flex-shrink-0 items-center gap-8">
-        <Image src={PlaneLogo} alt="Plane" width={24} height={24} />
+        <PlaneLogo className="h-6 w-auto text-custom-text-100" />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index 6bc52e2bd2..7e361b2515 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -1,12 +1,9 @@
-import Image from "next/image";
 import { USER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { getButtonStyling } from "@plane/ui";
+import { getButtonStyling, PlaneLogo } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
-// assets
-import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 
 export const ProductUpdatesFooter = () => {
   const { t } = useTranslation();
@@ -60,7 +57,7 @@ export const ProductUpdatesFooter = () => {
           "flex gap-1.5 items-center text-center font-medium hover:underline underline-offset-2 outline-none"
         )}
       >
-        <Image src={PlaneLogo} alt="Plane" width={12} height={12} />
+        <PlaneLogo className="h-4 w-auto text-custom-text-100" />
         {t("powered_by_plane_pages")}
       </a>
     </div>
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index c711870d4d..42d7d46548 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -11,7 +11,7 @@ import useSWRImmutable from "swr/immutable";
 // ui
 import { LogOut } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button, getButtonStyling, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
+import { Button, getButtonStyling, PlaneLogo, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // components
 import { cn } from "@plane/utils";
 import { LogoSpinner } from "@/components/common";
@@ -150,7 +150,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
         <div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
           <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
             <div className="z-10 flex-shrink-0 bg-custom-background-90 py-4">
-              <Image src={planeLogo} height={26} className="h-[26px]" alt="Plane logo" />
+              <PlaneLogo className="h-9 w-auto text-custom-text-100" />
             </div>
             <div className="relative flex items-center gap-2">
               <div className="text-sm font-medium">{currentUser?.email}</div>
diff --git a/apps/web/ee/components/global/product-updates-header.tsx b/apps/web/ee/components/global/product-updates-header.tsx
index c420bb60e3..5bf1085f7c 100644
--- a/apps/web/ee/components/global/product-updates-header.tsx
+++ b/apps/web/ee/components/global/product-updates-header.tsx
@@ -1,18 +1,14 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { ExternalLink, RefreshCw } from "lucide-react";
 import { EProductSubscriptionEnum } from "@plane/types";
-// plane imports
-import { Button, setToast, TOAST_TYPE } from "@plane/ui";
+import { Button, setToast, TOAST_TYPE, PlaneLogo } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 // plane web hooks
 import { useWorkspaceSubscription } from "@/plane-web/hooks/store";
-// assets
-import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 // services
 import { InstanceService } from "@/services/instance.service";
 
@@ -93,7 +89,7 @@ export const ProductUpdatesHeader = observer(() => {
             Perpetual license
           </div>
         )}
-        <Image src={PlaneLogo} alt="Plane" width={24} height={24} />
+        <PlaneLogo className="h-6 w-auto text-custom-text-100" />
       </div>
     </div>
   );