[WEB-5404] chore: update next images with html default images

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

@@ -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}

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

@@ -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}

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

@@ -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))}

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

@@ -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))}

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

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import { KeyRound, Mails } from "lucide-react";
 // plane packages
@@ -135,15 +134,15 @@ 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} />,
   },
   {
     key: "github",
     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} />,
   },
 ];

apps/admin/ce/components/authentication/authentication-modes.tsx

@@ -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,15 +57,15 @@ 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} />,
   },
   {
     key: "github",
     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,29 +78,29 @@ 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,
   },
   {
     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,
   },

apps/admin/core/components/common/empty-state.tsx

@@ -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">

apps/admin/core/components/common/logo-spinner.tsx

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

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

@@ -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.

apps/admin/core/components/instance/instance-not-ready.tsx

@@ -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>

apps/admin/core/components/instance/loading.tsx

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

apps/admin/core/components/new-user-popup.tsx

@@ -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}

apps/admin/vite.config.ts

@@ -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"),
     },

apps/space/app/not-found.tsx

@@ -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>

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

@@ -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}` : ``}`);
       },

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

@@ -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>

apps/space/core/components/common/logo-spinner.tsx

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

apps/space/core/components/instance/instance-failure-view.tsx

@@ -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 />