feat(hotel): add dark mode support to /hotel listing page (#383)

[Rufai-Ahmed]

What this does

Adds dark/light mode support to the /hotel listing page so it follows the global theme toggle, consistent with the rest of the dashboard.

Previously the listing page and its child components used hardcoded light colors and ignored the theme, so switching the toggle in the header had no visible effect on this page.

Changes

Added dark: variants across the listing page and its components, following the existing dashboard convention (Tailwind darkMode: "class" with next-themes):

• src/app/hotel/page.tsx
• src/components/hotel/HotelHeader.tsx
• src/components/hotel/FilterSidebar.tsx
• src/components/hotel/BedroomTabs.tsx
• src/components/hotel/ApartmentCard.tsx
• src/components/hotel/AmenityIcons.tsx

Notes

• Light mode is unchanged. Every existing light color is preserved and only paired with a dark: sibling, so there is no regression in the default theme.
• Brand colors (orange accent, price green, favorite red) are intentionally kept in both themes.
• Surfaces, borders, and secondary text use a consistent dark palette for readable contrast.

Closes #383

Summary by CodeRabbit

• New Features
  • Dark mode support now available across the hotel interface, including navigation headers, filter sidebars, apartment listings, amenity displays, and bedroom selection tabs for comfortable browsing in low-light conditions.

[coderabbitai]

Warning

Review limit reached

@Rufai-Ahmed, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 51 minutes and 24 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f8e6ed88-dde2-452a-be9c-fc63f30ac332

📥 Commits

Reviewing files that changed from the base of the PR and between ac45f26 and 2a25113.

📒 Files selected for processing (6)

• src/app/hotel/page.tsx
• src/components/hotel/AmenityIcons.tsx
• src/components/hotel/ApartmentCard.tsx
• src/components/hotel/BedroomTabs.tsx
• src/components/hotel/FilterSidebar.tsx
• src/components/hotel/HotelHeader.tsx

📝 Walkthrough

Walkthrough

Dark mode Tailwind dark: variant classes are added to the hotel listing page (page.tsx) and five child components (HotelHeader, FilterSidebar, ApartmentCard, BedroomTabs, AmenityIcons). No component logic, props, state, or behavior is changed; only className strings are extended.

Changes

Hotel listing page dark mode

Layer / File(s)	Summary
Page container and listing header src/app/hotel/page.tsx	Top-level container gains dark:bg and dark:text classes; listing h1, availability p, and sort-by wrapper gain dark text color classes.
HotelHeader dark mode src/components/hotel/HotelHeader.tsx	Header container, logo text, search/rent bar, notification bell and badge, username label, and user avatar all receive dark: border/background/text variants.
FilterSidebar dark mode src/components/hotel/FilterSidebar.tsx	CheckboxRow inputs/labels, sidebar container, section headings, dividers, price-range bar segments and track, and Location heading all receive dark mode class variants.
ApartmentCard, BedroomTabs, AmenityIcons dark mode src/components/hotel/ApartmentCard.tsx, src/components/hotel/BedroomTabs.tsx, src/components/hotel/AmenityIcons.tsx	Card button, per-month label, apartment title, and address gain dark variants; tab button selected/unselected branches add dark border/background/text; amenity icon pill span adds dark background and text classes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• safetrustcr/frontend-SafeTrust#307: Modifies the same hotel components (FilterSidebar.tsx, ApartmentCard.tsx, BedroomTabs.tsx) and overlaps directly with the files receiving dark mode classes in this PR.

Suggested reviewers

• sotoJ24

Poem

🐇 Hop hop, the hotel glows at night,
Dark backgrounds bloom where white once shone bright.
No logic broken, no props rearranged—
Just dark: classes carefully exchanged.
The moon-lit cards now match the sky,
A theme-aware page for every eye! 🌙

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description covers what was done and why, lists all modified files, and explains design decisions. However, it does not follow the repository's required template structure with sections like 'Testing' and 'Related Issue' links.	Consider restructuring the description to match the repository template: add a 'Testing' section with evidence (e.g., Loom videos) and ensure the 'Related Issue' section explicitly links #383.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding dark mode support to the hotel listing page, matching the scope of the PR.
Linked Issues check	✅ Passed	The PR successfully addresses all acceptance criteria from issue #383: dark mode toggle now works on the /hotel page, hardcoded colors are replaced with Tailwind dark variants, light mode is unchanged, and no behavioral regressions are introduced.
Out of Scope Changes check	✅ Passed	All changes are scoped to dark mode styling updates across the six hotel components specified in issue #383. No unrelated or out-of-scope modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[sotoJ24]

well done

[sotoJ24]

Dear @Rufai-Ahmed, please update you're branch to merge, everything else, amazing job

[sotoJ24]

Dear @Rufai-Ahmed, please update you're branch to merge, everything else, amazing job

Dear @Rufai-Ahmed, please update you're branch

[Rufai-Ahmed]

Okay, will do that

…

On Sat, 4 Jul 2026 at 01:52, Josué Soto Herrera ***@***.***> wrote: *sotoJ24* left a comment (safetrustcr/frontend-SafeTrust#385) <#385 (comment)> Dear @Rufai-Ahmed <https://github.com/Rufai-Ahmed>, please update you're branch to merge, everything else, amazing job Dear @Rufai-Ahmed <https://github.com/Rufai-Ahmed>, please update you're branch — Reply to this email directly, view it on GitHub <#385?email_source=notifications&email_token=BCOAN44WDYXQOHUPXG6ONB35DBIMLA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIOBYGAYDMNBZGEYKM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLDGN5XXIZLSL5RWY2LDNM#issuecomment-4880064910>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BCOAN4Y5DDOSROZFADVU4J35DBIMLAVCNFSNUABFKJSXA33TNF2G64TZHM4DONJTHA4TSOJWHNEXG43VMU5TINZTGAZTMNJZGIY2C5QC> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/BCOAN47JLDTSF4BSZBSIRMT5DBIMLA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIOBYGAYDMNBZGEYKM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJKTGN5XXIZLSL5UW64Y> and Android <https://github.com/notifications/mobile/android/BCOAN45EFO6HJAYW4VWZRFD5DBIMLA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIOBYGAYDMNBZGEYKM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLTGN5XXIZLSL5QW4ZDSN5UWI>. Download it today! You are receiving this because you were mentioned.Message ID: ***@***.***>

[sotoJ24]

Okay, will do that

Thanks, whatever you need, please let me know

[sotoJ24]

Dear @Rufai-Ahmed , please if can could you please submit the change, otherwise for rules of the project the issue will unassigned

best

[sotoJ24]

Dear @Rufai-Ahmed, the following issue is closed by:

#387