style: Refine date header format to 'Weekday, DD.MMM.' with unified font size
This commit is contained in:
parent
bccadb34ce
commit
8069df9e07
@ -195,8 +195,7 @@ function getStartOfWeek(date: Date, startDay: number = 0): Date {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function formatDateHeader(date: Date, locale: string = 'en-US'): string {
|
function formatDateHeader(date: Date, locale: string = 'en-US'): string {
|
||||||
const datePart = date.toLocaleDateString(locale, { day: 'numeric', month: 'short' }); // e.g. 12. Feb.
|
return date.toLocaleDateString(locale, { day: 'numeric', month: 'short' }); // e.g. 12. Feb.
|
||||||
return `| ${datePart}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDayName(date: Date, locale: string = 'en-US'): string {
|
function getDayName(date: Date, locale: string = 'en-US'): string {
|
||||||
@ -1632,11 +1631,10 @@ export default function WeeklyView() {
|
|||||||
>
|
>
|
||||||
{/* Day Header */}
|
{/* Day Header */}
|
||||||
<header className="weekly-day-header">
|
<header className="weekly-day-header">
|
||||||
<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: '8px', rowGap: '0' }}>
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
|
||||||
<h3 className={`weekly-day-name ${isSameDay(date, new Date()) ? 'is-today' : ''}`} style={{ marginBottom: 0 }}>
|
<h3 className={`weekly-day-name ${isSameDay(date, new Date()) ? 'is-today' : ''}`} style={{ marginBottom: 0 }}>
|
||||||
{getDayName(date, language)}
|
{getDayName(date, language)}, <span style={{ fontWeight: 400 }}>{formatDateHeader(date, language)}</span>
|
||||||
</h3>
|
</h3>
|
||||||
<div className="weekly-day-date" style={{ fontSize: '10px', fontWeight: 700, opacity: 0.6 }}>{formatDateHeader(date, language)}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user