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>
   );
 };

frontend/src/TeamPanel.tsx

@@ -70,29 +70,21 @@ const TeamPanel = () => {
       (team) => team.id == teams?.activeTeam
     )[0];
     return (
-      <div className="team-panel">
-        <h1>{activeTeam.name}</h1>
-        <div>
-          <input type="text" value={activeTeam.location || ""} disabled />
-          <br />
-          <input type="text" value={activeTeam.country || ""} disabled />
-          <hr style={{ width: "100%" }} />
-
-          <h2>players</h2>
+      <section className="section">
+        <h1 className="title">{activeTeam.name}</h1>
+        <h2 className="subtitle">
+          {activeTeam.location}, {activeTeam.country}
+        </h2>
+        <div className="box">
+          <h2 className="title is-4">Players</h2>
           {players ? (
-            <div
-              style={{
-                display: "flex",
-                flexWrap: "wrap",
-                justifyContent: "center",
-              }}
-            >
+            <div className="buttons">
               {players.map((p) => (
                 <button
                   className={
-                    "team-player " +
+                    "button is-primary is-light " +
                     p.gender +
-                    (p.id === player.id ? " active-player" : "")
+                    (p.id === player.id ? " is-focused is-active" : "")
                   }
                   key={p.id}
                   onClick={() => {
@@ -104,7 +96,7 @@ const TeamPanel = () => {
                 </button>
               ))}
               <button
-                className="team-player new-player"
+                className="button is-success is-light new-player"
                 key="add-player"
                 onClick={() => {
                   setPlayer(newPlayerTemplate);
@@ -117,12 +109,14 @@ const TeamPanel = () => {
           ) : (
             <span className="loader" />
           )}
-          <hr style={{ width: "100%" }} />
+        </div>
 
-          <form className="new-player-inputs" onSubmit={handleSubmit}>
-            <div>
-              <label>name</label>
+        <form className="container block" onSubmit={handleSubmit}>
+          <div className="field">
+            <label className="label">name</label>
+            <div className="control">
               <input
+                className="input"
                 type="text"
                 required
                 value={player.display_name}
@@ -138,9 +132,12 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div>
-              <label>username</label>
+          </div>
+          <div className="field">
+            <label className="label">username</label>
+            <div className="control">
               <input
+                className="input"
                 type="text"
                 required
                 disabled={player.id !== 0}
@@ -151,24 +148,31 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div>
-              <label>gender</label>
-              <select
-                name="gender"
-                value={player.gender}
-                onChange={(e) => {
-                  setPlayer({ ...player, gender: e.target.value as Gender });
-                  setError({ ok: true, message: "" });
-                }}
-              >
-                <option value={undefined}></option>
-                <option value="fmp">FMP</option>
-                <option value="mmp">MMP</option>
-              </select>
+          </div>
+          <div className="field">
+            <label className="label">gender</label>
+            <div className="control">
+              <div className="select">
+                <select
+                  name="gender"
+                  value={player.gender}
+                  onChange={(e) => {
+                    setPlayer({ ...player, gender: e.target.value as Gender });
+                    setError({ ok: true, message: "" });
+                  }}
+                >
+                  <option value={undefined}></option>
+                  <option value="fmp">FMP</option>
+                  <option value="mmp">MMP</option>
+                </select>
+              </div>
             </div>
-            <div>
-              <label>number (optional)</label>
+          </div>
+          <div className="field">
+            <label className="label">number (optional)</label>
+            <div className="control">
               <input
+                className="input"
                 type="text"
                 value={player.number || ""}
                 onChange={(e) => {
@@ -177,9 +181,12 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div>
-              <label>email (optional)</label>
+          </div>
+          <div className="field">
+            <label className="label">email (optional)</label>
+            <div className="control">
               <input
+                className="input"
                 type="email"
                 value={player.email || ""}
                 onChange={(e) => {
@@ -188,36 +195,33 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div style={{ margin: "auto" }}>
-              {error?.message && (
-                <span
-                  style={{
-                    color: error.ok ? "green" : "red",
-                  }}
-                >
-                  {error.message}
-                </span>
-              )}
-            </div>
-            <div style={{ margin: "auto" }}>
-              <button className="team-player new-player">
-                {player.id === 0 ? "add player" : "modify player"}
-              </button>
-            </div>
-            {player.id !== 0 && (
-              <div style={{ margin: "auto" }}>
-                <button
-                  className="team-player disable-player"
-                  onClick={handleDisable}
-                >
-                  remove player
-                </button>
-              </div>
+            {error?.message && (
+              <p className={"help" + (error.ok ? " is-success" : " is-danger")}>
+                {error.message}
+              </p>
             )}
-          </form>
-        </div>
+          </div>
+          <div className="field is-grouped">
+            <button
+              className={
+                "button is-light" +
+                (player.id === 0 ? " is-success" : " is-link")
+              }
+            >
+              {player.id === 0 ? "add player" : "modify player"}
+            </button>
+            {player.id !== 0 && (
+              <button
+                className="button is-danger is-light"
+                onClick={handleDisable}
+              >
+                remove player
+              </button>
+            )}
+          </div>
+        </form>
         <Calendar playerId={player.id} />
-      </div>
+      </section>
     );
   } else <span className="loader" />;
 };