restyle TeamPanel and Calendar

frontend/src/Calendar.tsx

@@ -55,16 +55,35 @@ const Calendar = ({ playerId }: { playerId: number }) => {
   // Render month navigation
   const renderMonthNavigation = () => {
     return (
-      <div className="month-navigation">
-        <button onClick={handlePrevMonth}>&lt;</button>
-        <span>
-          <button onClick={() => setSelectedDate(new Date())}>📅</button>
-          {selectedDate.toLocaleString("default", {
-            month: "long",
-            year: "numeric",
-          })}
-        </span>
-        <button onClick={handleNextMonth}>&gt;</button>
+      <div className="field has-addons">
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={handlePrevMonth}
+          >
+            &lt;
+          </button>
+        </p>
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={() => setSelectedDate(new Date())}
+          >
+            📅{" "}
+            {selectedDate.toLocaleString("default", {
+              month: "long",
+              year: "numeric",
+            })}
+          </button>
+        </p>
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={handleNextMonth}
+          >
+            &gt;
+          </button>
+        </p>
       </div>
     );
   };
@@ -89,11 +108,14 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       const date = new Date(0);
       date.setDate(i + 5);
       days.push(
-        <div key={"weekday_" + i} className="weekday">
+        <button
+          key={"weekday_" + i}
+          className="button is-size-7-mobile is-white is-static"
+        >
           {date.toLocaleString("default", {
             weekday: "narrow",
           })}
-        </div>
+        </button>
       );
     }
 
@@ -109,34 +131,34 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       const todaysEvents = getEventsForDay(date);
 
       days.push(
-        <div
+        <button
           key={date.getDate()}
           className={
-            "day" +
+            "cell button is-size-7-mobile" +
             (date.toDateString() === selectedDate.toDateString()
-              ? " selected-day"
+              ? " is-focused is-active is-primary is-light"
+              : " is-white") +
+            (date.toDateString() === new Date().toDateString()
+              ? " is-danger has-text-weight-extrabold"
+              : "") +
+            (todaysEvents ? " is-warning is-light" : "") +
+            (todaysEvents && playerId in todaysEvents
+              ? " is-hovered has-text-weight-semibold"
               : "")
           }
           onClick={() => handleDayClick(date)}
         >
-          <div
-            className={
-              "day-circle" +
-              (date.toDateString() === new Date().toDateString()
-                ? " today"
-                : "") +
-              (todaysEvents ? " has-event" : "") +
-              (todaysEvents && playerId in todaysEvents ? " active-player" : "")
-            }
-          >
-            {day}
-          </div>
-        </div>
+          {day}
+        </button>
       );
       day++;
     }
 
-    return <div className="calendar">{days}</div>;
+    return (
+      <div className="fixed-grid has-7-cols">
+        <div className="grid is-gap-0.5">{days}</div>
+      </div>
+    );
   };
 
   // Render events for the selected day
@@ -144,29 +166,38 @@ const Calendar = ({ playerId }: { playerId: number }) => {
     const eventsForDay = getEventsForDay(selectedDate);
     return (
       <div className="events">
-        {eventsForDay && (
-          <ul>
-            {Object.entries(eventsForDay).map(([id, sub]) => {
-              const name = players?.find((p) => p.id === Number(id));
-              return (
-                <li key={id}>
-                  {name !== undefined ? name.display_name : ""}:{" "}
-                  <span style={{ letterSpacing: 8 }}>{sub}</span>
-                </li>
-              );
-            })}
-          </ul>
-        )}
+        {eventsForDay &&
+          Object.entries(eventsForDay).map(([id, sub]) => {
+            const name = players?.find((p) => p.id === Number(id));
+            return (
+              <p className="field">
+                <div className="control" key={id}>
+                  <div className="tags are-medium has-addons">
+                    <span className="tag is-warning is-size-7-mobile">
+                      {name !== undefined ? name.display_name : ""}
+                    </span>
+                    <span className="tag is-primary is-light is-size-7-mobile">
+                      {sub}
+                    </span>
+                  </div>
+                </div>
+              </p>
+            );
+          })}
       </div>
     );
   };
 
   return (
-    <div className="calendar-container">
-      <h2>Latest Submissions</h2>
-      {renderMonthNavigation()}
-      {renderCalendar()}
-      {renderEvents()}
+    <div className="block is-size-7-mobile">
+      <h2 className="title is-4">Latest Submissions</h2>
+      <div className="columns is-6">
+        <div className="column" style={{ maxWidth: 600 }}>
+          {renderMonthNavigation()}
+          {renderCalendar()}
+        </div>
+        <div className="column is-narrow">{renderEvents()}</div>
+      </div>
     </div>
   );
 };