fix: ordinal suffix in date and background color

[OtavioStasiak]

Proposed changes

Adds the ordinal day to the message date separator ("August 11th, 2026"), applied only in locales that use it, matching web, where date-fns PPP carries the ordinal in English while dayjs' LL never does. Also restyles the date
into a rounded pill using the secondary button tokens, following the web layout.

Issue(s)

https://rocketchat.atlassian.net/browse/NATIVE-1489

How to test or reproduce

• open the app;
• Go to a room with old message;
• the message separator must be with ordinal suffix and background color matching the web;

Screenshots

Light

Before	After

Dark

Before	After

Black

Before	After

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Added localized long-date formatting for message timestamps.
  • English dates now display ordinal days, while other languages use localized date formats.

• Style

  • Updated dated message separators with secondary background and font colors.
  • Added padding, rounded corners, and consistent light divider lines for improved readability.

[coderabbitai]

Walkthrough

The change adds localized long-date formatting and updates message separators with themed colors, padded labels, and rounded corners.

Changes

Date separator formatting

Layer / File(s)	Summary
Long-date formatting app/lib/dayjs/index.ts	The Day.js advanced-format plugin is enabled. formatLongDate returns ordinal English dates or localized LL dates.
Separator rendering app/containers/MessageSeparator.tsx	Message separators use formatLongDate. Dated separators render styled labels with themed colors, padding, and rounded corners.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: type: bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely identifies the two main changes: ordinal date suffixes and message separator background color.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (2)

• NATIVE-1489: Request failed with status code 401
• AD1DCE48-2735: Request failed with status code 401

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}