Migrate to SCSS

.gitignore

@@ -224,7 +224,7 @@ typings/
 # NPM Built
 main.js
 main.js.LICENSE.txt
-style.min.css
+main.css
 
 # Mac OS X dir files
 .DS_Store

.prettierignore

@@ -0,0 +1,2 @@
+# ignore Django templates
+**/templates/**/*.html

csm_web/frontend/src/components/App.tsx

@@ -10,9 +10,14 @@ import Policies from "./Policies";
 import { Resources } from "./resource_aggregation/Resources";
 import Section from "./section/Section";
 
+// Images
 import LogoNoText from "../../static/frontend/img/logo_no_text.svg";
 import LogOutIcon from "../../static/frontend/img/log_out.svg";
 
+// Styles
+import "../css/header.scss";
+import "../css/home.scss";
+
 interface ErrorType {
   message: string;
   stack: string;
@@ -113,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>
+        <NavLink to="/resources" className={navlinkClass}>
+          <h3 className="site-title">Resources</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>
+        {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>
   );
 }

csm_web/frontend/src/components/CourseMenu.tsx

@@ -8,6 +8,9 @@
 import { DateTime } from "luxon";
 import { DEFAULT_LONG_LOCALE_OPTIONS, DEFAULT_TIMEZONE } from "../utils/datetime";
 
+// Styles
+import "../css/course-menu.scss";
+
 const CourseMenu = () => {
   const { data: jsonCourses, isSuccess: coursesLoaded } = useCourses();
   const { data: jsonUserInfo, isSuccess: userInfoLoaded } = useUserInfo();
@@ -52,7 +55,7 @@
 
   if (courses !== null) {
     for (const course of courses.values()) {
       show_enrollment_times ||= !course.enrollmentOpen;
       if (!course.enrollmentOpen) {
         enrollment_times_by_course.push({
           courseName: course.name,
@@ -147,16 +150,27 @@
 
   let sidebar = null;
   if (hasRestrictedCourses) {
+    /**
+     * Helper to get the current tab class
+     */
+    const getTabClass = (expected: CourseMenuSidebarTabs) => {
+      if (selectedTab === expected) {
+        return "tab active";
+      } else {
+        return "tab";
+      }
+    };
+
     sidebar = (
-      <div className="course-menu-sidebar">
+      <div className="tab-list">
         <button
-          className={"course-menu-sidebar-tab" + (selectedTab === CourseMenuSidebarTabs.RESTRICTED ? " active" : "")}
+          className={getTabClass(CourseMenuSidebarTabs.RESTRICTED)}
           onClick={() => setSelectedTab(CourseMenuSidebarTabs.RESTRICTED)}
         >
           Restricted
         </button>
         <button
-          className={"course-menu-sidebar-tab" + (selectedTab === CourseMenuSidebarTabs.UNRESTRICTED ? " active" : "")}
+          className={getTabClass(CourseMenuSidebarTabs.UNRESTRICTED)}
           onClick={() => setSelectedTab(CourseMenuSidebarTabs.UNRESTRICTED)}
         >
           Unrestricted
@@ -204,7 +218,7 @@
       {courses !== null ? (
         <div id="course-menu">
           {Array.from(courses.entries()).map(([id, course]) => (
-            <Link className="csm-btn" to={`${id}`} key={id}>
+            <Link className="primary-btn" to={`${id}`} key={id}>
               {course.name}
             </Link>
           ))}

csm_web/frontend/src/components/Home.tsx

@@ -8,6 +8,12 @@ import { Profile, Course } from "../utils/types";
 import LoadingSpinner from "./LoadingSpinner";
 import { formatSpacetimeInterval } from "../utils/datetime";
 
+// Images
+import PlusIcon from "../../static/frontend/img/plus.svg";
+
+// Styles
+import scssColors from "../css/base/colors-export.module.scss";
+
 const Home = () => {
   const { data: profiles, isSuccess: profilesLoaded, isError: profilesLoadError } = useProfiles();
   const { data: courses, isSuccess: coursesLoaded, isError: coursesLoadError } = useCourses();
@@ -63,8 +69,9 @@ const Home = () => {
     <div id="home-courses">
       <div id="home-courses-heading">
         <h3 className="page-title">My courses</h3>
-        <Link className="csm-btn" to="/courses">
-          <span className="inline-plus-sign">+ </span>Add Course
+        <Link className="primary-btn" to="/courses">
+          <PlusIcon className="icon inline-plus-icon" />
+          Add Course
         </Link>
       </div>
       {content}
@@ -82,8 +89,11 @@ const CourseCard = ({ profiles }: CourseCardProps): React.ReactElement => {
   const relation = role.toLowerCase();
 
   const Card = (): React.ReactElement => {
+    // default to black if not found
+    const courseColor = scssColors[course.toLowerCase()] ?? "black";
+    const relationColor = scssColors[relation.toLowerCase()] ?? "white";
     return (
-      <div className="course-card" style={{ borderTopColor: `var(--csm-theme-${course.toLowerCase()})` }}>
+      <div className="course-card" style={{ borderTopColor: courseColor }}>
         <div className="course-card-contents">
           <h3 className="course-card-name">{course}</h3>
           <p className="course-card-title">{courseTitle}</p>
@@ -97,7 +107,7 @@ const CourseCard = ({ profiles }: CourseCardProps): React.ReactElement => {
                 ))}
               </Link>
             ))}
-          <div className="relation-label" style={{ backgroundColor: `var(--csm-${relation})` }}>
+          <div className="relation-label" style={{ backgroundColor: relationColor }}>
             {relation}
           </div>
         </div>

csm_web/frontend/src/components/Modal.tsx

@@ -1,5 +1,8 @@
 import React, { useContext } from "react";
 
+// Images
+import XIcon from "../../static/frontend/img/x.svg";
+
 const ModalContext = React.createContext(Function.prototype);
 
 interface ModalProps {
@@ -16,15 +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-contents">
-          <div className="modal-close-x">
-            <button className="inline-plus-sign" aria-label="close" onClick={closeModal}>
-              <span>&times;</span>
-            </button>
-          </div>
-          {children}
+      <div className={`modal `}>
+        <div className="modal-close-container">
+          <button className="modal-close-x" aria-label="close" onClick={closeModal}>
+            <XIcon className="icon" />
+          </button>
         </div>
+        <div className={`modal-contents ${className}`}>{children}</div>
       </div>
     </ModalContext.Provider>
   );

csm_web/frontend/src/components/Policies.tsx

@@ -1,4 +1,9 @@
 import React from "react";
+
+// Styles
+import "../css/policies.scss";
+
+// Data
 import SECTIONS from "../../static/frontend/data/enrollment_policies";
 
 export default class Policies extends React.Component {

csm_web/frontend/src/components/course/Course.tsx

@@ -11,7 +11,12 @@ import { WhitelistModal } from "./WhitelistModal";
 import { SettingsModal } from "./SettingsModal";
 import { DEFAULT_LONG_LOCALE_OPTIONS } from "../../utils/datetime";
 
+// Images
 import PencilIcon from "../../../static/frontend/img/pencil.svg";
+import PlusIcon from "../../../static/frontend/img/plus.svg";
+
+// Styles
+import "../../css/course.scss";
 
 const DAY_OF_WEEK_ABREVIATIONS: { [day: string]: string } = Object.freeze({
   Monday: "M",
@@ -156,16 +161,17 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps):
         {userIsCoordinator && (
           <div id="course-coord-buttons">
             <button
-              className="csm-btn create-section-btn"
+              className="primary-btn"
               onClick={() => {
                 setShowModal(true);
                 setWhichModal(COURSE_MODAL_TYPE.createSection);
               }}
             >
-              <span className="inline-plus-sign">+ </span>Create Section
+              <PlusIcon className="icon" />
+              Create Section
             </button>
             <button
-              className="csm-btn export-data-btn"
+              className="primary-btn"
               onClick={() => {
                 setShowModal(true);
                 setWhichModal(COURSE_MODAL_TYPE.exportData);
@@ -174,7 +180,7 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps):
               Export Data
             </button>
             <button
-              className="csm-btn course-settings-btn"
+              className="primary-btn"
               onClick={() => {
                 setShowModal(true);
                 setWhichModal(COURSE_MODAL_TYPE.settings);
@@ -184,7 +190,7 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps):
             </button>
             {course.isRestricted && (
               <button
-                className="csm-btn edit-whitelist-btn"
+                className="primary-btn"
                 onClick={() => {
                   setShowModal(true);
                   setWhichModal(COURSE_MODAL_TYPE.whitelist);

csm_web/frontend/src/components/course/CreateSectionModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
 import { dayOfWeekToEnglishString, DAYS_OF_WEEK } from "../../utils/datetime";
 import { useUserEmails } from "../../utils/queries/base";
 import { useSectionCreateMutation } from "../../utils/queries/sections";
 import { Spacetime } from "../../utils/types";
@@ -90,7 +90,7 @@
   /**
    * Handle form submission.
    */
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>): void => {
     event.preventDefault();
     const data = {
       mentorEmail,
@@ -109,14 +109,15 @@
   };
 
   return (
-    <Modal closeModal={closeModal}>
-      <form id="create-section-form" className="csm-form" onSubmit={handleSubmit}>
+    <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
                 onChange={e => handleChange(-1, "mentorEmail", e.target.value)}
+                className="form-input"
                 type="email"
                 list="user-email-list"
                 required
@@ -130,9 +131,10 @@
                 {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"
@@ -143,9 +145,10 @@
                 onChange={e => handleChange(-1, "capacity", e.target.value)}
               />
             </label>
-            <label>
+            <label className="form-label">
               Description
               <input
+                className="form-input"
                 name="description"
                 type="text"
                 value={description}
@@ -157,9 +160,10 @@
             <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={e => handleChange(index, "location", e.target.value)}
                     required
                     title="You cannot leave this field blank"
@@ -169,9 +173,10 @@
                     value={location}
                   />
                 </label>
-                <label>
+                <label className="form-label">
                   Day
                   <select
+                    className="form-select"
                     onChange={e => handleChange(index, "dayOfWeek", e.target.value)}
                     name={`dayOfWeek|${index}`}
                     value={dayOfWeek}
@@ -184,35 +189,40 @@
                     ))}
                   </select>
                 </label>
-                <label>
+                <label className="form-label">
                   Time
                   <TimeInput
+                    className="form-date"
                     onChange={e => handleChange(index, "startTime", e.target.value)}
                     required
                     name={`startTime|${index}`}
                     value={startTime}
                   />
                 </label>
-                <label>
+                <label className="form-label">
                   Duration (min)
                   <input
+                    className="form-input"
                     type="number"
                     name={`duration|${index}`}
                     value={duration}
+                    min={0}
                     onChange={e => handleChange(index, "duration", e.target.value)}
                   />
                 </label>
-                {index === spacetimes.length - 1 && (
-                  <button className="csm-btn" id="add-occurence-btn" onClick={appendSpacetime}>
-                    Add another occurence
-                  </button>
-                )}
               </div>
             </React.Fragment>
           ))}
-          <input type="submit" value="Create Section" />
         </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>
   );
 };