diff --git a/src/App.css b/src/App.css index e4d3120..5a674bb 100644 --- a/src/App.css +++ b/src/App.css @@ -499,7 +499,7 @@ button { color: black; background-color: #36c4; border: 1px solid black; - border-radius: 1.4em; + border-radius: 1.5em; margin: 4px; padding: 0.2em 0.5em; @@ -647,7 +647,7 @@ button { .calendar-container { position: relative; - margin: auto; + margin: 20px auto; } .month-navigation { @@ -655,7 +655,8 @@ button { align-items: center; justify-content: space-between; padding: 8px; - border-bottom: 1px solid #ddd; + border-top: 2px solid grey; + border-bottom: 2px solid grey; } .month-navigation button { @@ -682,6 +683,15 @@ button { cursor: pointer; } +.selected-day { + border: 4px solid grey; +} + +.weekday { + border-bottom: 3px solid black; + margin: 0 1em; +} + .day-circle { text-align: center; border-radius: 1.5em; diff --git a/src/Calendar.tsx b/src/Calendar.tsx index 31d21d8..5791788 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -89,7 +89,7 @@ const Calendar = ({ playerId }: { playerId: number }) => { const date = new Date(0); date.setDate(i + 5); days.push( -
+
{date.toLocaleString("default", { weekday: "short", })} @@ -111,7 +111,12 @@ const Calendar = ({ playerId }: { playerId: number }) => { days.push(
handleDayClick(date)} >