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