From 46950f18ea87593c697f5017a2a15026896a42eb Mon Sep 17 00:00:00 2001
From: Alec Li <smartspot2@gmail.com>
Date: Wed, 13 Mar 2024 21:28:28 -0700
Subject: [PATCH] Restyle matcher UI (#470)

---
 .../MentorSectionPreferences.tsx              |   8 +-
 .../coordinator/ConfigureStage.tsx            |  16 +-
 .../coordinator/CoordinatorMatcherForm.tsx    |   4 +-
 .../coordinator/CreateStage.tsx               | 239 ++++++++++++++----
 .../coordinator/EditStage.tsx                 |  18 +-
 .../coordinator/ReleaseStage.tsx              |  48 +++-
 csm_web/frontend/src/css/base/form.scss       |   9 +
 .../frontend/src/css/enrollment_matcher.scss  | 152 +++++------
 8 files changed, 327 insertions(+), 167 deletions(-)

diff --git a/csm_web/frontend/src/components/enrollment_automation/MentorSectionPreferences.tsx b/csm_web/frontend/src/components/enrollment_automation/MentorSectionPreferences.tsx
index 1f12033c..b2451ea9 100644
--- a/csm_web/frontend/src/components/enrollment_automation/MentorSectionPreferences.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/MentorSectionPreferences.tsx
@@ -188,10 +188,10 @@ export function MentorSectionPreferences({
             // multiple selected events
             <div className="matcher-sidebar-header">Multiple selected events</div>
           )}
-          <label>
+          <label className="matcher-pref-input-label">
             Preference:
             <input
-              className="matcher-input"
+              className="form-input light"
               type="number"
               key={event.id}
               defaultValue={event.preference}
@@ -236,7 +236,7 @@ export function MentorSectionPreferences({
           {profile.course} ({relation})
         </h2>
         {switchProfileEnabled && (
-          <button className="matcher-secondary-btn" onClick={switchProfile}>
+          <button className="secondary-btn" onClick={switchProfile}>
             Switch profile
           </button>
         )}
@@ -245,7 +245,7 @@ export function MentorSectionPreferences({
         <div className="mentor-sidebar-left">
           <div className="matcher-sidebar-left-top">{sidebarContents}</div>
           <div className="matcher-sidebar-left-bottom-row">
-            <button className="matcher-submit-btn" onClick={postPreferences}>
+            <button className="primary-btn" onClick={postPreferences}>
               Submit
             </button>
             <div className="matcher-submit-status-container">{statusContent}</div>
diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/ConfigureStage.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/ConfigureStage.tsx
index f8dbc759..e888b592 100644
--- a/csm_web/frontend/src/components/enrollment_automation/coordinator/ConfigureStage.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/coordinator/ConfigureStage.tsx
@@ -186,7 +186,7 @@ export const ConfigureStage = ({ profile, slots, recomputeStage }: ConfigureStag
     <div className="matcher-configure-sidebar-contents">
       <div className="matcher-configure-input-container">Click on a time slot to configure it.</div>
       <div className="matcher-configure-sidebar-buttons">
-        <button className="matcher-submit-btn" onClick={saveConfig}>
+        <button className="primary-btn" onClick={saveConfig}>
           Save
         </button>
         <div className="matcher-submit-status-container">{statusContent}</div>
@@ -208,7 +208,7 @@ export const ConfigureStage = ({ profile, slots, recomputeStage }: ConfigureStag
           <div key={`${slot.id}-${selectedEventIndices.length}-min`} className="matcher-configure-input-group">
             <span>Min</span>
             <input
-              className="matcher-configure-input"
+              className="form-input light matcher-configure-input"
               type="number"
               min={0}
               max={maxMentor}
@@ -221,7 +221,7 @@ export const ConfigureStage = ({ profile, slots, recomputeStage }: ConfigureStag
           <div key={`${slot.id}-${selectedEventIndices.length}-max`} className="matcher-configure-input-group">
             <span>Max</span>
             <input
-              className="matcher-configure-input"
+              className="form-input light matcher-configure-input"
               type="number"
               min={minMentor}
               defaultValue={maxMentor}
@@ -239,7 +239,7 @@ export const ConfigureStage = ({ profile, slots, recomputeStage }: ConfigureStag
         )}
         <div className="matcher-configure-sidebar-footer">Shift-click to select more slots.</div>
         <div className="matcher-configure-sidebar-buttons">
-          <button className="matcher-submit-btn" onClick={saveConfig}>
+          <button className="primary-btn" onClick={saveConfig}>
             Save
           </button>
           <div className="matcher-submit-status-container">{statusContent}</div>
@@ -254,7 +254,7 @@ export const ConfigureStage = ({ profile, slots, recomputeStage }: ConfigureStag
         <div className="coordinator-sidebar-left">
           <div className="matcher-sidebar-left-top">{sidebarContents}</div>
           <div className="matcher-sidebar-left-bottom">
-            <label className="matcher-submit-btn matcher-toggle-btn">
+            <label className="secondary-btn">
               <input ref={selectAllRef} type="checkbox" onChange={toggleSelectAll} />
               Select All
             </label>
@@ -268,12 +268,12 @@ export const ConfigureStage = ({ profile, slots, recomputeStage }: ConfigureStag
             getEventDetails={getEventDetails}
             eventCreationEnabled={false}
             limitScrolling={true}
-            brighterLinkedTimes={false}
+            brighterLinkedTimes={true}
           />
         </div>
       </div>
       <div className="matcher-body-footer">
-        <button className="matcher-secondary-btn" onClick={reopenForm}>
+        <button className="secondary-btn" onClick={reopenForm}>
           Reopen Form
         </button>
         {matcherError && (
@@ -282,7 +282,7 @@ export const ConfigureStage = ({ profile, slots, recomputeStage }: ConfigureStag
             <span className="matcher-configure-error-text">{matcherError}</span>
           </div>
         )}
-        <button className="matcher-submit-btn" onClick={runMatcher}>
+        <button className="primary-btn" onClick={runMatcher}>
           Run Matcher
         </button>
       </div>
diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/CoordinatorMatcherForm.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/CoordinatorMatcherForm.tsx
index 39688f54..802f8ced 100644
--- a/csm_web/frontend/src/components/enrollment_automation/coordinator/CoordinatorMatcherForm.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/coordinator/CoordinatorMatcherForm.tsx
@@ -66,7 +66,7 @@ export function CoordinatorMatcherForm({
         return {
           interval: Interval.fromDateTimes(parseTime(time.startTime), parseTime(time.endTime)),
           day: time.day,
-          isLinked: slot.times.length > 0
+          isLinked: slot.times.length > 1
         };
       });
       return {
@@ -159,7 +159,7 @@ export function CoordinatorMatcherForm({
           {profile.course} ({relation})
         </h2>
         {switchProfileEnabled && (
-          <button className="matcher-secondary-btn" onClick={switchProfile}>
+          <button className="secondary-btn" onClick={switchProfile}>
             Switch profile
           </button>
         )}
diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx
index fc22683e..2d0b74fd 100644
--- a/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/coordinator/CreateStage.tsx
@@ -5,6 +5,7 @@ import React, { createRef, useEffect, useState } from "react";
 import { formatInterval } from "../../../utils/datetime";
 import { useMatcherSlotsMutation } from "../../../utils/queries/matcher";
 import { Profile } from "../../../utils/types";
+import Modal from "../../Modal";
 import { Tooltip } from "../../Tooltip";
 import { Slot, Time } from "../EnrollmentAutomationTypes";
 import { Calendar } from "../calendar/Calendar";
@@ -60,7 +61,7 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
    */
   const [tileDetails, setTileDetails] = useState<TileDetails>({
     days: [],
-    daysLinked: true,
+    daysLinked: false,
     start: DateTime.invalid("initial value"),
     end: DateTime.invalid("initial value"),
     length: Duration.fromObject({ hours: 1 })
@@ -71,6 +72,8 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
    */
   const [edited, setEdited] = useState<boolean>(false);
 
+  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
+
   const matcherSlotsMutation = useMatcherSlotsMutation(profile.courseId);
 
   /**
@@ -265,7 +268,7 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
       setTileDetails({
         ...tileDetails,
         days: [],
-        daysLinked: true,
+        daysLinked: false,
         start: DateTime.invalid("initial value"),
         end: DateTime.invalid("initial value")
       });
@@ -431,6 +434,122 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
     );
   };
 
+  /**
+   * Confirm modal prior to submitting the slots.
+   */
+  let slotConfirmModal = null;
+  if (showConfirmModal) {
+    const linkedSlots = slots
+      .filter(slot => slot.times.some(time => time.isLinked))
+      .sort((a, b) => {
+        return (
+          Math.min(...a.times.map(time => DAYS.indexOf(time.day))) -
+          Math.min(...b.times.map(time => DAYS.indexOf(time.day)))
+        );
+      });
+    const unlinkedSlots = slots
+      .filter(slot => slot.times.every(time => !time.isLinked))
+      .sort((a, b) => {
+        let diff =
+          Math.min(...a.times.map(time => DAYS.indexOf(time.day))) -
+          Math.min(...b.times.map(time => DAYS.indexOf(time.day)));
+        if (diff != 0) return diff;
+
+        diff =
+          Math.min(...a.times.map(time => time.interval.start?.toUnixInteger() ?? 0)) -
+          Math.min(...b.times.map(time => time.interval.start?.toUnixInteger() ?? 0));
+        return diff;
+      });
+
+    if (slots.length > 0) {
+      const formattedLinkedSlots = linkedSlots.map((slot, slotIdx) => (
+        <li className="matcher-confirm-modal-list-item" key={slotIdx}>
+          {slot.times.map((time, timeIdx) => (
+            <React.Fragment key={timeIdx}>
+              <span>
+                {time.day} {formatInterval(time.interval)}
+              </span>
+              {timeIdx < slot.times.length - 1 && <br />}
+            </React.Fragment>
+          ))}
+        </li>
+      ));
+      const formattedUnlinkedSlots = unlinkedSlots.map((slot, slotIdx) => (
+        <li className="matcher-confirm-modal-list-item" key={slotIdx}>
+          {slot.times.map((time, timeIdx) => (
+            <React.Fragment key={timeIdx}>
+              <span>
+                {time.day} {formatInterval(time.interval)}
+              </span>
+              {timeIdx < slot.times.length - 1 && <br />}
+            </React.Fragment>
+          ))}
+        </li>
+      ));
+
+      slotConfirmModal = (
+        <Modal closeModal={() => setShowConfirmModal(false)}>
+          <h2 className="matcher-confirm-modal-header">
+            Submit {slots.length} slot{slots.length > 1 && "s"}?
+          </h2>
+          <h3>Linked Slots</h3>
+          {linkedSlots.length > 0 ? (
+            <ul className="matcher-confirm-modal-list">{formattedLinkedSlots}</ul>
+          ) : (
+            <p className="matcher-confirm-modal-empty-list-text">No linked slots.</p>
+          )}
+          <h3>Individual Slots</h3>
+          {unlinkedSlots.length > 0 ? (
+            <React.Fragment>
+              <ul className="matcher-confirm-modal-list">{formattedUnlinkedSlots}</ul>
+            </React.Fragment>
+          ) : (
+            <p className="matcher-confirm-modal-empty-list-text">No individual slots.</p>
+          )}
+          <div className="matcher-confirm-modal-buttons">
+            <button className="secondary-btn" onClick={() => setShowConfirmModal(false)}>
+              Cancel
+            </button>
+            <button
+              className="primary-btn"
+              onClick={() => {
+                setShowConfirmModal(false);
+                postSlots();
+              }}
+            >
+              Submit
+            </button>
+          </div>
+        </Modal>
+      );
+    } else {
+      // empty slots
+      slotConfirmModal = (
+        <Modal closeModal={() => setShowConfirmModal(false)}>
+          <h2 className="matcher-confirm-modal-header">Clear Slots?</h2>
+          <p>No slots to submit.</p>
+          <p>
+            <b>This will clear all existing slots from the database.</b>
+          </p>
+          <div className="matcher-confirm-modal-buttons">
+            <button className="secondary-btn" onClick={() => setShowConfirmModal(false)}>
+              Cancel
+            </button>
+            <button
+              className="danger-btn"
+              onClick={() => {
+                setShowConfirmModal(false);
+                postSlots();
+              }}
+            >
+              Clear slots
+            </button>
+          </div>
+        </Modal>
+      );
+    }
+  }
+
   let topContents = <div>Click and drag to create a new section slot, or click an existing slot to edit.</div>;
   if (creatingTiledEvents) {
     topContents = (
@@ -450,7 +569,7 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
               </form>
               <div className="matcher-tiling-link-day-container">
                 <label className="matcher-tiling-link-day-label">
-                  <input type="checkbox" defaultChecked onChange={editTiled_linked} />
+                  <input type="checkbox" onChange={editTiled_linked} />
                   Link days?
                 </label>
                 <div className="matcher-tooltip-container">
@@ -465,41 +584,49 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
 
             <div className="matcher-tiling-range-container">
               <div className="matcher-tiling-subheader">Range:</div>
-              <input
-                type="time"
-                ref={tileRefs.startTime}
-                defaultValue={tileDetails.start.isValid ? serializeTime(tileDetails.start) : ""}
-                step="900"
-                onChange={e => editTiled_interval("start", parseTime(e.target.value))}
-              />
-              &#8211;
-              <input
-                type="time"
-                ref={tileRefs.endTime}
-                defaultValue={tileDetails.end.isValid ? serializeTime(tileDetails.end) : ""}
-                step="900"
-                onChange={e => editTiled_interval("end", parseTime(e.target.value))}
-              />
+              <div className="matcher-tiling-range-input-container">
+                <input
+                  className="form-date light"
+                  type="time"
+                  ref={tileRefs.startTime}
+                  defaultValue={tileDetails.start.isValid ? serializeTime(tileDetails.start) : ""}
+                  step="900"
+                  onChange={e => editTiled_interval("start", parseTime(e.target.value))}
+                />
+                &#8211;
+                <input
+                  className="form-date light"
+                  type="time"
+                  ref={tileRefs.endTime}
+                  defaultValue={tileDetails.end.isValid ? serializeTime(tileDetails.end) : ""}
+                  step="900"
+                  onChange={e => editTiled_interval("end", parseTime(e.target.value))}
+                />
+              </div>
             </div>
             <div className="matcher-tiling-length-container">
               <div className="matcher-tiling-subheader">Length:</div>
-              <input
-                className="matcher-tiling-length-input"
-                type="number"
-                ref={tileRefs.length}
-                min={15}
-                step={5}
-                defaultValue={tileDetails.length.as("minutes")}
-                onChange={e => e.target.validity.valid && editTiled_length(parseInt(e.target.value))}
-              />
-              mins
+              <div className="matcher-tiling-length-input-container">
+                <input
+                  className="matcher-tiling-length-input form-input light"
+                  type="number"
+                  ref={tileRefs.length}
+                  min={15}
+                  step={5}
+                  defaultValue={tileDetails.length.as("minutes")}
+                  onChange={e => e.target.validity.valid && editTiled_length(parseInt(e.target.value))}
+                />
+                mins
+              </div>
             </div>
           </div>
         </div>
         <div className="matcher-sidebar-tiling-bottom">
-          <button className="matcher-secondary-btn" onClick={saveTiledEvents}>
-            Save
-          </button>
+          {curCreatedTimes.length > 0 && (
+            <button className="primary-btn" onClick={saveTiledEvents}>
+              Save
+            </button>
+          )}
         </div>
       </div>
     );
@@ -517,6 +644,7 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
                 </div>
                 <div className="matcher-created-time">
                   <select
+                    className="form-select light matcher-created-time-day-input"
                     defaultValue={time.day}
                     key={`day_${time_idx}/${selectedEventIndices}`}
                     onChange={e => editTime_day(time_idx, e.target.value)}
@@ -528,6 +656,7 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
                     ))}
                   </select>
                   <input
+                    className="form-date light"
                     type="time"
                     key={`start_${time_idx}/${selectedEventIndices}`}
                     defaultValue={serializeTime(time.interval.start!)}
@@ -536,6 +665,7 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
                   />
                   &#8211;
                   <input
+                    className="form-date light"
                     type="time"
                     key={`end_${time_idx}/${selectedEventIndices}`}
                     defaultValue={serializeTime(time.interval.end!)}
@@ -549,15 +679,15 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
         </div>
         <div className="matcher-sidebar-create-bottom">
           <div className="matcher-sidebar-create-bottom-row">
-            <button className="matcher-secondary-btn" onClick={saveEvent}>
-              Save
-            </button>
-            <button className="matcher-secondary-btn" onClick={cancelEvent}>
+            <button className="secondary-btn" onClick={cancelEvent}>
               Cancel
             </button>
+            <button className="primary-btn" onClick={saveEvent}>
+              Save
+            </button>
           </div>
           <div className="matcher-sidebar-create-bottom-row">
-            <button className="matcher-danger-btn" onClick={deleteEvent}>
+            <button className="danger-btn" onClick={deleteEvent}>
               Delete
             </button>
           </div>
@@ -592,13 +722,13 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
         <div className="matcher-sidebar-selected-bottom">
           {selectedEvents.length === 1 && (
             <div className="matcher-sidebar-selected-bottom-row">
-              <button className="matcher-secondary-btn" onClick={editSelectedEvent}>
+              <button className="secondary-btn" onClick={editSelectedEvent}>
                 Edit
               </button>
             </div>
           )}
           <div className="matcher-sidebar-selected-bottom-row">
-            <button className="matcher-danger-btn" onClick={deleteSelectedEvent}>
+            <button className="danger-btn" onClick={deleteSelectedEvent}>
               Delete
             </button>
           </div>
@@ -614,13 +744,10 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
         <div className="coordinator-sidebar-left">
           <div className="matcher-sidebar-left-top">{topContents}</div>
           <div className="matcher-sidebar-left-bottom">
-            <label className="matcher-submit-btn matcher-tiling-toggle matcher-toggle-btn">
+            <label className="secondary-btn">
               <input type="checkbox" onChange={toggleCreatingTiledEvents} ref={tileRefs.toggle} />
               Create tiled events
             </label>
-            <button className="matcher-submit-btn" onClick={postSlots}>
-              Submit
-            </button>
           </div>
         </div>
         <div className="coordinator-sidebar-right">
@@ -639,12 +766,32 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
       </div>
       <div className="matcher-body-footer-right">
         <div className="matcher-unsaved-changes-container">
-          {edited && <span className="matcher-unsaved-changes">You have unsaved changes!</span>}
+          {edited && curCreatedTimes.length === 0 && (
+            <button className="primary-btn" onClick={() => setShowConfirmModal(true)}>
+              Submit
+            </button>
+          )}
         </div>
-        <button className="matcher-submit-btn" onClick={nextStage} disabled={edited}>
-          Continue
-        </button>
+        {edited || curCreatedTimes.length > 0 ? (
+          <div className="matcher-tooltip-container">
+            <Tooltip
+              placement="top"
+              source={
+                <button className="primary-btn" disabled={true}>
+                  Continue
+                </button>
+              }
+            >
+              <div className="matcher-tiling-tooltip-body">You have unsaved changes!</div>
+            </Tooltip>
+          </div>
+        ) : (
+          <button className="primary-btn" onClick={nextStage}>
+            Continue
+          </button>
+        )}
       </div>
+      {showConfirmModal && slotConfirmModal}
     </React.Fragment>
   );
 }
diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx
index 4c019604..f8af7196 100644
--- a/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx
@@ -498,7 +498,7 @@ export const EditStage = ({
       <div>
         <div className="matcher-assignment-above-head">
           <SearchBar className="matcher-assignment-search" onChange={e => handleSearchChange(e.target.value)} />
-          <button className="matcher-submit-btn" onClick={() => setDistModalOpen(true)}>
+          <button className="primary-btn" onClick={() => setDistModalOpen(true)}>
             View Distribution
           </button>
         </div>
@@ -546,7 +546,7 @@ export const EditStage = ({
       </div>
       <div className="matcher-body-footer matcher-body-footer-sticky">
         <div className="matcher-assignment-button-div">
-          <button className="matcher-secondary-btn" onClick={() => prevStage()}>
+          <button className="secondary-btn" onClick={() => prevStage()}>
             Back
           </button>
         </div>
@@ -568,10 +568,10 @@ export const EditStage = ({
           )}
         </div>
         <div className="matcher-assignment-button-div">
-          <button className="matcher-secondary-btn" onClick={() => saveAssignment()}>
+          <button className="secondary-btn" onClick={() => saveAssignment()}>
             Save
           </button>
-          <button className="matcher-danger-btn" onClick={() => setCreateConfirmModalOpen(true)}>
+          <button className="danger-btn" onClick={() => setCreateConfirmModalOpen(true)}>
             Create
           </button>
         </div>
@@ -766,7 +766,7 @@ const EditTableRow = ({
           {editingTimes ? (
             <select
               ref={selectTimesRef}
-              className="matcher-assignment-section-times-input"
+              className="form-select matcher-assignment-section-times-input"
               defaultValue={row.slotId}
               onChange={e => handleChangeRow(e, "times")}
               onBlur={handleBlurSelect}
@@ -797,7 +797,7 @@ const EditTableRow = ({
       <div className="matcher-assignment-section-capacity">
         <input
           key={capacityKey}
-          className="matcher-assignment-section-capacity-input"
+          className="form-input matcher-assignment-section-capacity-input"
           type="number"
           min={0}
           defaultValue={row.capacity}
@@ -809,7 +809,7 @@ const EditTableRow = ({
       <div className="matcher-assignment-section-description">
         <input
           key={descriptionKey}
-          className="matcher-assignment-section-description-input"
+          className="form-input matcher-assignment-section-description-input"
           type="text"
           defaultValue={row.description}
           onChange={e => handleChangeRow(e, "description")}
@@ -937,10 +937,10 @@ const CreateConfirmModal = ({
           </p>
         </div>
         <div className="matcher-assignment-confirm-modal-footer">
-          <button className="matcher-secondary-btn" onClick={closeModal}>
+          <button className="secondary-btn" onClick={closeModal}>
             Cancel
           </button>
-          <button className="matcher-danger-btn" onClick={createSections}>
+          <button className="danger-btn" onClick={createSections}>
             Confirm
           </button>
         </div>
diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/ReleaseStage.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/ReleaseStage.tsx
index 79842559..b4f3a9a1 100644
--- a/csm_web/frontend/src/components/enrollment_automation/coordinator/ReleaseStage.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/coordinator/ReleaseStage.tsx
@@ -138,7 +138,11 @@ function MentorList({
   /**
    * Whether to show the add mentors modal
    */
-  const [showAddMentorsModal, setShowAddMentorsModal] = useState(false);
+  const [showAddMentorsModal, setShowAddMentorsModal] = useState<boolean>(false);
+  /**
+   * Whether to show the open form confirmation modal
+   */
+  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
 
   /**
    * Attribute to sort the table by,
@@ -387,14 +391,41 @@ function MentorList({
     formStatusIcon = <CheckCircleIcon className="matcher-body-footer-status-icon" />;
   }
 
+  let confirmOpenFormModal = null;
+  if (showConfirmModal) {
+    confirmOpenFormModal = (
+      <Modal closeModal={() => setShowConfirmModal(false)}>
+        <h2 className="matcher-confirm-modal-header">Open Form</h2>
+        <p>Are you sure you want to open the form for mentors?</p>
+        <p>
+          <b>Once mentors submit preferences, you will not be able to edit slots.</b>
+        </p>
+        <div className="matcher-confirm-modal-buttons">
+          <button className="secondary-btn" onClick={() => setShowConfirmModal(false)}>
+            Cancel
+          </button>
+          <button
+            className="primary-btn"
+            onClick={() => {
+              setShowConfirmModal(false);
+              openForm();
+            }}
+          >
+            Open form
+          </button>
+        </div>
+      </Modal>
+    );
+  }
+
   return (
     <React.Fragment>
       {showAddMentorsModal && (
         <Modal closeModal={() => setShowAddMentorsModal(false)}>
           <div className="mentor-list-right">
             <span className="mentor-add-label">Add mentor emails (one per line, or separated by commas):</span>
-            <textarea className="mentor-add-textarea" ref={addMentorTextArea}></textarea>
-            <button className="matcher-submit-btn" onClick={submitMentorList}>
+            <textarea className="mentor-add-textarea form-input" ref={addMentorTextArea}></textarea>
+            <button className="primary-btn" onClick={submitMentorList}>
               Submit
             </button>
           </div>
@@ -409,7 +440,7 @@ function MentorList({
             </span>
           </div>
           <div className="mentor-list-top-buttons">
-            <button className="matcher-submit-btn" onClick={() => setShowAddMentorsModal(true)}>
+            <button className="primary-btn" onClick={() => setShowAddMentorsModal(true)}>
               Add Mentors
             </button>
           </div>
@@ -456,12 +487,12 @@ function MentorList({
       <div className="matcher-body-footer-sticky matcher-body-footer">
         <div>
           {mentorList.every(mentor => !hasPreferences(mentor)) && (
-            <button className="matcher-secondary-btn" onClick={prevStage}>
+            <button className="secondary-btn" onClick={prevStage}>
               Back
             </button>
           )}
           {removedMentorList.length > 0 && (
-            <button className="matcher-secondary-btn" onClick={submitMentorRemovals}>
+            <button className="secondary-btn" onClick={submitMentorRemovals}>
               Update
             </button>
           )}
@@ -469,16 +500,17 @@ function MentorList({
         <div className="matcher-body-footer-status-container">
           {formStatusIcon}
           {formIsOpen ? (
-            <button className="matcher-submit-btn" onClick={closeForm}>
+            <button className="primary-btn" onClick={closeForm}>
               Close Form
             </button>
           ) : (
-            <button className="matcher-submit-btn" onClick={openForm}>
+            <button className="primary-btn" onClick={() => setShowConfirmModal(true)}>
               Open Form
             </button>
           )}
         </div>
       </div>
+      {showConfirmModal && confirmOpenFormModal}
     </React.Fragment>
   );
 }
diff --git a/csm_web/frontend/src/css/base/form.scss b/csm_web/frontend/src/css/base/form.scss
index 6df2bd23..9bb70ac2 100644
--- a/csm_web/frontend/src/css/base/form.scss
+++ b/csm_web/frontend/src/css/base/form.scss
@@ -44,6 +44,15 @@
   padding: 6px 8px;
 }
 
+// light version
+.light {
+  &.form-input,
+  &.form-date,
+  &.form-select {
+    background-color: white;
+  }
+}
+
 /// Select element
 
 .form-select {
diff --git a/csm_web/frontend/src/css/enrollment_matcher.scss b/csm_web/frontend/src/css/enrollment_matcher.scss
index cc13e336..af65624c 100644
--- a/csm_web/frontend/src/css/enrollment_matcher.scss
+++ b/csm_web/frontend/src/css/enrollment_matcher.scss
@@ -142,6 +142,7 @@
 .matcher-sidebar-left-bottom {
   display: flex;
   flex-direction: column;
+  gap: 3px;
   align-items: center;
   padding: 15px;
 }
@@ -178,12 +179,6 @@
   font-size: 0.9rem;
 }
 
-.matcher-input {
-  width: 40px;
-  margin-left: 5px;
-  outline: none;
-}
-
 /* Modal */
 
 .matcher-calendar-modal {
@@ -205,76 +200,46 @@
   font-weight: bold;
 }
 
-/* Table */
-
-.matcher-table-sort-group {
-  display: flex;
-  flex-direction: row;
-  gap: 3px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.matcher-table-sort-icon {
-  width: 1em;
-  margin-top: 2px;
+.matcher-confirm-modal-header {
+  text-align: center;
 }
 
-/* Buttons */
-
-.matcher-submit-btn {
-  padding: 8px 15px !important;
-  color: white;
-  user-select: none;
-  background-color: $csm-green;
-  border: none;
-  border-radius: 10px;
+.matcher-confirm-modal-list {
+  column-count: 2;
 }
 
-.matcher-submit-btn:hover {
-  background-color: $csm-green-darkened;
+.matcher-confirm-modal-empty-list-text {
+  margin-left: 1em;
 }
 
-.matcher-submit-btn:disabled {
-  cursor: not-allowed;
-  background-color: $csm-neutral;
+.matcher-confirm-modal-list-item {
+  margin-right: 16px;
+  margin-bottom: 5px;
+  list-style-position: outside;
 }
 
-.matcher-secondary-btn {
-  padding: 8px 15px !important;
-  color: white;
-  user-select: none;
-  background-color: $csm-neutral;
-  border: none;
-  border-radius: 10px;
-}
+.matcher-confirm-modal-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  justify-content: center;
 
-.matcher-secondary-btn:hover {
-  background-color: $csm-neutral-darkened;
+  margin-top: 16px;
 }
 
-.matcher-secondary-btn:disabled {
-  cursor: not-allowed;
-  background-color: $csm-neutral;
-}
+/* Table */
 
-.matcher-danger-btn {
-  padding: 8px 15px !important;
-  color: white;
+.matcher-table-sort-group {
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+  cursor: pointer;
   user-select: none;
-  background-color: $csm-danger;
-  border: none;
-  border-radius: 10px;
 }
 
-.matcher-danger-btn:hover {
-  background-color: $csm-danger-darkened;
-}
-
-.matcher-toggle-btn {
-  font-size: 0.9rem;
-  text-align: center;
-  cursor: pointer;
+.matcher-table-sort-icon {
+  width: 1em;
+  margin-top: 2px;
 }
 
 /* Mentor Preferences */
@@ -360,6 +325,10 @@
 }
 
 .matcher-created-time {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
   padding: 5px 0;
 }
 
@@ -371,6 +340,11 @@
   margin-right: 5px;
 }
 
+.matcher-created-time-day-input {
+  width: fit-content;
+  padding-right: 25px;
+}
+
 .matcher-sidebar-header {
   padding-bottom: 15px;
   font-weight: bold;
@@ -387,17 +361,6 @@
   color: $csm-danger-darkened;
 }
 
-.matcher-select-day-input {
-  height: 1.5rem;
-  outline: none;
-}
-
-.matcher-select-time-input {
-  margin-right: 5px;
-  margin-left: 5px;
-  outline: none;
-}
-
 .matcher-tiling-subheader {
   /* font-style: italic; */
   font-weight: 600;
@@ -420,15 +383,26 @@
   padding: 5px 0;
 }
 
+.matcher-tiling-range-input-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.matcher-tiling-length-input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 4px;
+}
+
 .matcher-tiling-length-input {
   width: 75px;
   margin-right: 5px;
 }
 
-.matcher-tiling-toggle {
-  margin-bottom: 3px;
-}
-
 .matcher-tooltip-container {
   position: relative;
 }
@@ -640,6 +614,14 @@
   font-weight: normal;
 }
 
+.matcher-pref-input-label {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+}
+
 /* ConfigureStage.tsx */
 
 .matcher-mentor-min-max {
@@ -674,7 +656,6 @@
 
 .matcher-configure-input {
   width: 80%;
-  font-family: inherit;
 }
 
 .matcher-configure-sidebar-buttons {
@@ -823,18 +804,13 @@
 }
 
 .matcher-assignment-section-times-input {
-  width: 100%;
-  height: 1.5rem;
-  font-family: inherit;
-  font-size: 0.95rem;
-  background-color: transparent;
-  border: 2px solid $csm-neutral;
-  border-radius: 3px;
-  outline: none;
+  width: initial;
+  max-width: initial;
 }
 
 .matcher-assignment-section-times-input:focus {
   border-color: #888;
+  outline-color: #888;
 }
 
 .matcher-assignment-section-times-option {
@@ -860,11 +836,7 @@
 
 .matcher-assignment-section-capacity-input,
 .matcher-assignment-section-description-input {
-  width: calc(100% - 10px);
-  font-family: inherit;
-  font-size: 0.95rem;
-  border: 2px solid $csm-neutral;
-  border-radius: 3px;
+  width: calc(100% - 20px);
 }
 
 .matcher-assignment-section-capacity-input:focus,