UX: Change style of cards on hover

[samuelwei]

Type

• Bugfix
• Feature
• Documentation
• Refactoring (e.g. Style updates, Test implementation, etc.)
• Other (please describe):

Checklist

• [x] Code updated to current develop branch head
• [x] Passes CI checks
• [ ] Is a part of an issue
• [ ] Tests added for the bugfix or newly implemented feature, describe below why if not
• [x] Changelog is updated
• [ ] Documentation of code and features exists

Changes

• Changes hover style of button in room cards

Other information

Motivation: Improved visibility of buttons when hovering over the card. Previously, the background and button were the same when hovering, so users might not have recognized that this was a clickable element.

Before

After

Summary by CodeRabbit

• Changed
  • Updated hover styling for buttons in room cards to provide clearer visual feedback, consistent transitions, and adjusted colors for both light and dark modes.
• Documentation
  • Added an entry to the unreleased changelog documenting the room card button hover style update and referenced the related pull request.

[coderabbitai[bot]]

Walkthrough

Adds a .room-card CSS block with hover styles for nested action buttons (light and dark modes), updates RoomCard.vue to apply the new room-card and room-card-button classes, and records the UI change in CHANGELOG.md with PR reference #2577.

Changes

Cohort / File(s)	Summary
Changelog update CHANGELOG.md	Adds an Unreleased "Changed" entry documenting the room card button hover style and adds a reference for PR #2577.
Room card CSS resources/css/app/_room.css	Adds a .room-card rule with transition utilities and hover state targeting .room-card-button.p-button-secondary, defining border, background, and text colors for light and dark modes plus nested button hover transitions.
Room card template markup resources/js/components/RoomCard.vue	Adds room-card class to the root container and changes two action buttons to include room-card-button alongside existing classes; no behavioral or event changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Review focus: ensure class name changes align with CSS selectors and component markup.
• Check dark-mode selectors, color values, and transition utility usage for consistency.
• Confirm changelog formatting and PR reference #2577.

Suggested labels

frontend, UI, Complete - Waiting for review

Suggested reviewers

• Sabr1n4W
• achtadef

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: updating the hover style of cards, which directly matches the primary objective of improving button visibility on card hover.
Description check	✅ Passed	The description includes key sections (Type, Checklist, Changes, Motivation) and provides clear context with before/after screenshots. However, the issue reference and some template elements are incomplete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch ux-card-hover

---

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 and usage tips.}

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 96.75%. Comparing base (e3e9c8d) to head (ad261ce). :warning: Report is 20 commits behind head on develop.

Additional details and impacted files

@@            Coverage Diff             @@
##             develop    #2577   +/-   ##
==========================================
  Coverage      96.75%   96.75%           
  Complexity      1816     1816           
==========================================
  Files            434      434           
  Lines          12483    12483           
  Branches        2078     2078           
==========================================
  Hits           12078    12078           
  Misses           405      405           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[cypress[bot]]

PILOS    Run #2692

Run Properties:   Passed #2692  •  ad261ce9ad: UX: Change style of cards on hover

Project	PILOS
Branch Review	ux-card-hover
Run status	Passed #2692
Run duration	07m 34s
Commit	ad261ce9ad: UX: Change style of cards on hover
Committer	Samuel Weirich
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	608
View all changes introduced in this branch ↗︎