52 lines
2.7 KiB
Markdown
52 lines
2.7 KiB
Markdown
# Plan: Shift Calendar Cell Layout and Readability Enhancements
|
|
|
|
## Overview
|
|
The user reported that the text in the Monthly Shift Calendar cells is too small to read, especially the shift times. The objective is to optimize the styling, spacing, and typography of the shift calendar cells inside the React frontend to make the layout clean, readable, and professional.
|
|
|
|
## Project Type
|
|
WEB (React + Tailwind CSS frontend modification)
|
|
|
|
## Success Criteria
|
|
- Shift name and shift time font sizes are increased for clear readability.
|
|
- Cell badge height and padding are adjusted so the larger text fits without overlapping or clipping.
|
|
- The shift calendar grid maintains its alignment, horizontal scrollability, and aesthetics across screen sizes.
|
|
- No purple or violet color schemes are introduced (adhering to styling guidelines).
|
|
|
|
## Tech Stack
|
|
- **React & Inertia.js**: Frontend framework.
|
|
- **Tailwind CSS**: Styling utility classes.
|
|
|
|
## File Structure
|
|
- `resources/js/pages/hr/shifts/calendar.tsx` (Target component containing the calendar grid and cell rendering)
|
|
|
|
## Task Breakdown
|
|
|
|
### Task 1: Adjust Cell Badge Layout & Dimensions
|
|
- **Agent**: `frontend-specialist`
|
|
- **Skill**: `frontend-design`, `react-best-practices`
|
|
- **Priority**: P1
|
|
- **Dependencies**: None
|
|
- **INPUT**: The badge container `div` styling inside the `dates.map` render block of `calendar.tsx` (around lines 268-278).
|
|
- **OUTPUT**:
|
|
- Update cell badge height from `h-10` (40px) to `h-12` (48px) or `h-13` (52px) to provide more vertical space.
|
|
- Increase font size from `text-[9px]` to `text-[11px]` (or `text-xs`).
|
|
- Align text elements vertically with appropriate line-height (`leading-normal` or `leading-tight`).
|
|
- **VERIFY**: Check that the shift labels (`OPS`, `RD`, etc.) render in the new larger font size and are vertically centered.
|
|
|
|
### Task 2: Enhance Time Label Readability & Formatting
|
|
- **Agent**: `frontend-specialist`
|
|
- **Skill**: `frontend-design`
|
|
- **Priority**: P1
|
|
- **Dependencies**: Task 1
|
|
- **INPUT**: The shift time `span` rendering within the badge (around lines 274-276).
|
|
- **OUTPUT**:
|
|
- Increase the time font size from `text-[7px]` to `text-[9.5px]` or `text-[10px]`.
|
|
- Format the time string dynamically (e.g., trim leading zeroes from `03:30PM` to `3:30 PM`) for a cleaner look.
|
|
- **VERIFY**: Check that times are legible, properly aligned, and styled with high-contrast text colors relative to the badge background.
|
|
|
|
## Phase X: Verification Checklist
|
|
- [ ] Lint: Run `npm run lint` or `npx eslint` to ensure no syntax/type errors.
|
|
- [ ] Build: Run `npm run build` on local machine to check compilation success.
|
|
- [ ] Visual Audit: Verify the table cells display correctly in light and dark modes.
|
|
- [ ] Accessibility Audit: Ensure text meets color contrast standards.
|