binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5404] chore: update next images with html default images (#8101)

Browse source 
* chore: update next images with html default images

* chore: sync related changes

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

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update apps/space/app/not-found.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update apps/space/core/components/issues/issue-layouts/error.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update apps/space/core/components/ui/not-found.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore: replace classname styles in space

* fix: copoilot suggestions

* fix: copilot suggestions

* chore: format files

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
sriram veeraghanta 2025-11-13 18:33:18 +05:30 • committed by GitHub
parent 80670b2b3f
commit 4e357c4ad0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
79 changed files with 126 additions and 231 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import useSWR from "swr";
// plane internal packages
import { setPromiseToast } from "@plane/propel/toast";
@ -65,7 +64,7 @@ const InstanceGiteaAuthenticationPage = observer(() => {
<AuthenticationMethodCard
name="Gitea"
description="Allow members to login or sign up to plane with their Gitea accounts."
icon={<Image src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
config={
<ToggleSwitch
value={isGiteaEnabled}

3
apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import { useTheme } from "next-themes";
import useSWR from "swr";
// plane internal packages
@ -73,7 +72,7 @@ const InstanceGithubAuthenticationPage = observer<React.FC<Route.ComponentProps>
name="GitHub"
description="Allow members to login or sign up to plane with their GitHub accounts."
icon={
<Image
<img
src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
height={24}
width={24}

3
apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import useSWR from "swr";
import { setPromiseToast } from "@plane/propel/toast";
import { Loader, ToggleSwitch } from "@plane/ui";
@ -63,7 +62,7 @@ const InstanceGitlabAuthenticationPage = observer<React.FC<Route.ComponentProps>
<AuthenticationMethodCard
name="GitLab"
description="Allow members to login or sign up to plane with their GitLab accounts."
icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
icon={<img src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
config={
<ToggleSwitch
value={Boolean(parseInt(enableGitlabConfig))}

3
apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import useSWR from "swr";
import { setPromiseToast } from "@plane/propel/toast";
import { Loader, ToggleSwitch } from "@plane/ui";
@ -64,7 +63,7 @@ const InstanceGoogleAuthenticationPage = observer<React.FC<Route.ComponentProps>
name="Google"
description="Allow members to login or sign up to plane with their Google
accounts."
icon={<Image src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
icon={<img src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
config={
<ToggleSwitch
value={Boolean(parseInt(enableGoogleConfig))}

7
apps/admin/app/(all)/(home)/auth-helpers.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
import Link from "next/link";
import { KeyRound, Mails } from "lucide-react";
// plane packages
@ -135,7 +134,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
key: "google",
name: "Google",
description: "Allow members to log in or sign up for Plane with their Google accounts.",
icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
icon: <img src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
},
{
@ -143,7 +142,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
name: "GitHub",
description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
icon: (
<Image
<img
src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
height={20}
width={20}
@ -156,7 +155,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
key: "gitlab",
name: "GitLab",
description: "Allow members to log in or sign up to plane with their GitLab accounts.",
icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
icon: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
},
];

5
apps/admin/app/types/next-image.d.ts vendored
View file

@ -1,5 +0,0 @@
declare module "next/image" {
type Props = React.ComponentProps<"img"> & { src: string };
const Image: React.FC<Props>;
export default Image;
}

13
apps/admin/ce/components/authentication/authentication-modes.tsx
View file

@ -1,5 +1,4 @@
import { observer } from "mobx-react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { KeyRound, Mails } from "lucide-react";
// types
@ -58,7 +57,7 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
key: "google",
name: "Google",
description: "Allow members to log in or sign up for Plane with their Google accounts.",
icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
icon: <img src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
},
{
@ -66,7 +65,7 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
name: "GitHub",
description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
icon: (
<Image
<img
src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
height={20}
width={20}
@ -79,21 +78,21 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
key: "gitlab",
name: "GitLab",
description: "Allow members to log in or sign up to plane with their GitLab accounts.",
icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
icon: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
},
{
key: "gitea",
name: "Gitea",
description: "Allow members to log in or sign up to plane with their Gitea accounts.",
icon: <Image src={giteaLogo} height={20} width={20} alt="Gitea Logo" />,
icon: <img src={giteaLogo} height={20} width={20} alt="Gitea Logo" />,
config: <GiteaConfiguration disabled={disabled} updateConfig={updateConfig} />,
},
{
key: "oidc",
name: "OIDC",
description: "Authenticate your users via the OpenID Connect protocol.",
icon: <Image src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
icon: <img src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
config: <UpgradeButton />,
unavailable: true,
},
@ -101,7 +100,7 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
key: "saml",
name: "SAML",
description: "Authenticate your users via the Security Assertion Markup Language protocol.",
icon: <Image src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
icon: <img src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
config: <UpgradeButton />,
unavailable: true,
},

3
apps/admin/core/components/common/empty-state.tsx
View file

@ -1,7 +1,6 @@
"use client";
import React from "react";
import Image from "next/image";
import { Button } from "@plane/propel/button";
type Props = {
@ -27,7 +26,7 @@ export const EmptyState: React.FC<Props> = ({
}) => (
<div className={`flex h-full w-full items-center justify-center`}>
<div className="flex w-full flex-col items-center text-center">
{image && <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
{image && <img src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
<h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
{description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
<div className="flex items-center gap-4">

3
apps/admin/core/components/common/logo-spinner.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
import { useTheme } from "next-themes";
import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
@ -10,7 +9,7 @@ export const LogoSpinner = () => {
return (
<div className="flex items-center justify-center">
<Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
<img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
</div>
);
};

3
apps/admin/core/components/instance/failure.tsx
View file

@ -1,6 +1,5 @@
"use client";
import { observer } from "mobx-react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Button } from "@plane/propel/button";
// assets
@ -23,7 +22,7 @@ export const InstanceFailureView: React.FC = observer(() => {
<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" />
<img src={instanceImage} alt="Instance failure illustration" />
<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.

3
apps/admin/core/components/instance/instance-not-ready.tsx
View file

@ -1,6 +1,5 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { Button } from "@plane/propel/button";
// assets
@ -11,7 +10,7 @@ export const InstanceNotReady: React.FC = () => (
<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" />
<img src={PlaneTakeOffImage} alt="Plane Logo" />
<p className="font-medium text-base text-custom-text-400">
Get started by setting up your instance and workspace
</p>

3
apps/admin/core/components/instance/loading.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
import { useTheme } from "next-themes";
// assets
import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
@ -11,7 +10,7 @@ export const InstanceLoading = () => {
return (
<div className="flex items-center justify-center">
<Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
<img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
</div>
);
};

3
apps/admin/core/components/new-user-popup.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useTheme as useNextTheme } from "next-themes";
// ui
@ -39,7 +38,7 @@ export const NewUserPopup = observer(() => {
</div>
</div>
<div className="shrink-0 flex items-center justify-center">
<Image
<img
src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
height={80}
width={80}

1
apps/admin/vite.config.ts
View file

@ -29,7 +29,6 @@ export default defineConfig(() => ({
resolve: {
alias: {
// Next.js compatibility shims used within admin
"next/image": path.resolve(__dirname, "app/compat/next/image.tsx"),
"next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
"next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
},

3
apps/space/app/not-found.tsx
View file

@ -1,6 +1,5 @@
"use client";
import Image from "next/image";
// assets
import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
@ -9,7 +8,7 @@ const NotFound = () => (
<div className="text-center">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
<div className="size-16 md:size-32 grid place-items-center">
<Image src={SomethingWentWrongImage} alt="User already logged in" />
<img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
</div>
</div>
<h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>

10
apps/space/app/types/next-image.d.ts vendored
View file

@ -1,10 +0,0 @@
declare module "next/image" {
import type { FC, ImgHTMLAttributes } from "react";
type NextImageProps = ImgHTMLAttributes<HTMLImageElement> & {
src: string;
};
const Image: FC<NextImageProps>;
export default Image;
}

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

@ -2,7 +2,6 @@
import { 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
@ -162,7 +161,7 @@ export const AuthRoot: React.FC = observer(() => {
{
id: "google",
text: `${content} with Google`,
icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
icon: <img src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
},
@ -172,7 +171,7 @@ export const AuthRoot: React.FC = observer(() => {
id: "github",
text: `${content} with GitHub`,
icon: (
<Image
<img
src={resolvedTheme === "dark" ? GithubLightLogo : GithubDarkLogo}
height={18}
width={18}
@ -187,7 +186,7 @@ export const AuthRoot: React.FC = observer(() => {
{
id: "gitlab",
text: `${content} with GitLab`,
icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
icon: <img src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
},
@ -196,7 +195,7 @@ export const AuthRoot: React.FC = observer(() => {
{
id: "gitea",
text: `${content} with Gitea`,
icon: <Image src={GiteaLogo} height={18} width={18} alt="Gitea Logo" />,
icon: <img src={GiteaLogo} height={18} width={18} alt="Gitea Logo" />,
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/gitea/${next_path ? `?next_path=${next_path}` : ``}`);
},

3
apps/space/core/components/account/user-logged-in.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { observer } from "mobx-react";
import Image from "next/image";
import { PlaneLockup } from "@plane/propel/icons";
// assets
import UserLoggedInImage from "@/app/assets/user-logged-in.svg?url";
@ -28,7 +27,7 @@ export const UserLoggedIn = observer(() => {
<div className="text-center">
<div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
<div className="size-16 md:size-32 grid place-items-center">
<Image src={UserLoggedInImage} alt="User already logged in" />
<img src={UserLoggedInImage} alt="User already logged in" className="w-full h-full object-cover" />
</div>
</div>
<h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">Nice! Just one more step.</h1>

4
apps/space/core/components/common/logo-spinner.tsx
View file

@ -1,5 +1,5 @@
"use client";
import Image from "next/image";
import { useTheme } from "next-themes";
// assets
import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
@ -12,7 +12,7 @@ export const LogoSpinner = () => {
return (
<div className="flex items-center justify-center">
<Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
<img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
</div>
);
};

3
apps/space/core/components/instance/instance-failure-view.tsx
View file

@ -1,6 +1,5 @@
"use client";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Button } from "@plane/propel/button";
// assets
@ -20,7 +19,7 @@ export const InstanceFailureView: React.FC = () => {
<div className="relative h-screen overflow-x-hidden overflow-y-auto 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 instance failure image" />
<img src={instanceImage} alt="Plane instance failure image" />
<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 />

7
apps/space/core/components/issues/issue-layouts/error.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
// assets
import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
@ -7,7 +6,11 @@ export const SomethingWentWrongError = () => (
<div className="text-center">
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
<div className="grid h-32 w-32 place-items-center">
<Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
<img
src={SomethingWentWrongImage}
alt="Oops! Something went wrong"
className="w-full h-full object-contain"
/>
</div>
</div>
<h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>

3
apps/space/core/components/ui/not-found.tsx
View file

@ -1,6 +1,5 @@
"use client";
import Image from "next/image";
// images
import Image404 from "@/app/assets/404.svg?url";
@ -9,7 +8,7 @@ export const PageNotFound = () => (
<div className="grid h-full place-items-center p-4">
<div className="space-y-8 text-center">
<div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
<Image src={Image404} alt="404- Page not found" />
<img src={Image404} alt="404- Page not found" className="w-full h-full object-contain" />
</div>
<div className="space-y-2">
<h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>

11
apps/space/core/lib/instance-provider.tsx
View file

@ -1,17 +1,15 @@
"use client";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import useSWR from "swr";
// plane imports
import { SPACE_BASE_PATH } from "@plane/constants";
import { PlaneLockup } from "@plane/propel/icons";
// assets
import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
import BlackHorizontalLogo from "@/app/assets/plane-logos/black-horizontal-with-blue-logo.png?url";
import WhiteHorizontalLogo from "@/app/assets/plane-logos/white-horizontal-with-blue-logo.png?url";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { InstanceFailureView } from "@/components/instance/instance-failure-view";
@ -44,20 +42,19 @@ export const InstanceProvider = observer(({ children }: { children: React.ReactN
</div>
);
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
if (error) {
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={`${SPACE_BASE_PATH}/`} className="h-[30px] w-[133px]">
<Image src={logo} alt="Plane logo" />
<Link href={`${SPACE_BASE_PATH}/`}>
<PlaneLockup className="h-7 w-auto text-custom-text-100" />
</Link>
</div>
</div>
<div className="absolute inset-0 z-0">
<Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
<img src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
</div>
<div className="relative z-10 flex-grow">
<div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">

1
apps/space/vite.config.ts
View file

@ -29,7 +29,6 @@ export default defineConfig(() => ({
resolve: {
alias: {
// Next.js compatibility shims used within space
"next/image": path.resolve(__dirname, "app/compat/next/image.tsx"),
"next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
"next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
},

3
apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
View file

@ -1,6 +1,5 @@
"use client";
import Image from "next/image";
import { useTheme } from "next-themes";
// plane imports
import { HEADER_GITHUB_ICON, GITHUB_REDIRECTED_TRACKER_EVENT } from "@plane/constants";
@ -37,7 +36,7 @@ export const StarUsOnGitHubLink = () => {
target="_blank"
rel="noopener noreferrer"
>
<Image src={imageSrc} height={16} width={16} alt="GitHub Logo" aria-hidden="true" />
<img src={imageSrc} className="h-4 w-4 object-contain" alt="GitHub Logo" aria-hidden="true" />
<span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
</a>
);

3
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
View file

@ -1,5 +1,4 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
@ -18,7 +17,7 @@ const ProjectSettingsPage = () => {
: "/empty-state/project-settings/no-projects-light.png";
return (
<div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
<Image src={resolvedPath} alt="No projects yet" width={384} height={250} />
<img src={resolvedPath} className="w-full h-full object-contain" alt="No projects yet" />
<div className="text-lg font-semibold text-custom-text-350">No projects yet</div>
<div className="text-sm text-custom-text-350 text-center">
Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you

7
apps/web/app/(all)/create-workspace/page.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
// plane imports
import { useTranslation } from "@plane/i18n";
@ -71,7 +70,11 @@ function CreateWorkspacePage() {
<div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
{isWorkspaceCreationDisabled ? (
<div className="w-4/5 h-full flex flex-col items-center justify-center text-lg font-medium gap-1">
<Image src={WorkspaceCreationDisabled} width={200} alt="Workspace creation disabled" className="mb-4" />
<img
src={WorkspaceCreationDisabled}
className="w-full h-full object-contain mb-4"
alt="Workspace creation disabled"
/>
<div className="text-lg font-medium text-center">
{t("workspace_creation.errors.creation_disabled.title")}
</div>

3
apps/web/app/not-found.tsx
View file

@ -1,6 +1,5 @@
"use client";
import Image from "next/image";
import Link from "next/link";
// ui
import { Button } from "@plane/propel/button";
@ -19,7 +18,7 @@ const PageNotFound = () => (
<div className="grid h-full place-items-center p-4">
<div className="space-y-8 text-center">
<div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
<Image src={Image404} fill alt="404- Page not found" />
<img src={Image404} className="h-full w-full object-contain" alt="404- Page not found" />
</div>
<div className="space-y-2">
<h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>

12
apps/web/app/types/next-image.d.ts vendored
View file

@ -1,12 +0,0 @@
declare module "next/image" {
type Props = React.ComponentProps<"img"> & {
src: string;
fill?: boolean;
priority?: boolean;
quality?: number;
placeholder?: "blur" | "empty";
blurDataURL?: string;
};
const Image: React.FC<Props>;
export default Image;
}

12
apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
View file

@ -1,8 +1,6 @@
"use client";
import React from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope, Search } from "lucide-react";
// plane imports
import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
@ -99,21 +97,19 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
</a>
</div>
<span className="absolute left-0 top-0">
<Image
<img
src={isDarkMode ? ctaL1Dark : ctaL1Light}
height={125}
width={125}
className="rounded-xl"
className="w-[125px] h-[125px] object-contain rounded-xl"
alt="l-1"
/>
</span>
</div>
<div className="relative hidden w-1/2 lg:block">
<span className="absolute bottom-0 right-0">
<Image src={isDarkMode ? ctaR1Dark : ctaR1Light} height={420} width={500} alt="r-1" />
<img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="r-1" />
</span>
<span className="absolute -bottom-16 right-1/2 rounded-xl">
<Image src={isDarkMode ? ctaR2Dark : ctaR2Light} height={210} width={280} alt="r-2" />
<img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="r-2" />
</span>
</div>
</div>

7
apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
import { useTheme } from "next-themes";
// plane imports
import { useTranslation } from "@plane/i18n";
@ -17,7 +16,11 @@ export const PageNavigationPaneAssetsTabEmptyState = () => {
return (
<div className="size-full grid place-items-center">
<div className="flex flex-col items-center gap-y-6 text-center">
<Image src={resolvedPath} width={160} height={160} alt="An image depicting the assets of a page" />
<img
src={resolvedPath}
className="w-[160px] h-[160px] object-contain"
alt="An image depicting the assets of a page"
/>
<div className="space-y-2.5">
<h4 className="text-base font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
<p className="text-sm text-custom-text-200 font-medium">

7
apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
import { useTheme } from "next-themes";
// plane imports
import { useTranslation } from "@plane/i18n";
@ -17,7 +16,11 @@ export const PageNavigationPaneOutlineTabEmptyState = () => {
return (
<div className="size-full grid place-items-center">
<div className="flex flex-col items-center gap-y-6 text-center">
<Image src={resolvedPath} width={160} height={160} alt="An image depicting the outline of a page" />
<img
src={resolvedPath}
className="w-[160px] h-[160px] object-contain"
alt="An image depicting the outline of a page"
/>
<div className="space-y-2.5">
<h4 className="text-base font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
<p className="text-sm text-custom-text-200 font-medium">

10
apps/web/core/components/account/auth-forms/auth-root.tsx
View file

@ -1,7 +1,6 @@
import type { FC } from "react";
import React, { 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
@ -112,7 +111,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
{
id: "google",
text: `${OauthButtonContent} with Google`,
icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
icon: <img src={GoogleLogo} className="h-4 w-4 object-contain" alt="Google Logo" />,
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
},
@ -122,10 +121,9 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
id: "github",
text: `${OauthButtonContent} with GitHub`,
icon: (
<Image
<img
src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
height={18}
width={18}
className="h-4 w-4 object-contain"
alt="GitHub Logo"
/>
),
@ -137,7 +135,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
{
id: "gitlab",
text: `${OauthButtonContent} with GitLab`,
icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
icon: <img src={GitlabLogo} className="h-4 w-4 object-contain" alt="GitLab Logo" />,
onClick: () => {
window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
},

13
apps/web/core/components/analytics/empty-state.tsx
View file

@ -1,5 +1,3 @@
import React from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
// plane package imports
import { cn } from "@plane/utils";
@ -29,16 +27,9 @@ const AnalyticsEmptyState = ({ title, description, assetPath, className }: Props
<div className={cn("flex flex-col items-center")}>
{assetPath && (
<div className="relative flex max-h-[200px] max-w-[200px] items-center justify-center">
<Image src={assetPath} alt={title} width={100} height={100} layout="fixed" className="z-10 h-2/3 w-2/3" />
<img src={assetPath} alt={title} className="z-10 h-2/3 w-2/3 object-contain" />
<div className="absolute inset-0">
<Image
src={backgroundReolvedPath}
alt={title}
width={100}
height={100}
layout="fixed"
className="h-full w-full"
/>
<img src={backgroundReolvedPath} alt={title} className="h-full w-full object-contain" />
</div>
</div>
)}

3
apps/web/core/components/api-token/empty-state.tsx
View file

@ -1,7 +1,6 @@
"use client";
import React from "react";
import Image from "next/image";
// ui
import { Button } from "@plane/propel/button";
// assets
@ -19,7 +18,7 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
>
<div className="flex w-full flex-col items-center text-center">
<Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
<img src={emptyApiTokens} className="w-52 sm:w-60 object-contain" alt="empty" />
<h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No API tokens</h6>
<p className="mb-7 text-custom-text-300 sm:mb-8">
Create API tokens for safe and easy data sharing with external apps, maintaining control and security.

3
apps/web/core/components/auth-screens/not-authorized-view.tsx
View file

@ -1,6 +1,5 @@
import React from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// assets
import ProjectNotAuthorizedImg from "@/app/assets/auth/project-not-authorized.svg?url";
import Unauthorized from "@/app/assets/auth/unauthorized.svg?url";
@ -26,7 +25,7 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
<DefaultLayout className={className}>
<div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
<div className="h-44 w-72">
<Image src={asset} height="176" width="288" alt="ProjectSettingImg" />
<img src={asset} className="h-[176px] w-[288px] object-contain" alt="ProjectSettingImg" />
</div>
<h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
{actionButton}

3
apps/web/core/components/auth-screens/project/join-project.tsx
View file

@ -1,6 +1,5 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { useParams } from "next/navigation";
import { ClipboardList } from "lucide-react";
// plane imports
@ -39,7 +38,7 @@ export const JoinProject: React.FC<Props> = (props) => {
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
<div className="h-44 w-72">
<Image src={Unauthorized} height="176" width="288" alt="JoinProject" />
<img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="JoinProject" />
</div>
<h1 className="text-xl font-medium text-custom-text-100">
{!isPrivateProject ? `You are not a member of this project yet.` : `You are not a member of this project.`}

4
apps/web/core/components/common/empty-state.tsx
View file

@ -1,8 +1,6 @@
"use client";
import React from "react";
import Image from "next/image";
// ui
import { Button } from "@plane/propel/button";
@ -29,7 +27,7 @@ export const EmptyState: React.FC<Props> = ({
}) => (
<div className={`flex h-full w-full items-center justify-center`}>
<div className="flex w-full flex-col items-center text-center">
<Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
<img src={image} className="w-52 sm:w-60 object-contain" alt={primaryButton?.text || "button image"} />
<h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
{description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
<div className="flex items-center gap-4">

3
apps/web/core/components/common/latest-feature-block.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
// icons
@ -26,7 +25,7 @@ export const LatestFeatureBlock = () => {
}`}
>
<div className="h-[90%]">
<Image
<img
src={latestFeatures}
alt="Plane Work items"
className={`-mt-2 ml-10 h-full rounded-md ${

3
apps/web/core/components/common/logo-spinner.tsx
View file

@ -1,4 +1,3 @@
import Image from "next/image";
import { useTheme } from "next-themes";
// assets
import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
@ -11,7 +10,7 @@ export const LogoSpinner = () => {
return (
<div className="flex items-center justify-center">
<Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
<img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" />
</div>
);
};

4
apps/web/core/components/common/new-empty-state.tsx
View file

@ -1,8 +1,6 @@
"use client";
import React, { useState } from "react";
import Image from "next/image";
// ui
import { Button } from "@plane/propel/button";
@ -48,7 +46,7 @@ export const NewEmptyState: React.FC<Props> = ({
<h3 className="text-2xl font-semibold">{title}</h3>
{description && <p className=" text-lg">{description}</p>}
<div className="relative w-full max-w-6xl">
<Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
<img src={image} className="w-full h-full object-contain" alt={primaryButton?.text || "button image"} />
</div>
<div className="relative flex items-start justify-center">

7
apps/web/core/components/core/image-picker-popover.tsx
View file

@ -2,7 +2,6 @@
import React, { useState, useRef, useCallback } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import { useParams } from "next/navigation";
import { useDropzone } from "react-dropzone";
import type { Control } from "react-hook-form";
@ -329,12 +328,10 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
</button>
{image !== null || (value && value !== "") ? (
<>
<Image
layout="fill"
objectFit="cover"
<img
src={image ? URL.createObjectURL(image) : value ? (getFileURL(value) ?? "") : ""}
alt="image"
className="rounded-lg"
className="rounded-lg h-full w-full object-cover"
/>
</>
) : (

5
apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
View file

@ -1,5 +1,4 @@
import { observer } from "mobx-react";
import Image from "next/image";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Avatar } from "@plane/ui";
@ -57,7 +56,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
title={
<div className="flex items-center gap-2">
<div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
<img src={userImage} height="100%" width="100%" className="rounded-full" alt="User" />
<img src={userImage} className="rounded-full w-full h-full object-cover" alt="User" />
</div>
<span>{t("no_assignee")}</span>
</div>
@ -70,7 +69,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
) : (
<div className="flex h-full flex-col items-center justify-center gap-2">
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
<Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
<img src={emptyMembers} className="h-12 w-12 object-contain" alt="empty members" />
</div>
<h6 className="text-base text-custom-text-300">{t("no_assignee")}</h6>
</div>

3
apps/web/core/components/core/sidebar/progress-stats/label.tsx
View file

@ -1,5 +1,4 @@
import { observer } from "mobx-react";
import Image from "next/image";
// plane imports
import { useTranslation } from "@plane/i18n";
// assets
@ -76,7 +75,7 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
) : (
<div className="flex h-full flex-col items-center justify-center gap-2">
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
<Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
<img src={emptyLabel} className="h-12 w-12 object-contain" alt="empty label" />
</div>
<h6 className="text-base text-custom-text-300">{t("no_labels_yet")}</h6>
</div>

3
apps/web/core/components/cycles/archived-cycles/view.tsx
View file

@ -1,6 +1,5 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// assets
import AllFiltersImage from "@/app/assets/empty-state/cycle/all-filters.svg?url";
import NameFilterImage from "@/app/assets/empty-state/cycle/name-filter.svg?url";
@ -31,7 +30,7 @@ export const ArchivedCyclesView: FC<IArchivedCyclesView> = observer((props) => {
return (
<div className="h-full w-full grid place-items-center">
<div className="text-center">
<Image
<img
src={archivedCyclesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
alt="No matching cycles"

5
apps/web/core/components/cycles/cycles-view.tsx
View file

@ -1,6 +1,5 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// components
import { useTranslation } from "@plane/i18n";
// assets
@ -37,9 +36,9 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
return (
<div className="grid h-full w-full place-items-center">
<div className="text-center">
<Image
<img
src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
className="mx-auto h-36 w-36 sm:h-48 sm:w-48 object-contain"
alt="No matching cycles"
/>
<h5 className="mb-1 mt-7 text-xl font-medium">{t("project_cycles.no_matching_cycles")}</h5>

11
apps/web/core/components/empty-state/simple-empty-state-root.tsx
View file

@ -1,8 +1,6 @@
"use client";
import React from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// utils
import { cn } from "@plane/utils";
@ -39,14 +37,7 @@ export const SimpleEmptyState = observer((props: Props) => {
<div className="text-center flex flex-col gap-2.5 items-center">
{assetPath && (
<div className={sizeConfig[size].container}>
<Image
src={assetPath}
alt={title}
height={sizeConfig[size].dimensions}
width={sizeConfig[size].dimensions}
layout="responsive"
lazyBoundary="100%"
/>
<img src={assetPath} alt={title} className="h-full w-full object-contain" />
</div>
)}

3
apps/web/core/components/icons/attachment/audio-file-icon.tsx
View file

@ -1,5 +1,4 @@
import React from "react";
import Image from "next/image";
// image
import AudioFileIcon from "@/app/assets/attachment/audio-icon.png?url";
@ -9,5 +8,5 @@ export type AudioIconProps = {
};
export const AudioIcon: React.FC<AudioIconProps> = ({ width, height }) => (
<Image src={AudioFileIcon} height={height} width={width} alt="AudioFileIcon" />
<img src={AudioFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="AudioFileIcon" />
);

3
apps/web/core/components/icons/attachment/css-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import CssFileIcon from "@/app/assets/attachment/css-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const CssIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={CssFileIcon} height={height} width={width} alt="CssFileIcon" />
<img src={CssFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CssFileIcon" />
);

3
apps/web/core/components/icons/attachment/csv-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import CSVFileIcon from "@/app/assets/attachment/csv-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const CsvIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={CSVFileIcon} height={height} width={width} alt="CSVFileIcon" />
<img src={CSVFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CSVFileIcon" />
);

9
apps/web/core/components/icons/attachment/default-file-icon.tsx
View file

@ -1,10 +1,15 @@
import React from "react";
import Image from "next/image";
// image
import DefaultFileIcon from "@/app/assets/attachment/default-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const DefaultIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={DefaultFileIcon} height={height} width={width} alt="DefaultFileIcon" />
<img
src={DefaultFileIcon}
width={width}
height={height}
className="h-full w-full object-contain"
alt="DefaultFileIcon"
/>
);

3
apps/web/core/components/icons/attachment/doc-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import DocFileIcon from "@/app/assets/attachment/doc-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const DocIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={DocFileIcon} height={height} width={width} alt="DocFileIcon" />
<img src={DocFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="DocFileIcon" />
);

3
apps/web/core/components/icons/attachment/figma-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import FigmaFileIcon from "@/app/assets/attachment/figma-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const FigmaIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={FigmaFileIcon} height={height} width={width} alt="FigmaFileIcon" />
<img src={FigmaFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="FigmaFileIcon" />
);

3
apps/web/core/components/icons/attachment/html-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import HtmlFileIcon from "@/app/assets/attachment/html-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const HtmlIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={HtmlFileIcon} height={height} width={width} alt="HtmlFileIcon" />
<img src={HtmlFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="HtmlFileIcon" />
);

3
apps/web/core/components/icons/attachment/img-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import ImgFileIcon from "@/app/assets/attachment/img-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const ImgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={ImgFileIcon} height={height} width={width} alt="ImgFileIcon" />
<img src={ImgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ImgFileIcon" />
);

3
apps/web/core/components/icons/attachment/jpg-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import JpgFileIcon from "@/app/assets/attachment/jpg-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const JpgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={JpgFileIcon} height={height} width={width} alt="JpgFileIcon" />
<img src={JpgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JpgFileIcon" />
);

3
apps/web/core/components/icons/attachment/js-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import JsFileIcon from "@/app/assets/attachment/js-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={JsFileIcon} height={height} width={width} alt="JsFileIcon" />
<img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" />
);

3
apps/web/core/components/icons/attachment/pdf-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import PDFFileIcon from "@/app/assets/attachment/pdf-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const PdfIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={PDFFileIcon} height={height} width={width} alt="PDFFileIcon" />
<img src={PDFFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PDFFileIcon" />
);

3
apps/web/core/components/icons/attachment/png-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import PngFileIcon from "@/app/assets/attachment/png-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const PngIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={PngFileIcon} height={height} width={width} alt="PngFileIcon" />
<img src={PngFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PngFileIcon" />
);

3
apps/web/core/components/icons/attachment/rar-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import RarFileIcon from "@/app/assets/attachment/rar-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const RarIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={RarFileIcon} height={height} width={width} alt="RarFileIcon" />
<img src={RarFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="RarFileIcon" />
);

3
apps/web/core/components/icons/attachment/sheet-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import SheetFileIcon from "@/app/assets/attachment/excel-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const SheetIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={SheetFileIcon} height={height} width={width} alt="SheetFileIcon" />
<img src={SheetFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SheetFileIcon" />
);

3
apps/web/core/components/icons/attachment/svg-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import SvgFileIcon from "@/app/assets/attachment/svg-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const SvgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={SvgFileIcon} height={height} width={width} alt="SvgFileIcon" />
<img src={SvgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SvgFileIcon" />
);

3
apps/web/core/components/icons/attachment/txt-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import TxtFileIcon from "@/app/assets/attachment/txt-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const TxtIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={TxtFileIcon} height={height} width={width} alt="TxtFileIcon" />
<img src={TxtFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="TxtFileIcon" />
);

3
apps/web/core/components/icons/attachment/video-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import VideoFileIcon from "@/app/assets/attachment/video-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const VideoIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={VideoFileIcon} height={height} width={width} alt="VideoFileIcon" />
<img src={VideoFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="VideoFileIcon" />
);

3
apps/web/core/components/icons/attachment/zip-file-icon.tsx
View file

@ -1,10 +1,9 @@
import React from "react";
import Image from "next/image";
// image
import ZipFileIcon from "@/app/assets/attachment/zip-icon.png?url";
// type
import type { ImageIconPros } from "../types";
export const ZipIcon: React.FC<ImageIconPros> = ({ width, height }) => (
<Image src={ZipFileIcon} height={height} width={width} alt="ZipFileIcon" />
<img src={ZipFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ZipFileIcon" />
);

3
apps/web/core/components/instance/maintenance-view.tsx
View file

@ -1,7 +1,6 @@
"use client";
import type { FC } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
// assets
import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
@ -20,7 +19,7 @@ export const MaintenanceView: FC = () => {
<DefaultLayout>
<div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center">
<div className="relative w-full">
<Image
<img
src={maintenanceModeImage}
height="176"
width="288"

5
apps/web/core/components/instance/not-ready-view.tsx
View file

@ -1,7 +1,6 @@
"use client";
import type { FC } from "react";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import { GOD_MODE_URL } from "@plane/constants";
@ -28,7 +27,7 @@ export const InstanceNotReady: FC = () => {
</div>
<div className="absolute inset-0 z-0">
<Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
<img src={patternBackground} className="w-full h-full object-cover" alt="Plane background pattern" />
</div>
<div className="relative z-10 mb-[110px] flex-grow">
@ -36,7 +35,7 @@ export const InstanceNotReady: FC = () => {
<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" />
<img src={PlaneTakeOffImage} className="object-contain" alt="Plane Logo" />
<p className="font-medium text-base text-custom-text-400">
Get started by setting up your instance and workspace
</p>

3
apps/web/core/components/integration/github/root.tsx
View file

@ -1,7 +1,6 @@
"use client";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
@ -168,7 +167,7 @@ export const GithubImporterRoot: React.FC = () => {
<div className="space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
<div className="flex items-center gap-2">
<div className="h-10 w-10 flex-shrink-0">
<Image src={GithubLogo} alt="GitHubLogo" />
<img src={GithubLogo} className="w-full h-full object-cover" alt="GitHubLogo" />
</div>
<div className="flex h-full w-full items-center justify-center">
{integrationWorkflowData.map((integration, index) => (

6
apps/web/core/components/integration/guide.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import useSWR, { mutate } from "swr";
@ -103,10 +102,9 @@ const IntegrationGuide = observer(() => {
>
<div className="flex items-start gap-4">
<div className="relative h-10 w-10 flex-shrink-0">
<Image
<img
src={getImporterLogo(service?.provider)}
layout="fill"
objectFit="cover"
className="h-full w-full object-cover"
alt={`${t(service.i18n_title)} Logo`}
/>
</div>

3
apps/web/core/components/integration/jira/root.tsx
View file

@ -1,7 +1,6 @@
"use client";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useParams } from "next/navigation";
import { FormProvider, useForm } from "react-hook-form";
@ -105,7 +104,7 @@ export const JiraImporterRoot: React.FC = () => {
<div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
<div className="flex items-center gap-2">
<div className="h-10 w-10 flex-shrink-0">
<Image src={JiraLogo} alt="jira logo" />
<img src={JiraLogo} className="w-full h-full object-cover" alt="jira logo" />
</div>
<div className="flex h-full w-full items-center justify-center">
{integrationWorkflowData.map((integration, index) => (

7
apps/web/core/components/integration/single-integration-card.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import { useParams } from "next/navigation";
import useSWR, { mutate } from "swr";
import { CheckCircle } from "lucide-react";
@ -108,7 +107,11 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
<div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
<div className="flex items-start gap-4">
<div className="h-10 w-10 flex-shrink-0">
<Image src={integrationDetails[integration.provider].logo} alt={`${integration.title} Logo`} />
<img
src={integrationDetails[integration.provider].logo}
className="w-full h-full object-cover"
alt={`${integration.title} Logo`}
/>
</div>
<div>
<h3 className="flex items-center gap-2 text-sm font-medium">

3
apps/web/core/components/modules/archived-modules/view.tsx
View file

@ -1,6 +1,5 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// assets
import AllFiltersImage from "@/app/assets/empty-state/module/all-filters.svg?url";
import NameFilterImage from "@/app/assets/empty-state/module/name-filter.svg?url";
@ -31,7 +30,7 @@ export const ArchivedModulesView: FC<IArchivedModulesView> = observer((props) =>
return (
<div className="h-full w-full grid place-items-center">
<div className="text-center">
<Image
<img
src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
alt="No matching modules"

3
apps/web/core/components/onboarding/tour/root.tsx
View file

@ -2,7 +2,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// plane imports
import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
import { Button } from "@plane/propel/button";
@ -151,7 +150,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
}`}
>
<Image src={currentStep?.image} alt={currentStep?.title} />
<img src={currentStep?.image} className="w-full h-full object-cover" alt={currentStep?.title} />
</div>
<div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
<h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>

5
apps/web/core/components/project/empty-state.tsx
View file

@ -1,9 +1,6 @@
"use client";
import React from "react";
import Image from "next/image";
// ui
import { Button } from "@plane/propel/button";
@ -30,7 +27,7 @@ export const EmptyState: React.FC<Props> = ({
}) => (
<div className="flex h-full w-full items-center justify-center px-5 md:px-10 lg:p-20">
<div className="relative h-full w-full max-w-6xl">
<Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text ?? ""} layout="fill" />
<img src={image} className="w-52 sm:w-60 object-cover" alt={primaryButton?.text ?? ""} />
</div>
<div className="absolute flex w-full flex-col items-center pt-[30vh] text-center md:pt-[35vh] lg:pt-[45vh]">
<h6 className="mt-6 text-xl font-semibold">{title}</h6>

4
apps/web/core/components/project/integration-card.tsx
View file

@ -1,7 +1,6 @@
"use client";
import React from "react";
import Image from "next/image";
import { useParams } from "next/navigation";
import useSWR, { mutate } from "swr";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@ -87,8 +86,9 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
<div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
<div className="flex items-start gap-4">
<div className="h-10 w-10 flex-shrink-0">
<Image
<img
src={integrationDetails[integration.integration_detail.provider].logo}
className="w-full h-full object-cover"
alt={`${integration.integration_detail.title} Logo`}
/>
</div>

4
apps/web/core/components/ui/profile-empty-state.tsx
View file

@ -1,7 +1,5 @@
import React from "react";
import Image from "next/image";
type Props = {
title: string;
description?: React.ReactNode;
@ -12,7 +10,7 @@ export const ProfileEmptyState: React.FC<Props> = ({ title, description, image }
<div className={`mx-auto grid h-full w-full place-items-center p-8 `}>
<div className="flex w-full flex-col items-center text-center">
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-custom-background-90">
<Image src={image} width={32} alt={title} />
<img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} />
</div>
<h6 className="mb-3 mt-3.5 text-base font-semibold">{title}</h6>
{description && <p className="text-sm text-custom-text-300">{description}</p>}

3
apps/web/core/components/web-hooks/empty-state.tsx
View file

@ -1,7 +1,6 @@
"use client";
import React from "react";
import Image from "next/image";
// ui
import { Button } from "@plane/propel/button";
// assets
@ -18,7 +17,7 @@ export const WebhooksEmptyState: React.FC<Props> = (props) => {
className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
>
<div className="flex w-full flex-col items-center text-center">
<Image src={EmptyWebhook} className="w-52 sm:w-60" alt="empty" />
<img src={EmptyWebhook} className="w-52 sm:w-60 object-cover" alt="empty" />
<h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No webhooks</h6>
<p className="mb-7 text-custom-text-300 sm:mb-8">
Create webhooks to receive real-time updates and automate actions

3
apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
View file

@ -2,7 +2,6 @@
import type { FC, ReactNode } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useParams } from "next/navigation";
import useSWR from "swr";
@ -160,7 +159,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
</div>
<div className="relative flex h-full w-full flex-grow flex-col items-center justify-center space-y-3">
<div className="relative flex-shrink-0">
<Image src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
<img src={WorkSpaceNotAvailable} className="h-[220px] object-cover object-center" alt="Plane logo" />
</div>
<h3 className="text-center text-lg font-semibold">Workspace not found</h3>
<p className="text-center text-sm text-custom-text-200">

1
apps/web/vite.config.ts
View file

@ -25,7 +25,6 @@ export default defineConfig(() => ({
resolve: {
alias: {
// Next.js compatibility shims used within web
"next/image": path.resolve(__dirname, "app/compat/next/image.tsx"),
"next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
"next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
"next/script": path.resolve(__dirname, "app/compat/next/script.tsx"),