starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-10-31 00:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make other months' days in the calendar readable

Browse Source
This commit is contained in:
Linus Rath
2026-10-29 17:53:53 +01:00
parent 0026abba40
commit 76ad807477
3 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/calendar/__tests__/mini-calendar.test.tsx
+7
View File
@@ -85,6 +85,13 @@ describe('MiniCalendar', () => {
expect(document.activeElement).toBe(day(/October 5, 2026/));
});
it("draws other months' days in a colour that keeps text contrast, not a faded one", () => {
render(<Harness />);
const circle = day(/September 28, 2026/).firstElementChild!;
expect(circle.className).toContain('text-muted-foreground');
expect(circle.className).not.toMatch(/text-muted-foreground\/\d+/);
});
it('tells which month is selected in the month picker', () => {
render(<Harness />);
fireEvent.click(screen.getByRole('button', { name: /October 2026/ }));
components/calendar/calendar-month-view.tsx
+4 -2
View File
@@ -433,7 +433,7 @@ export function CalendarMonthView({
>
<div className="flex items-center justify-center gap-1 mb-0.5">
{firstOfMonth && (
<span className={cn("text-[10px] font-medium", inMonth ? "text-muted-foreground" : "text-muted-foreground/60")}>
<span className="text-[10px] font-medium text-muted-foreground">
{t(`months.${monthLabelKeys[getMonth(day)]}`)}
</span>
)}
@@ -456,7 +456,9 @@ export function CalendarMonthView({
isMobile ? "w-7 h-7 text-xs" : "w-6 h-6 text-xs",
today && "bg-primary text-primary-foreground font-bold",
selected && !today && "bg-primary/15 text-primary font-bold",
!inMonth && !selected && !today && "text-muted-foreground/50",
// Readable at 4.5:1 like any text; the muted colour
// still sets other months apart.
!inMonth && !selected && !today && "text-muted-foreground",
inMonth && !selected && !today && "font-medium",
!today && !isMobile && "hover:bg-muted"
)}
components/calendar/mini-calendar.tsx
+5 -3
View File
@@ -252,7 +252,7 @@ export function MiniCalendar({
{showWeekNumbers && (
<th
scope="row"
className="w-5 p-0 text-center text-[9px] text-muted-foreground/60 font-medium"
className="w-5 p-0 text-center text-[9px] text-muted-foreground font-medium"
>
<span aria-hidden="true">{weekNumberOf(week[0])}</span>
<span className="sr-only">{t("mini_week_number", { week: weekNumberOf(week[0]) })}</span>
@@ -281,7 +281,9 @@ export function MiniCalendar({
<span
className={cn(
"relative flex items-center justify-center w-7 h-7 rounded-full transition-colors",
!inMonth && "text-muted-foreground/40",
// Other months' days in the muted text colour, which
// still reads at 4.5:1 (a faded one did not).
!inMonth && "text-muted-foreground",
// Today is the filled circle; the selected day is tinted.
today && "bg-primary text-primary-foreground font-semibold",
selected && !today && "bg-primary/15 text-primary font-semibold",
@@ -350,7 +352,7 @@ export function MiniCalendar({
"py-2 text-xs rounded-md transition-colors",
isSelected && "bg-primary text-primary-foreground",
!isSelected && isCurrentYear && "font-bold text-primary",
!isSelected && !isCurrentYear && !inDecade && "text-muted-foreground/40",
!isSelected && !isCurrentYear && !inDecade && "text-muted-foreground",
!isSelected && !isCurrentYear && "hover:bg-muted"
)}
>