makeplane · codingwolf-at · Sep 2, 2026 · Sep 2, 2026 · Sep 2, 2026 · Sep 2, 2026
@@ -8,9 +8,10 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
 // ui
-import { Banner } from "@plane/propel/banner";
-import { Button } from "@plane/propel/button";
+import { Banner } from "@makeplane/propel/components/banner";
 import { ArchiveOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
 import { Loader } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core/page-title";
@@ -27,6 +28,7 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
   const router = useRouter();
   // states
   // hooks
+  const { t } = useTranslation();
   const {
     fetchIssue,
     issue: { getIssueById },
@@ -68,18 +70,18 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
       ) : (
         <>
           <Banner
+            placement="page"
             variant="warning"
-            title="This work item has been archived. Visit the Archives section to restore it."
-            icon={<ArchiveOutline className="size-4" />}
-            action={
+            title={t("issue.archive.banner_message")}
+            icon={<ArchiveOutline />}
+            actions={
               <Button
                 variant="secondary"
                 onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/`)}
               >
-                Go to archives
+                {t("issue.archive.go_to_archives")}
               </Button>
             }
-            className="border-b border-subtle"
           />
           <div className="flex h-full overflow-hidden">
             <div className="h-full w-full space-y-3 divide-y-2 divide-subtle-1 overflow-y-auto">

@@ -8,10 +8,10 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
 import { SingleIntegrationCard } from "@/components/integration/single-integration-card";
-import { IntegrationAndImportExportBanner } from "@/components/ui/integration-and-import-export-banner";
 import { IntegrationsSettingsLoader } from "@/components/ui/loader/settings/integration";
 // constants
 import { APP_INTEGRATIONS } from "@plane/constants";
@@ -24,6 +24,8 @@ import { IntegrationService } from "@/services/integrations";
 const integrationService = new IntegrationService();
 
 function WorkspaceIntegrationsPage() {
+  // translation
+  const { t } = useTranslation();
   // store hooks
   const { currentWorkspace } = useWorkspace();
   const { allowPermissions } = useUserPermissions();
@@ -41,7 +43,9 @@ function WorkspaceIntegrationsPage() {
     <>
       <PageHead title={pageTitle} />
       <section className="w-full overflow-y-auto">
-        <IntegrationAndImportExportBanner bannerName="Integrations" />
+        <div className="flex items-start gap-3 border-b border-subtle py-3.5">
+          <h3 className="text-18 font-medium">{t("integrations.integrations")}</h3>
+        </div>
         <div>
           {appIntegrations ? (
             appIntegrations.map((integration) => (

@@ -6,10 +6,10 @@
 
 // plane imports
 import { isRouteErrorResponse } from "react-router";
-import { Banner } from "@plane/propel/banner";
+import { Banner } from "@makeplane/propel/components/banner";
+import { InfoFilled } from "@makeplane/propel/icons";
 import { Button } from "@plane/propel/button";
 import { Card, ECardVariant } from "@plane/propel/card";
-import { InfoFilled } from "@makeplane/propel/icons";
 
 interface ErrorActionsProps {
   onGoHome: () => void;
@@ -42,12 +42,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
     return (
       <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
         <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
-          <Banner
-            variant="error"
-            icon={<InfoFilled className="size-5" />}
-            title="Route Error Response"
-            animationDuration={0}
-          />
+          <Banner placement="page" variant="danger" icon={<InfoFilled />} title="Route Error Response" />
 
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
@@ -77,12 +72,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
     return (
       <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
         <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
-          <Banner
-            variant="error"
-            icon={<InfoFilled className="size-5" />}
-            title="Runtime Error"
-            animationDuration={0}
-          />
+          <Banner placement="page" variant="danger" icon={<InfoFilled />} title="Runtime Error" />
           <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
             <div className="space-y-4">
               <div>
@@ -132,7 +122,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
   return (
     <div className="flex min-h-screen items-start justify-center bg-surface-2 p-6 transition-none">
       <div className="mt-12 w-full max-w-4xl space-y-4 transition-none">
-        <Banner variant="error" icon={<InfoFilled className="size-5" />} title="Unknown Error" animationDuration={0} />
+        <Banner placement="page" variant="danger" icon={<InfoFilled />} title="Unknown Error" />
 
         <Card variant={ECardVariant.WITH_SHADOW} className="!p-6">
           <div className="space-y-4">

@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 // plane imports
+import { Banner } from "@makeplane/propel/components/banner";
 import { OAuthOptions } from "@plane/ui";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
@@ -23,7 +24,6 @@ import { useOAuthConfig } from "@/hooks/oauth";
 import { useInstance } from "@/hooks/store/use-instance";
 // local imports
 import { TermsAndConditions } from "../terms-and-conditions";
-import { AuthBanner } from "./auth-banner";
 import { AuthHeader, AuthHeaderBase } from "./auth-header";
 import { AuthFormRoot } from "./form-root";
 
@@ -116,7 +116,13 @@ export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
   return (
     <AuthContainer>
       {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
-        <AuthBanner message={errorInfo.message} handleBannerData={(value) => setErrorInfo(value)} />
+        <Banner
+          placement="inline"
+          variant="accent"
+          role="alert"
+          description={errorInfo.message}
+          onDismiss={() => setErrorInfo(undefined)}
+        />
       )}
       <AuthHeader
         workspaceSlug={workspaceSlug?.toString() || undefined}

@@ -8,8 +8,9 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
-import { CloseCircleOutline, CloseOutline, HideOutline, InfoOutline, ShowOutline } from "@makeplane/propel/icons";
+import { CloseCircleOutline, HideOutline, ShowOutline } from "@makeplane/propel/icons";
 // plane imports
+import { Banner } from "@makeplane/propel/components/banner";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -127,21 +128,12 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
   return (
     <>
       {isBannerMessage && mode === EAuthModes.SIGN_UP && (
-        <div className="relative flex items-center gap-2 rounded-md border border-danger-strong/50 bg-danger-subtle p-2">
-          <div className="relative flex h-4 w-4 shrink-0 items-center justify-center">
-            <InfoOutline width={16} height={16} className="text-danger-primary" />
-          </div>
-          <div className="w-full text-13 font-medium text-danger-primary">
-            {t("auth.sign_up.errors.password.strength")}
-          </div>
-          <button
-            type="button"
-            className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-danger-subtle-hover"
-            onClick={() => setBannerMessage(false)}
-          >
-            <CloseOutline className="h-4 w-4 shrink-0 text-danger-primary" />
-          </button>
-        </div>
+        <Banner
+          placement="inline"
+          variant="danger"
+          description={t("auth.sign_up.errors.password.strength")}
+          onDismiss={() => setBannerMessage(false)}
+        />
       )}
       <form
         ref={formRef}

@@ -10,6 +10,7 @@ import { useSearchParams } from "next/navigation";
 // icons
 import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
 // ui
+import { Banner } from "@makeplane/propel/components/banner";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -23,7 +24,6 @@ import { EErrorAlertType, authErrorHandler } from "@/helpers/authentication.help
 // services
 import { AuthService } from "@/services/auth.service";
 // local imports
-import { AuthBanner } from "./auth-banner";
 import { FormContainer } from "./common/container";
 import { AuthFormHeader } from "./common/header";
 
@@ -103,7 +103,13 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
       <AuthFormHeader title="Reset password" description="Create a new password." />
 
       {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
-        <AuthBanner message={errorInfo.message} handleBannerData={(value) => setErrorInfo(value)} />
+        <Banner
+          placement="inline"
+          variant="accent"
+          role="alert"
+          description={errorInfo.message}
+          onDismiss={() => setErrorInfo(undefined)}
+        />
       )}
       <form
         className="space-y-4"

@@ -5,8 +5,12 @@
  */
 
 import { observer } from "mobx-react";
-// components
-import { BulkOperationsUpgradeBanner } from "@/components/issues/bulk-operations/upgrade-banner";
+// ui
+import { Banner } from "@makeplane/propel/components/banner";
+import { Button } from "@makeplane/propel/components/button";
+import { MARKETING_PLANE_ONE_PAGE_LINK } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
 // hooks
 import { useMultipleSelectStore } from "@/hooks/store/use-multiple-select-store";
 import type { TSelectionHelper } from "@/hooks/use-multiple-select";
@@ -18,10 +22,39 @@ type Props = {
 
 export const IssueBulkOperationsRoot = observer(function IssueBulkOperationsRoot(props: Props) {
   const { className, selectionHelpers } = props;
+  // translation
+  const { t } = useTranslation();
   // store hooks
   const { isSelectionActive } = useMultipleSelectStore();
 
   if (!isSelectionActive || selectionHelpers.isSelectionDisabled) return null;
 
-  return <BulkOperationsUpgradeBanner className={className} />;
+  return (
+    <div className={cn("sticky bottom-0 left-0 z-[2] grid h-20 place-items-center px-3.5", className)}>
+      <Banner
+        placement="inline"
+        variant="accent"
+        icon={null}
+        title={t("bulk_operations.upgrade_banner.message")}
+        actions={
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={t("bulk_operations.upgrade_banner.cta")}
+            nativeButton={false}
+            render={
+              <a
+                href={MARKETING_PLANE_ONE_PAGE_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={t("bulk_operations.upgrade_banner.cta")}
+              />
+            }
+          />
+        }
+        render={<div className="w-full" />}
+      />
+    </div>
+  );
 });