diff --git a/admin/layouts/default-layout.tsx b/admin/layouts/default-layout.tsx index 1621fc0f83..4a37242483 100644 --- a/admin/layouts/default-layout.tsx +++ b/admin/layouts/default-layout.tsx @@ -2,11 +2,13 @@ import { FC, ReactNode } from "react"; import Image from "next/image"; +import Link from "next/link"; import { useTheme } from "next-themes"; // logo/ images 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; type TDefaultLayout = { children: ReactNode; @@ -19,13 +21,16 @@ export const DefaultLayout: FC = (props) => { const { resolvedTheme } = useTheme(); const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- Plane Logo - Plane + + Plane logo +
{!withoutBackground && ( diff --git a/admin/public/plane-logos/black-horizontal-with-blue-logo.svg b/admin/public/plane-logos/black-horizontal-with-blue-logo.svg new file mode 100644 index 0000000000..ae79919fc5 --- /dev/null +++ b/admin/public/plane-logos/black-horizontal-with-blue-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/admin/public/plane-logos/white-horizontal-with-blue-logo.svg b/admin/public/plane-logos/white-horizontal-with-blue-logo.svg new file mode 100644 index 0000000000..1f09cc34ab --- /dev/null +++ b/admin/public/plane-logos/white-horizontal-with-blue-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/space/components/account/auth-forms/auth-root.tsx b/space/components/account/auth-forms/auth-root.tsx index b0c676fbfc..e02947af01 100644 --- a/space/components/account/auth-forms/auth-root.tsx +++ b/space/components/account/auth-forms/auth-root.tsx @@ -94,7 +94,7 @@ export const AuthRoot: FC = observer(() => { await authService .emailCheck(data) .then(async (response) => { - let currentAuthMode: EAuthModes = EAuthModes.SIGN_UP; + let currentAuthMode: EAuthModes = response.existing ? EAuthModes.SIGN_IN : EAuthModes.SIGN_UP; if (response.existing) { currentAuthMode = EAuthModes.SIGN_IN; setAuthMode(() => EAuthModes.SIGN_IN); diff --git a/space/components/instance/not-ready-view.tsx b/space/components/instance/not-ready-view.tsx index e9b4729606..d30737743f 100644 --- a/space/components/instance/not-ready-view.tsx +++ b/space/components/instance/not-ready-view.tsx @@ -2,6 +2,7 @@ import { FC } from "react"; import Image from "next/image"; +import Link from "next/link"; import { useTheme } from "next-themes"; // ui import { Button } from "@plane/ui"; @@ -11,19 +12,23 @@ import { GOD_MODE_URL } from "@/helpers/common.helper"; 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; export const InstanceNotReady: FC = () => { const { resolvedTheme } = useTheme(); const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- Plane Logo - Plane + + Plane logo +
diff --git a/space/components/views/auth.tsx b/space/components/views/auth.tsx index 15a2bae770..7342665813 100644 --- a/space/components/views/auth.tsx +++ b/space/components/views/auth.tsx @@ -2,18 +2,22 @@ import { observer } from "mobx-react-lite"; import Image from "next/image"; +import Link from "next/link"; import { useTheme } from "next-themes"; // components import { AuthRoot } from "@/components/account"; // images 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-new.png"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; export const AuthView = observer(() => { // hooks const { resolvedTheme } = useTheme(); + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
@@ -26,8 +30,9 @@ export const AuthView = observer(() => {
- Plane Logo - Plane + + Plane logo +
diff --git a/space/lib/instance-provider.tsx b/space/lib/instance-provider.tsx index 032bc5ae92..0f9bd7e254 100644 --- a/space/lib/instance-provider.tsx +++ b/space/lib/instance-provider.tsx @@ -3,6 +3,7 @@ import { ReactNode } from "react"; import { observer } from "mobx-react-lite"; import Image from "next/image"; +import Link from "next/link"; import { useTheme } from "next-themes"; import useSWR from "swr"; // components @@ -13,7 +14,8 @@ import { useInstance, useUser } from "@/hooks/store"; // 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; export const InstanceProvider = observer(({ children }: { children: ReactNode }) => { const { fetchInstanceInfo, instance, error } = useInstance(); @@ -36,14 +38,16 @@ export const InstanceProvider = observer(({ children }: { children: ReactNode })
); + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; if (error) { return (
- Plane Logo - Plane + + Plane logo +
diff --git a/web/components/instance/not-ready-view.tsx b/web/components/instance/not-ready-view.tsx index 1e10c42392..526030f567 100644 --- a/web/components/instance/not-ready-view.tsx +++ b/web/components/instance/not-ready-view.tsx @@ -1,5 +1,6 @@ import { FC } from "react"; import Image from "next/image"; +import Link from "next/link"; import { useTheme } from "next-themes"; import { Button } from "@plane/ui"; // helpers @@ -9,19 +10,23 @@ 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; export const InstanceNotReady: FC = () => { const { resolvedTheme } = useTheme(); const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- Plane Logo - Plane + + Plane logo +
diff --git a/web/pages/accounts/forgot-password.tsx b/web/pages/accounts/forgot-password.tsx index f5c9df44f8..b86b2518fb 100644 --- a/web/pages/accounts/forgot-password.tsx +++ b/web/pages/accounts/forgot-password.tsx @@ -30,7 +30,8 @@ import { AuthService } from "@/services/auth.service"; // images 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; type TForgotPasswordFormValues = { email: string; @@ -95,9 +96,11 @@ const ForgotPasswordPage: NextPageWithLayout = () => { }); }; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- +
{
- Plane Logo - Plane + + Plane logo +
New to Plane?{" "} diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx index a7e73ae765..02772f9141 100644 --- a/web/pages/accounts/reset-password.tsx +++ b/web/pages/accounts/reset-password.tsx @@ -1,5 +1,6 @@ import { ReactElement, useEffect, useMemo, useState } from "react"; import Image from "next/image"; +import Link from "next/link"; import { useRouter } from "next/router"; // icons import { useTheme } from "next-themes"; @@ -30,7 +31,8 @@ import { AuthService } from "@/services/auth.service"; // images 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; type TResetPasswordFormValues = { email: string; @@ -101,9 +103,11 @@ const ResetPasswordPage: NextPageWithLayout = () => { const confirmPassword = resetFormData?.confirm_password ?? ""; const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- +
{
- Plane Logo - Plane + + Plane logo +
diff --git a/web/pages/accounts/set-password.tsx b/web/pages/accounts/set-password.tsx index d303cb8caa..93a9148c09 100644 --- a/web/pages/accounts/set-password.tsx +++ b/web/pages/accounts/set-password.tsx @@ -1,6 +1,7 @@ import { FormEvent, ReactElement, useEffect, useMemo, useState } from "react"; import { observer } from "mobx-react-lite"; import Image from "next/image"; +import Link from "next/link"; import { useRouter } from "next/router"; // icons import { useTheme } from "next-themes"; @@ -26,7 +27,8 @@ import { AuthService } from "@/services/auth.service"; // images 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; type TResetPasswordFormValues = { email: string; @@ -103,9 +105,11 @@ const SetPasswordPage: NextPageWithLayout = observer(() => { const confirmPassword = passwordFormData?.confirm_password ?? ""; const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- +
{
- Plane Logo - Plane + + Plane logo +
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx index 08fcea9582..d20b93a7dc 100644 --- a/web/pages/create-workspace.tsx +++ b/web/pages/create-workspace.tsx @@ -39,6 +39,8 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => { await updateUserProfile({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`)); }; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return ( <> @@ -50,11 +52,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => { href="/" >
- {resolvedTheme === "light" ? ( - Plane black logo - ) : ( - Plane white logo - )} + Plane logo
diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 3336185c7b..9cc1f9d95f 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -22,16 +22,19 @@ import { AuthenticationWrapper } from "@/lib/wrappers"; // 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"; +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; const HomePage: NextPageWithLayout = observer(() => { const { resolvedTheme } = useTheme(); // hooks const { captureEvent } = useEventTracker(); + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- +
{
- Plane Logo - Plane + + Plane logo +
New to Plane?{" "} diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx index 0fe64519dc..1f0debaaf6 100644 --- a/web/pages/invitations/index.tsx +++ b/web/pages/invitations/index.tsx @@ -127,6 +127,8 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => { }); }; + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return ( <> @@ -135,11 +137,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
- {resolvedTheme === "light" ? ( - Plane black logo - ) : ( - Plane white logo - )} + Plane logo
diff --git a/web/pages/sign-up.tsx b/web/pages/sign-up.tsx index a3013e9206..470f927b49 100644 --- a/web/pages/sign-up.tsx +++ b/web/pages/sign-up.tsx @@ -21,7 +21,9 @@ import { AuthenticationWrapper } from "@/lib/wrappers"; // 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"; + +import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; +import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; export type AuthType = "sign-in" | "sign-up"; @@ -31,9 +33,11 @@ const SignInPage: NextPageWithLayout = observer(() => { // hooks const { resolvedTheme } = useTheme(); + const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo; + return (
- +
{
- Plane Logo - Plane + + Plane logo +
Already have an account?{" "}