UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: auth screens, error pages и новый канон внешних контуров

plane-src/apps/web/app/error/dev.tsx

@@ -4,11 +4,9 @@
  * See the LICENSE file for details.
  */
 
-// plane imports
 import { isRouteErrorResponse } from "react-router";
 import { Banner } from "@plane/propel/banner";
 import { Button } from "@plane/propel/button";
-import { Card, ECardVariant } from "@plane/propel/card";
 import { InfoFillIcon } from "@plane/propel/icons";
 
 interface ErrorActionsProps {
@@ -19,12 +17,12 @@ interface ErrorActionsProps {
 function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) {
   return (
     <div className="flex gap-3 pt-2">
-      <Button variant="primary" size="lg" onClick={onGoHome}>
-        Go to home
+      <Button variant="primary" size="lg" onClick={onGoHome} className="nodedc-error-primary">
+        На главную
       </Button>
       {onReload && (
-        <Button variant="secondary" size="lg" onClick={onReload}>
-          Reload page
+        <Button variant="secondary" size="lg" onClick={onReload} className="nodedc-empty-state-secondary">
+          Обновить страницу
         </Button>
       )}
     </div>
@@ -37,19 +35,17 @@ interface DevErrorComponentProps {
   onReload: () => void;
 }
 
+const ErrorShell = ({ children }: { children: React.ReactNode }) => (
+  <div className="nodedc-error-shell transition-none">{children}</div>
+);
+
 export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorComponentProps) {
   if (isRouteErrorResponse(error)) {
     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={<InfoFillIcon className="size-5" />}
-            title="Route Error Response"
-            animationDuration={0}
-          />
-
-          <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
+          <Banner variant="error" icon={<InfoFillIcon className="size-5" />} title="Ошибка маршрута" animationDuration={0} />
+          <ErrorShell>
             <div className="space-y-4">
               <div>
                 <h2 className="mb-2 text-20 font-semibold text-danger-primary">
@@ -59,15 +55,15 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
               </div>
 
               <div className="space-y-2">
-                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Error Data</h3>
-                <div className="rounded-md bg-layer-1 p-4">
+                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Данные ошибки</h3>
+                <div className="rounded-[1.1rem] bg-white/5 p-4">
                   <p className="font-code text-13 text-secondary">{error.data}</p>
                 </div>
               </div>
 
               <ErrorActions onGoHome={onGoHome} onReload={onReload} />
             </div>
-          </Card>
+          </ErrorShell>
         </div>
       </div>
     );
@@ -80,27 +76,27 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
           <Banner
             variant="error"
             icon={<InfoFillIcon className="size-5" />}
-            title="Runtime Error"
+            title="Ошибка выполнения"
             animationDuration={0}
           />
-          <Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
+          <ErrorShell>
             <div className="space-y-4">
               <div>
-                <h2 className="mb-2 text-20 font-semibold text-danger-primary">Error</h2>
+                <h2 className="mb-2 text-20 font-semibold text-danger-primary">Ошибка</h2>
                 <div className="bg-subtle-1 h-px w-full" />
               </div>
 
               <div className="space-y-2">
-                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Message</h3>
-                <div className="rounded-md bg-layer-1 p-4">
+                <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Сообщение</h3>
+                <div className="rounded-[1.1rem] bg-white/5 p-4">
                   <p className="text-13 font-medium text-primary">{error.message}</p>
                 </div>
               </div>
 
               {error.stack && (
                 <div className="space-y-2">
-                  <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Stack Trace</h3>
-                  <div className="max-h-96 overflow-auto rounded-md border border-subtle bg-layer-1">
+                  <h3 className="text-13 font-medium tracking-wide text-tertiary uppercase">Стек вызовов</h3>
+                  <div className="max-h-96 overflow-auto rounded-[1.1rem] bg-white/5">
                     <pre className="p-4 font-code text-11 break-words whitespace-pre-wrap text-secondary">
                       {error.stack}
                     </pre>
@@ -110,20 +106,20 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
 
               <ErrorActions onGoHome={onGoHome} onReload={onReload} />
             </div>
-          </Card>
+          </ErrorShell>
 
-          <Card variant={ECardVariant.WITHOUT_SHADOW} className="bg-layer-1 !p-4 transition-none">
+          <div className="nodedc-external-panel p-4 transition-none">
             <div className="flex items-start gap-3">
               <InfoFillIcon className="mt-0.5 size-5 flex-shrink-0 text-tertiary" />
               <div className="space-y-1">
-                <p className="text-13 font-medium text-secondary">Development Mode</p>
+                <p className="text-13 font-medium text-secondary">Режим разработки</p>
                 <p className="text-11 text-tertiary">
-                  This detailed error view is only visible in development. In production, users will see a friendly
-                  error page.
+                  Этот подробный экран ошибок виден только в разработке. В production пользователи увидят упрощённую
+                  страницу ошибки.
                 </p>
               </div>
             </div>
-          </Card>
+          </div>
         </div>
       </div>
     );
@@ -132,29 +128,24 @@ 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={<InfoFillIcon className="size-5" />}
-          title="Unknown Error"
-          animationDuration={0}
-        />
-
-        <Card variant={ECardVariant.WITH_SHADOW} className="!p-6">
+        <Banner variant="error" icon={<InfoFillIcon className="size-5" />} title="Неизвестная ошибка" animationDuration={0} />
+        <ErrorShell>
           <div className="space-y-4">
             <div>
-              <h2 className="mb-2 text-20 font-semibold text-primary">Unknown Error</h2>
+              <h2 className="mb-2 text-20 font-semibold text-primary">Неизвестная ошибка</h2>
               <div className="bg-subtle-1 h-px w-full" />
             </div>
 
-            <div className="rounded-md bg-layer-1 p-4">
+            <div className="rounded-[1.1rem] bg-white/5 p-4">
               <p className="text-13 text-secondary">
-                An unknown error occurred. Please try refreshing the page or contact support if the problem persists.
+                Произошла неизвестная ошибка. Обновите страницу. Если проблема сохранится, обратитесь в службу
+                поддержки.
               </p>
             </div>
 
             <ErrorActions onGoHome={onGoHome} onReload={onReload} />
           </div>
-        </Card>
+        </ErrorShell>
       </div>
     </div>
   );

plane-src/apps/web/app/error/prod.tsx

@@ -16,18 +16,8 @@ import DefaultLayout from "@/layouts/default-layout";
 const linkMap = [
   {
     key: "mail_to",
-    label: "Contact Support",
-    value: "mailto:support@plane.so",
-  },
-  {
-    key: "status",
-    label: "Status Page",
-    value: "https://status.plane.so/",
-  },
-  {
-    key: "twitter_handle",
-    label: "@planepowers",
-    value: "https://x.com/planepowers",
+    label: "Служба поддержки",
+    value: "https://nodedc.dctouch.ru/",
   },
 ];
 
@@ -45,22 +35,20 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
 
   return (
     <DefaultLayout>
-      <div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 px-6 text-center">
-        <div className="relative w-full">
+      <div className="relative container mx-auto flex h-full w-full max-w-3xl items-center justify-center px-6 py-10">
+        <div className="nodedc-error-shell relative flex w-full flex-col gap-6 text-left">
           <img
             src={maintenanceModeImage}
             height="176"
             width="288"
             alt="ProjectSettingImg"
-            className="h-full w-full object-fill object-center"
+            className="mx-auto h-full w-full max-w-[18rem] object-fill object-center"
           />
-        </div>
-        <div className="relative mt-4 flex w-full flex-col gap-4">
           <div className="flex flex-col gap-2.5">
-            <h1 className="text-left text-18 font-semibold text-primary">&#x1F6A7; Looks like something went wrong!</h1>
-            <span className="text-left text-14 font-medium text-secondary">
-              We track these errors automatically and working on getting things back up and running. If the problem
-              persists feel free to contact us. In the meantime, try refreshing.
+            <h1 className="text-18 font-semibold text-primary">&#x1F6A7; Похоже, что-то пошло не так.</h1>
+            <span className="text-14 font-medium text-secondary">
+              Мы уже зафиксировали ошибку и пытаемся восстановить работу. Если проблема сохраняется, обратитесь в
+              службу поддержки и обновите страницу.
             </span>
           </div>
 
@@ -71,7 +59,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
                   href={link.value}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-13 text-accent-primary hover:underline"
+                  className="nodedc-error-link text-13"
                 >
                   {link.label}
                 </a>
@@ -80,8 +68,8 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
           </div>
 
           <div className="flex items-center justify-start gap-6">
-            <Button variant="primary" size="lg" onClick={onGoHome}>
-              Go to home
+            <Button variant="primary" size="lg" onClick={onGoHome} className="nodedc-error-primary">
+              На главную
             </Button>
           </div>
         </div>