Restyle matcher UI (#470)

csmberkeley · Mar 14, 2024 · 46950f1 · 46950f1
1 parent 2760930
commit 46950f1
Show file tree

Hide file tree

Showing 8 changed files with 327 additions and 167 deletions.
diff --git 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
@@ -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
@@ -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>
         )}