From ac7f54451223e20a8e689df523bd9457cd53a416 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Mon, 20 Feb 2023 15:13:21 +0100
Subject: [PATCH] refactor: highlight today in calendar + monday is 1st day of
 week

---
 app/routes/time-entries/$timeEntryId.tsx | 36 ++++++++++++++++++++++++
 app/routes/time-entries/new.tsx          | 36 ++++++++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/app/routes/time-entries/$timeEntryId.tsx b/app/routes/time-entries/$timeEntryId.tsx
index e4ccbb7..d3e8cb9 100644
--- a/app/routes/time-entries/$timeEntryId.tsx
+++ b/app/routes/time-entries/$timeEntryId.tsx
@@ -326,6 +326,24 @@ export default function TimeEntryDetailsPage() {
                 newDate.setDate(date.getDate());
                 setStart(newDate);
               }}
+              firstDayOfWeek="monday"
+              renderDay={(date) => {
+                const day = date.getDate();
+                const today = new Date();
+
+                const isToday =
+                  date.getDate() === today.getDate() &&
+                  date.getMonth() === today.getMonth() &&
+                  date.getFullYear() === today.getFullYear();
+
+                return isToday ? (
+                  <Text component="div" weight="bold" underline>
+                    {day}
+                  </Text>
+                ) : (
+                  <Text component="div">{day}</Text>
+                );
+              }}
             />
             <TimeInput
               id="new-startTime-time"
@@ -390,6 +408,24 @@ export default function TimeEntryDetailsPage() {
                 newDate.setDate(date.getDate());
                 setEnd(newDate);
               }}
+              firstDayOfWeek="monday"
+              renderDay={(date) => {
+                const day = date.getDate();
+                const today = new Date();
+
+                const isToday =
+                  date.getDate() === today.getDate() &&
+                  date.getMonth() === today.getMonth() &&
+                  date.getFullYear() === today.getFullYear();
+
+                return isToday ? (
+                  <Text component="div" weight="bold" underline>
+                    {day}
+                  </Text>
+                ) : (
+                  <Text component="div">{day}</Text>
+                );
+              }}
             />
             <TimeInput
               id="new-endTime-time"
diff --git a/app/routes/time-entries/new.tsx b/app/routes/time-entries/new.tsx
index 4346a22..d2e079c 100644
--- a/app/routes/time-entries/new.tsx
+++ b/app/routes/time-entries/new.tsx
@@ -312,6 +312,7 @@ export default function NewTimeEntryPage() {
               locale="it"
               placeholder="Start date"
               label="Start date"
+              firstDayOfWeek="monday"
               aria-invalid={actionData?.errors?.startTime ? true : undefined}
               error={actionData?.errors?.startTime}
               errorProps={{ children: actionData?.errors?.startTime }}
@@ -324,6 +325,23 @@ export default function NewTimeEntryPage() {
                 newDate.setDate(date.getDate());
                 setStart(newDate);
               }}
+              renderDay={(date) => {
+                const day = date.getDate();
+                const today = new Date();
+
+                const isToday =
+                  date.getDate() === today.getDate() &&
+                  date.getMonth() === today.getMonth() &&
+                  date.getFullYear() === today.getFullYear();
+
+                return isToday ? (
+                  <Text component="div" weight="bold" underline>
+                    {day}
+                  </Text>
+                ) : (
+                  <Text component="div">{day}</Text>
+                );
+              }}
             />
             <TimeInput
               id="new-startTime-time"
@@ -371,6 +389,7 @@ export default function NewTimeEntryPage() {
               locale="it"
               placeholder="End date"
               label="End date"
+              firstDayOfWeek="monday"
               aria-invalid={actionData?.errors?.endTime ? true : undefined}
               error={actionData?.errors?.endTime}
               errorProps={{ children: actionData?.errors?.endTime }}
@@ -383,6 +402,23 @@ export default function NewTimeEntryPage() {
                 newDate.setDate(date.getDate());
                 setEnd(newDate);
               }}
+              renderDay={(date) => {
+                const day = date.getDate();
+                const today = new Date();
+
+                const isToday =
+                  date.getDate() === today.getDate() &&
+                  date.getMonth() === today.getMonth() &&
+                  date.getFullYear() === today.getFullYear();
+
+                return isToday ? (
+                  <Text component="div" weight="bold" underline>
+                    {day}
+                  </Text>
+                ) : (
+                  <Text component="div">{day}</Text>
+                );
+              }}
             />
             <TimeInput
               id="new-endTime-time"