RocketChat / RocketChat/Rocket.Chat
[Bug] Console warning "invalid color: transparent" on Home Page Header
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description:
The Home page header throws an invalid color: transparent error in the browser console. This occurs because the PageHeader component passes the string 'transparent' to the borderBlockEndColor prop, which is not a valid color token in the Fuselage design system.
Steps to reproduce:
- Log in as any user.
- Navigate to the Home page (
/home). - Open Developer Tools (
F12) -> Console tab. - Reload the page.
- Observe the red warning in the console.
Expected behavior:
The Home page should load without any console warnings regarding invalid color tokens. The border should simply not render if no color is specified (or if undefined is passed).
Actual behavior:
The console displays the following error:
invalid color: transparent Error
Server Setup Information:
- Version of Rocket.Chat Server: Latest
developbranch - License Type: Community
- Number of Users: 1 (Local Dev)
- Operating System: Linux (Arch)
- Deployment Method: Source (
yarn dsv) - Number of Running Instances: 1
- DB Replicaset Oplog: Enabled
- NodeJS Version: v22.16.0
- MongoDB Version: v8.2.4
Client Setup Information
- Desktop App or Browser Version: Chrome Latest
- Operating System: Linux (Arch)
Additional context
The issue stems from packages/ui-client/src/components/Page/PageHeader.tsx passing a raw CSS value ('transparent') instead of a valid Fuselage token or undefined.
Relevant logs:
invalid color: transparent Error
at http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:20761:49
at memoized (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:21600:25)
at http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:20722:30
at memoized (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:21600:25)
at toStyle.toStyle (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9909:34)
at extractStylingProps (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9943:9)
at useStylingProps (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9970:68)
at Box (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9532:76)
at renderWithHooks (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:64240:18)
at updateForwardRef (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:67999:20)
(anonymous) @ modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:20761
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/ui-client/src/components/Page/PageHeader.tsx and inspect the borderBlockEndColor value passed to the Fuselage component. Verify the Home page at /home in the browser console after the change; done means the invalid color warning no longer appears and the border behavior remains correct when no color is specified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100