chore: empty state asset and theme improvement

apps/space/core/components/account/auth-forms/auth-header.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import { FC } from "react";
 // helpers
 import { EAuthModes } from "@/types/auth";
 
 type TAuthHeader = {
   authMode: EAuthModes;
-  children: ReactNode;
 };
 
 type TAuthHeaderContent = {
@@ -30,15 +29,15 @@ const Titles: TAuthHeaderDetails = {
 };
 
 export const AuthHeader: FC<TAuthHeader> = (props) => {
-  const { authMode, children } = props;
+  const { authMode } = props;
 
   const getHeaderSubHeader = (mode: EAuthModes | null): TAuthHeaderContent => {
     if (mode) {
       return Titles[mode];
     }
 
     return {
-      header: "Comment or react to work itemss",
+      header: "Comment or react to work items",
       subHeader: "Use plane to add your valuable inputs to features.",
     };
   };
@@ -47,11 +46,10 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
 
   return (
     <>
-      <div className="space-y-1 text-center">
-        <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-onboarding-text-100">{header}</h3>
-        <p className="text-xs sm:text-sm md:text-base font-medium text-onboarding-text-400">{subHeader}</p>
+      <div className="flex flex-col gap-1">
+        <span className="text-2xl font-semibold text-custom-text-100 leading-7">{header}</span>
+        <span className="text-2xl font-semibold text-custom-text-400 leading-7">{subHeader}</span>
       </div>
-      {children}
     </>
   );
 };

apps/space/core/components/account/auth-forms/auth-root.tsx

@@ -2,18 +2,21 @@
 
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import Image from "next/image";
 import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
 // plane imports
+import { API_BASE_URL } from "@plane/constants";
 import { SitesAuthService } from "@plane/services";
 import { IEmailCheckData } from "@plane/types";
+import { OAuthOptions } from "@plane/ui";
 // components
 import {
   AuthHeader,
   AuthBanner,
   AuthEmailForm,
   AuthUniqueCodeForm,
   AuthPasswordForm,
-  OAuthOptions,
   TermsAndConditions,
 } from "@/components/account";
 // helpers
@@ -27,6 +30,11 @@ import {
 import { useInstance } from "@/hooks/store";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
+// assets
+import GithubLightLogo from "/public/logos/github-black.png";
+import GithubDarkLogo from "/public/logos/github-dark.svg";
+import GitlabLogo from "/public/logos/gitlab-logo.svg";
+import GoogleLogo from "/public/logos/google-logo.svg";
 
 const authService = new SitesAuthService();
 
@@ -36,13 +44,15 @@ export const AuthRoot: FC = observer(() => {
   const emailParam = searchParams.get("email") || undefined;
   const error_code = searchParams.get("error_code") || undefined;
   const nextPath = searchParams.get("next_path") || undefined;
+  const next_path = searchParams.get("next_path");
   // states
   const [authMode, setAuthMode] = useState<EAuthModes>(EAuthModes.SIGN_UP);
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
   const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
   const [isPasswordAutoset, setIsPasswordAutoset] = useState(true);
   // hooks
+  const { resolvedTheme } = useTheme();
   const { config } = useInstance();
 
   useEffect(() => {
@@ -146,12 +156,54 @@ export const AuthRoot: FC = observer(() => {
       });
   };
 
+  const content = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
+
+  const OAuthConfig = [
+    {
+      id: "google",
+      text: `${content} with Google`,
+      icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_google_enabled,
+    },
+    {
+      id: "github",
+      text: `${content} with GitHub`,
+      icon: (
+        <Image
+          src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
+          height={18}
+          width={18}
+          alt="GitHub Logo"
+        />
+      ),
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_github_enabled,
+    },
+    {
+      id: "gitlab",
+      text: `${content} with GitLab`,
+      icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitlab_enabled,
+    },
+  ];
+
   return (
-    <div className="relative flex flex-col space-y-6">
-      <AuthHeader authMode={authMode}>
+    <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">
         {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
@@ -182,9 +234,8 @@ export const AuthRoot: FC = observer(() => {
             }}
           />
         )}
-        {isOAuthEnabled && <OAuthOptions />}
         <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP ? true : false} />
-      </AuthHeader>
+      </div>
     </div>
   );
 });

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>
   );

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>

apps/web/core/components/workspace/settings/workspace-details.tsx

@@ -167,7 +167,7 @@ export const WorkspaceDetails: FC = observer(() => {
                   />
                 </div>
               ) : (
-                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-[#026292] p-4 uppercase text-white">
                   {currentWorkspace?.name?.charAt(0) ?? "N"}
                 </div>
               )}

apps/web/core/components/workspace/sidebar/dropdown-item.tsx

@@ -49,7 +49,7 @@ const SidebarDropdownItem = observer((props: TProps) => {
           <div className="flex items-center justify-start gap-2.5 w-[80%] relative">
             <span
               className={`relative flex h-8 w-8 flex-shrink-0 items-center  justify-center p-2 text-base uppercase font-medium border-custom-border-200 ${
-                !workspace?.logo_url && "rounded-md bg-custom-primary-500 text-white"
+                !workspace?.logo_url && "rounded-md bg-[#026292] text-white"
               }`}
             >
               {workspace?.logo_url && workspace.logo_url !== "" ? (

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>