Skip to content

Commit cd1c113

Browse files
fgyimahfgyimah
authored
Merge pull request #1206 from prezly/feature/dev-19082-implement-new-500-error-page-for-themes
[DEV-19082] Feature - Implement new error page for Bea theme
2 parents 5c2fc33 + 0f75ed8 commit cd1c113

File tree

6 files changed

+257
-0
lines changed

6 files changed

+257
-0
lines changed

‎app/[localeCode]/error.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use client';
2+
3+
import { Error as ErrorComponent } from '@/modules/Error';
4+
5+
export default function Error() {
6+
return <ErrorComponent />;
7+
}

‎app/global-error.tsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
'use client';
2+
3+
import { Error as ErrorComponent } from '@/modules/Error';
4+
5+
import 'modern-normalize/modern-normalize.css';
6+
import '@/styles/styles.globals.scss';
7+
8+
export default function Error() {
9+
return (
10+
<html>
11+
<style jsx global>{`
12+
body {
13+
box-sizing: border-box;
14+
}
15+
16+
.container {
17+
min-height: 100vh;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
font-family: Inter, sans-serif;
22+
text-align: center;
23+
}
24+
25+
.wrapper {
26+
display: flex;
27+
align-items: center;
28+
flex-direction: column;
29+
padding: 48px;
30+
gap: 36px;
31+
max-width: 900px;
32+
}
33+
34+
.title {
35+
color: #1f2937;
36+
font-weight: 700;
37+
font-size: 48px;
38+
line-height: 1.2;
39+
margin-bottom: 16px;
40+
}
41+
42+
.description {
43+
color: #4b5563;
44+
font-weight: 400;
45+
font-size: 18px;
46+
line-height: 1.6;
47+
margin: 0;
48+
}
49+
50+
.link {
51+
font-size: 18px;
52+
font-weight: 500;
53+
text-decoration: none;
54+
color: #4f46e5;
55+
outline: none;
56+
border: 0;
57+
background: none;
58+
padding: 0;
59+
}
60+
61+
.link:hover {
62+
color: #4f46e5;
63+
text-decoration: underline;
64+
cursor: pointer;
65+
}
66+
67+
.illustration {
68+
flex-shrink: 0;
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
}
73+
74+
.svg {
75+
width: 400px;
76+
height: 220px;
77+
}
78+
79+
@media (max-width: 768px) {
80+
.svg {
81+
width: 245px;
82+
height: 136px;
83+
}
84+
}
85+
`}</style>
86+
<body>
87+
<ErrorComponent />
88+
</body>
89+
</html>
90+
);
91+
}

‎modules/Error/Error.module.scss

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.container {
2+
min-height: 50vh;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
font-family: Inter, sans-serif;
7+
text-align: center;
8+
}
9+
10+
.wrapper {
11+
display: flex;
12+
align-items: center;
13+
flex-direction: column;
14+
padding: $spacing-7;
15+
gap: $spacing-5;
16+
max-width: 900px;
17+
18+
@include not-desktop {
19+
padding: 0;
20+
}
21+
}
22+
23+
.title {
24+
color: #1f2937;
25+
font-weight: 700;
26+
font-size: 48px;
27+
line-height: 1.2;
28+
margin-bottom: $spacing-3;
29+
}
30+
31+
.description {
32+
color: #4b5563;
33+
font-weight: 400;
34+
font-size: $font-size-s;
35+
line-height: 1.6;
36+
margin: 0;
37+
}
38+
39+
.link {
40+
font-weight: 500;
41+
text-decoration: none;
42+
color: #4f46e5;
43+
outline: none;
44+
border: 0;
45+
background: none;
46+
padding: 0;
47+
48+
&:hover {
49+
color: #4f46e5;
50+
text-decoration: none;
51+
cursor: pointer;
52+
}
53+
}
54+
55+
.illustration {
56+
flex-shrink: 0;
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
}
61+
62+
.svg {
63+
width: 400px;
64+
height: 220px;
65+
66+
@include not-desktop {
67+
width: 245px;
68+
height: 136px;
69+
}
70+
}

‎modules/Error/Error.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
'use client';
2+
3+
import classNames from 'classnames';
4+
5+
import Illustration from '@/public/images/error.svg';
6+
7+
import styles from './Error.module.scss';
8+
9+
export function Error() {
10+
function handlePageRefresh() {
11+
window.location.reload();
12+
}
13+
14+
return (
15+
<div className={classNames(styles.container, 'container')}>
16+
<div className={classNames(styles.wrapper, 'wrapper')}>
17+
<div className={classNames(styles.illustration, 'illustration')}>
18+
<Illustration className={classNames(styles.svg, 'svg')} />
19+
</div>
20+
<div className={classNames(styles.content, 'content')}>
21+
<h1 className={classNames(styles.title, 'title')}>
22+
We’re sorry, this site couldn’t load
23+
</h1>
24+
<p className={classNames(styles.description, 'description')}>
25+
Try to{' '}
26+
<button
27+
className={classNames(styles.link, 'link')}
28+
onClick={handlePageRefresh}
29+
>
30+
refresh
31+
</button>{' '}
32+
the page, or visit the platform’s{' '}
33+
<a
34+
className={classNames(styles.link, 'link')}
35+
rel="noopener noreferrer"
36+
target="_blank"
37+
href="https://status.prezly.com"
38+
>
39+
status page
40+
</a>{' '}
41+
to see if any incidents are affecting the platform. You can also reach out
42+
to support via{' '}
43+
<a
44+
className={classNames(styles.link, 'link')}
45+
href="mailto:[email protected]"
46+
>
47+
{' '}
48+
email
49+
</a>
50+
.
51+
</p>
52+
</div>
53+
</div>
54+
</div>
55+
);
56+
}

‎modules/Error/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Error } from './Error';

0 commit comments

Comments
 (0)