scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-2634 (pull request #1997)

Browse Source 
feat: initial redesign of global-error

* feat: initial redesign of global-error


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra
This commit is contained in:
Arvid Norlin
2025-05-07 13:53:46 +00:00
parent 3ea26259df
commit 5e059bdfc9
2 changed files with 112 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/scandic-web/app/global-error.module.css
View File

@@ -1,3 +0,0 @@
.layout {
font-family: var(--typography-Body-Regular-fontFamily);
}

117
apps/scandic-web/app/global-error.tsx
View File

@@ -3,8 +3,9 @@
import * as Sentry from "@sentry/nextjs" import * as Sentry from "@sentry/nextjs"
import { useEffect } from "react" import { useEffect } from "react"
import styles from "./global-error.module.css" import Image from "@/components/Image"
/* eslint-disable formatjs/no-literal-string-in-jsx */
export default function GlobalError({ export default function GlobalError({
error, error,
}: { }: {
@@ -18,11 +19,117 @@ export default function GlobalError({
return ( return (
<html> <html>
<head>
<style>
{`
body {
font-family: Helvetica, Arial, sans-serif;
padding: 32px;
}
a {
color: #4d001b;
}
a:hover {
color: #8f4350;
}
.title {
text-transform: uppercase;
}
.content {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 600px;
margin: 0 auto;
}
.logo {
display: flex;
justify-content: center;
padding: 24px;
}
.phoneNumbers, .links {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
margin: 0;
list-style: none;
}
`}
</style>
</head>
<body> <body>
<div className={styles.layout}> <div className="logo">
{/* This renders instead of the root layout so there is no <IntlProvider>, hence we can't translate this. */} <Image
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} alt="Scandic Hotels logotype"
<h1>Something went really wrong!</h1> height={22}
src="/_static/img/scandic-logotype.svg"
width={103}
/>
</div>
<div className="content">
<h1 className="title">SORRY, SOMETHING WENT WRONG!</h1>
<p>
<strong>
{
"While we're working hard to fix it, you can always give us a call:"
}
</strong>
</p>
<ul className="phoneNumbers">
<li>
Denmark: <a href="tel:+4533480400">+45 33 48 04 00</a>
</li>
<li>
Finland: <a href="tel:+358020081800">+358 0200 81 800</a>
</li>
<li>
Norway: <a href="tel:+4723155000">+47 23 15 50 00</a>
</li>
<li>
Sweden: <a href="tel:+46851751700">+46 8 517 517 00</a>
</li>
<li>
International: <a href="tel:+46851751720">+46 8 517 517 20</a>
</li>
</ul>
<p>
<strong>
You can also switch languages to try if it works better this way:
</strong>
</p>
<ul className="links">
<li>
<a href="https://www.scandichotels.com/da/">Danish</a>
</li>
<li>
<a href="https://www.scandichotels.com/en/">English</a>
</li>
<li>
<a href="https://www.scandichotels.com/fi/">Finnish</a>
</li>
<li>
<a href="https://www.scandichotels.com/de/">German</a>
</li>
<li>
<a href="https://www.scandichotels.com/no/">Norwegian</a>
</li>
<li>
<a href="https://www.scandichotels.com/sv/">Swedish</a>
</li>
</ul>
<p>
<strong>Thanks for your patience!</strong>
</p>
</div> </div>
</body> </body>
</html> </html>