From 7524ef58e6b4faf73d518f5ff76d37909c5c1f50 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Thu, 9 Jan 2025 19:44:22 +0000 Subject: [PATCH 1/8] [DEV-19082] Implemented new error page for Bea theme --- app/[localeCode]/error.module.scss | 66 ++++++++++++ app/[localeCode]/error.tsx | 42 ++++++++ public/images/error.svg | 155 +++++++++++++++++++++++++++++ 3 files changed, 263 insertions(+) create mode 100644 app/[localeCode]/error.module.scss create mode 100644 app/[localeCode]/error.tsx create mode 100644 public/images/error.svg diff --git a/app/[localeCode]/error.module.scss b/app/[localeCode]/error.module.scss new file mode 100644 index 000000000..62e113c8d --- /dev/null +++ b/app/[localeCode]/error.module.scss @@ -0,0 +1,66 @@ +.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; +} + +.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; + } +} + +.illustration { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + margin-left: $spacing-1; +} + +.svg { + width: 320px; + height: 248px; + + @include not-desktop { + width: 245px; + height: 190px; + } +} diff --git a/app/[localeCode]/error.tsx b/app/[localeCode]/error.tsx new file mode 100644 index 000000000..9dacdb4c5 --- /dev/null +++ b/app/[localeCode]/error.tsx @@ -0,0 +1,42 @@ +/* eslint-disable id-blacklist */ + +'use client'; + +import Illustration from '@/public/images/error.svg'; + +import 'modern-normalize/modern-normalize.css'; +import '@/styles/styles.globals.scss'; + +import styles from './error.module.scss'; + +export default function Error({ reset }: { reset: () => void }) { + return ( +
+
+
+ +
+
+

We’re sorry, this newsroom couldn’t load

+

+ Try to{' '} + {' '} + the page, or visit the platform’s{' '} + + status page + {' '} + to see if any incidents are affecting the platform. You can also reach out + to support via{' '} + + {' '} + email + + . +

+
+
+
+ ); +} diff --git a/public/images/error.svg b/public/images/error.svg new file mode 100644 index 000000000..5452b81f3 --- /dev/null +++ b/public/images/error.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From cd0203a556d1ad0e02f9e91e58bcbbd1daf1317b Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Thu, 9 Jan 2025 19:49:01 +0000 Subject: [PATCH 2/8] [DEV-19082] Fixed page refresh function --- app/[localeCode]/error.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/[localeCode]/error.tsx b/app/[localeCode]/error.tsx index 9dacdb4c5..d50918947 100644 --- a/app/[localeCode]/error.tsx +++ b/app/[localeCode]/error.tsx @@ -9,7 +9,11 @@ import '@/styles/styles.globals.scss'; import styles from './error.module.scss'; -export default function Error({ reset }: { reset: () => void }) { +export default function Error() { + function handlePageRefresh() { + window.location.reload(); + } + return (
@@ -20,7 +24,7 @@ export default function Error({ reset }: { reset: () => void }) {

We’re sorry, this newsroom couldn’t load

Try to{' '} - {' '} the page, or visit the platform’s{' '} From 711360461c2eb2f798023fc12066b3a70386423f Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Fri, 10 Jan 2025 08:30:35 +0000 Subject: [PATCH 3/8] [DEV-19082] Updated error svg illustration --- app/[localeCode]/error.module.scss | 1 - public/images/error.svg | 187 +++++------------------------ 2 files changed, 32 insertions(+), 156 deletions(-) diff --git a/app/[localeCode]/error.module.scss b/app/[localeCode]/error.module.scss index 62e113c8d..7d7324a62 100644 --- a/app/[localeCode]/error.module.scss +++ b/app/[localeCode]/error.module.scss @@ -52,7 +52,6 @@ display: flex; align-items: center; justify-content: center; - margin-left: $spacing-1; } .svg { diff --git a/public/images/error.svg b/public/images/error.svg index 5452b81f3..fe45385c4 100644 --- a/public/images/error.svg +++ b/public/images/error.svg @@ -1,155 +1,32 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 1fe46408a99bc6449eec10255e55ac4a1cd7f827 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Fri, 10 Jan 2025 08:40:11 +0000 Subject: [PATCH 4/8] [DEV-19082] Fixed svg alignment --- app/[localeCode]/error.module.scss | 10 +++++++--- public/images/error.svg | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/app/[localeCode]/error.module.scss b/app/[localeCode]/error.module.scss index 7d7324a62..b9b42e8c7 100644 --- a/app/[localeCode]/error.module.scss +++ b/app/[localeCode]/error.module.scss @@ -14,6 +14,10 @@ padding: $spacing-7; gap: $spacing-5; max-width: 900px; + + @include not-desktop { + padding: 0; + } } .title { @@ -55,11 +59,11 @@ } .svg { - width: 320px; - height: 248px; + width: 400px; + height: 220px; @include not-desktop { width: 245px; - height: 190px; + height: 136px; } } diff --git a/public/images/error.svg b/public/images/error.svg index fe45385c4..c8ba6e14f 100644 --- a/public/images/error.svg +++ b/public/images/error.svg @@ -1,4 +1,4 @@ - + From 01eb14511fbb5dea5e9f6fc313492b6033734ea6 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Fri, 10 Jan 2025 09:59:05 +0000 Subject: [PATCH 5/8] [DEV-19082] Renamed newsroom to site --- app/[localeCode]/error.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/[localeCode]/error.tsx b/app/[localeCode]/error.tsx index d50918947..5fab56401 100644 --- a/app/[localeCode]/error.tsx +++ b/app/[localeCode]/error.tsx @@ -21,7 +21,7 @@ export default function Error() {

-

We’re sorry, this newsroom couldn’t load

+

We’re sorry, this site couldn’t load

Try to{' '} {' '} + the page, or visit the platform’s{' '} + + status page + {' '} + to see if any incidents are affecting the platform. You can also reach out + to support via{' '} + + {' '} + email + + . +

+
+
+ + ); +} diff --git a/modules/Error/index.ts b/modules/Error/index.ts new file mode 100644 index 000000000..9b35c9f37 --- /dev/null +++ b/modules/Error/index.ts @@ -0,0 +1 @@ +export { Error } from './Error'; From 11b8179670ef830b440f4efa9099d4ebf27c9d92 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Fri, 10 Jan 2025 13:59:58 +0000 Subject: [PATCH 7/8] [DEV-19082] Updated error page to use new Error module --- app/[localeCode]/error.module.scss | 69 ------------------------------ app/[localeCode]/error.tsx | 43 +------------------ 2 files changed, 2 insertions(+), 110 deletions(-) delete mode 100644 app/[localeCode]/error.module.scss diff --git a/app/[localeCode]/error.module.scss b/app/[localeCode]/error.module.scss deleted file mode 100644 index b9b42e8c7..000000000 --- a/app/[localeCode]/error.module.scss +++ /dev/null @@ -1,69 +0,0 @@ -.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; - } -} - -.illustration { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; -} - -.svg { - width: 400px; - height: 220px; - - @include not-desktop { - width: 245px; - height: 136px; - } -} diff --git a/app/[localeCode]/error.tsx b/app/[localeCode]/error.tsx index 5fab56401..1cd109941 100644 --- a/app/[localeCode]/error.tsx +++ b/app/[localeCode]/error.tsx @@ -1,46 +1,7 @@ -/* eslint-disable id-blacklist */ - 'use client'; -import Illustration from '@/public/images/error.svg'; - -import 'modern-normalize/modern-normalize.css'; -import '@/styles/styles.globals.scss'; - -import styles from './error.module.scss'; +import { Error as ErrorComponent } from '@/modules/Error'; export default function Error() { - function handlePageRefresh() { - window.location.reload(); - } - - return ( -
-
-
- -
-
-

We’re sorry, this site couldn’t load

-

- Try to{' '} - {' '} - the page, or visit the platform’s{' '} - - status page - {' '} - to see if any incidents are affecting the platform. You can also reach out - to support via{' '} - - {' '} - email - - . -

-
-
-
- ); + return ; } From 0f75ed83873437ca6bae21d30ffa24d895f5d530 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Fri, 10 Jan 2025 14:00:22 +0000 Subject: [PATCH 8/8] [DEV-19082] Added new global error component for errors in layout --- app/global-error.tsx | 91 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 app/global-error.tsx diff --git a/app/global-error.tsx b/app/global-error.tsx new file mode 100644 index 000000000..6e16af2c3 --- /dev/null +++ b/app/global-error.tsx @@ -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 ( + + + + + + + ); +}