From ac699d04f61f6ddcbce27cb4b70bb98828fc7999 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 May 2026 21:57:43 +0000 Subject: [PATCH 1/3] init: placeholder for React version of ErrorMessage Co-Authored-By: Charity Quinn --- src/components/ErrorMessage/ErrorMessage.module.css | 1 + src/components/ErrorMessage/ErrorMessage.tsx | 3 +++ 2 files changed, 4 insertions(+) create mode 100644 src/components/ErrorMessage/ErrorMessage.module.css create mode 100644 src/components/ErrorMessage/ErrorMessage.tsx diff --git a/src/components/ErrorMessage/ErrorMessage.module.css b/src/components/ErrorMessage/ErrorMessage.module.css new file mode 100644 index 00000000..545eb347 --- /dev/null +++ b/src/components/ErrorMessage/ErrorMessage.module.css @@ -0,0 +1 @@ +/* placeholder */ diff --git a/src/components/ErrorMessage/ErrorMessage.tsx b/src/components/ErrorMessage/ErrorMessage.tsx new file mode 100644 index 00000000..0bf7380b --- /dev/null +++ b/src/components/ErrorMessage/ErrorMessage.tsx @@ -0,0 +1,3 @@ +export const ErrorMessage = () => { + return null; +}; From 23386d464356cb4069375e82d70ea79083164251 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 May 2026 21:57:57 +0000 Subject: [PATCH 2/3] feat: port ErrorMessage from Angular to React with CSS module - Convert @Input() message to string prop - Translate HTML template to JSX - Convert SCSS to CSS module with camelCase class names - Inline all SCSS variables (-size=200px, -only) - No lifecycle hooks needed (ngOnInit was empty) - No dependencies on other app files (leaf component) Co-Authored-By: Charity Quinn --- .../ErrorMessage/ErrorMessage.module.css | 126 +++++++++++++++++- src/components/ErrorMessage/ErrorMessage.tsx | 24 +++- 2 files changed, 147 insertions(+), 3 deletions(-) diff --git a/src/components/ErrorMessage/ErrorMessage.module.css b/src/components/ErrorMessage/ErrorMessage.module.css index 545eb347..11f0b554 100644 --- a/src/components/ErrorMessage/ErrorMessage.module.css +++ b/src/components/ErrorMessage/ErrorMessage.module.css @@ -1 +1,125 @@ -/* placeholder */ +.errorSection { + height: 300px; + margin: 200px; +} + +@media only screen and (max-width: 768px) { + .errorSection { + height: 0; + display: block; + position: relative; + margin: 30vh 0; + } +} + +.errorSection p { + text-align: center; + padding: 0 25px; +} + +.strong { + margin-top: 25px; + font-weight: bold; +} + +.skull { + width: 200px; + height: 200px; + position: relative; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} + +.head { + width: 100%; + height: 75%; + border-radius: 15% / 20%; + position: absolute; + top: 0; + left: 0; +} + +.head::before, +.head::after { + content: ""; + position: absolute; + border-radius: 50%; + width: 20%; + height: 30%; + bottom: 10%; +} + +.head::before { + left: 10%; +} + +.head::after { + right: 10%; +} + +.crack { + width: 10%; + height: 10%; + position: absolute; + top: 0; + right: 25%; + transform: skew(-15deg); +} + +.crack::before { + content: ""; + position: absolute; + top: 100%; + left: 13.33px; + border-right: 10px solid transparent; + border-left: 5px solid transparent; +} + +.mouth { + width: 40%; + height: 25%; + position: absolute; + top: 75%; + left: 30%; + border-radius: 0 0 20px 20px; +} + +.mouth::before { + content: ""; + position: absolute; + width: 15%; + height: 50%; + border-radius: 50% / 30%; + left: 42.5%; + top: -25%; +} + +.teeth { + position: absolute; + bottom: 0; + left: 45%; + width: 10%; + height: 50%; + margin-bottom: -5%; + border-radius: 50% / 20%; +} + +.teeth::before, +.teeth::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50% / 20%; +} + +.teeth::before { + left: -250%; +} + +.teeth::after { + right: -250%; +} diff --git a/src/components/ErrorMessage/ErrorMessage.tsx b/src/components/ErrorMessage/ErrorMessage.tsx index 0bf7380b..43219c44 100644 --- a/src/components/ErrorMessage/ErrorMessage.tsx +++ b/src/components/ErrorMessage/ErrorMessage.tsx @@ -1,3 +1,23 @@ -export const ErrorMessage = () => { - return null; +import React from 'react'; +import styles from './ErrorMessage.module.css'; + +interface ErrorMessageProps { + message: string; +} + +export const ErrorMessage: React.FC = ({ message }) => { + return ( +
+
+
+
+
+
+
+
+
+

{message}

+

If you are offline viewing, you'll need to visit this page with a network connection first before it can work offline.

+
+ ); }; From eb9c9fd86a2f1a413fc5ecb0eb5aa9156f726835 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 May 2026 22:02:12 +0000 Subject: [PATCH 3/3] fix: add missing color properties for skull graphic Inlined color values from the default (day) theme: - .head background: #b92b27 (secondary-color) - Eye sockets, crack, teeth, mouth::before: #f5f5f5 (wrapper-bg) - Mobile overrides: #fff (wrapper-mobile-bg) - .crack::before border-top: 25px solid (skull-size/8) - .mouth background: #b92b27 Co-Authored-By: Charity Quinn --- .../ErrorMessage/ErrorMessage.module.css | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/src/components/ErrorMessage/ErrorMessage.module.css b/src/components/ErrorMessage/ErrorMessage.module.css index 11f0b554..ec848706 100644 --- a/src/components/ErrorMessage/ErrorMessage.module.css +++ b/src/components/ErrorMessage/ErrorMessage.module.css @@ -40,6 +40,7 @@ position: absolute; top: 0; left: 0; + background-color: #b92b27; } .head::before, @@ -50,6 +51,14 @@ width: 20%; height: 30%; bottom: 10%; + background-color: #f5f5f5; +} + +@media only screen and (max-width: 768px) { + .head::before, + .head::after { + background-color: #fff; + } } .head::before { @@ -67,6 +76,13 @@ top: 0; right: 25%; transform: skew(-15deg); + background-color: #f5f5f5; +} + +@media only screen and (max-width: 768px) { + .crack { + background-color: #fff; + } } .crack::before { @@ -76,6 +92,13 @@ left: 13.33px; border-right: 10px solid transparent; border-left: 5px solid transparent; + border-top: 25px solid #f5f5f5; +} + +@media only screen and (max-width: 768px) { + .crack::before { + border-top: 25px solid #fff; + } } .mouth { @@ -85,6 +108,7 @@ top: 75%; left: 30%; border-radius: 0 0 20px 20px; + background-color: #b92b27; } .mouth::before { @@ -95,6 +119,13 @@ border-radius: 50% / 30%; left: 42.5%; top: -25%; + background-color: #f5f5f5; +} + +@media only screen and (max-width: 768px) { + .mouth::before { + background-color: #fff; + } } .teeth { @@ -105,6 +136,13 @@ height: 50%; margin-bottom: -5%; border-radius: 50% / 20%; + background-color: #f5f5f5; +} + +@media only screen and (max-width: 768px) { + .teeth { + background-color: #fff; + } } .teeth::before, @@ -114,6 +152,14 @@ width: 100%; height: 100%; border-radius: 50% / 20%; + background-color: #f5f5f5; +} + +@media only screen and (max-width: 768px) { + .teeth::before, + .teeth::after { + background-color: #fff; + } } .teeth::before {