Skip to content

feat(frontend): add Today quick-jump disabled state and current-day highlight to CalendarView - #1688

Open
aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:feat/issue-1643-calendar-today-jump-highlight
Open

aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:feat/issue-1643-calendar-today-jump-highlight

Conversation

@aazminu

@aazminu aazminu commented Oct 19, 2026

Copy link
Copy Markdown

Description

Enhances CalendarView (frontend/src/components/dashboard/CalendarView.tsx) so the "Today" quick-jump button disables with subtle styling when already viewing the current month, and highlights the current calendar day cell with a distinct accent border ring (ring-2 ring-inset ring-accent), light/dark background tint, and a Today pill badge.

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🔧 Refactoring (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test addition or update

Related Issues

Closes #1643
Fixes #1643
/claim #1643

Changes Made

  • Computed isViewingCurrentMonth in frontend/src/components/dashboard/CalendarView.tsx to disable and subtly style the "Today" quick-jump button when already viewing the current system month/year, and highlight it with accent styling when browsing other months.
  • Added accessible aria-label="Previous month" and aria-label="Next month" attributes to the calendar navigation arrows.
  • Updated the current day cell (day.isToday) with data-testid="calendar-today-cell", aria-current="date", a distinct ring-2 ring-inset ring-accent border ring, light/dark mode contrast (bg-accent/10 dark:bg-accent/15), and a Today pill badge (data-testid="calendar-today-badge").
  • Added unit tests in frontend/src/components/dashboard/CalendarView.test.tsx.

Testing

Test Coverage

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing performed

Test Steps

  1. Run npx vitest run src/components/dashboard/CalendarView.test.tsx in frontend/ (4/4 tests pass).
  2. Run npx tsc --noEmit in frontend/ (0 errors).
  3. Run npx eslint src/components/dashboard/CalendarView.tsx src/components/dashboard/CalendarView.test.tsx in frontend/ (0 errors, 0 warnings).

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have checked for breaking changes and documented them if applicable

Additional Notes

Payout Details

  • USDT/USDC Receiving Wallet (EVM / ERC-20 / Polygon / Arbitrum / Optimism / Base / BSC): 0x9a51790aC01c54184bcFa067bC38f7F0E7C6F6B6

…ighlight to CalendarView

Disable and style the Today quick-jump button subtly when already viewing the
current month, highlight the current day cell with a distinct accent border
ring and background tint for both light and dark modes, and render a Today
pill badge on the current date cell.

Fixes LabsCrypt#1643

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Add "Today" quick-jump button and current-day highlight ring to CalendarView

1 participant