@autobusal/providers 1.12.0 → 1.12.1

package/Errors/Message.tsx

@@ -1,9 +1,10 @@
 import { useNavigate } from 'react-router-dom';
+import { RiBus2Line } from 'react-icons/ri';
 import { Button, Meta } from '@autobusal/common';
 import { useSystemTheme } from '@autobusal/hooks';
 import { getLanguage } from '../Setup/languages';
 import errors from '@lang/errors';
-import { Background, Container, Logo, Description } from './styles';
+import { Background, Road, Bus, Container, Logo, Code, Description, Detail } from './styles';
 import { useGetSettings } from '../services';
 
 interface Props {
@@ -24,9 +25,31 @@ const Message = ({ type }: Props): JSX.Element => {
   // `undefined` and crash the error page on `.not_found`/`.system`.
   const translations = errors[language as keyof typeof errors] ?? errors.en;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * Each error now says what went wrong AND what to do next. One generic
+   * line told the reader nothing and left a Back button as their only idea;
+   * a missing page and a server fault are different problems and deserve
+   * different suggestions.
+   */
+  const notFound = type === 'not_found';
+
+  const heading = notFound ? translations.not_found : translations.system;
+
+  const detail = notFound ? translations.not_found_detail : translations.system_detail;
+
   return (
-    <Meta title={ type === 'not_found' ? translations.not_found : translations.system } noIndex={ true }>
-      <Background />
+    <Meta title={ heading } noIndex={ true }>
+      <Background>
+        { /* decorative: the road and the bus carry no information, so they
+             are hidden from assistive technology entirely */ }
+        <Road aria-hidden="true" />
+
+        <Bus aria-hidden="true">
+          <RiBus2Line />
+        </Bus>
+      </Background>
 
       <Container className="box">
         <Logo
@@ -43,9 +66,11 @@ const Message = ({ type }: Props): JSX.Element => {
           <img src={ `${ data.url }/logo-${ theme }.svg` } alt={ translations.home } />
         </Logo>
 
-        <Description>
-          { type === 'not_found' ? translations.not_found : translations.system }
-        </Description>
+        <Code>{ notFound ? '404' : '500' }</Code>
+
+        <Description>{ heading }</Description>
+
+        <Detail>{ detail }</Detail>
 
         <Button
           type="button"
@@ -58,4 +83,4 @@ const Message = ({ type }: Props): JSX.Element => {
   );
 };
 
-export default Message;
+export default Message;

package/Errors/styles.ts

@@ -1,35 +1,57 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The error page was a line of text and a button on a blank field. It now
+ * borrows the road treatment from the under-construction holding page and
+ * sends a bus along it, with the explanation boxed in the middle - so a
+ * dead end still looks like part of the product rather than a crash.
+ */
+const drift = keyframes`
+  from { transform: translateX(0); }
+  to { transform: translateX(-84px); }
+`;
+
+const travel = keyframes`
+  from { transform: translateX(-22vw); }
+  to { transform: translateX(112vw); }
+`;
+
+const rise = keyframes`
+  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
+  to { opacity: 1; transform: translate(-50%, -50%); }
+`;
 
 export const Background = styled.div`
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 10000;
+  overflow: hidden;
   background: ${ props => props.theme.background.normal };
 `;
 
 export const Container = styled.div`
   position: fixed;
   top: 50%;
-  right: 50%;
+  left: 50%;
   z-index: 10001;
-  max-width: 400px;
+  width: calc(100% - 40px);
+  max-width: 560px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  transform: translate(50%, -50%);
+  transform: translate(-50%, -50%);
+  animation: ${ rise } 0.5s ease-out both;
 `;
 
 export const Logo = styled.div`
-  margin-bottom: 20px;
+  margin-bottom: 22px;
   display: inline-block;
 
   & > img {
     display: block;
-    width: 250px;
+    width: 210px;
     cursor: pointer;
   }
 
@@ -39,9 +61,83 @@ export const Logo = styled.div`
   }
 `;
 
-export const Description = styled.div`
-  margin-bottom: 20px;
+export const Code = styled.div`
+  margin-bottom: 6px;
+  font-weight: 700;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.primary.normal };
+`;
+
+export const Description = styled.h1`
+  margin-bottom: 10px;
   font-weight: 700;
   text-align: center;
-  font-size: ${ props => props.theme.size.xxl };
-`;
+  font-size: clamp(20px, 3vw, 28px);
+`;
+
+export const Detail = styled.p`
+  margin: 0 0 22px;
+  text-align: center;
+  line-height: 1.6;
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * A band of road across the foot of the page. Decorative only, and hidden
+ * from assistive technology - it carries nothing a screen reader needs.
+ */
+export const Road = styled.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 150px;
+  background: linear-gradient(
+    to top,
+    ${ props => props.theme.primary.normal }22,
+    transparent
+  );
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 46px;
+    left: 0;
+    width: 200%;
+    height: 3px;
+    border-radius: 3px;
+    background: repeating-linear-gradient(
+      to right,
+      ${ props => props.theme.primary.normal }66 0 42px,
+      transparent 42px 84px
+    );
+    animation: ${ drift } 6s linear infinite;
+  }
+
+  /* a moving road is exactly the kind of thing that should stop for anyone
+     who has asked motion to stop */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      animation: none;
+    }
+  }
+`;
+
+export const Bus = styled.div`
+  position: absolute;
+  bottom: 52px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  font-size: 44px;
+  color: ${ props => props.theme.primary.normal };
+  animation: ${ travel } 16s linear infinite;
+
+  /* parked, not removed - the scene should still make sense standing still */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    transform: translateX(10vw);
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/providers",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"