From 92ecfd12e63807ee1b7080814d6f1c87c5c16c45 Mon Sep 17 00:00:00 2001 From: Alec Li Date: Wed, 9 Aug 2023 01:09:10 -0700 Subject: [PATCH 1/2] Migrate to SCSS, refactor styles Add base styles for buttons, modals, forms, etc. Split original styles file into multiple grouped files Modify styles and classes to be more consistent Set up webpack for CSS compilation Move style files out of static folder --- .gitignore | 2 +- .prettierignore | 2 + csm_web/frontend/src/components/App.tsx | 47 +- .../frontend/src/components/CourseMenu.tsx | 22 +- csm_web/frontend/src/components/Home.tsx | 18 +- csm_web/frontend/src/components/Modal.tsx | 17 +- csm_web/frontend/src/components/Policies.tsx | 5 + .../frontend/src/components/course/Course.tsx | 16 +- .../components/course/CreateSectionModal.tsx | 42 +- .../src/components/course/DataExportModal.tsx | 2 +- .../src/components/course/SectionCard.tsx | 18 +- .../src/components/course/SettingsModal.tsx | 15 +- .../src/components/course/WhitelistModal.tsx | 14 +- .../EnrollmentMatcher.tsx | 3 + .../calendar/Calendar.tsx | 3 + .../resource_aggregation/ResourceEdit.tsx | 192 +- .../resource_aggregation/ResourceLinkEdit.tsx | 2 + .../resource_aggregation/ResourceTable.tsx | 14 +- .../ResourceWorksheetEdit.tsx | 1 + .../resource_aggregation/Resources.tsx | 30 +- .../section/CoordinatorAddStudentModal.tsx | 42 +- .../section/MentorSectionAttendance.tsx | 74 +- .../components/section/MentorSectionInfo.tsx | 142 +- .../section/MentorSectionRoster.tsx | 18 +- .../src/components/section/MetaEditModal.tsx | 27 +- .../src/components/section/Section.tsx | 33 +- .../section/SpacetimeDeleteModal.tsx | 17 +- .../components/section/SpacetimeEditModal.tsx | 244 +- .../src/components/section/StudentDropper.tsx | 75 +- .../src/components/section/StudentSection.tsx | 60 +- csm_web/frontend/src/css.d.ts | 4 + csm_web/frontend/src/css/base/_variables.scss | 67 + csm_web/frontend/src/css/base/base.scss | 76 + csm_web/frontend/src/css/base/button.scss | 139 ++ .../src/css/base/colors-export.module.scss | 24 + csm_web/frontend/src/css/base/errors.scss | 34 + csm_web/frontend/src/css/base/form.scss | 144 ++ csm_web/frontend/src/css/base/modal.scss | 73 + csm_web/frontend/src/css/base/searchbar.scss | 35 + csm_web/frontend/src/css/base/spinner.scss | 156 ++ csm_web/frontend/src/css/base/styles.scss | 16 + csm_web/frontend/src/css/base/table.scss | 30 + csm_web/frontend/src/css/base/tooltip.scss | 32 + csm_web/frontend/src/css/calendar.scss | 178 ++ .../src/css/coordinator-add-student.scss | 310 +++ csm_web/frontend/src/css/course-menu.scss | 53 + csm_web/frontend/src/css/course-settings.scss | 80 + csm_web/frontend/src/css/course.scss | 284 +++ .../frontend/src/css/enrollment_matcher.scss | 966 ++++++++ .../frontend/src/css/fontawesome-styles.scss | 462 ++++ csm_web/frontend/src/css/header.scss | 113 + csm_web/frontend/src/css/home.scss | 90 + csm_web/frontend/src/css/policies.scss | 30 + .../src/css/resource_aggregation.scss | 465 ++++ csm_web/frontend/src/css/section.scss | 439 ++++ csm_web/frontend/src/css/spacetime-edit.scss | 11 + .../frontend/src/css/spacetime_delete.scss | 26 + csm_web/frontend/src/css/student_dropper.scss | 48 + csm_web/frontend/src/css/whitelist_modal.scss | 141 ++ csm_web/frontend/src/css/word-of-the-day.scss | 106 + csm_web/frontend/src/index.tsx | 4 + .../frontend/static/frontend/css/calendar.css | 178 -- .../static/frontend/css/course-settings.css | 82 - .../frontend/css/enrollment_matcher.css | 964 -------- .../frontend/css/fontawesome-styles.css | 462 ---- .../frontend/static/frontend/css/login.css | 75 + .../frontend/static/frontend/css/policies.css | 28 - .../frontend/css/resource_aggregation.css | 545 ----- .../static/frontend/css/searchbar.css | 33 - .../static/frontend/css/spacetime_delete.css | 27 - .../static/frontend/css/student_dropper.css | 45 - .../frontend/static/frontend/css/style.css | 1977 --------------- .../frontend/static/frontend/css/tooltip.css | 32 - .../static/frontend/css/whitelist_modal.css | 186 -- .../static/frontend/css/word-of-the-day.css | 122 - .../frontend/static/frontend/img/pencil.svg | 2 +- csm_web/frontend/static/frontend/img/plus.svg | 1 + csm_web/frontend/static/frontend/img/x.svg | 2 +- csm_web/frontend/templates/frontend/base.html | 52 +- .../frontend/templates/frontend/index.html | 5 +- .../frontend/templates/frontend/login.html | 19 +- package-lock.json | 2159 ++++++++++++++++- package.json | 11 +- tsconfig.json | 6 +- webpack.config.js | 29 +- 85 files changed, 7515 insertions(+), 5360 deletions(-) create mode 100644 .prettierignore create mode 100644 csm_web/frontend/src/css.d.ts create mode 100644 csm_web/frontend/src/css/base/_variables.scss create mode 100644 csm_web/frontend/src/css/base/base.scss create mode 100644 csm_web/frontend/src/css/base/button.scss create mode 100644 csm_web/frontend/src/css/base/colors-export.module.scss create mode 100644 csm_web/frontend/src/css/base/errors.scss create mode 100644 csm_web/frontend/src/css/base/form.scss create mode 100644 csm_web/frontend/src/css/base/modal.scss create mode 100644 csm_web/frontend/src/css/base/searchbar.scss create mode 100644 csm_web/frontend/src/css/base/spinner.scss create mode 100644 csm_web/frontend/src/css/base/styles.scss create mode 100644 csm_web/frontend/src/css/base/table.scss create mode 100644 csm_web/frontend/src/css/base/tooltip.scss create mode 100644 csm_web/frontend/src/css/calendar.scss create mode 100644 csm_web/frontend/src/css/coordinator-add-student.scss create mode 100644 csm_web/frontend/src/css/course-menu.scss create mode 100644 csm_web/frontend/src/css/course-settings.scss create mode 100644 csm_web/frontend/src/css/course.scss create mode 100644 csm_web/frontend/src/css/enrollment_matcher.scss create mode 100644 csm_web/frontend/src/css/fontawesome-styles.scss create mode 100644 csm_web/frontend/src/css/header.scss create mode 100644 csm_web/frontend/src/css/home.scss create mode 100644 csm_web/frontend/src/css/policies.scss create mode 100644 csm_web/frontend/src/css/resource_aggregation.scss create mode 100644 csm_web/frontend/src/css/section.scss create mode 100644 csm_web/frontend/src/css/spacetime-edit.scss create mode 100644 csm_web/frontend/src/css/spacetime_delete.scss create mode 100644 csm_web/frontend/src/css/student_dropper.scss create mode 100644 csm_web/frontend/src/css/whitelist_modal.scss create mode 100644 csm_web/frontend/src/css/word-of-the-day.scss delete mode 100644 csm_web/frontend/static/frontend/css/calendar.css delete mode 100644 csm_web/frontend/static/frontend/css/course-settings.css delete mode 100644 csm_web/frontend/static/frontend/css/enrollment_matcher.css delete mode 100644 csm_web/frontend/static/frontend/css/fontawesome-styles.css create mode 100644 csm_web/frontend/static/frontend/css/login.css delete mode 100644 csm_web/frontend/static/frontend/css/policies.css delete mode 100644 csm_web/frontend/static/frontend/css/resource_aggregation.css delete mode 100644 csm_web/frontend/static/frontend/css/searchbar.css delete mode 100644 csm_web/frontend/static/frontend/css/spacetime_delete.css delete mode 100644 csm_web/frontend/static/frontend/css/student_dropper.css delete mode 100644 csm_web/frontend/static/frontend/css/style.css delete mode 100644 csm_web/frontend/static/frontend/css/tooltip.css delete mode 100644 csm_web/frontend/static/frontend/css/whitelist_modal.css delete mode 100644 csm_web/frontend/static/frontend/css/word-of-the-day.css create mode 100644 csm_web/frontend/static/frontend/img/plus.svg diff --git a/.gitignore b/.gitignore index 41b9cef8..38eb8297 100644 --- a/.gitignore +++ b/.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 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..5309d53f --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +# ignore Django templates +**/templates/**/*.html diff --git a/csm_web/frontend/src/components/App.tsx b/csm_web/frontend/src/components/App.tsx index c5da011a..167ace2d 100644 --- a/csm_web/frontend/src/components/App.tsx +++ b/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 (
- -
); } diff --git a/csm_web/frontend/src/components/CourseMenu.tsx b/csm_web/frontend/src/components/CourseMenu.tsx index 4d7d6bf8..aa121ad2 100644 --- a/csm_web/frontend/src/components/CourseMenu.tsx +++ b/csm_web/frontend/src/components/CourseMenu.tsx @@ -8,6 +8,9 @@ import LoadingSpinner from "./LoadingSpinner"; 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(); @@ -147,16 +150,27 @@ const CourseMenuContent = ({ 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 = ( -
+
-
- {children} +
+
+
+
{children}
); diff --git a/csm_web/frontend/src/components/Policies.tsx b/csm_web/frontend/src/components/Policies.tsx index 4fb2dcc2..b16fbaf4 100644 --- a/csm_web/frontend/src/components/Policies.tsx +++ b/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 { diff --git a/csm_web/frontend/src/components/course/Course.tsx b/csm_web/frontend/src/components/course/Course.tsx index d64ab9f9..29e936d4 100644 --- a/csm_web/frontend/src/components/course/Course.tsx +++ b/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 && (
{course.isRestricted && ( - )}
))} -
+
+ + +
); }; diff --git a/csm_web/frontend/src/components/course/DataExportModal.tsx b/csm_web/frontend/src/components/course/DataExportModal.tsx index 1d1c3f18..29679e09 100644 --- a/csm_web/frontend/src/components/course/DataExportModal.tsx +++ b/csm_web/frontend/src/components/course/DataExportModal.tsx @@ -101,7 +101,7 @@ export const DataExportModal = ({ closeModal }: DataExportModalProps): React.Rea {coursesLoaded ? renderCheckGrid() : }
-
diff --git a/csm_web/frontend/src/components/course/SectionCard.tsx b/csm_web/frontend/src/components/course/SectionCard.tsx index 0a93ef69..96298383 100644 --- a/csm_web/frontend/src/components/course/SectionCard.tsx +++ b/csm_web/frontend/src/components/course/SectionCard.tsx @@ -91,24 +91,24 @@ export const SectionCard = ({ const iconHeight = "8em"; if (enrollmentSuccessful) { return ( - +

Successfully enrolled

- + - +
); } return ( - +

Enrollment failed

{errorMessage}

- + - +
); }; @@ -130,7 +130,7 @@ export const SectionCard = ({ return ( - {showModal && {modalContents().props.children}} + {showModal && {modalContents()}}
{description && {description}} @@ -175,12 +175,12 @@ export const SectionCard = ({

{userIsCoordinator ? ( - + MANAGE ) : (
ENROLL diff --git a/csm_web/frontend/src/components/course/SettingsModal.tsx b/csm_web/frontend/src/components/course/SettingsModal.tsx index 099c963f..3e298fb6 100644 --- a/csm_web/frontend/src/components/course/SettingsModal.tsx +++ b/csm_web/frontend/src/components/course/SettingsModal.tsx @@ -1,13 +1,16 @@ import React, { useEffect, useState } from "react"; import LoadingSpinner from "../LoadingSpinner"; - import { useCourses, useCourseSettingsMutation } from "../../utils/queries/courses"; - -import InfoIcon from "../../../static/frontend/img/info.svg"; import { Tooltip } from "../Tooltip"; import Modal from "../Modal"; +// Images +import InfoIcon from "../../../static/frontend/img/info.svg"; + +// Styles +import "../../css/course-settings.scss"; + interface SettingsModalProps { courseId: number; closeModal: () => void; @@ -75,7 +78,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => { if (coursesLoaded) { modalContent = (
-

Settings

+

Settings

@@ -92,7 +95,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
{
-
diff --git a/csm_web/frontend/src/components/course/WhitelistModal.tsx b/csm_web/frontend/src/components/course/WhitelistModal.tsx index c7991c86..7ffd597e 100644 --- a/csm_web/frontend/src/components/course/WhitelistModal.tsx +++ b/csm_web/frontend/src/components/course/WhitelistModal.tsx @@ -9,11 +9,15 @@ import LoadingSpinner from "../LoadingSpinner"; import Modal from "../Modal"; import { SearchBar } from "../SearchBar"; +// Images import CheckCircleIcon from "../../../static/frontend/img/check_circle.svg"; import ExclamationCircleIcon from "../../../static/frontend/img/exclamation-circle.svg"; import UndoIcon from "../../../static/frontend/img/undo.svg"; import XIcon from "../../../static/frontend/img/x.svg"; +// Styles +import "../../css/whitelist_modal.scss"; + interface WhitelistModalProps { course: Course; closeModal: () => void; @@ -165,7 +169,7 @@ export const WhitelistModal = ({ course, closeModal }: WhitelistModalProps) => { List of emails, one per line or separated by commas
-
{whitelistAddStatusIcon}
@@ -229,7 +233,7 @@ export const WhitelistModal = ({ course, closeModal }: WhitelistModalProps) => {
- +
+
+ +
+ {formErrors.date && } + {formErrors.date} +
+
+
+ +
+ {formErrors.topics && } + {formErrors.topics}
+
+
+
+ + +
+
+
{!isEditingLinks && (
{hasWorksheets && ( @@ -747,10 +755,12 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc )} {existingWorksheetDisplay} {newWorksheetDisplay} - +
+ +
)} {isEditingLinks && ( @@ -763,20 +773,24 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc )} {existingLinkDisplay} {newLinkDisplay} - +
+ +
)}
- - {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) && - !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) && - tabErrorDisplay} +
+ + {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) && + !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) && + tabErrorDisplay} +
); diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx index dfcd460a..43457962 100644 --- a/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx +++ b/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx @@ -26,6 +26,7 @@ const ResourceLinkEdit = ({
onBlur()} /> {canEdit && (
-
-