chore(angular-react): Migrate ErrorMessage component to React by devin-ai-integration[bot] · Pull Request #256 · COG-GTM/angular2-hn

devin-ai-integration · 2026-05-14T21:58:18Z

Summary

Migrates the Angular ErrorMessageComponent to a stateless React functional component.

Source (Angular):

src/app/shared/components/error-message/error-message.component.ts
src/app/shared/components/error-message/error-message.component.html
src/app/shared/components/error-message/error-message.component.scss

Target (React):

src/components/ErrorMessage/ErrorMessage.tsx — React functional component with typed message prop
src/components/ErrorMessage/ErrorMessage.module.css — CSS module with camelCase class names

Changes:

@Input() message: string → message prop via ErrorMessageProps interface
Empty ngOnInit() → no hooks needed (stateless component)
SCSS converted to CSS module with all variables inlined ($skull-size = 200px, $mobile-only = only screen and (max-width: 768px))
Angular template directives ({{ message }}) → JSX interpolation ({message})
All skull color properties from the default theme (_themes.scss) are inlined:
- .head / .mouth: #b92b27 (secondary-color)
- Eye sockets, crack, teeth: #f5f5f5 (wrapper-background) with #fff mobile overrides
- .crack::before border-top: 25px solid ($skull-size / 8)
No new dependencies introduced — this is a leaf node component
Original Angular files are not removed per playbook rules

Review & Testing Checklist for Human

Verify the skull CSS illustration renders identically to the Angular version (pseudo-elements ::before/::after for eyes, crack, teeth with correct colors)
Verify the message prop displays correctly in bold
Verify responsive layout at ≤768px viewport width — mobile breakpoint changes background colors from #f5f5f5 to #fff

Notes

The Angular component had no outputs, services, or meaningful lifecycle logic — this is a pure 1:1 presentational migration.
Colors are inlined from the default (day) theme. Night and AMOLED themes are not included since this is a standalone React component without access to the Angular theme mixin system.

Link to Devin session: https://app.devin.ai/sessions/d55b1d0a059144ce9139b3b5e590d06d
Requested by: @charityquinn-cognition

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>

@input

- 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 <charity.quinn@cognition.ai>

devin-ai-integration · 2026-05-14T21:58:20Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment and CI monitoring

devin-ai-integration

Devin Review found 2 potential issues.

View 3 additional findings in Devin Review.

devin-ai-integration · 2026-05-14T22:01:41Z

+.head {
+  width: 100%;
+  height: 75%;
+  border-radius: 15% / 20%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}


🔴 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.

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

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.

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.

devin-ai-integration · 2026-05-14T22:01:42Z

+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>
+  );
+};


🔴 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.

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

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.

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 <charity.quinn@cognition.ai>

devin-ai-integration Bot and others added 2 commits May 14, 2026 21:57

init: placeholder for React version of ErrorMessage

ac699d0

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>

devin-ai-integration Bot assigned charityquinn-cognition May 14, 2026

devin-ai-integration Bot commented May 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

chore(angular-react): Migrate ErrorMessage component to React#256
devin-ai-integration[bot] wants to merge 3 commits into
masterfrom
devin/1778795852-migrate-error-message-component

devin-ai-integration Bot commented May 14, 2026 •

edited

Loading

Uh oh!

devin-ai-integration Bot commented May 14, 2026

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

devin-ai-integration Bot May 14, 2026 •

edited

Loading

Uh oh!

devin-ai-integration Bot May 14, 2026

Uh oh!

devin-ai-integration Bot May 14, 2026

Uh oh!

devin-ai-integration Bot May 14, 2026

Uh oh!

devin-ai-integration Bot May 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

devin-ai-integration Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Review & Testing Checklist for Human

Notes

Devin Review

Uh oh!

devin-ai-integration Bot commented May 14, 2026

🤖 Devin AI Engineer

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot May 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

devin-ai-integration Bot commented May 14, 2026 •

edited

Loading

devin-ai-integration Bot May 14, 2026 •

edited

Loading