Skip to content

Commit

Permalink
Merge pull request #1206 from prezly/feature/dev-19082-implement-new-…
Browse files Browse the repository at this point in the history
…500-error-page-for-themes

[DEV-19082] Feature - Implement new error page for Bea theme
  • Loading branch information
fgyimah authored Jan 10, 2025
2 parents 5c2fc33 + 0f75ed8 commit cd1c113
Show file tree
Hide file tree
Showing 6 changed files with 257 additions and 0 deletions.
7 changes: 7 additions & 0 deletions app/[localeCode]/error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use client';

import { Error as ErrorComponent } from '@/modules/Error';

export default function Error() {
return <ErrorComponent />;
}
91 changes: 91 additions & 0 deletions app/global-error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
'use client';

import { Error as ErrorComponent } from '@/modules/Error';

import 'modern-normalize/modern-normalize.css';
import '@/styles/styles.globals.scss';

export default function Error() {
return (
<html>
<style jsx global>{`
body {
box-sizing: border-box;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: Inter, sans-serif;
text-align: center;
}
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
padding: 48px;
gap: 36px;
max-width: 900px;
}
.title {
color: #1f2937;
font-weight: 700;
font-size: 48px;
line-height: 1.2;
margin-bottom: 16px;
}
.description {
color: #4b5563;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
margin: 0;
}
.link {
font-size: 18px;
font-weight: 500;
text-decoration: none;
color: #4f46e5;
outline: none;
border: 0;
background: none;
padding: 0;
}
.link:hover {
color: #4f46e5;
text-decoration: underline;
cursor: pointer;
}
.illustration {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.svg {
width: 400px;
height: 220px;
}
@media (max-width: 768px) {
.svg {
width: 245px;
height: 136px;
}
}
`}</style>
<body>
<ErrorComponent />
</body>
</html>
);
}
70 changes: 70 additions & 0 deletions modules/Error/Error.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.container {
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
font-family: Inter, sans-serif;
text-align: center;
}

.wrapper {
display: flex;
align-items: center;
flex-direction: column;
padding: $spacing-7;
gap: $spacing-5;
max-width: 900px;

@include not-desktop {
padding: 0;
}
}

.title {
color: #1f2937;
font-weight: 700;
font-size: 48px;
line-height: 1.2;
margin-bottom: $spacing-3;
}

.description {
color: #4b5563;
font-weight: 400;
font-size: $font-size-s;
line-height: 1.6;
margin: 0;
}

.link {
font-weight: 500;
text-decoration: none;
color: #4f46e5;
outline: none;
border: 0;
background: none;
padding: 0;

&:hover {
color: #4f46e5;
text-decoration: none;
cursor: pointer;
}
}

.illustration {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}

.svg {
width: 400px;
height: 220px;

@include not-desktop {
width: 245px;
height: 136px;
}
}
56 changes: 56 additions & 0 deletions modules/Error/Error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
'use client';

import classNames from 'classnames';

import Illustration from '@/public/images/error.svg';

import styles from './Error.module.scss';

export function Error() {
function handlePageRefresh() {
window.location.reload();
}

return (
<div className={classNames(styles.container, 'container')}>
<div className={classNames(styles.wrapper, 'wrapper')}>
<div className={classNames(styles.illustration, 'illustration')}>
<Illustration className={classNames(styles.svg, 'svg')} />
</div>
<div className={classNames(styles.content, 'content')}>
<h1 className={classNames(styles.title, 'title')}>
We’re sorry, this site couldn’t load
</h1>
<p className={classNames(styles.description, 'description')}>
Try to{' '}
<button
className={classNames(styles.link, 'link')}
onClick={handlePageRefresh}
>
refresh
</button>{' '}
the page, or visit the platform’s{' '}
<a
className={classNames(styles.link, 'link')}
rel="noopener noreferrer"
target="_blank"
href="https://status.prezly.com"
>
status page
</a>{' '}
to see if any incidents are affecting the platform. You can also reach out
to support via{' '}
<a
className={classNames(styles.link, 'link')}
href="mailto:[email protected]"
>
{' '}
email
</a>
.
</p>
</div>
</div>
</div>
);
}
1 change: 1 addition & 0 deletions modules/Error/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Error } from './Error';
Loading

0 comments on commit cd1c113

Please sign in to comment.