Modal/form style changes, consolidate other styles

csmberkeley · Aug 12, 2023 · 8f4f21a · 8f4f21a
1 parent 085b74c
commit 8f4f21a
Show file tree

Hide file tree

Showing 45 changed files with 1,198 additions and 1,093 deletions.
diff --git a/csm_web/frontend/src/components/App.tsx b/csm_web/frontend/src/components/App.tsx
@@ -118,26 +118,30 @@ function Header(): React.ReactElement {
 
   return (
     <header>
-      <Link to="/">
-        <LogoNoText id="logo" />
-      </Link>
-      <NavLink className={homeNavlinkClass} to="/">
-        <h3 className="site-title">Scheduler</h3>
-      </NavLink>
-      <NavLink to="/resources" className={navlinkClass}>
-        <h3 className="site-title">Resources</h3>
-      </NavLink>
-      {activeMatcherRoles["COORDINATOR"].size > 0 || activeMatcherRoles["MENTOR"].size > 0 ? (
-        <NavLink to="/matcher" className={navlinkClass}>
-          <h3 className="site-title">Matcher</h3>
+      <div className="site-title-group">
+        <Link to="/">
+          <LogoNoText id="logo" />
+        </Link>
+        <NavLink className={homeNavlinkClass} to="/">
+          <h3 className="site-title">Scheduler</h3>
         </NavLink>
-      ) : null}
-      <NavLink to="/policies" className={navlinkClassSubtitle}>
-        <h3 className="site-subtitle">Policies</h3>
-      </NavLink>
-      <a id="logout-btn" href="/logout" title="Log out">
-        <LogOutIcon width="1.25em" height="1.25em" />
-      </a>
+        <NavLink to="/resources" className={navlinkClass}>
+          <h3 className="site-title">Resources</h3>
+        </NavLink>
+        {activeMatcherRoles["COORDINATOR"].size > 0 || activeMatcherRoles["MENTOR"].size > 0 ? (
+          <NavLink to="/matcher" className={navlinkClass}>
+            <h3 className="site-title">Matcher</h3>
+          </NavLink>
+        ) : null}
+      </div>
+      <div className="site-title-group">
+        <NavLink to="/policies" className={navlinkClassSubtitle}>
+          <h3 className="site-subtitle">Policies</h3>
+        </NavLink>
+        <a id="logout-btn" href="/logout" title="Log out">
+          <LogOutIcon width="1.25em" height="1.25em" />
+        </a>
+      </div>
     </header>
   );
 }

diff --git a/csm_web/frontend/src/components/Modal.tsx b/csm_web/frontend/src/components/Modal.tsx
@@ -19,13 +19,13 @@ export default function Modal({ children, closeModal, className = "" }: ModalPro
   return (
     <ModalContext.Provider value={closeModal}>
       <div className="modal-overlay" onClick={closeModal} />
-      <div className={`modal ${className}`}>
+      <div className={`modal `}>
         <div className="modal-close-container">
-          <button className="modal-close-x inline-plus-sign" aria-label="close" onClick={closeModal}>
+          <button className="modal-close-x" aria-label="close" onClick={closeModal}>
             <XIcon className="icon" />
           </button>
         </div>
-        <div className="modal-contents">{children}</div>
+        <div className={`modal-contents ${className}`}>{children}</div>
       </div>
     </ModalContext.Provider>
   );

diff --git a/csm_web/frontend/src/components/course/CreateSectionModal.tsx b/csm_web/frontend/src/components/course/CreateSectionModal.tsx
@@ -108,13 +108,14 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
   };
 
   return (
-    <Modal closeModal={closeModal}>
+    <Modal className="create-section-modal" closeModal={closeModal}>
       <form id="create-section-form" className="csm-form">
         <div id="create-section-form-contents">
           <div id="non-spacetime-fields">
-            <label>
+            <label className="form-label">
               Mentor Email
               <input
+                className="form-input"
                 onChange={handleChange}
                 type="email"
                 list="user-email-list"
@@ -129,9 +130,10 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
                 {userEmailsLoaded ? userEmails.map(email => <option key={email} value={email} />) : null}
               </datalist>
             </label>
-            <label>
+            <label className="form-label">
               Capacity
               <input
+                className="form-input"
                 required
                 name="capacity"
                 type="number"
@@ -142,18 +144,25 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
                 onChange={handleChange}
               />
             </label>
-            <label>
+            <label className="form-label">
               Description
-              <input name="description" type="text" value={description} onChange={handleChange} />
+              <input
+                className="form-input"
+                name="description"
+                type="text"
+                value={description}
+                onChange={handleChange}
+              />
             </label>
           </div>
           {spacetimes.map(({ dayOfWeek, startTime, location }, index) => (
             <React.Fragment key={index}>
               <h4 className="spacetime-fields-header">Weekly occurence {index + 1}</h4>
               <div className="spacetime-fields">
-                <label>
+                <label className="form-label">
                   Location
                   <input
+                    className="form-input"
                     onChange={handleChange}
                     required
                     title="You cannot leave this field blank"
@@ -163,19 +172,26 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
                     value={location}
                   />
                 </label>
-                <label>
+                <label className="form-label">
                   Day
-                  <select onChange={handleChange} name={`dayOfWeek|${index}`} value={dayOfWeek} required>
+                  <select
+                    className="form-select"
+                    onChange={handleChange}
+                    name={`dayOfWeek|${index}`}
+                    value={dayOfWeek}
+                    required
+                  >
                     {["---"].concat(DAYS_OF_WEEK).map(day => (
                       <option key={day} value={day === "---" ? "" : day} disabled={day === "---"}>
                         {day}
                       </option>
                     ))}
                   </select>
                 </label>
-                <label>
+                <label className="form-label">
                   Time
                   <TimeInput
+                    className="form-date"
                     onChange={handleChange as React.FormEventHandler<HTMLInputElement>}
                     required
                     name={`startTime|${index}`}
@@ -185,16 +201,16 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
               </div>
             </React.Fragment>
           ))}
-          <div className="create-section-submit-container">
-            <button className="secondary-btn" id="add-occurence-btn" onClick={appendSpacetime}>
-              Add another occurence
-            </button>
-            <button className="primary-btn" onClick={handleSubmit}>
-              Submit
-            </button>
-          </div>
         </div>
       </form>
+      <div className="create-section-submit-container">
+        <button className="secondary-btn" id="add-occurence-btn" onClick={appendSpacetime}>
+          Add another occurence
+        </button>
+        <button className="primary-btn" onClick={handleSubmit}>
+          Submit
+        </button>
+      </div>
     </Modal>
   );
 };
diff --git a/csm_web/frontend/src/components/course/SettingsModal.tsx b/csm_web/frontend/src/components/course/SettingsModal.tsx
@@ -78,7 +78,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
   if (coursesLoaded) {
     modalContent = (
       <div className="course-settings-content">
-        <h4 className="course-settings-title">Settings</h4>
+        <h2 className="course-settings-title">Settings</h2>
         <div className="course-settings-container">
           <div className="course-settings-row">
             <div className="course-settings-label-container">
@@ -95,7 +95,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
             <div className="course-settings-input-container">
               <input
                 id="wordOfTheDayLimit"
-                className="course-settings-input"
+                className="form-input course-settings-input"
                 type="number"
                 min="0"
                 value={wordOfTheDayLimit}

diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceEdit.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceEdit.tsx
@@ -663,78 +663,87 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc
   return (
     <Modal closeModal={onCancel} className="resourceEditModal">
       <div className="resourceEditContainer">
-        <div className="resourceEditContentWrapper">
-          <div className="resourceEditContent">
-            <div id="resourceEditInner">
-              <div className="resourceInfoEdit">
-                <div className="resourceEditHeadItem">Week Number</div>
-                <input
-                  type="text"
-                  defaultValue={resource.weekNum}
-                  placeholder="Week Number"
-                  onChange={e => onChange(e, "weekNum")}
-                  onBlur={() => handleBlur("weekNum")}
-                />
-                <div className="resourceValidationError">
-                  {formErrors.weekNum && <ExclamationCircle className="icon exclamationIcon" />}
-                  {formErrors.weekNum}
-                </div>
-              </div>
-              <div className="resourceInfoEdit">
-                <div className="resourceEditHeadItem">Date</div>
-                <input
-                  type="date"
-                  defaultValue={resource.date}
-                  onChange={e => onChange(e, "date")}
-                  onBlur={() => handleBlur("date")}
-                />
-                <div className="resourceValidationError">
-                  {formErrors.date && <ExclamationCircle className="icon exclamationIcon" />}
-                  {formErrors.date}
-                </div>
-              </div>
-              <div className="resourceInfoEdit">
-                <div className="resourceEditHeadItem">Topics</div>
-                <div className="topicsTooltipWrapper">
-                  <Tooltip
-                    placement="bottom"
-                    source={
-                      <input
-                        type="text"
-                        defaultValue={resource.topics}
-                        placeholder="Topics"
-                        onChange={e => onChange(e, "topics")}
-                        onBlur={() => handleBlur("topics")}
-                      />
-                    }
-                  >
-                    Topics should be delimited by semicolons
-                  </Tooltip>
-                </div>
-                <div className="resourceValidationError">
-                  {formErrors.topics && <ExclamationCircle className="icon exclamationIcon" />}
-                  {formErrors.topics}
-                </div>
-              </div>
+        <div id="resourceEditInner">
+          <div className="resourceInfoEdit">
+            <label className="form-label resourceEditHeadItem">
+              Week Number
+              <input
+                className="form-input"
+                type="text"
+                defaultValue={resource.weekNum}
+                placeholder="Week Number"
+                onChange={e => onChange(e, "weekNum")}
+                onBlur={() => handleBlur("weekNum")}
+              />
+            </label>
+            <div className="resourceValidationError">
+              {formErrors.weekNum && <ExclamationCircle className="icon exclamationIcon" />}
+              {formErrors.weekNum}
             </div>
-            <div className="tab-list">
-              <button
-                onClick={() => {
-                  setIsEditingLinks(false);
-                }}
-                className={`tab ${!isEditingLinks ? "active" : ""}`}
-              >
-                Edit Worksheets
-              </button>
-              <button
-                onClick={() => {
-                  setIsEditingLinks(true);
-                }}
-                className={`tab ${isEditingLinks ? "active" : ""}`}
-              >
-                Edit Links
-              </button>
+          </div>
+          <div className="resourceInfoEdit">
+            <label className="form-label resourceEditHeadItem">
+              Date
+              <input
+                className="form-date"
+                type="date"
+                defaultValue={resource.date}
+                onChange={e => onChange(e, "date")}
+                onBlur={() => handleBlur("date")}
+              />
+            </label>
+            <div className="resourceValidationError">
+              {formErrors.date && <ExclamationCircle className="icon exclamationIcon" />}
+              {formErrors.date}
             </div>
+          </div>
+          <div className="resourceInfoEdit">
+            <label className="form-label resourceEditHeadItem">
+              Topics
+              <div className="topicsTooltipWrapper">
+                <Tooltip
+                  placement="bottom"
+                  source={
+                    <input
+                      className="form-input"
+                      type="text"
+                      defaultValue={resource.topics}
+                      placeholder="Topics"
+                      onChange={e => onChange(e, "topics")}
+                      onBlur={() => handleBlur("topics")}
+                    />
+                  }
+                >
+                  Topics should be delimited by semicolons
+                </Tooltip>
+              </div>
+            </label>
+            <div className="resourceValidationError">
+              {formErrors.topics && <ExclamationCircle className="icon exclamationIcon" />}
+              {formErrors.topics}
+            </div>
+          </div>
+        </div>
+        <div className="tab-list">
+          <button
+            onClick={() => {
+              setIsEditingLinks(false);
+            }}
+            className={`tab ${!isEditingLinks ? "active" : ""}`}
+          >
+            Edit Worksheets
+          </button>
+          <button
+            onClick={() => {
+              setIsEditingLinks(true);
+            }}
+            className={`tab ${isEditingLinks ? "active" : ""}`}
+          >
+            Edit Links
+          </button>
+        </div>
+        <div className="resourceEditContentWrapper">
+          <div className="resourceEditContent">
             {!isEditingLinks && (
               <div className="resourceWorksheetContainer">
                 {hasWorksheets && (
@@ -774,12 +783,14 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc
             )}
           </div>
         </div>
-        <button onClick={handleSubmit} id="resourceButtonSubmit" disabled={!checkValid()}>
-          <CheckCircle className="icon" id="saveIcon" /> SAVE
-        </button>
-        {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) &&
-          !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) &&
-          tabErrorDisplay}
+        <div className="resourceEditFooter">
+          <button onClick={handleSubmit} className="primary-btn" disabled={!checkValid()}>
+            <CheckCircle className="icon" id="saveIcon" /> Save
+          </button>
+          {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) &&
+            !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) &&
+            tabErrorDisplay}
+        </div>
       </div>
     </Modal>
   );

diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx
@@ -26,13 +26,15 @@ const ResourceLinkEdit = ({
     <React.Fragment>
       <div className="resourceLinkEdit">
         <input
+          className="form-input"
           type="text"
           defaultValue={link.name}
           placeholder="Link Name"
           onChange={e => onChange(e, currentId, "name")}
           onBlur={() => onBlur()}
         />
         <input
+          className="form-input"
           type="text"
           defaultValue={link.url}
           placeholder="Link URL"