Upgrade React to v19 and migrate to createRoot API

[devin-ai-integration]

Summary

Upgrades all React-related packages to their latest versions, migrates from the legacy ReactDOM.render() API to the new createRoot API, adds working light mode, and changes wrong letter colors to red.

Package upgrades:

Package	Before	After
react	17.0.2	19.2.5
react-dom	17.0.2	19.2.5
@testing-library/react	12.1.4	16.3.2
@testing-library/jest-dom	5.16.3	6.9.1
@testing-library/user-event	13.5.0	14.6.1
react-icons	4.3.1	5.6.0
react-transition-group	4.4.2	4.4.5
react-countdown	2.3.2	2.3.6

Code changes:

• src/index.js: Migrated from ReactDOM.render() to ReactDOM.createRoot().render()
• src/components/Modal/Modal.jsx: Added nodeRef to CSSTransition for React 19 compatibility
• src/components/Alert/Alert.jsx: Added nodeRef to CSSTransition for React 19 compatibility
• src/App.module.scss: Fixed light mode (body text now uses --color-text-primary instead of hardcoded #fff), changed --color-absent to red (#d32f2f)
• src/App.test.jsx: Fixed pre-existing broken test

Verification:

• Dev server compiles and runs successfully
• All tests pass
• Prettier formatting check passes
• No peer dependency conflicts

Review & Testing Checklist for Human

• Verify the app loads and the game is playable
• Toggle light mode in Settings and verify text/elements are visible
• Submit a wrong guess and verify absent letters show in red
• Open modals and verify fade transitions work correctly
• Trigger an alert and verify the fadeIn transition works

Notes

• Light mode was partially implemented but broken — body had hardcoded color: #fff making text invisible on white background. Fixed to use the theme variable.
• Wrong letter color changed from dark blue-gray (#405069) to red (#d32f2f).
• findDOMNode removed in React 19 — added nodeRef to CSSTransition in Modal and Alert.
• All packages installed cleanly without --legacy-peer-deps.

Link to Devin session: https://app.devin.ai/sessions/1828fca72be74612be7fc102b5db5095
Requested by: @shahmir-masood

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

[devin-ai-integration]

🤖 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 1 potential issue.

View 3 additional findings in Devin Review.

[devin-ai-integration]

🔴 React 19 upgrade breaks CSSTransition: findDOMNode is removed but nodeRef is never passed

The PR upgrades react-dom to v19 where findDOMNode has been removed (verified: typeof ReactDOM.findDOMNode is undefined). However, react-transition-group v4.4.5 calls _reactDom.default.findDOMNode(this) inside CSSTransition whenever the nodeRef prop is not provided. Neither src/components/Modal/Modal.jsx:13 nor src/components/Alert/Alert.jsx:17 pass a nodeRef to CSSTransition, so any transition trigger (opening a modal, showing an alert) will throw a TypeError: _reactDom.default.findDOMNode is not a function at runtime, crashing the app.

Affected CSSTransition usages missing nodeRef

In src/components/Modal/Modal.jsx:13:

<CSSTransition in={isOpen} timeout={300} classNames={'fade'} unmountOnExit>

In src/components/Alert/Alert.jsx:17-22:

<CSSTransition in={isVisible} timeout={300} classNames={'fadeIn'} unmountOnExit>

Both need a nodeRef prop pointing to a ref attached to their child DOM element.

Prompt for agents

The upgrade to react-dom 19 removes findDOMNode, which react-transition-group v4.4.5 relies on when nodeRef is not provided. Two components need to be updated to pass nodeRef:

1. src/components/Modal/Modal.jsx: Create a ref (e.g. using useRef) and pass it as nodeRef to CSSTransition on line 13. Attach this ref to the outermost child div (the modalContainer div on line 14).

2. src/components/Alert/Alert.jsx: Similarly, create a ref with useRef, pass it as nodeRef to CSSTransition on line 17, and attach it to the child span element on line 23.

Alternatively, consider upgrading to react-transition-group v5 which drops the findDOMNode dependency entirely, though it may require nodeRef to be mandatory.

---

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

[devin-ai-integration]

Good catch — fixed in eca4dca. Added nodeRef to both CSSTransition usages:

• Modal.jsx: created a nodeRef ref and attached it to the modalContainer div
• Alert.jsx: created a nodeRef ref and attached it to the span child element

This avoids the findDOMNode call that was removed in React 19.