From 781e076524bb71d8057d5e412959e0e9bfc653a0 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Wed, 15 Apr 2026 19:08:50 +0300
Subject: [PATCH] Port error page styles

Replaced inline styles with SCSS classes ported from Angular error-page
component. Added responsive layout, illustration placeholder, search
input styling, and action buttons matching the Angular source.
---
 src/routes/error/[code]/page.scss | 128 ++++++++++++++++++++++++++++++
 src/routes/error/[code]/page.tsx  |  33 ++++----
 2 files changed, 142 insertions(+), 19 deletions(-)
 create mode 100644 src/routes/error/[code]/page.scss

diff --git a/src/routes/error/[code]/page.scss b/src/routes/error/[code]/page.scss
new file mode 100644
index 00000000..fbc2c2e6
--- /dev/null
+++ b/src/routes/error/[code]/page.scss
@@ -0,0 +1,128 @@
+@use "../../../styles/variables" as vars;
+@use "../../../styles/colors" as colors;
+@use "../../../styles/screen" as screen;
+
+.error-page {
+  display: block;
+  padding-top: 1rem;
+
+  &__section {
+    width: 100%;
+    margin: auto;
+    display: flex;
+    padding: 2rem;
+
+    & > *:not(:last-child) {
+      margin-right: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    @include screen.desktop {
+      padding-top: 3rem;
+      max-width: 960px;
+      width: 75%;
+    }
+  }
+
+  &__illustration {
+    flex: 30%;
+    background-position: bottom;
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin-bottom: -2rem;
+
+    @include screen.mobile {
+      display: none;
+    }
+  }
+
+  &__code {
+    font-size: 8rem;
+    color: #a3a3a3;
+    margin: 0;
+  }
+
+  &__title {
+    font-size: 3rem;
+    color: colors.$text-color;
+    margin: 0;
+  }
+
+  &__content {
+    flex: 70%;
+
+    & > *:not(:last-child) {
+      margin-bottom: 1rem;
+    }
+
+    @include screen.mobile {
+      flex: 100%;
+    }
+  }
+
+  &__description {
+    max-width: 480px;
+    color: colors.$light-gray;
+  }
+
+  &__actions {
+    display: flex;
+    padding: 2rem 0;
+    flex-wrap: wrap;
+
+    @include screen.gt-mobile {
+      & > *:not(:last-child) {
+        margin-right: 1rem;
+      }
+    }
+
+    @include screen.mobile {
+      flex-wrap: wrap;
+
+      & > *:not(:last-child) {
+        margin-bottom: 1rem;
+      }
+    }
+
+    a {
+      height: 35px;
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: colors.$blue-link;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__search {
+    width: 100%;
+
+    @include screen.desktop {
+      width: 17rem;
+    }
+
+    margin-bottom: 1rem;
+
+    input {
+      font-size: 0.875rem;
+      box-sizing: border-box;
+      width: 100%;
+      height: 2.25rem;
+      padding: 0.25rem 0.5rem;
+      border: 1px solid #dfdfdf;
+      background: #fff;
+      appearance: none;
+      transition: all 0.2s;
+      outline: 0 solid transparent;
+      border-radius: 0.1875rem;
+
+      &:focus {
+        border: 1px solid #b7d3f3;
+        box-shadow: 0 0.0625rem 0.1875rem #cad6e5;
+      }
+    }
+  }
+}
diff --git a/src/routes/error/[code]/page.tsx b/src/routes/error/[code]/page.tsx
index 1feb415f..7f8f21ce 100644
--- a/src/routes/error/[code]/page.tsx
+++ b/src/routes/error/[code]/page.tsx
@@ -1,4 +1,5 @@
 import { useParams } from "@modern-js/runtime/router";
+import "./page.scss";
 
 const ERROR_CONFIG: Record<string, { title: string; description: string }> = {
   "404": {
@@ -25,7 +26,6 @@ const FALLBACK = {
 
 /**
  * Error page for HTTP-like error codes (404, 500, 503).
- * Simple text-based UI — no design system dependency yet.
  * Route: /error/:code
  */
 export default function ErrorPage(): JSX.Element {
@@ -33,23 +33,18 @@ export default function ErrorPage(): JSX.Element {
   const config = (code ? ERROR_CONFIG[code] : undefined) ?? FALLBACK;
 
   return (
-    <main
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "60vh",
-        padding: "2rem",
-        textAlign: "center",
-      }}
-    >
-      <h1 style={{ fontSize: "3rem", margin: "0 0 0.5rem" }}>{code ?? "?"}</h1>
-      <h2 style={{ margin: "0 0 1rem" }}>{config.title}</h2>
-      <p style={{ maxWidth: "480px", color: "#666" }}>{config.description}</p>
-      <a href="/" style={{ marginTop: "1.5rem" }}>
-        Go to home page
-      </a>
-    </main>
+    <div className="error-page">
+      <section className="error-page__section">
+        <div className="error-page__illustration" />
+        <div className="error-page__content">
+          <h1 className="error-page__code">{code ?? "?"}</h1>
+          <h2 className="error-page__title">{config.title}</h2>
+          <p className="error-page__description">{config.description}</p>
+          <div className="error-page__actions">
+            <a href="/">Go to home page</a>
+          </div>
+        </div>
+      </section>
+    </div>
   );
 }