added onclose to popup, coursepopup now displaying time info, renamed vars, added compiler for scss to typescript and tsconfig plugins

.vscode/settings.json

@@ -33,4 +33,5 @@
     "[html]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
+    "typescript.tsdk": "node_modules/typescript/lib",
 }

package-lock.json

@@ -66,13 +66,20 @@
                 "ts-node": "^10.9.1",
                 "tsconfig-paths-webpack-plugin": "^4.0.0",
                 "tsx": "^3.12.1",
-                "typescript": "^4.9.4",
+                "typescript": "^4.9.5",
+                "typescript-plugin-css-modules": "^4.2.2",
                 "url-loader": "^4.1.1",
                 "webpack": "^5.75.0",
                 "webpack-build-notifier": "^2.3.0",
                 "webpack-dev-server": "^4.11.1"
             }
         },
+        "node_modules/@adobe/css-tools": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
+            "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+            "dev": true
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -3180,6 +3187,24 @@
             "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
             "dev": true
         },
+        "node_modules/@types/postcss-modules-local-by-default": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@types/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+            "integrity": "sha512-0VLab/pcLTLcfbxi6THSIMVYcw9hEUBGvjwwaGpW77mMgRXfGF+a76t7BxTGyLh1y68tBvrffp8UWnqvm76+yg==",
+            "dev": true,
+            "dependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
+        "node_modules/@types/postcss-modules-scope": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/postcss-modules-scope/-/postcss-modules-scope-3.0.1.tgz",
+            "integrity": "sha512-LNkp3c4ML9EQj2dgslp4i80Jxj72YK3HjYzrTn6ftUVylW1zaKFGqrMlNIyqBmPWmIhZ/Y5r0Y4T49Hk1IuDUg==",
+            "dev": true,
+            "dependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
         "node_modules/@types/prompts": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/@types/prompts/-/prompts-2.4.2.tgz",
@@ -5305,6 +5330,18 @@
             "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
             "dev": true
         },
+        "node_modules/copy-anything": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+            "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+            "dev": true,
+            "dependencies": {
+                "is-what": "^3.14.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mesqueeb"
+            }
+        },
         "node_modules/copy-webpack-plugin": {
             "version": "11.0.0",
             "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
@@ -6246,6 +6283,19 @@
                 "node": ">=6"
             }
         },
+        "node_modules/errno": {
+            "version": "0.1.8",
+            "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+            "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+            "dev": true,
+            "optional": true,
+            "dependencies": {
+                "prr": "~1.0.1"
+            },
+            "bin": {
+                "errno": "cli.js"
+            }
+        },
         "node_modules/error-ex": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -8533,6 +8583,19 @@
                 "node": ">= 4"
             }
         },
+        "node_modules/image-size": {
+            "version": "0.5.5",
+            "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+            "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+            "dev": true,
+            "optional": true,
+            "bin": {
+                "image-size": "bin/image-size.js"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/immer": {
             "version": "9.0.16",
             "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -9072,6 +9135,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/is-what": {
+            "version": "3.14.1",
+            "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+            "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+            "dev": true
+        },
         "node_modules/is-wsl": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -9381,6 +9450,32 @@
                 "safe-buffer": "~5.1.0"
             }
         },
+        "node_modules/less": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
+            "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+            "dev": true,
+            "dependencies": {
+                "copy-anything": "^2.0.1",
+                "parse-node-version": "^1.0.1",
+                "tslib": "^2.3.0"
+            },
+            "bin": {
+                "lessc": "bin/lessc"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "optionalDependencies": {
+                "errno": "^0.1.1",
+                "graceful-fs": "^4.1.2",
+                "image-size": "~0.5.0",
+                "make-dir": "^2.1.0",
+                "mime": "^1.4.1",
+                "needle": "^3.1.0",
+                "source-map": "~0.6.0"
+            }
+        },
         "node_modules/levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -9394,6 +9489,15 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/lilconfig": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+            "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/lines-and-columns": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -9471,6 +9575,12 @@
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true
         },
+        "node_modules/lodash.camelcase": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+            "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+            "dev": true
+        },
         "node_modules/lodash.capitalize": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz",
@@ -9581,6 +9691,40 @@
                 "yallist": "^3.0.2"
             }
         },
+        "node_modules/make-dir": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+            "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+            "dev": true,
+            "optional": true,
+            "dependencies": {
+                "pify": "^4.0.1",
+                "semver": "^5.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/make-dir/node_modules/pify": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+            "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+            "dev": true,
+            "optional": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/make-dir/node_modules/semver": {
+            "version": "5.7.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+            "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+            "dev": true,
+            "optional": true,
+            "bin": {
+                "semver": "bin/semver"
+            }
+        },
         "node_modules/make-error": {
             "version": "1.3.6",
             "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -9940,6 +10084,47 @@
             "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
             "dev": true
         },
+        "node_modules/needle": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
+            "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+            "dev": true,
+            "optional": true,
+            "dependencies": {
+                "debug": "^3.2.6",
+                "iconv-lite": "^0.6.3",
+                "sax": "^1.2.4"
+            },
+            "bin": {
+                "needle": "bin/needle"
+            },
+            "engines": {
+                "node": ">= 4.4.x"
+            }
+        },
+        "node_modules/needle/node_modules/debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "dev": true,
+            "optional": true,
+            "dependencies": {
+                "ms": "^2.1.1"
+            }
+        },
+        "node_modules/needle/node_modules/iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "dev": true,
+            "optional": true,
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/negotiator": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -13112,6 +13297,15 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/parse-node-version": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+            "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
         "node_modules/parseurl": {
             "version": "1.3.3",
             "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -13397,9 +13591,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.20",
+            "version": "8.4.21",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-            "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+            "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
             "dev": true,
             "funding": [
                 {
@@ -13420,6 +13614,35 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/postcss-load-config": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+            "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+            "dev": true,
+            "dependencies": {
+                "lilconfig": "^2.0.5",
+                "yaml": "^1.10.2"
+            },
+            "engines": {
+                "node": ">= 10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": ">=8.0.9",
+                "ts-node": ">=9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "postcss": {
+                    "optional": true
+                },
+                "ts-node": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/postcss-modules-extract-imports": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
@@ -13636,6 +13859,13 @@
                 "node": ">= 0.10"
             }
         },
+        "node_modules/prr": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+            "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+            "dev": true,
+            "optional": true
+        },
         "node_modules/pseudomap": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -14444,6 +14674,12 @@
             "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
             "dev": true
         },
+        "node_modules/reserved-words": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz",
+            "integrity": "sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==",
+            "dev": true
+        },
         "node_modules/resolve": {
             "version": "1.22.1",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -14594,9 +14830,9 @@
             "dev": true
         },
         "node_modules/sass": {
-            "version": "1.57.1",
+            "version": "1.58.3",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
-            "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+            "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
@@ -14647,6 +14883,12 @@
                 }
             }
         },
+        "node_modules/sax": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+            "dev": true
+        },
         "node_modules/scheduler": {
             "version": "0.23.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -15618,6 +15860,37 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/stylus": {
+            "version": "0.59.0",
+            "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
+            "integrity": "sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==",
+            "dev": true,
+            "dependencies": {
+                "@adobe/css-tools": "^4.0.1",
+                "debug": "^4.3.2",
+                "glob": "^7.1.6",
+                "sax": "~1.2.4",
+                "source-map": "^0.7.3"
+            },
+            "bin": {
+                "stylus": "bin/stylus"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://opencollective.com/stylus"
+            }
+        },
+        "node_modules/stylus/node_modules/source-map": {
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+            "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 8"
+            }
+        },
         "node_modules/sumchecker": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -16367,9 +16640,9 @@
             "dev": true
         },
         "node_modules/typescript": {
-            "version": "4.9.4",
+            "version": "4.9.5",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-            "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+            "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
             "dev": true,
             "bin": {
                 "tsc": "bin/tsc",
@@ -16379,6 +16652,46 @@
                 "node": ">=4.2.0"
             }
         },
+        "node_modules/typescript-plugin-css-modules": {
+            "version": "4.2.2",
+            "resolved": "https://registry.npmjs.org/typescript-plugin-css-modules/-/typescript-plugin-css-modules-4.2.2.tgz",
+            "integrity": "sha512-X5OYGkX96ENq2c7xFJO4tgtiMTlBkOMoRmVHQXH2H4CGFcVODKGieDqPU2B0IV0I+AyvKYDFdKh4ZKtKxAcAww==",
+            "dev": true,
+            "dependencies": {
+                "@types/postcss-modules-local-by-default": "^4.0.0",
+                "@types/postcss-modules-scope": "^3.0.1",
+                "dotenv": "^16.0.3",
+                "icss-utils": "^5.1.0",
+                "less": "^4.1.3",
+                "lodash.camelcase": "^4.3.0",
+                "postcss": "^8.4.21",
+                "postcss-load-config": "^3.1.4",
+                "postcss-modules-local-by-default": "^4.0.0",
+                "postcss-modules-scope": "^3.0.0",
+                "reserved-words": "^0.1.2",
+                "sass": "^1.58.3",
+                "source-map-js": "^1.0.2",
+                "stylus": "^0.59.0",
+                "tsconfig-paths": "^4.1.2"
+            },
+            "peerDependencies": {
+                "typescript": ">=3.9.0"
+            }
+        },
+        "node_modules/typescript-plugin-css-modules/node_modules/tsconfig-paths": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.1.2.tgz",
+            "integrity": "sha512-uhxiMgnXQp1IR622dUXI+9Ehnws7i/y6xvpZB9IbUVOPy0muvdvgXeZOn88UcGPiT98Vp3rJPTa8bFoalZ3Qhw==",
+            "dev": true,
+            "dependencies": {
+                "json5": "^2.2.2",
+                "minimist": "^1.2.6",
+                "strip-bom": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/uglify-js": {
             "version": "3.17.4",
             "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -17283,6 +17596,12 @@
         }
     },
     "dependencies": {
+        "@adobe/css-tools": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
+            "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+            "dev": true
+        },
         "@ampproject/remapping": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -19537,6 +19856,24 @@
             "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
             "dev": true
         },
+        "@types/postcss-modules-local-by-default": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@types/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+            "integrity": "sha512-0VLab/pcLTLcfbxi6THSIMVYcw9hEUBGvjwwaGpW77mMgRXfGF+a76t7BxTGyLh1y68tBvrffp8UWnqvm76+yg==",
+            "dev": true,
+            "requires": {
+                "postcss": "^8.0.0"
+            }
+        },
+        "@types/postcss-modules-scope": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/postcss-modules-scope/-/postcss-modules-scope-3.0.1.tgz",
+            "integrity": "sha512-LNkp3c4ML9EQj2dgslp4i80Jxj72YK3HjYzrTn6ftUVylW1zaKFGqrMlNIyqBmPWmIhZ/Y5r0Y4T49Hk1IuDUg==",
+            "dev": true,
+            "requires": {
+                "postcss": "^8.0.0"
+            }
+        },
         "@types/prompts": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/@types/prompts/-/prompts-2.4.2.tgz",
@@ -21198,6 +21535,15 @@
             "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
             "dev": true
         },
+        "copy-anything": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+            "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+            "dev": true,
+            "requires": {
+                "is-what": "^3.14.1"
+            }
+        },
         "copy-webpack-plugin": {
             "version": "11.0.0",
             "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
@@ -21900,6 +22246,16 @@
             "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
             "dev": true
         },
+        "errno": {
+            "version": "0.1.8",
+            "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+            "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+            "dev": true,
+            "optional": true,
+            "requires": {
+                "prr": "~1.0.1"
+            }
+        },
         "error-ex": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -23628,6 +23984,13 @@
             "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
             "dev": true
         },
+        "image-size": {
+            "version": "0.5.5",
+            "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+            "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+            "dev": true,
+            "optional": true
+        },
         "immer": {
             "version": "9.0.16",
             "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -23998,6 +24361,12 @@
                 "call-bind": "^1.0.2"
             }
         },
+        "is-what": {
+            "version": "3.14.1",
+            "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+            "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+            "dev": true
+        },
         "is-wsl": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -24246,6 +24615,24 @@
                 }
             }
         },
+        "less": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
+            "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+            "dev": true,
+            "requires": {
+                "copy-anything": "^2.0.1",
+                "errno": "^0.1.1",
+                "graceful-fs": "^4.1.2",
+                "image-size": "~0.5.0",
+                "make-dir": "^2.1.0",
+                "mime": "^1.4.1",
+                "needle": "^3.1.0",
+                "parse-node-version": "^1.0.1",
+                "source-map": "~0.6.0",
+                "tslib": "^2.3.0"
+            }
+        },
         "levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -24256,6 +24643,12 @@
                 "type-check": "~0.4.0"
             }
         },
+        "lilconfig": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+            "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+            "dev": true
+        },
         "lines-and-columns": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -24317,6 +24710,12 @@
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true
         },
+        "lodash.camelcase": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+            "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+            "dev": true
+        },
         "lodash.capitalize": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz",
@@ -24421,6 +24820,33 @@
                 "yallist": "^3.0.2"
             }
         },
+        "make-dir": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+            "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+            "dev": true,
+            "optional": true,
+            "requires": {
+                "pify": "^4.0.1",
+                "semver": "^5.6.0"
+            },
+            "dependencies": {
+                "pify": {
+                    "version": "4.0.1",
+                    "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+                    "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+                    "dev": true,
+                    "optional": true
+                },
+                "semver": {
+                    "version": "5.7.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+                    "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+                    "dev": true,
+                    "optional": true
+                }
+            }
+        },
         "make-error": {
             "version": "1.3.6",
             "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -24678,6 +25104,40 @@
             "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
             "dev": true
         },
+        "needle": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
+            "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+            "dev": true,
+            "optional": true,
+            "requires": {
+                "debug": "^3.2.6",
+                "iconv-lite": "^0.6.3",
+                "sax": "^1.2.4"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "3.2.7",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+                    "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "ms": "^2.1.1"
+                    }
+                },
+                "iconv-lite": {
+                    "version": "0.6.3",
+                    "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+                    "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "safer-buffer": ">= 2.1.2 < 3.0.0"
+                    }
+                }
+            }
+        },
         "negotiator": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -26913,6 +27373,12 @@
                 "lines-and-columns": "^1.1.6"
             }
         },
+        "parse-node-version": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+            "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+            "dev": true
+        },
         "parseurl": {
             "version": "1.3.3",
             "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -27130,9 +27596,9 @@
             }
         },
         "postcss": {
-            "version": "8.4.20",
+            "version": "8.4.21",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-            "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+            "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
             "dev": true,
             "requires": {
                 "nanoid": "^3.3.4",
@@ -27140,6 +27606,16 @@
                 "source-map-js": "^1.0.2"
             }
         },
+        "postcss-load-config": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+            "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+            "dev": true,
+            "requires": {
+                "lilconfig": "^2.0.5",
+                "yaml": "^1.10.2"
+            }
+        },
         "postcss-modules-extract-imports": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
@@ -27301,6 +27777,13 @@
                 }
             }
         },
+        "prr": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+            "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+            "dev": true,
+            "optional": true
+        },
         "pseudomap": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -27932,6 +28415,12 @@
             "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
             "dev": true
         },
+        "reserved-words": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz",
+            "integrity": "sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==",
+            "dev": true
+        },
         "resolve": {
             "version": "1.22.1",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -28026,9 +28515,9 @@
             "dev": true
         },
         "sass": {
-            "version": "1.57.1",
+            "version": "1.58.3",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
-            "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+            "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
             "requires": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
@@ -28045,6 +28534,12 @@
                 "neo-async": "^2.6.2"
             }
         },
+        "sax": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+            "dev": true
+        },
         "scheduler": {
             "version": "0.23.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -28852,6 +29347,27 @@
             "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
             "dev": true
         },
+        "stylus": {
+            "version": "0.59.0",
+            "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
+            "integrity": "sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==",
+            "dev": true,
+            "requires": {
+                "@adobe/css-tools": "^4.0.1",
+                "debug": "^4.3.2",
+                "glob": "^7.1.6",
+                "sax": "~1.2.4",
+                "source-map": "^0.7.3"
+            },
+            "dependencies": {
+                "source-map": {
+                    "version": "0.7.4",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+                    "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+                    "dev": true
+                }
+            }
+        },
         "sumchecker": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -29403,11 +29919,47 @@
             "dev": true
         },
         "typescript": {
-            "version": "4.9.4",
+            "version": "4.9.5",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-            "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+            "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
             "dev": true
         },
+        "typescript-plugin-css-modules": {
+            "version": "4.2.2",
+            "resolved": "https://registry.npmjs.org/typescript-plugin-css-modules/-/typescript-plugin-css-modules-4.2.2.tgz",
+            "integrity": "sha512-X5OYGkX96ENq2c7xFJO4tgtiMTlBkOMoRmVHQXH2H4CGFcVODKGieDqPU2B0IV0I+AyvKYDFdKh4ZKtKxAcAww==",
+            "dev": true,
+            "requires": {
+                "@types/postcss-modules-local-by-default": "^4.0.0",
+                "@types/postcss-modules-scope": "^3.0.1",
+                "dotenv": "^16.0.3",
+                "icss-utils": "^5.1.0",
+                "less": "^4.1.3",
+                "lodash.camelcase": "^4.3.0",
+                "postcss": "^8.4.21",
+                "postcss-load-config": "^3.1.4",
+                "postcss-modules-local-by-default": "^4.0.0",
+                "postcss-modules-scope": "^3.0.0",
+                "reserved-words": "^0.1.2",
+                "sass": "^1.58.3",
+                "source-map-js": "^1.0.2",
+                "stylus": "^0.59.0",
+                "tsconfig-paths": "^4.1.2"
+            },
+            "dependencies": {
+                "tsconfig-paths": {
+                    "version": "4.1.2",
+                    "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.1.2.tgz",
+                    "integrity": "sha512-uhxiMgnXQp1IR622dUXI+9Ehnws7i/y6xvpZB9IbUVOPy0muvdvgXeZOn88UcGPiT98Vp3rJPTa8bFoalZ3Qhw==",
+                    "dev": true,
+                    "requires": {
+                        "json5": "^2.2.2",
+                        "minimist": "^1.2.6",
+                        "strip-bom": "^3.0.0"
+                    }
+                }
+            }
+        },
         "uglify-js": {
             "version": "3.17.4",
             "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",

package.json

@@ -71,7 +71,8 @@
         "ts-node": "^10.9.1",
         "tsconfig-paths-webpack-plugin": "^4.0.0",
         "tsx": "^3.12.1",
-        "typescript": "^4.9.4",
+        "typescript": "^4.9.5",
+        "typescript-plugin-css-modules": "^4.2.2",
         "url-loader": "^4.1.1",
         "webpack": "^5.75.0",
         "webpack-build-notifier": "^2.3.0",

src/shared/types/CourseMeeting.ts

@@ -17,11 +17,11 @@ export const DAY_MAP = {
 export type Day = typeof DAY_MAP[keyof typeof DAY_MAP];
 
 /** A physical room that a class is taught in */
-export type Room = {
+export type Location = {
     /** The UT building code for where the class is taught */
     building: string;
     /** The room number for where the class is taught */
-    number: string;
+    room: string;
 };
 
 /**
@@ -35,7 +35,7 @@ export class CourseMeeting {
     /** The end time of the course, in minutes since midnight */
     endTime: number;
     /** The location that the course is taught */
-    room?: Room;
+    location?: Location;
 
     constructor(meeting: Serialized<CourseMeeting>) {
         Object.assign(this, meeting);
@@ -124,5 +124,16 @@ type TimeStringOptions = {
 type DaysStringOptions = {
     /** The format of the days string, short = MWF, long = Monday, Wednesday, Friday */
     format: 'short' | 'long';
+    /**
+     * The separator between the days
+     *
+     * 'none' = `MWF`
+     *
+     * 'conjunction' = `Monday, Wednesday, and Friday`
+     *
+     * 'disjunction' = `Monday, Wednesday, or Friday`
+     *
+     * 'narrow' = `Monday Wednesday Friday`
+     */
     separator: Intl.ListFormatStyle | 'none';
 };

src/shared/types/CourseSchedule.ts

@@ -18,10 +18,10 @@ export class CourseSchedule {
      * Given a string representation of the meeting information for a class, parse it into a CourseMeeting object
      * @param dayLine a string representation of the days of the week that the course is taught: MWF, TR, etc.
      * @param timeLine a string representation of a time-range that the course is taught: 10:00 am - 11:00 am, 1:00 pm - 2:00 pm, etc.
-     * @param roomLine a string representation of the room that the course is taught in: JGB 2.302, etc.
+     * @param locLine a string representation of the location that the course is taught in: JGB 2.302, etc.
      * @returns CourseMeeting object representing the meeting information
      */
-    static parse(dayLine: string, timeLine: string, roomLine: string): CourseMeeting {
+    static parse(dayLine: string, timeLine: string, locLine: string): CourseMeeting {
         try {
             let days: Day[] = dayLine
                 .split('')
@@ -51,19 +51,19 @@ export class CourseSchedule {
                     return Number(hour) * 60 + Number(minute);
                 });
 
-            const [building, number] = roomLine.split(' ');
+            const [building, room] = locLine.split(' ');
 
             return new CourseMeeting({
                 days,
                 startTime,
                 endTime,
-                room: {
+                location: {
                     building,
-                    number,
+                    room,
                 },
             });
         } catch (e) {
-            throw new Error(`Failed to parse schedule: ${dayLine} ${timeLine} ${roomLine}`);
+            throw new Error(`Failed to parse schedule: ${dayLine} ${timeLine} ${locLine}`);
         }
     }
 }

src/views/components/common/Popup/Popup.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useCallback } from 'react';
 import styles from './Popup.module.scss';
 
 interface Props {
@@ -8,21 +8,52 @@ interface Props {
     className?: string;
     /** Should it display a subtle dark overlay over the rest of the screen */
     overlay?: boolean;
+    onClose?: () => void;
 }
 
 /**
- *
+ * A reusable popup component that can be used to display content on the page
+ * @returns
  */
-export default function Popup(props: PropsWithChildren<Props>) {
+export default function Popup({ onClose, children, className, style, testId, overlay }: PropsWithChildren<Props>) {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const bodyRef = React.useRef<HTMLDivElement>(null);
+
+
+    
+    const handleClickOutside = useCallback(
+        (event: MouseEvent) => {
+            if (!bodyRef.current) return;
+            if (!bodyRef.current.contains(event.target as Node)) {
+                onClose?.();
+            }
+        },
+        [onClose, bodyRef]
+    );
+
+    React.useEffect(() => {
+        const shadowRoot = document.getElementById('ut-registration-plus-container')?.shadowRoot;
+        if (!shadowRoot) return;
+
+        shadowRoot.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            shadowRoot.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [handleClickOutside]);
+
     return (
         <div
-            style={props.style}
+            style={style}
+            ref={containerRef}
             className={classNames(styles.container, {
-                [styles.overlay]: props.overlay,
+                [styles.overlay]: overlay,
             })}
-            data-testid={props.testId}
+            data-testid={testId}
         >
-            <div className={classNames(styles.body, props.className)}>{props.children}</div>
+            <div ref={bodyRef} className={classNames(styles.body, className)}>
+                {children}
+            </div>
         </div>
     );
 }

src/views/components/injected/CoursePopup/CoursePopup.tsx

@@ -18,7 +18,7 @@ interface Props {
 export default function CoursePopup({ course, onClose }: Props) {
     console.log(course);
     return (
-        <Popup className={styles.popup} overlay>
+        <Popup className={styles.popup} overlay onClose={onClose}>
             <Icon className={styles.close} size='large' name='close' onClick={onClose} />
             <Card className={styles.body}>
                 <Text className={styles.title} size='large' weight='bold' color='black'>
@@ -40,6 +40,28 @@ export default function CoursePopup({ course, onClose }: Props) {
                         format: 'first_last',
                     })}
                 </Text>
+
+                {course.schedule.meetings.map(meeting => (
+                    <Text size='medium'>
+                        <Text span size='medium' weight='bold' color='black'>
+                            {meeting.getDaysString({
+                                format: 'long',
+                                separator: 'short',
+                            })}
+                        </Text>
+                        {' at '}
+                        <Text span size='medium'>
+                            {meeting.getTimeString({
+                                separator: 'to',
+                                capitalize: true,
+                            })}
+                        </Text>
+                        {' in '}
+                        <Link span size='medium' weight='bold' color='bluebonnet'>
+                            {meeting.location?.building}
+                        </Link>
+                    </Text>
+                ))}
             </Card>
         </Popup>
     );

src/views/lib/CourseCatalogScraper.ts

@@ -14,7 +14,7 @@ enum TableDataSelector {
     STATUS = 'td[data-th="Status"]',
     SCHEDULE_DAYS = 'td[data-th="Days"]>span',
     SCHEDULE_HOURS = 'td[data-th="Hour"]>span',
-    SCHEDULE_ROOM = 'td[data-th="Room"]>span',
+    SCHEDULE_LOCATION = 'td[data-th="Room"]>span',
     FLAGS = 'td[data-th="Flags"] ul li',
 }
 
@@ -283,7 +283,7 @@ export class CourseCatalogScraper {
     getSchedule(row: HTMLTableRowElement): CourseSchedule {
         const dayLines = row.querySelectorAll(TableDataSelector.SCHEDULE_DAYS);
         const hourLines = row.querySelectorAll(TableDataSelector.SCHEDULE_HOURS);
-        const roomLines = row.querySelectorAll(TableDataSelector.SCHEDULE_ROOM);
+        const locLines = row.querySelectorAll(TableDataSelector.SCHEDULE_LOCATION);
 
         if (dayLines.length !== hourLines.length) {
             throw new Error('Schedule data is malformed');
@@ -296,7 +296,7 @@ export class CourseCatalogScraper {
                 CourseSchedule.parse(
                     dayLines[i].textContent || '',
                     hourLines[i].textContent || '',
-                    roomLines[i].textContent || ''
+                    locLines[i].textContent || ''
                 )
             );
         }

tsconfig.json

@@ -47,6 +47,11 @@
         "./release.config.js",
         "webpack/plugins/custom/.ts"
     ],
+    "plugins": [
+        {
+            "name": "typescript-plugin-css-modules"
+        }
+    ],
     "exclude": [
         "node_modules",
         "**/.*/",