feat: show active player

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;

src/Calendar.tsx

@@ -89,7 +89,7 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       const date = new Date(0);
       date.setDate(i + 5);
       days.push(
-        <div key={"weekday_" + i} className="empty">
+        <div key={"weekday_" + i} className="weekday">
           {date.toLocaleString("default", {
             weekday: "short",
           })}
@@ -111,7 +111,12 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       days.push(
         <div
           key={date.getDate()}
-          className="day"
+          className={
+            "day" +
+            (date.toDateString() === selectedDate.toDateString()
+              ? " selected-day"
+              : "")
+          }
           onClick={() => handleDayClick(date)}
         >
           <div