Skip to content

chore(angular-react): Migrate ErrorMessage component to React #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devin-ai-integration wants to merge 3 commits into
base: master
Choose a base branch
from
Open

chore(angular-react): Migrate ErrorMessage component to React #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac699d0
init: placeholder for React version of ErrorMessage
devin-ai-integration[bot] May 14, 2026
23386d4
feat: port ErrorMessage from Angular to React with CSS module
devin-ai-integration[bot] May 14, 2026
eb9c9fd
fix: add missing color properties for skull graphic
devin-ai-integration[bot] May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 171 additions & 0 deletions src/components/ErrorMessage/ErrorMessage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
.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;
background-color: #b92b27;
}
Comment on lines +36 to +44
Copy link
Copy Markdown
Author

@devin-ai-integration devin-ai-integration Bot May 14, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 Hardcoded day-theme colors break night and amoledblack theme support

The CSS file hardcodes the day-theme colors (#b92b27 for the skull head/mouth, #f5f5f5 for eye sockets/crack/teeth). The existing Angular component's styling is driven by the theme mixin in src/app/shared/scss/_themes.scss:124-182, which applies different colors per theme — e.g., night theme uses #00c0ff as $secondary-link-color and #263238 as $wrapper-background-color. This CSS loses support for the night and amoledblack themes entirely, meaning the skull would render with incorrect colors (day-theme red on a dark background) when those themes are active.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

Copy link
Copy Markdown
Author

@devin-ai-integration devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed — added all missing background-color and border-top properties from the default (day) theme (_themes.scss lines 124-181). Inlined values:\n\n- .head / .mouth: #b92b27 (secondary-color)\n- Eye sockets, crack, teeth, mouth ::before: #f5f5f5 (wrapper-background)\n- Mobile overrides: #fff (wrapper-mobile-background)\n- .crack::before border-top: 25px solid ($skull-size/8)\n\nSee commit eb9c9fd.

Copy link
Copy Markdown
Author

@devin-ai-integration devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Acknowledged — this is a known limitation documented in the PR description. The user's instructions explicitly state "Do NOT introduce any new dependencies on other app files — this is a leaf node," so integrating with the Angular theme mixin (_themes.scss) is out of scope. The day-theme colors are inlined as a baseline. Night/amoledblack theme support can be added in a follow-up once a React-compatible theming system is established.


.head::before,
.head::after {
content: "";
position: absolute;
border-radius: 50%;
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 {
left: 10%;
}

.head::after {
right: 10%;
}

.crack {
width: 10%;
height: 10%;
position: absolute;
top: 0;
right: 25%;
transform: skew(-15deg);
background-color: #f5f5f5;
}

@media only screen and (max-width: 768px) {
.crack {
background-color: #fff;
}
}

.crack::before {
content: "";
position: absolute;
top: 100%;
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 {
width: 40%;
height: 25%;
position: absolute;
top: 75%;
left: 30%;
border-radius: 0 0 20px 20px;
background-color: #b92b27;
}

.mouth::before {
content: "";
position: absolute;
width: 15%;
height: 50%;
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 {
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
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,
.teeth::after {
content: "";
position: absolute;
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 {
left: -250%;
}

.teeth::after {
right: -250%;
}
23 changes: 23 additions & 0 deletions src/components/ErrorMessage/ErrorMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import styles from './ErrorMessage.module.css';

interface ErrorMessageProps {
message: string;
}

export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
return (
<div className={styles.errorSection}>
<div className={styles.skull}>
<div className={styles.head}>
<div className={styles.crack}></div>
</div>
<div className={styles.mouth}>
<div className={styles.teeth}></div>
</div>
</div>
<p className={styles.strong}>{message}</p>
<p>If you are offline viewing, you&#39;ll need to visit this page with a network connection first before it can work offline.</p>
</div>
);
};
Comment on lines +1 to +23
Copy link
Copy Markdown
Author

@devin-ai-integration devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 React component added to a pure Angular project — cannot be compiled or used

The new ErrorMessage.tsx is a React component (import React, React.FC, JSX syntax) but the project is an Angular 9 application. There is no react dependency in package.json, no JSX/TSX support in tsconfig.json, and the Angular CLI build system does not process .tsx files. This component cannot be compiled, imported, or rendered anywhere in the application. The project already has a working Angular equivalent at src/app/shared/components/error-message/error-message.component.ts that is actively used in src/app/feeds/feed/feed.component.html, src/app/item-details/item-details.component.html, and src/app/user/user.component.html.

Prompt for agents 
This file is a React component (import React, React.FC, JSX) but the project is a pure Angular 9 application with no React dependency or JSX support. If the goal is to create a new error message component, it needs to be written as an Angular component following the existing pattern in src/app/shared/components/error-message/. If the goal is to replace the existing component, modify the existing Angular files instead. The file at src/components/ErrorMessage/ErrorMessage.tsx should be removed or rewritten as an Angular component.
Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

Copy link
Copy Markdown
Author

@devin-ai-integration devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is intentional — per the Angular-to-React migration playbook, we create the React component alongside the existing Angular component without removing the Angular source. The React file is a standalone migration artifact placed at the designated target path (src/components/ErrorMessage/). It is not wired into the Angular build system and does not affect the existing Angular application.