Style: Frontend for Smart Room Booking & Clash Detection #234
Description
Current Style Issue
Problem: The new Room Booking page works, but the interface feels dense and hard to scan. Users can miss important details like clash warnings, booking status, and action buttons because many controls are shown together with similar visual weight.
Location: Room Booking page and related dashboard navigation.
Proposed Style Changes
- Increasing spacing between major sections Like Create Room, New Booking Request, Availability, Booking Requests.
- Using clearer section headers and card grouping.
- Making clash warnings more prominent with stronger contrast and icon support.
Technical Notes:
- Use existing Tailwind utility classes and project styling patterns.
- Update class names in React components without changing API contracts.
- Keep responsive behavior via existing breakpoint classes.
Alternatives Considered
- Alternative A: Keep the current layout and only adjust colors. This is less ideal because spacing and hierarchy issues would remain.
- Alternative B: Build a fully custom design system for this page. This is not ideal for now because it adds high implementation cost and inconsistency risk.
Mockups & Visual References
- Attach a Figma/Sketch link or a screenshot
- Link to a similar UI in another application for inspiration
- Create a simple before/after comparison image
Impact on UI/UX
- Target Users: Desktop and mobile users with admin/coordinator roles.
- Value: Better readability, faster decision-making, cleaner navigation, and a more professional look.
- Accessibility: Improved contrast for warning/status messages, clearer button labels, and better readability for low vision users.
Style & Component Consistency
- Colors: Uses existing palette direction with improved contrast for status and warning states.
- Typography: Aligns with current text sizing and weight patterns used in dashboard pages.
- Spacing: Follows current spacing conventions with slightly larger section gaps for clarity.
- Components: Remains consistent with existing React dashboard card and table structure.
Implementation Details
- Complexity: Medium
- Files to Modify:
RoomBooking.jsx ,
roomBookingPage.jsx ,
dashboardComponents.js ,
navbarConfig.js,
AdminRoutes.js, - Dependencies: No new libraries.
- Breaking Changes: No expected breaking changes; style-only improvements on existing functionality
Additional Context
- Technical Constraints: This must stay compatible with current Tailwind setup and existing responsive layout behavior.